@font-face {
    font-family: 'octanis';
    src: url('font/octanis-sans-webfont.woff2') format('woff2'),
         url('font/octanis-sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
	box-sizing: border-box;
	touch-action: manipulation;
}
*, ::before, ::after {
	box-sizing: inherit;
}

img.logo {
  display: block;
  margin-top:3%;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  height: auto;
}

img.logo_bestellungen {
  display: block;
  margin-top:3%;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
  height: auto;
}

h1 {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:3.5em;
	line-height:1.2;
}
@media screen and (min-width: 610px) {
  h1 {
    font-size:6.5em;
	line-height:1.2;
	transition: 0.3s;
	
  }
}
h2 {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2.5em;
	line-height:1.2;
	text-align:center;
}
@media screen and (min-width: 610px) {
  h2 {
	font-family: 'octanis', Arial, sans-serif;
    font-size:4.5em;
	line-height:1.2;
	transition: 0.3s;
	text-align:center;
  }
}

p {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2em;
	line-height:1.2;
	opacity:0.9;
}

h3 {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:1.5em;
	line-height:0.8;
	text-align:center;
}
@media screen and (min-width: 610px) {
  h3 {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2.5em;
	line-height:0.8;
	text-align:center;
  }
}

.wrapper {
	margin: auto auto 50px;
	max-width: 500px;
}

#article {
	margin: 0 auto;
	width: 90%;
}

#trennstrich {
	background-color:#FFF;
	width: 20%;
	height:9px;
	margin-left: 0px;
	margin-top:-20px;
}
.getraenk {
	border-style: solid;
	border-width: 5px;
	border-color:#FFF;
	padding:20px;
	margin-top:20px;
	text-align:center;
	transition: 0.3s;
}
.getraenk:hover {
	border-style: solid;
	border-width: 5px;
	border-color:#FFF;
	background-color:#000;
	padding:20px;
	margin-top:20px;
	text-align:center;
}
.getraenk_link {
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2em;
	text-decoration:none;
}

.button_container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	border-style: solid;
	border-width: 5px;
	border-color:#FFF;
	padding:20px;
	text-align:center;
	transition: 0.3s;
	background: none;

	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2em;
	text-decoration:none;
}
.button:hover {
	border-style: solid;
	border-width: 5px;
	border-color:#FFF;
	background-color:#000;
	padding:20px;
	text-align:center;
}

img.ort {
  display: block;
  margin-top:3%;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  max-height: 40%;
  height: auto;
}

/* OVERLAY */
.overlay {
  height: 100%;
  width: 0;
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0, 0.9); 
  overflow-x: hidden; 
  transition: 0.5s; 
}

.overlay-content {
  position: relative;
  top: 25%; 
  width: 100%; 
  text-align: center; 
  margin-top: 30px; 
  align-items: center;
  justify-content: center;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #FFF;
  display: block; 
  transition: 0.3s; 
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  margin-right: 25px;
  font-size: 60px;
  text-align:right;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* INPUT NUMBER + -  */


input[type="text"] {
	border-style: solid;
	border-width: 5px;
	border-color:#FFF;
	font-family: 'octanis', Arial, sans-serif;
	display: block;
	width: 100%;
	padding: 20px;
	font-size: 2em;
	background-color: rgba(0,0,0,0.7);
	color: white;
	margin-bottom: 20px;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 2px solid #DDD;
  display: flex;
  align-items: center;
  justify-content: center;
  width:160px;
  margin-left:auto;
  margin-right:auto;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;

}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #FFF;
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: 'octanis', Arial, sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
  background-color:rgba(0,0,0,1);
  color: #FFF;
}


.ort_button {
	border-style: solid;
	border-width: 3px;
	border-color:#FFF;
	text-align:center;
	transition: 0.3s;
	padding:7px;
	margin-top:7px;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	font-family: 'octanis', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFF;
	font-size:2em;
	line-height:1.5;
}
.ort_button:hover {
	border-style: solid;
	border-width: 3px;
	border-color:#FFF;
	background-color:#009900;
	padding:7px;
	margin-top:7px;
	text-align:center;
}



/* TABELLE */
.table_container {
	display: table;
	margin: auto;
}

table {
	font-weight:normal;
	font-family: 'octanis', Arial, sans-serif;
	font-style:normal;
	border-collapse: collapse;
	color:#b3b3b3;
	font-size: 1.5rem;
	text-align: center;
	margin-left:auto; 
    margin-right:auto;

	transition: all 0.2s;
}
td, th {
	padding: 1em;
}

thead th {
	border:0px;
}
tbody th {
	font-weight: normal;
	font-style:normal;
}
tr#title {
	border: none;
	background-color:#393939;
	color:#FFF;
}
tr {
	border: none;
	background-color:#222222;
	opacity:0.9;
}
img.check {
  display: block;
  margin-top:3%;
  margin-left: auto;
  margin-right: auto;
  height: 70px;
}

