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


@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Light.ttf') format('truetype'); font-weight: 100; font-style: lighter } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 100; font-style: italic } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: 200; font-style: normal }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Italic.ttf') format('truetype'); font-weight: 200; font-style: italic } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-SemiBold.ttf') format('truetype'); font-weight: 400; font-style: bold } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 400; font-style: italic } 





		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: 'open Sans', Helvetica, Arial, "sans-serif"; font-size: 1.1em; font-weight: 200; 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; }



h1, h2, h3 			{ font-weight:400; }
h4, h5 				{ font-weight:200; }
h6, h7, h8, h9 		{ font-weight:100; }



		html 					{ background: rgba(255,255,255,1.00); }
		header, footer 			{ text-align: center; }
		header:before 			{ background-image: url("images/OS_logoColor.svg"); background-repeat: no-repeat; background-position: center 2vh; background-size:148px; display:block; position:relative; content:''; width:100%; z-index:20; }
		footer 					{ color:rgba(225,225,225,1.00); font-size:0.9rem; padding:10px 20px; opacity:0.76; }
		footer a 				{ color:rgba(180,180,180,1.00); font-size:1rem; opacity:1; letter-spacing: 0.5px; text-decoration: none; font-weight:100; }
		body 					{ background-size: 100%; background-size: cover; background-repeat: no-repeat; background-position: center top; }
		body 					{ background:rgba(245,245,245,1); }

footer { background-image: url("images/OS_logoColor.svg"); background-size:7vh; background-position: center 2vh; background-repeat: no-repeat; }

		div#sessionStatus { display:block; position:fixed; width:100%; top:0px; height:auto; z-index:20; left:0px; overflow: hidden;
			background:rgba(0,0,0,0.00);

						  }



		div#sessionStatus > div { background:rgba(16,16,16,0.00); color:rgba(255,255,255,0.5); text-align: center; position:relative; float:left; width:1%; height:32px; padding:8px 0px 0px 0px; box-sizing: border-box; font-size:12px; font-weight:400;

			
			
		} 



		div#sessionStatus > div:before { 

			display: 	block;
			content: 	'';
			opacity: 	0.67;
			position:	absolute; 
			width:		100%; 
			height:		32px; 
			top:		0px; 
			left:		0px; 
			background-image: url("pic/statbg.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: auto 21px; 

		}



		div#sessionStatus > div.active { 
			background: -moz-linear-gradient(left,  	rgba(29,197,137,0.80) 0%, 		rgba(255,0,128,0.60) 50%, rgba(255,0,128,0.50) 80%, 	rgba(233,233,233,0.0) 100%); 
			background: -webkit-linear-gradient(left,  	rgba(29,197,137,0.80) 0%,		rgba(255,0,128,0.60) 50%, rgba(255,0,128,0.50) 80%, 	rgba(233,233,233,0.0) 100%); 
			background: linear-gradient(to right,  		rgba(29,197,137,0.80) 0%,		rgba(255,0,128,0.60) 50%, rgba(255,0,128,0.50) 80%, 	rgba(233,233,233,0.0) 100%); 
		}
		div#sessionStatus > div.done { background: rgba(29,197,137,0.80); }



























		main form 				{ display:inline-block; width:100%; box-sizing: border-box; padding:0px 0px; margin:0px 0px 0px 0px; }


		main form > h3 		{ 
			
									display:inline-block; 
									margin:2vh 0px 1vh 0px; 
									width:100%; 
									float:left; 
									text-align: left; 
									font-size:2.5rem; 
									border-bottom: 1px solid rgba(0,0,0,0.5);
									padding:0px 20px 16px 5vw; 

		}




		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; }

.hidden { display:none !important; visibility:hidden !important; }

button.button,
input.btnstyle {   
	
					font-family: "Open Sans", Helvetica, Arial, "sans-serif";

					display:block; 
					outline:none; 
					margin:0px; 
					box-sizing: border-box; 
					text-align: center; 
					border:0px solid rgba(0,0,0,0.0); 
					padding:14px 24px; 
					font-size:1.25rem; 
					line-height: 1;

				  -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;  
					color:#fff; 
					-webkit-appearance: none; 
					border-radius: 5px; 
					height:auto; 
					letter-spacing: 0.25px;

}




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: 0px solid rgba(0,0,0,0.0) !important; outline:0 !important; }

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

button.button.hidden,
input.btnstyle.hidden 					{ display:none; }

div.signature-pad--actions > div > button.button.save,
input.next_btn, input.prev_btn 			{ position:absolute; width:auto; bottom:0px; z-index:10; font-size:2.25rem; padding:17px 58px 19px 58px; line-height: 1; font-weight: 200;  }


input.next_btn 							{ right:6%; }
button.button.save, input.next_btn 		{ background: rgba(0,177,130,1.00); }

input.prev_btn 							{ left: 6%; }
button.button.clear, input.prev_btn 	{ background: rgba(91,91,91,1.00); }



input.next_btn, button.button.save, input.next_btn, input.prev_btn, button.button.clear, input.prev_btn { 

		-webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25);
		box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25);

}


div.signature-pad--actions > div > button.button.save { position:fixed; bottom:14.5vh; right:6%;  }


input.fullwidth { width: 88%; padding:32px 32px 32px 32px; height:auto;  }












form.fixTop { position: fixed; display:block; top: 48px; right:132px; box-sizing: border-box; width:112px; height:112px; text-align: center; padding:0px 0px 0px 0px; background: rgba(255,2,6,0) !important }



input.exit_btn { display:inline-block; width:100%; position:absolute; left:0px; top:0px;  } 
input.exit_btn { 
	
	border-radius:		5px;
	color: 				rgba(212,212,212,1);
	border:				0px solid rgba(0,0,0,0.10);
	padding: 			89px 12px 14px 12px !important;
	font-weight:		200;
	text-transform: 	uppercase;
	font-size:			1rem !important;
	background: 		rgba(0,0,0,0);
	
 } 
