@charset "utf-8"; /* CSS Document */

		html, body, header, main, footer { display:inline-block; width:100%; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; box-sizing: border-box; position:relative; }

		html 					{ font-family: Helvetica, Arial, "sans-serif"; font-size: 0.875em; font-weight: 300; min-width:320px; }
		body 					{ min-height: 100vh; margin:0px auto; float: none; display:block; position:fixed;  }
		html 					{ min-width:98vw; max-width:100vw; width:100%; height:auto; max-height:100vh; min-height:100vh; }

		html 					{ background: rgba(255,255,255,1.00); }
		header, footer 	{ text-align: center; }

		header 				{  }
		header:before 		{ background-image: url(images/logo.svg); background-repeat: no-repeat; background-position: center 10px; background-size:auto 7vh; display:block; position:relative; content:''; width:100%;  }

		footer 				{ color:rgba(25,25,25,1.00); font-size:0.9rem; padding:10px 20px; opacity:0.76; }
		footer a 			{ color:rgba(25,25,25,1.00); font-size:1rem; opacity:1; text-decoration: none; font-weight:600; }


		body 					{ background-size: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; }


body { 
background: #ffffff; 
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5e5e5 100%); 
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); 
background: radial-gradient(ellipse at center,  #ffffff 0%,#e5e5e5 100%); 

  }



		main form { display:inline-block; width:100%; box-sizing: border-box; padding:10px 5%; margin:0px 0px 0px 0px; }
	
		main form > h3 { display:inline-block; margin:2vh 0px 1vh 0px; width:100%; float:left; text-align: center; text-transform: uppercase; font-size:2rem; }
		main form > p  { display:inline-block; margin:2vh 0px 1vh 0px; width:100%; float:left; text-align: center; font-size:1.55rem; line-height:1.76; }

		main form > p > a { text-decoration: none; font-weight:inherit; color:inherit; }



button.button,
input.btnstyle { display:block; outline:none; margin:0px; box-sizing: border-box; text-align: center; border:0px solid rgba(0,0,0,0); padding:16px 32px; font-size:1.5rem; text-transform: uppercase; 
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; cursor: pointer; background-color: rgba(0,0,0,0.50); color:#fff; -webkit-appearance: none; border-radius: 5px; text-shadow: 1px 1px 2px #525252; -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5);
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5); height:auto; }

button.button { padding:6px 18px; font-size:1.25rem;  }




input, input:hover, input:active, input:focus, 
a, a:hover, a:active, a:focus,
input.btnstyle, input.btnstyle:hover, input.btnstyle:active, input.btnstyle:focus,
button, button:hover, button:active, button:focus { outline:0 !important; }
input::-moz-focus-inner { border: 0 !important;  outline:0 !important; }


input.btnstyle:hover { cursor: pointer; background-color: rgba(0,0,0,1); }

input.btnstyle.hidden { display:none; }

input.next_btn, input.prev_btn { position:absolute; width:43%; bottom:5vh; height:72px; z-index:10; font-size:2rem; }






input.next_btn { right:6%; }
button.button.save,
input.next_btn {  
background: #6bba70; 
background: -moz-linear-gradient(top,  #6bba70 0%, #6bba70 100%); 
background: -webkit-linear-gradient(top,  #6bba70 0%,#6bba70 100%); 
background: linear-gradient(to bottom,  #6bba70 0%,#6bba70 100%); 
 }

input.prev_btn { left: 6%; }
button.button.clear,
input.prev_btn { 
background: #4f85bb; 
background: -moz-linear-gradient(top,  #4f85bb 0%, #4f85bb 100%); 
background: -webkit-linear-gradient(top,  #4f85bb 0%,#4f85bb 100%); 
background: linear-gradient(to bottom,  #4f85bb 0%,#4f85bb 100%); 
}


input.fullwidth { width: 88%; padding:32px 32px 32px 32px; height:auto; font-size:2.5rem; font-weight:bold; }

input.exit_btn { right:5%; position:fixed; top:1.67vh; font-weight: bold;
background: #ff3019; 
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); 
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); 
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); 
 }


label.inputBox { display:inline-block; float:left; position: relative; width:100%; box-sizing:border-box; padding:4px; }
label.inputBox > span { display:inline-block; float:left; position: relative; width:25%;  box-sizing:border-box; padding:0px; font-size:1.5rem; }
label.inputBox > input, label.inputBox > select, label.inputBox > input[type="date"] { display:inline-block; float:right; position: relative; width:70%; min-width:70%; box-sizing:border-box; padding:10px; font-size:2rem; min-height:52px; }
label.inputBox > input[type="date"] { min-width:66.67%; line-height:1.85; padding:0px 10px; }


label.productBox h5 { margin:32px 0px; padding:0px; font-size:115%; margin-left:-45%; margin-right: 5%; text-align: center; padding-bottom: 6px;}
label.productBox div.price { display:block; position:absolute; right:2.5%; bottom:16px; border-radius: 32px; box-sizing: border-box; padding:5px 12px; font-weight:bold; color:rgba(255,255,255,1.00); -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.45); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.45); background: rgba(35,35,35,1.00); text-align: center; width:auto; font-size:94%; }
label.productBox p.descr { font-weight:400; font-size:1rem; padding-right: 7%; text-align: justify; }



label.productBox {
		
		display:inline-block; 
		float:left; 
		width:48%; 
		position:relative; 
		margin:1%; 
		box-sizing: border-box; 
		padding:0px 0px 0px 0px;
		-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.45);
		box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.45);
		
	}