/* Animationsklassen */
.scaleIn {
	-webkit-animation: scaleIn 0.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: scaleIn 0.5s; /* Firefox < 16 */
	-ms-animation: scaleIn 0.5s; /* Internet Explorer */
	-o-animation: scaleIn 0.5s; /* Opera < 12.1 */
	animation: scaleIn 0.5s;
}

.scaleOut {
	-webkit-animation: scaleOut 0.2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: scaleOut 0.2s; /* Firefox < 16 */
	-ms-animation: scaleOut 0.2s; /* Outternet Explorer */
	-o-animation: scaleOut 0.2s; /* Opera < 12.1 */
	animation: scaleOut 0.2s;
}

.popUp {
	-webkit-animation: popUp 0.2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: popUp 0.2s; /* Firefox < 16 */
	-ms-animation: popUp 0.2s; /* Outternet Explorer */
	-o-animation: popUp 0.2s; /* Opera < 12.1 */
	animation: popUp 0.2s;
}

/* Animationen */
@keyframes scaleIn {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

/* Firefox < 16 */
@-moz-keyframes scaleIn {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes scaleIn {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

/* Internet Explorer */
@-ms-keyframes scaleIn {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

/* Opera < 12.1 */
@-o-keyframes scaleIn {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

@keyframes scaleOut {
	from { transform: scale(1); }
	to   { transform: scale(0); }
}

/* Firefox < 16 */
@-moz-keyframes scaleOut {
	from { transform: scale(1); }
	to   { transform: scale(0); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes scaleOut {
	from { transform: scale(1); }
	to   { transform: scale(0); }
}

/* Internet Explorer */
@-ms-keyframes scaleOut {
	from { transform: scale(1); }
	to   { transform: scale(0); }
}

/* Opera < 12.1 */
@-o-keyframes scaleIn {
	from { transform: scale(1); }
	to   { transform: scale(0); }
}

@keyframes popUp {
	0% { transform: scale(1); }
	50%   { transform: scale(1.3); }
	100%   { transform: scale(1); }
}

/* Firefox < 16 */
@-moz-keyframes popUp {
	0% { transform: scale(1); }
	50%   { transform: scale(1.3); }
	100%   { transform: scale(1); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes popUp {
	0% { transform: scale(1); }
	50%   { transform: scale(1.3); }
	100%   { transform: scale(1); }
}

/* Internet Explorer */
@-ms-keyframes popUp {
	0% { transform: scale(1); }
	50%   { transform: scale(1.3); }
	100%   { transform: scale(1); }
}

/* Opera < 12.1 */
@-o-keyframes scaleIn {
	0% { transform: scale(1); }
	50%   { transform: scale(1.3); }
	100%   { transform: scale(1); }
}

@keyframes moveUp1 {
	0% { transform: translateY(0); }
	30% { transform: translateY(-20px); }
	100%   { transform: translateY(0); }
}

@keyframes moveUp2 {
	0% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
	100%   { transform: translateY(0); }
}

@keyframes moveUp3 {
	0% { transform: translateY(0); }
	70% { transform: translateY(-20px); }
	100%   { transform: translateY(0); }
}


/*Success Page*/
.dot1{
	display: inline-block;
	animation: moveUp1 1.2s infinite;
	animation-timing-function: ease-in-out;
}

.dot2{
	display: inline-block;
	animation: moveUp2 1.2s infinite;
	animation-timing-function: ease-in-out;
}

.dot3{
	display: inline-block;
	animation: moveUp3 1.2s infinite;
	animation-timing-function: ease-in-out;
}

.dot1, .dot2, .dot3 {
	height: 70px;
}


/* bei Resize */
@media screen and (max-width: 42em) {
	table, tbody, tr {
		display: block;
		text-align:center;
		padding-left:0px;
		padding-right:0px;
	}
	thead {
		display: none;
	}
	tr:first-child {
		border-top: 3px solid #FFF;
	}
	tr {
		border-bottom: 3px solid #FFF;
		padding: .5em 2em 1em;
		text-align: center;
	}

	td:nth-child(2)::after {
		content: " x";
	}
	td:nth-child(3)::before {
		content: "";
	}
	td:nth-child(4)::before {
		content: "ins ";
	}
	td:nth-child(5)::before {
		content: "fuer ";
	}
	td.paid + td::before {
		content: "Zahlungseingang: ";
	}
	tbody th {
		display: block;
		font-weight: bold;
	}
	th a {
		font-weight: normal;
	}
	td {
		display: inline-block;
		min-width: 30%;
		padding: .2em 2em;
		text-align: center;
	}

	img.check {
		display: block;
		margin-top:3%;
		margin-left: auto;
		margin-right: auto;
		width: 30%;
	}
}