input.exit_btn:hover { 
	
color:#fff; 
	background: 		rgba(0,0,0,0.2);

}

div.btn_overay { 
	
	display:			block;
	right:				24px;
	top:				12px;
	position:			absolute !important;
	height:				64px; 
	width: 				64px;
	border-radius:		50%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#63666d+0,28343b+100 */
background: rgb(99,102,109); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(99,102,109,1) 0%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(99,102,109,1) 0%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(99,102,109,1) 0%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63666d', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	
	box-sizing: 		border-box !important;
	
	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
		 pointer-events: none; 

}
div.btn_overay > span { 
	
	padding: 20px 0px 4px 0px; 
	box-sizing: border-box !important; 
	display: block; 
	width:100%; 
	position: absolute; 
	top:0px; left: 0px; 
	height: 100%; 
	text-align: center; 
	border-radius: 50%;
	font-size:10px; 
	color:#ddd;
	line-height: 13px;
	
}
div.btn_overay > span > b {
	
	color: rgba(255,255,255,1); 
	font-size: 1.75rem; 
	font-weight: 200 !important; 
	letter-spacing: 0px;
	display: inline-block; width:100%;
	margin:0px; padding:0px;
	
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;

}










div.btn_overay > div  { 
	
	display:block; 
	position:absolute; 
	height:100%; 
	width:100%; 
	top:-5px; 
	left:-5px; 
	opacity:0.9; 
	border-radius:50%; 
	background-color: transparent !important; 
	border-width: 5px; 
	box-sizing: content-box;
	border-style: solid;
	overflow: hidden;
	z-index:1001;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;

}

div.btn_overay > div.circle  { 
	
	
	border-top-color: rgba(0,0,0,0);
	border-right-color: rgba(0,0,0,0);
	border-bottom-color: rgba(0,0,0,0);
	border-left-color: rgba(0,0,0,0);
	
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	
	z-index: 1002;
	opacity: 0.67;
	

}



















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:9px 10px; vertical-align: text-top; align-content: flex-start; border-bottom: solid 1px rgba(0,0,0,0.30); width:100%; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, "sans-serif" }

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:2rem   }
ul.summary li > span:last-child 		{  float:right; width:64%; color:rgba(95,95,95,1.00); }



ul.summary li:not(:last-child) > span:last-child  { padding-left: 12px; font-size:1.67rem; }

ul.summary li:not(:last-child):not(:first-child) > span:first-child 		{ padding-left:28px; }
ul.summary li:not(:last-child):not(:first-child) > span:first-child:before 	{ display:block; position:absolute; left:3px; top:-2px; 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; color:rgba(102,102,102,1.00) }
ul.summary li:last-child { border-bottom: double 3px rgba(0,0,0,0.80); padding-top: 12px; font-weight: 400; font-size:2.45rem; color: rgba(14,170,90,1.00); }


ul.summary {  
	
	display:inline-block; 
	clear:both; 
	float:none !important; 
	width:100%; 
	margin-left:auto; 
	box-sizing: border-box;
	margin-right: auto; 
	padding-right:	6%; 
	padding-left: 	6%; 
	padding-top: 	80px; }




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,1)  }









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:100vh !important; 
			overflow:hidden;
			clear:both; float:left;
			box-sizing: border-box;
			padding:0px 0px 0px 0px;
		
		}
        
		.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;  opacity:0.67;
			z-index:4;
		}
	
		.slidSlides > div > div > div { display:none; }
		.werbungOnstay { position:fixed !important; top:0px !important; z-index:1; }

		.werbungOnstay:before { display:block; position:absolute !important; width:100%; height:100%; content:''; top:0px; left:0px; pointer-events: none !important; z-index:5;
			
			background: rgba(0,0,0,1.00);
			opacity:0.25;


		}













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; z-index:50; }

main form.flex > h3,
main form.flex > p 		{ width:100%;  }


main form.flex > label  { width:auto; align-self: flex-start; }
main form.flex > label.inputBox  { width:100%; }

main form.flex > label.inputBox input,
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: 1px solid rgba(55,55,55,0.10); 
	border-radius: 5px;
	
	background-position: 12px center; 
	background-repeat: no-repeat; 
	background-size: 24px;
	
}

main form.flex > label.inputBox  input:optional,
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(192,192,192,1.00); }

main form.flex > label.inputBox  input:required,
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(10,159,162,1.00); }

main form.flex > label.inputBox  input:invalid,
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(236,48,51,1.00); background-image: url("icons/ic_notifications_active_48px.svg"); padding-left:48px !important }


main form:not(.flex) 	{ z-index:70; }
main form.flex > label,
main form.flex > input,
main form.flex > h1,
main form.flex > h2,
main form.flex > h3,
main form.flex > h4,
main form.flex > p 		{ /* z-index:50; */ }
header, footer  		{ z-index:60; }


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








div.descr { background:rgba(245,245,245,1.00); margin:0px; box-sizing: border-box; display: inline-block; float:left;  width:100%; position: relative; padding:12px 20px 20px 10px; min-height: 56px; font-size:0.92rem; line-height: 1.5rem; }










div.infotext,
p.infotext { 
	
	margin-top:-10px; 
	text-align: left; 
	box-sizing: border-box; 
	padding: 9px 32px 10px 60px; 
	line-height: 1.65; 
	font-size: 1.1rem; 
	font-weight: 200; 
	width: auto !important; 
	margin-left: 5%; 
	min-height: 58px; 
	max-width:90% !important;

	color: rgba(128,128,128,1.00);
	border: 1px solid rgba(125,235,200,1.00);
	border-radius: 5px;
			
	background-image: url("icons/ic_info_outline_48px.svg");
	background-size: 32px; 
	background-repeat: no-repeat;
	background-position: 12px 12px;
	
	min-width:67%;
			
}