label.productBox:hover {
		-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.95);
		box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.95);		
	}

label.productBox > span.checkmark { display:inline-block; float:left; text-align:left; position:absolute; width:100%; color:rgba(33,33,33,1.00); background-color: rgba(255,255,255,0.90); box-sizing: border-box; font-size:1.67rem; 
		background-image: url(icons/ic_check_box_outline_blank_black_24px.svg);	
		background-size: 25%; padding-left: 33%;
	   background-position: 2.5% center; 
	   background-repeat: no-repeat; }


label.productBox > input[type="checkbox"],label.productBox > input[type="radio"] { position: absolute; opacity: 0; cursor: pointer;  height: 0; width: 0; }

label.productBox, label.productBox > span.checkmark  { height:25.75vh; overflow:hidden; 
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
}




/* On mouse-over */
label.productBox:hover input ~ .checkmark { background-image: url(icons/ic_check_box_outline_blank_black_24px.svg); background-color:rgba(28,93,162,0.20); }

/* When the checkbox is checked, add a blue background */
label.productBox input:checked ~ .checkmark { background-image: url(icons/ic_check_box_white_24px.svg); background-color: rgba(26,167,51,1.00); color: rgba(241,241,241,1.00); }
label.productBox input:checked ~ .checkmark div.price { background: rgba(245,245,245,1.00); color: rgba(12,67,12,1.00); }






ul.summary, ul.summary li		{  display:inline-block; position:relative; box-sizing: border-box; padding:0px 0px 0px 0px; margin: 0px 0px 0px 0px; align-items: flex-start; clear:both; }
ul.summary li						{  padding:4px 10px; vertical-align: text-top; align-content: flex-start; border-bottom: solid 1px rgba(0,0,0,0.30); width:100%; }

ul.summary li > span 						{  display: inline-block; text-align: left; box-sizing: border-box; position:relative }
ul.summary li > span:first-child 		{  float:left; width:35%; font-size:120%   }
ul.summary li > span:last-child 			{  float:right; width:64%; }

ul.summary li:not(:last-child) > span:last-child 			{  background-image: url(icons/baseline-beenhere-24px.svg); background-size:18px; background-position: left center; background-repeat: no-repeat; padding-left: 40px; }

ul.summary li:not(:last-child):not(:first-child) > span:first-child 				{ padding-left:22px; }
ul.summary li:not(:last-child):not(:first-child) > span:first-child:before 	{ display:block; position:absolute; left:3px; top:0px; content:'+';   }




ul.summary li > span > div.price  { display: inline-block; text-align: left; box-sizing: border-box; position:relative; width:auto; float:right; clear:right; font-weight:bold;}

ul.summary li:last-child { border-bottom: double 3px rgba(0,0,0,0.80); padding-top: 12px; font-weight: bold; font-size:120% }



ul.summary {  display:block; clear:both; float:none !important; width:90%; max-width:1200px; margin-left:auto; margin-right: auto;  background-image: url(images/receipt.svg); background-repeat: no-repeat; background-position: center top; background-size:cover; 
				  padding-right:40%; padding-left: 3%; min-height:75vh; padding-top: 29%; }