div.infotext { margin-top: 32px; position: relative !important; width:90% !important; height: auto; }










	label.productBox, div.whiteBox { 
	
		display:			inline-block; 
		float:				left;
		box-sizing: 		border-box; 
		padding:			8px 24px 30px 24px; 
		width:				50vw; 
		height:				auto; 
		position: 			relative; 
		background: 		rgb(246,245,244);
		z-index:			20;
		max-width:570px;
		min-width:320px;
		margin:				25vh auto 50px 10vw;
		-webkit-box-shadow: 2px 2px 26px 0 rgba(0,0,0,0.25); 
		box-shadow: 		2px 2px 26px 0 rgba(0,0,0,0.25);
		border-radius: 		5px;
	
	}
	
	div.whiteBox > input.btnstyle { 
	
		position: relative;
		width: auto;
		bottom: auto;
		height: auto;
		z-index: 21;
		font-size: 1.33rem;
		right:auto;
		text-shadow: none;
		box-shadow: none;
		float:right;
		text-transform: capitalize;
		margin-top:24px;
	
	
	}
	
	div.whiteBox h2 { color:rgba(48,48,48,1.00); font-size: 2.4rem;   }
	div.whiteBox p  { color:rgba(72,72,72,1.00); font-size: 1rem; padding-right: 4px; font-weight: 200 !important; margin-top: 12px; line-height: 1.4; margin-bottom: 8px; }





	div.transBox {
		display: inline-block;
		float: left;
		box-sizing: border-box;
		padding: 24px;
		width: 78vw;
		height: auto;
		position: relative;
		background: rgba(233,225,220,0.00);
		z-index: 20;
		color:#fff;
		-webkit-box-shadow: none;  box-shadow: none;
		border-radius: 0px;
		margin: 15vh 0px 12px 9vw;
		font-size: 1.5rem;
	}

	div.transBox > h1, 	div.transBox > p  { position: relative;   }
	div.transBox > h1 { color:#eee !important; font-size: 2.25rem;  font-weight: 400 !important  }
	div.transBox > p  { color:#ddd !important; font-size: 1.40rem;  font-weight: 100 !important  }

	div.transBox > p { display:inline-block; position:relative; box-sizing: border-box; float: left; padding:0px 38px 0px 0px; width: 47%; margin-top: 12px; }
	div.transBox > p > button {
		
		display:block; 
		outline:none; 
		
		position: absolute; bottom:0px;
		border-style:  solid;
		border-width: 0px;
		border-color: rgba(192,0,100,1.00); 
		
		margin-top: 17px; 
		font-size: 2rem; 
		font-weight:200;
		box-sizing: border-box;
		text-transform: capitalize; 
		background-color: rgba(255,0,128,1.00);
		padding:16px 24px;
		text-align: center;
		min-width: 90%;
		color: rgba(255,255,255,1.00);
		cursor: pointer;
		border-radius: 9px;
		
		-webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25);
box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25);
		
	}
	


div.transBox > p.descr { min-height:195px; }


	div.transBox button.blue {
		
		border-color: rgba(1,97,185,1.00);
		background-color: rgba(19,119,225,1.00);
		
		
	}
	
	div.transBox button.special {
		
		background-color: rgba(172,123,0,1.00);
		
		
	}
	
	div.transBox button.checkout {
		
		background-color: rgba(112,112,112,1.00);
		
		
	}
	


	div.transBox > p > button:hover { background: rgba(255,158,0,1.00); border-color: rgba(172,124,3,1.00);  }
	
	





button.button.save, input.next_btn, button.next_btn 	{ background-color: rgba(255,0,128,1.00);  }
button.button.clear, input.prev_btn, button.prev_btn 	{ background-color: rgba(19,119,225,1.00); } 




button.button.save:hover, input.next_btn:hover, button.next_btn:hover, button.button.clear:hover, input.prev_btn:hover, button.prev_btn:hover { background-color: rgba(255,158,0,1.00); } 










	label.productBox { 
		
		width: 		45vw !important; 
		margin: 	24px 2.5vw 0px 2.5vw; 
		padding: 	0px 0px 0px 0px;

		-webkit-box-shadow: none; 
		box-shadow: 		none;
		background: 		rgba(255,255,255,1.00);
		border-radius: 0px;

	}









label.productBox.expand {  width: 90% !important; max-width:90% !important; margin: 24px 5% 24px 5% !important; 

	-webkit-box-shadow: 0 4px 32px 0 rgba(0,0,0,0.1);
	box-shadow: 0 4px 32px 0 rgba(0,0,0,0.1);
	border-radius: 3px;

} label.productBox.expand, label.productBox.expand > span.checkmark { min-height:50vh !important; }
label.productBox.expand > span.checkmark { background-color:rgba(255,255,255,1.00); background-size: contain !important; padding-top: 0px !important }
label.productBox.expand > span.checkmark > h5 { 
	
	margin-top: 30vh !important;
	width:100% !important; 
	position: relative; 
	display: inline-block; 
	box-sizing: border-box; 
	padding-left: 5%; 

}
label.productBox.expand > span.checkmark > div.price { position: absolute; z-index: 3; top:29vh; right:5%; display: block; box-sizing: border-box; color: #333 !important; font-size:2.5rem !important; font-weight:bold !important; background:none !important; }
label.productBox.expand > span.checkmark > div.descr { 
	
	position: relative; display: inline-block; box-sizing: border-box; padding-left: 5%; overflow-y: auto;  font-size: 1.2rem; line-height: 2rem; 
	
	padding-right: 7%;
padding-top: 20px;
height: 19vh;


}
label.productBox.expand input:checked ~ .checkmark::after {
    top: 10vh;
    left: calc(50% - 144px);
    width: 288px;
    height: 288px;
}







label.productBox.compressed, label.productBox.compressed > span.checkmark { height:132px !important; box-sizing: border-box !important; min-height:132px !important }



label.productBox.compressed {  
	width: 90% !important; max-width:90% !important; 
	margin: 0px 5% 12px 5% !important; 
	-webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
	border-radius: 3px;
} 
label.productBox.compressed > span.checkmark { background-color:rgba(255,255,255,1.00); background-size: auto 116px !important; background-position: 8px 8px !important; padding: 8px 20px 8px 300px !important }
label.productBox.compressed > span.checkmark > h5 { border-width:0px !important; margin-top: 0px !important; width:100% !important; position: relative; display: inline-block; box-sizing: border-box; padding-left: 0px; padding-top: 0px !important; background:none !important }
label.productBox.compressed > span.checkmark > div.price { border-width:0px !important; position: absolute !important; padding:0px 0px 0px 0px !important;  margin:0px 0px 0px 0px !important; top:8px; right:36px; display: block; box-sizing: border-box; color: #333 !important; font-size:1.67rem !important; background:none !important; }
label.productBox.compressed > span.checkmark > div.descr { position: relative; display: inline-block; box-sizing: border-box; padding-left: 0px; padding-right: 92px; padding-top: 8px; height: 72px; overflow-y: auto; font-size: 0.775rem; line-height: 0.875rem; background:none !important; color:rgba(66,66,66,1.00) }


label.productBox.compressed > span.checkmark::after {
    top: 25px;
	left: -40px; 
}

label.productBox.compressed input:checked ~ .checkmark::after {
    top: 20px; left:205px !important;
    width: 72px;
    height: 72px;
}

label.productBox > span.checkmark { background-color: #fff !important; }





label.inputBox 			{ display:inline-block; float:left; position: relative; width:50%; box-sizing:border-box; padding:4px; margin-top: 24px; }
label.inputBox  span 	{ display:inline-block; float:left; position: relative; width:100%; box-sizing:border-box; padding:0px; font-size:1.25rem; font-weight:400; color:rgba(95,95,95,1.00) }
label.inputBox  input, 
label.inputBox  select { display:inline-block; position:relative; width:100%; min-width:100%; box-sizing:border-box; padding:10px 12px; font-size:1.33rem; outline:0; border:1px solid rgba(0,0,0,0.1); border-radius:5px; min-height:48px; z-index:10 }

label.inputBox  input.control, div.onstaySelect > input { padding:10px 12px 10px 58px; }

div.onstaySelect > div.onstaySelectTrigger,
label.inputBox  button.opencontrol { display:block; position:absolute; width:46px; box-sizing: border-box; margin-right:0px; margin-top:0px; margin-left: 0px; min-height:47.75px; left:4px; bottom:5.25px; z-index:15; border-bottom-left-radius: 5px; border-top-left-radius: 5px; outline:none; border:0px; background-color: rgba(255,0,128,1.00); background-image: url('pic/calendar.svg'); background-position: center; background-repeat: no-repeat; background-size: 20px; cursor:pointer; } 
div.onstaySelect > div.onstaySelectTrigger:hover,
label.inputBox  button.opencontrol:hover { background-color: rgba(255,158,0,1.00);  } 


button.next_btn, button.prev_btn { position:relative; display:inline-block; float:right; width:96%; margin:32px 2% 12px 2%; font-size:1.85rem; padding:14px 32px 15px 32px; line-height: 1; font-weight: 200; outline:0; border-radius:5px; border-width: 0px; color:#fff; }


main form.flex > label.inputBox 			{ display:inline-block; float:left; position: relative; width:85%; box-sizing:border-box; padding:4px; margin-left: 7.5%; margin-top: 24px; }
main form.flex > label.inputBox.rf 			{ width:42.5%; margin-left: 5%;  }
main form.flex > label.inputBox > span 		{ display:inline-block; float:left; position: relative; width:25%; box-sizing:border-box; padding:0px; padding-top: 15px; font-size:1.5rem; font-weight:200; color:rgba(95,95,95,1.00) }
main form.flex > label.inputBox.rf > span 	{ width:100%; padding-top: 5px; margin-bottom:4px; font-size:1.25rem; font-weight:400; color:rgba(95,95,95,1.00) }



	div.onstaySelect { display:inline-block; position:relative; width:100%; height:48px; }

	div.onstaySelect > input { padding: 10px 48px 10px 12px; }

	div.onstaySelect > div.onstaySelectTrigger { 
		
		width:100% !important; 
		height:48px;
		bottom:auto; 
		left: auto; 
		right:0px; 
		top:1px;
		border-radius:0px; 
		border-bottom-right-radius: 5px; 
		border-top-right-radius: 5px; 
		background-image: url("icons/up.svg");
		background-color: transparent;
		opacity:0.6;
		background-position: 99.2% center;


	}
	

	div.onstaySelect.closed > div.onstaySelectTrigger { 
		
		background-image: url("icons/down.svg");
		background-color: transparent;


	}

div.onstaySelect > div.onstaySelectTrigger:hover { background-color: rgba(255,0,190,0.05) }
















div.onstaySelect > div.onstaySelectOptionBox > span.onstaySelectValue {  		
	
	z-index: 2147483647 !important; 		

}




div.onstaySelect > div.onstaySelectOptionBox { 

	position: 		fixed !important; 
	z-index:  		2147483646 !important;
	top: 			0px !important;
	bottom: 		0px !important;
	margin-top: 	0px !important;
	left: 			0px !important;
	margin-left: 	0px !important;
	float: 			none !important;
	display: 		inline-block;
	width: 			100vw;
	height: 		100vh;
	box-sizing: 	border-box !important;
	padding:		10vh 10% 60px 10%; 
	padding-top: 	calc(50vh - 300px);
	background-color: 	rgba(0,0,0,0.70);
	font-family: 	"DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" !important; 
	text-align:		center;

	
}

div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp { 

	z-index:  2147483647 !important;
	
	position: relative !important;
	display: inline-block;
	float: none;
	box-sizing: border-box !important;
	
	top: 0px !important;
	margin-top: auto !important;
	left: auto !important;
	margin-left: auto !important;
	right:auto !important;
	margin-right: auto;
	
	width: 100%;
	max-width: 600px !important;
	min-height: 480px;
	max-height: 50vh;
	
	padding: 12px 28px ;
	
	background: #FFF;
	
	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	
	border-radius:12px;
	overflow-y: auto;
	
}


div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > h4 {  display:inline-block; width:100%; float:left; text-align: center; padding: 4px 12px; margin-top:12px; margin-bottom: 20px; font-size:2rem; font-weight:normal; box-sizing: border-box; color:rgba(24,24,24,1); text-transform: uppercase; }
div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > span.onstaySelectValue {
	
	margin-bottom:  	12px;
	
	display: 			block; 
	box-sizing: 		border-box; 
	clear: 				both;
	width: 				100%; 
	float: 				left; 
	font-size: 			1.7rem !important;
	padding: 			16px 30px 14px 30px;
	border-radius: 		12px;
	color: 				#111;
    text-align: 		center; 
	background-color: 	rgba(252,252,252,1.00);
	
	-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2);
	
	
	
}

div.onstaySelect > div.onstaySelectOptionBox > div.onstaySelectOptionPopUp > span.onstaySelectValue.selected { 	background-color: 	rgba(255,0,128,1.00); color:#fff !important;   }



h4.close { cursor:pointer !important; z-index:  2147483647 !important; pointer-events: all !important; background-image: url("pic/cancel-24px.svg"); background-size:45px; background-position: right top; background-repeat: no-repeat; opacity: 0.5; }
h4.close:hover { opacity:0.9; }

div.onstaySelect.closed > div.onstaySelectOptionBox {
	
	display:  none !important;
	overflow: hidden;
	visibility: hidden;
	
}



input.onstaySelectMasterInputVis, input.onstaySelectMasterInputVis:focus, input.onstaySelectMasterInputVis:active, input.onstaySelectMasterInputVis:hover {
	
	
  -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
     -khtml-user-select: none !important;
       -moz-user-select: none !important;
        -ms-user-select: none !important;
            user-select: none !important; 
	
	
	
	
}






label.productBox > span.checkmark { 
	
	display:inline-block; 
	float:left; 
	text-align:left; 
	position:relative; 
	width:100%; 
	color:rgba(33,33,33,1.00); 
	box-sizing: border-box; 
	font-size:1.67rem; 
		
	background-color: rgba(11,96,143,0.00);
	background-size: 110%;
	background-repeat: no-repeat;
	padding: 280px 0px 0px 0px;
	background-position: center top !important; 
	overflow: hidden;
	opacity: 0.9;
	border-radius: 0px;

}

label.productBox > span.checkmark:after { 
	
	display:block; 
	position:absolute; 
	top:25%; 
	left:calc(50% - 24px); 
	width:48px; 
	height:48px; 
	content:''; 
	background-size: cover; 
	background-position: center top !important; 
	background-repeat: no-repeat; 
	background-color: rgba(255,0,166,0.05); 
	border-radius: 16px;

-webkit-transition: all 190ms ease-in-out;
-moz-transition: all 190ms ease-in-out;
-ms-transition: all 190ms ease-in-out;
-o-transition: all 190ms ease-in-out;
transition: all 190ms ease-in-out;
	
	-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}


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

label.productBox, label.productBox > span.checkmark  { height:auto; overflow:hidden; min-height:280px;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
}


/* On mouse-over */
label.productBox:hover input ~ .checkmark { opacity: 1; }
/* When the checkbox is checked, add a blue background */
label.productBox input:checked ~ .checkmark 				{ opacity: 1;   }
label.productBox input:checked ~ .checkmark:after 			{ 
	
	top:10%; 
	left:calc(50% - 72px); 
	width:144px; 
	height:144px; 
	background-image: url("icons/ic_check_box_white_24px.svg"); 
	background-color: rgba(255,0,166,0.70);
	-webkit-box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25);
	box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.25); 
	
	-moz-transform: 	rotate(0deg);
	-webkit-transform: 	rotate(0deg);
	-o-transform: 		rotate(0deg);
	-ms-transform: 		rotate(0deg);
	transform: 			rotate(0deg);

}



label.productBox > span.checkmark > h5,
label.productBox > span.checkmark > p,
label.productBox > span.checkmark > div.price { display:inline-block; position:relative; float:left; width:100%; background: rgba(245,245,245,1); margin:0px 0px 0px 0px; padding:15px 2px 2px 2px; box-sizing: border-box;  }


	label.productBox > span.checkmark > h5,
	label.productBox > span.checkmark > div.price { width:50%; background: rgba(245,245,245,1); margin:0px 0px 0px 0px; padding:15px 2px 2px 2px; box-sizing: border-box;  }



label.productBox > span.checkmark > h5 { font-size: 1.85rem !important; border-bottom:1px solid rgba(0,0,0,0.05) }
label.productBox > span.checkmark > p  { font-size: 0.95rem; color:rgba(86,86,86,1.00); }
label.productBox > span.checkmark > div.price  { text-align: left; color:rgba(86,86,86,1.00); padding:4px 2px 1px 2px;  }

	
	label.productBox > span.checkmark > h5, label.productBox > span.checkmark > div.price { font-size: 1.65rem !important; border-bottom:1px solid rgba(0,0,0,0.05); padding:15px 2px 2px 2px; }
	 label.productBox > span.checkmark > div.price { color:#111; text-align: right; padding-right: 12px; }



	label.productBox:nth-child(odd)		{ margin: 24px 4.5vw 0px 0.5vw; }
	label.productBox:nth-child(even) 	{ margin: 24px 0.5vw 0px 4.5vw; }

/*
	label.productBox	> span.checkmark  { background-image: url("images/door.jpg"); }



	label.productBox.extra:nth-child(4) 	> span.checkmark { background-image: url("images/breakfast.jpg"); }
	label.productBox.extra:nth-child(5)  	> span.checkmark { background-image: url("images/paytv.jpg"); }
	label.productBox.extra:nth-child(6)  	> span.checkmark { background-image: url("images/parking.jpg"); }
	label.productBox.extra:nth-child(7)  	> span.checkmark { background-image: url("images/minibar.jpg"); }

	label.productBox.room > span.checkmark { background-image: url("images/room1.jpg"); }
	label.productBox.room:nth-child(4)  	> span.checkmark { background-image: url("images/room1.jpg"); }
	label.productBox.room:nth-child(5)  	> span.checkmark { background-image: url("images/room2.jpg"); }
	label.productBox.room:nth-child(6)  	> span.checkmark { background-image: url("images/room3.jpg"); }
	label.productBox.room:nth-child(7)  	> span.checkmark { background-image: url("images/room4.jpg"); }
	label.productBox.room:nth-child(9)  	> span.checkmark { background-image: url("images/room0.jpg"); }
*/

.next_btn.btnstyle.uplift,
.prev_btn.btnstyle.uplift { z-index:80 !important; }























@media (orientation: landscape) { 

	div.whiteBox { margin: 10vh 0px 12px 25vw; }
	
	p.infotext { margin-top: -3px; margin-bottom: 20px !important; min-width:90% !important }
	label.productBox { margin-top: 4px !important;  }
	
	header::before { height: 6vh; background-size: 94px; background-position: center 21px; margin-top: 2vh; } 
	input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: -8px !important; }
	
	label.productBox { width: 20vw !important; margin:24px 0px 8px 4% !important; float:left !important; }
	label.productBox, label.productBox > span.checkmark { min-height: 25vh !important; }
	label.productBox > span.checkmark { padding-top: 22vh !important; }

	main form.flex > label.inputBox {
    margin-top: 7px;
	}
	
	
	div#virtualKeyboard { display:none !important; }

	.signature-pad { height: 50vh !important; }
	.signature-pad--body > canvas { max-height:40vh !important; }

}






 @media only screen and (max-width: 1024px) and (orientation: portrait) {
   
	 html 					{ font-size: 0.750em; }
	
	p.infotext { margin-top: -3px; margin-bottom: 20px !important; min-width:90% !important }
	label.productBox { margin-top: 4px !important;  }
	
	header::before { height: 6vh; background-size: contain; background-position: center center; margin-top: 2vh; } 
	input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: -8px !important; padding:8px 24px 7px 24px !important }
	
	label.productBox {  margin:24px 0px 8px 4% !important;  }
	label.productBox, label.productBox > span.checkmark { min-height: 17vh !important; }
	label.productBox > span.checkmark { padding-top: 17vh !important; background-size: 80%; background-color: transparent; background-position: left top; }

	main form.flex > label.inputBox {
    margin-top: 7px;
	}
	
	
	div#virtualKeyboard { display:none !important; }

	.signature-pad { height: 50vh !important; }
	.signature-pad--body > canvas { max-height:40vh !important; }
	 
	 
	 
}











	
	div.dropdownCard { 
		
		display:block; 
		width:300px; 
		height:200px; 
		border-radius: 20px; 
		
		background-color: rgba(211,179,45,1.00); 
		
		-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7);
		box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7); 
		
		box-sizing: border-box; 
		font-size:2rem; 
		text-align: center; 
		color:rgba(96,96,96,0.80); 
		padding:125px 0px 0px 0px; 
		text-transform: lowercase;
	
		position: fixed; 
		z-index:100000;
	
		opacity:0;
		left:30%;
		top:-20vh;
		
		background-size: 90%; background-position: center; background-repeat: no-repeat;
		background-image: url("pic/key-card.svg");
		
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
		
		
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
		
	}
	