div.finalInfo { display:block; width:100%; height:70vh; float:left; background-size:contain; background-repeat: no-repeat; background-position: center top;  }


div.werbungOnstay { display:block; width:100%; height:62vh; float:left; background-size:cover; background-repeat: no-repeat; background-position: center top; /* background-image: url(images/demo.jpg); */ color:rgba(255,255,255,1.00); box-sizing: border-box; /* padding:40px; */ font-size:150%; background-color:rgba(0,0,0,0.80)  }









html, body 								{ height:100vh; max-height:100vh; min-height:100vh; }
html, body, header, main, footer { max-width:100%; min-width:100%; width:100%; box-sizing:border-box; display: inline-block; float:none; clear:both; }
header, header:before				{ height: 8vh; }
main 										{ height: 85vh; }
footer 									{ height: 7vh; }






		
		.slidMain, .werbungOnstay, .slidSlides { 
			
			position:relative; 
			display:flex; 
			align-content: stretch; 
			align-items: stretch; 
			justify-content: flex-start; 
			flex-wrap: nowrap; 
			width:100%; 
			height:70vh !important; 
			overflow:hidden;
			clear:both; float:left;
			box-sizing: border-box;
			padding:0px 0px 0px 0px;
		
		}
        
		.werbungOnstay { text-align: center; width:98% !important; margin-left: 1%; -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.67); box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.67); }
	
		.slidSlides > div > div { 
			flex:1; 
			min-height:200px; 
			width:100%; 
			cursor:default; 
			align-self: stretch; 
			background-size: cover !important; 
			background-position: center !important; 
			background-repeat: no-repeat !important;  
		}
	
	

		
		
		
		.slidSlides > div > div > div {position:absolute; top:5%; left:3%; display:block; box-sizing: border-box; padding:24px 48px; font-size: 5rem; font-weight:bold; color:rgba(42,42,42,1.00); background-color:rgba(255,188,5,0.9); }
		


main form.flex { position:relative; 
			display:flex; 
			align-content: flex-start; 
			align-items:flex-start; 
			justify-content: flex-start; 
			flex-wrap: wrap; 
			width:100%; height:82vh;  }

main form.flex > h3,
main form.flex > p 		{ width:100%;  }
main form.flex > label  { width:auto; min-width:48%; align-self: flex-start; }
main form.flex > label.inputBox  { width:100%; }

main form.flex > label.inputBox > input[type="text"],
main form.flex > label.inputBox > input[type="date"],
main form.flex > label.inputBox > select,
main form.flex > label.inputBox > input[type="number"] { background-color: rgba(252,255,255,1.00); outline: none; border:0px solid rgba(0,0,0,0.0); border-bottom:2px solid rgba(55,55,55,0.10); background-position: 12px center; background-repeat: no-repeat; background-size: 24px;
}

main form.flex > label.inputBox > input[type="text"]:optional,
main form.flex > label.inputBox > input[type="date"]:optional,
main form.flex > label.inputBox > select:optional,
main form.flex > label.inputBox > input[type="number"]:optional { border-bottom:2px solid rgba(9,150,209,1.00) }

main form.flex > label.inputBox > input[type="text"]:required,
main form.flex > label.inputBox > input[type="date"]:required,
main form.flex > label.inputBox > select:required,
main form.flex > label.inputBox > input[type="number"]:required  { border-bottom:2px solid rgba(88,171,12,1.00) }

main form.flex > label.inputBox > input[type="text"]:invalid,
main form.flex > label.inputBox > input[type="date"]:invalid,
main form.flex > label.inputBox > select:invalid,
main form.flex > label.inputBox > input[type="number"]:invalid  { border-bottom:2px solid rgba(159,10,12,1.00); background-image: url("icons/ic_notifications_active_white_48px.svg") }











main form.flex > h3 { margin-bottom: 1.5% !important; margin-top: -0.5%; }

@media only screen and  (orientation : landscape) { 

input.fullwidth {
    padding: 15px 32px 15px 32px;
}
	
input.next_btn, input.prev_btn { bottom:1vh; height:56px; font-size:1.5rem; }
	
	label.productBox h5 {
		margin: 12px 0px 32px 0px; margin-left: -45%;
	}

}