div.dropdownCard.kc {
	
	
		width:600px; 
		height:400px; 
		border-radius: 40px; 
	
		left:50%;
		margin-left: -290px;
		font-size:3.33rem; 
	
		padding:250px 0px 0px 0px; 
	
	
}





	div.dropdownCard.kc.action1 { 
		
		  	top:40vh;
			opacity: 1;
			transform: rotate(90deg); 
		background-color: rgba(139,139,139,1.00);
		color: rgba(181,181,181,0.00);
		
		  animation-name: 				cardmove1;
		  animation-duration: 			3s;
		  animation-timing-function: 	ease-out;
		  animation-iteration-count: 	infinite; 
		
	}
	

	div.dropdownCard.kc.action2 { 
		
		
			opacity:						1;
			transform: 						rotate(90deg);
		  	top:							40vh;
			background-color: 				rgba(16,110,170,1.00);	  
			animation-name: 				cardmove2;
			animation-duration: 			3s;
		  	animation-timing-function: 		linear;
		  	animation-iteration-count: 		infinite; 
		
	}

	div.dropdownCard.kc.action3 { 
		
		
			opacity:1;
			transform: rotate(90deg);
		  	top:150vh;
		  background-color: 				rgba(16,110,170,1.00);	 
			animation-name: 			cardmove3;
		  	animation-duration: 		3s;
		  	animation-timing-function: 	ease-in-out;
		  	animation-iteration-count: 	infinite; 
		
	}



	div.dropdownCard.cc { 
		
		right:4%;
		left:auto;
		background-color: rgba(24,48,76,1.00); 
		font-size:1.2rem;
		padding-top: 135px;
		color: #fff !important;
		text-transform: uppercase;
		
		background-image: url("pic/credit-card.svg");
		
		
	}

	div.dropdownCard.cc.action { 
		
		 transform: 					rotate(90deg);
		  animation-name: 				cccardmove;
		  animation-duration: 			7s;
		  animation-iteration-count: 	infinite; 
		  animation-timing-function: 	linear;
	}


	


	div.printanimation {
		display:	block; 
		max-width:	150px; 
		padding:	10px; 
		position: 	fixed; 
		background:	#fff; 
		z-index:	99999; 
		box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.5); 
		margin: 	auto;
		opacity:	0; 
		left:		120px; 		
	}


	div.printanimation.action {
		
		-webkit-animation-name: movedown; /* Safari 4.0 - 8.0 */
  		-webkit-animation-duration: 7s; /* Safari 4.0 - 8.0 */
  		-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
		animation-name: movedown;
  		animation-duration: 7s;
  		animation-delay: 2s;
		
	}


	/* Standard syntax */
	@keyframes cardmove1 {
		
		0% 	{ top: 40vh; 	opacity:0; 		transform: rotate(90deg)  rotate3d(0,90,0,90deg);	 filter: blur(1px);   	}		
	  20% 	{ top: 40vh; 	opacity:1; 		transform: rotate(90deg)  rotate3d(0,0,0,90deg);     filter: blur(0px);   	}	
	  80% 	{ top: 40vh; 	opacity:1; 		transform: rotate(90deg)  rotate3d(0,0,0,90deg);     filter: blur(0px);   	}	
	  100% 	{ top: 40vh;  	opacity:0; 		transform: rotate(90deg)  rotate3d(0,-90,0,90deg);   filter: blur(1px);   	}	
		
	}

	@keyframes cardmove2 {
		
		0% 	{ opacity:0; transform:rotate(90deg) scale(1); 		filter: blur(0px); 		color: rgba(142,142,142,1.00);  background-color: rgba(0,152,121,1.00)	}		
	   25% 	{ opacity:1; transform:rotate(90deg) scale(0.95);	filter: blur(0.5px); 	color: rgba(208,18,113,1.00);	background-color:rgba(253,0,118,1.00) 	}	
	   50% 	{ opacity:1; transform:rotate(90deg) scale(1);		filter: blur(0px); 		color: rgba(0,154,41,1.00);		background-color:rgba(177,177,177,1.00) }	
	   75% 	{ opacity:1; transform:rotate(90deg) scale(1.05);	filter: blur(0.5px); 	color: rgba(208,18,113,1.00);	background-color:rgba(253,0,118,1.00)	}		
	  100% 	{ opacity:0; transform:rotate(90deg) scale(1); 		filter: blur(0px); 		color: rgba(142,142,142,1.00);  background-color: rgba(0,152,121,1.00)		}	
		
	}
	@keyframes cardmove3 {
		
		0% 	{ top: 40vh;  opacity:0;	filter: blur(20px);  color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) }			
		10% { top: 40vh;  opacity:1;	filter: blur(0px); 	 color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) }			
	  100% 	{ top: 150vh; opacity:1;	filter: blur(1px);   color: rgba(0,118,105,1.00); background-color: rgba(0,152,121,1.00) }	
		
	}



	/* Standard syntax */
	@keyframes cccardmove {
		
		0% 	{ top: -60vh; opacity:0; filter: blur(120px); }		
	10% 	{ top: 20vh;  opacity:1; filter: blur(0px);  }		
	  100% 	{ top: 110vh; opacity:1; filter: blur(0px);  }	
		
	}





	/* Standard syntax */
	@keyframes movedown {
	  0% 	{ top:300px; opacity:0; transform: scale(0);  }
	  20% 	{ top:300px; opacity:1; transform: scale(1.5);  }
	  50% 	{ top:300px; opacity:1; transform: scale(1.5);  }
	  90%   { top:120vh; opacity:1; transform: scale(1); }
	  100%  { top:120vh; opacity:0; transform: scale(1); }
	}















span#addonPlace {
	
	display:block; width:100%; box-sizing: border-box; font-weight:400;
	
	
}


span.check { 
	
	display:				inline-block; 
	width:					100%; 
	height:					80px; 
	margin-left: 			12px; 
	background-image: 		url("icons/check.svg"); 
	background-size: 		80px; 
	background-position: 	center; 
	background-repeat: 		no-repeat;


}




div.ospopup { 
	
	display:none !important; 
	position:fixed; 
	top:11vh; 
	left:5vw; 
	width:90vw; 
	height:82vh; 
	z-index:999999; 
	background:rgba(255,255,255,1.00); 
	box-sizing: border-box; 
	padding: 90px 48px 40px 48px; 
	border-radius:12px; 
	-webkit-box-shadow: 1px 1px 60px 0 rgba(0,0,0,0.67); 
	box-shadow: 1px 1px 60px 0 rgba(0,0,0,0.67); 
	text-align: center; 
	font-size:2em; 
	overflow-y:auto; 
	background-image: url("icons/ic_info_outline_48px.svg"); 
	background-size:90px; 
	background-position: center 20px; 
	background-repeat: no-repeat;

}


div.ospopup h2 	{ text-transform:uppercase; font-weight:200; font-size:3.5rem; color: rgba(0,179,159,1.00) }
div.ospopup p 	{ display:block; width:100%; margin-bottom: 48px; line-height: 3.2rem; border-top:1px solid rgba(180,180,180,1.00); border-bottom:1px solid rgba(180,180,180,1.00); padding:32px 24px; box-sizing: border-box;  }
div.ospopup button { float: none; display:inline-block; font-size:3rem; background-color:rgba(0,151,134,1.00); padding:32px 86px; margin-bottom: 90px; }

div.ospopup.open { display:block !important; }



div.ospopup span.imprint 	{	display:block; font-size:1.2rem; text-align: center !important; padding:5px 20px 50px 20px; box-sizing: border-box; background:rgba(255,255,255,1.00); }
div.ospopup span.imprint h3 { 	display:block; width:100%; font-size:1.8rem; text-align: left !important; padding:38px 40px 4px 0px; box-sizing: border-box; font-weight:100; margin:0px 0px 0px 0px; }
div.ospopup span.imprint p 	{ 	display:block; width:100%; font-size:1.3rem; text-align: justify !important; padding: 12px 12px 4px 3px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:100; margin:0px 0px 0px 0px;  }

div.ospopup span.imprint ul 	{ 	display:block; width:100%; font-size:1rem; text-align: left !important; padding: 10px 12px 4px 28px; box-sizing: border-box; border:0px; line-height: 2rem; font-weight:200; margin:0px 0px 0px 0px; color:#777  }






input.onstaySelectMasterInputVis:focus,
input.onstaySelectMasterInputVis:active,
button:focus,
label.inputBox,
div.onstaySelectTrigger, 
input.onstaySelectMasterInputVis, 
input.onstaySelectMasterInput, 
div.onstaySelect, 
div.onstaySelect.closed, 
h1, h2, h3, h4, h5, h6, h7, h8, h9, 
p, small, i, b, strong, span { 
	
 	user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -ms-user-select: none; /* Internet Explorer/Edge */
   -moz-user-select: none; /* Firefox */
	text-decoration: none;
	text-emphasis-color: transparent;
	text-decoration-color: transparent;

}

input.onstaySelectMasterInputVis,
h1, h2, h3, h4, h5, h6, h7, h8, h9	{ pointer-events: none; }

span.onstaySelectValue, a, input[type="submit"], button { cursor: pointer; }
a, a:hover, a:active, a:focus, input::-moz-focus-inner, button::-moz-focus-inner { outline:0; border-width: 0px; }
















@media only screen and  (orientation : landscape) { 

	input.fullwidth 		{ padding: 15px 32px 15px 32px; }	
	input.next_btn, 
	input.prev_btn 			{ bottom:1vh; z-index:50000 !important }
	label.productBox h5 	{ margin: 12px 0px 32px 0px; margin-left: -45%; }
	
	footer 					{ background-position: 95% top !important }
	
	div.transBox > h1 		{ margin-bottom: 0px !important; margin-top:0px !important }
	div.transBox > p.descr 	{ min-height: 155px; }
	div.transBox > p 	{ width: 32%; min-width:320px; font-size:1.2rem; }

	div.whiteBox 			{ margin: 13vh 0px 12px 20vw; }
	
	main form.flex > label.inputBox.rf { width: 19%; margin-left: 5%; }
	
	div#signature-pad,
	div.signature-pad--body,
	div.signature-pad--body > canvas,
	div.infotext.sign {  max-height: 260px; height:260px !important; overflow:hidden !important; } 
	
	span#addonPlace,
	p.infotext 				{ padding-top: 10px !important;  }
	
	
	span#addonPlace { margin-top: -90px !important; }
	span#addonPlace h1 img { max-height: 90px !important; margin-top: 10px; margin-bottom: 0px !important; }
	span#addonPlace h1 { font-size:2rem; }
	
	
	div.printanimation.action.fixum { top:0px !important; transform: scale(0.9); }
	
	.svg-wrapper { margin: 33vh 0px 0px 0px !important; }

	
	

}





@media only screen and  (orientation : landscape) and (max-width : 1500px ) { 

	html {  font-size: 0.8em;  }
	header::before { background-size: 160px !important; min-height: 200px; }
	input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift {  bottom: -25px !important; }
	div.transBox > p.descr 	{ min-height: 124px; }
	
	div.ospopup { padding: 50px 24px 20px 24px; background-size:40px; min-height: 440px; }
	
	
	div.ospopup p {
		display: block;
		width: 100%;
		margin-bottom: 16px;
		line-height: 2rem;
		padding: 24px 16px;
	}

}













 @media only screen and (max-width: 1024px) {
   
	 html { font-size: 0.900em; }
	
	 div.transBox { width: 75vw; }
	 div.whiteBox { width: 67vw; }
	 div.whiteBox p { font-size:1.33rem; }
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 button.next_btn, button.prev_btn { font-size: 2.25rem; }
	 input.next_btn, input.prev_btn, input.next_btn.btnstyle.uplift, input.prev_btn.btnstyle.uplift { bottom: -10px !important; padding: 12px 24px 14px 24px !important; }
	 label.productBox > span.checkmark {
		padding-top: 12vh !important;
		background-size: 100%;
		 background-position: center -30px !important;
	}
	 
	 div.descr {
		padding: 12px 12px 20px 2px;
		font-size: 1.1rem;
		line-height: 1.5rem;
		 color:rgba(120,120,120,1.00) !important
	}
	 
	 label.productBox, label.productBox > span.checkmark {  min-height: 15vh !important; }
	 label.productBox { margin-top: 2px !important; }
	 
	 main form.flex > label.inputBox { margin-top: 2px; }
	 
	 div.signature-pad--actions > div > button.button.save { bottom: 7vh; }
	 .signature-pad--footer button.button.clear { margin-top: -60px; margin-left: 10px; }

	 ul.summary li:last-child > span:first-child small { display:block; }
	 
	 
	 div.ospopup.Min { height: 55vh !important }
	 div.ospopup.Min.Card  {
		
		top: 25vh !important;
		left: 16vw !important;
		width: 70vw !important;
		height: 55vh !important;

	} 
	 h1 > img { height:120px !important }
	 
	 
}