@font-face {
	font-family: 'RobotoRegular';
	src:  url('../fonts/roboto-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'RobotoBold';
	src:  url('../fonts/roboto-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}



/*--- GENERAL ---*/


body, html{

	position:absolute;
	padding: 0;
	margin: 0;
	top:0px; 
	left:0px;
	width:100%;
	font-family: 'RobotoRegular';
	color:#FFF;
	background: #333;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;

}

#app{

	position:absolute; 
	width:100%; 
	overflow-x:hidden;

}	


.bg-main{
	background-color: #333;
}


h4{
	margin-top:7px;
	font-size: 13px;
}

h3{
	margin-top:7px;
	font-size: 20px;
	margin-top: 15px;	
}


p{
	margin-bottom: 25px;
}




/*//////////// home ////////////////*/
#home{
	overflow: hidden;	
}


#headerhome{
	display: flex;
	position: relative;
	flex-direction: row;

}

#yellowbox{
	background-color: #ffcc00;
	width:20px;
	height:120px;
	margin-right:20px;
}

#home-content {
	position:relative;
}
#app-content {
	position:relative;
}


#instructions-card{
	cursor:pointer;
	background-color: #ffcc00;
	color:#333;
	width:100%;
	height:100%;
	text-align: center;
	opacity:0.1;
}

#instructions-card:hover {
	color:#fff;
}







#instructions-row{
	display:none;
}

#instructions-container{
	padding:80px;
}

#credits-container{
	padding:80px;
	max-width: 600px;
}


.start-card{
	cursor:pointer;
	opacity:0.1;

}

.start-card:hover .overlay {
	opacity:0.4;
}

.start-card-label{
	position:absolute; 
	bottom:4%; 
	left:5%; 
	z-index:99999;
	text-shadow: 2px 2px 20px #000000;
	
}

.start-card-label-instructions{
	position:absolute; 
	bottom:4%; 
	left:5%; 
	z-index:99999;
	color:#222;
	pointer-events: none
}



.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #ffffff;
	text-align:center;
	color:#333;
}

.no-margin{
	margin:0px;
}


.home-container{
	position: relative;
	min-height: 100vh;

}

.app-container{
	position: relative;
	min-height: 100vh;

}

.footer-home{
	background-color:#333;
	height: 100px;
	position: absolute;
	bottom: 0;
	left:0;
}

.footer-home button{
	color: rgba(255,255,255,0.6);
	background:transparent;
}

/*//////////// home end ////////////////*/

@media screen and (min-width: 768px) {
	.content-wrap {padding-bottom: 100px;}   /* Footer height */
	#home-content {top:0px;}
	#app-content {top:0px;}


}

@media screen and (max-width: 767px) {
	.content-wrap {padding-bottom: 180px;}   /* Footer height */
	#home-content {top:0px;}
	#app-content {top:0px;}

}
@media (max-width: 460px) {
	h1{
		font-size: 2rem;;
	}
}



.link{
	cursor:pointer;
}

a{
	color:rgba(255,255,255,0.6);
	text-decoration:none;
}

a:hover{
	color:rgba(255,255,255,0.6);
	text-decoration:none;
}

.modal{
	z-index: 11111111;
}


.modal-content{
	background-color:#333;	
	padding-top:25px;
	padding-bottom:35px;
	padding-left:40px;
	padding-right:40px;
}

.modal-backdrop{
	opacity:0.8 !important;
}
.close{
	color:#ffffff;
	opacity:1;
}
.close:hover{
	color:#ffffff;
	opacity:1;
}

.modal-header {
	border-bottom: 0 none;
}

.modal-footer {
	border-top: 0 none;
}

.credit-image{
	max-width: 50%;
	padding:10px;
}

.footer-logos{
	padding-top:10px;
}




button{
	border: none;
	color:#fff;
	padding:0;
	background-color: #333;
}
button:focus {	
	outline: 0px solid #ffcc00;
}



.btn-sm{
	background-color:#222;
	color: #fff;
	font-size: 12px;
}

.btn-sm:hover{
	background-color:#222;
	color: #fff;
}

.btn-sm.active{
	color: #333;
	background-color:#ffcc00;
}

.btn:focus {
	box-shadow: none;
}

.btn-sm:focus {
	box-shadow: none;
}

/*////////// LISTE ////////////*/
li span {
	position: relative;
	left: 30px;
	padding-right:40px;
}
ol {
	margin-left:0px;
	margin-top:0;
	padding-top:0;
	padding-bottom:0px;
	list-style:decimal url(data:img/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	font-size:16px;
}

.iconlist li , .__preset_list {
	position: relative;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 12px;
	list-style:none;
}

.iconlist li:nth-child(1n):before { position:absolute;left:-1em; }
.iconlist li:nth-child(1):before {content: url('../img/1.svg');}
.iconlist li:nth-child(2):before {content: url('../img/2.svg');}
.iconlist li:nth-child(3):before {content: url('../img/3.svg');}


.preset_list {
	clear:both;
	text-decoration: underline;
	cursor: pointer;
	padding-left:10px; 
}

.__preset_list:before {
	position:absolute;
	margin-left:10px; 
	left:-2em; 
	content: url('../img/1.svg');
}

*, ::after, ::before {
	box-sizing: border-box;
}

/*//////////////////////*/

.col, .col-12, .col-sm-12, .col-md-6, .col-lg-6, .col-xl-6{
	padding-right:0px;
	padding-left:0px;

}

.container {
	max-width: 1440px;
}

.footer{
	padding-top:40px;
	text-align:center; 
	width:100%; 
	height: 100px; 
	background-color: rgba(0,0,0,0.2);
	color:rgba(255,255,255,0.6);

	position: absolute;
	bottom: 0;
	left:0;
}

.footer-mobile{
	padding-top:50px;
	text-align:center; 
	width:100%; 
	height: 160px; 
	background-color: rgba(0,0,0,0.2);
	color:rgba(255,255,255,0.6);

	position: absolute;
	bottom: 0;
	left:0;
}

.sender-logos{
	position:relative;
	top: 15px;
	text-align: center;
	width: 100%;
	border: solid 0px red;
	z-index:0;
	padding-bottom: 10px;
	border:solid 0px red;

}

.planet-schule-logo, .swr-logo{
	margin-left:12px;
	height:50px;
	opacity: 0.8;
	display:inline-block;
}

.planet-schule-logo:focus, .swr-logo:focus{
	margin-left:12px;
	height:25px;
	opacity: 1;
	display:inline-block;
}



/*--- CONTENT ---*/

#info_container{
	position:relative;
	top:0;
	background-color: #333;
	padding:50px;

}


#mobile-back{
	position:absolute;
	top:15px;
	left:30px;
	z-index:102;
	cursor:pointer;
}




/*--- SLIDER ---*/

input[type=range]{
	pointer-events: auto;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
	pointer-events: auto;
}
input[type=range]::-moz-range-thumb{/*Firefox*/
	pointer-events: auto;
}
input[type=range]::-ms-thumb{/*Internet Explorer*/
	pointer-events: auto;
}
/*--- SLIDER ENDE---*/




/*--- NAVIGATION---*/

.navigation-label{
	padding-top:7px !important;
	padding-bottom:8px !important;
	margin-top:7px;
	margin-bottom: .5rem;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 500;
}

.arrow_icon{
	width:40px;
	height:40px;
	opacity:0.6;


}

#arrow_left{
	position:absolute;
	left:20px;
	top:40px;
	z-index:501;
	cursor:pointer;
	display:none;
}

#arrow_right{
	position:absolute;
	right:20px;
	top:40px;
	z-index:502;
	cursor:pointer;
	display:none;
}


#eyenav{
	display: flex;
}

.eyerow {
	position: relative;
	flex-direction: row;
	overflow-x: scroll;
	padding-bottom: 20px;

	/* Hide scrollbar for IE, Edge and Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.eyerow::-webkit-scrollbar {
	display: none;
}

#thumbs {
	display: flex;
	position: relative;
	flex-direction: row;
}

#mobilenav {
	padding-top:1px;
}

#mobilethumbs {
	display: flex;
	position: relative;
	flex-direction: row;
	left:15px
}


.thumb{
	min-width: 100px;
	margin: 1px;
	padding: 0px;
	background-color: rgba(0,0,0,0.3);
	text-align:center;
	cursor:pointer;
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.thumb:hover {
	background-color: #ffcc00;
	color:#000;	

	-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);

}

.active_thumb{
	background-color: #ffcc00;
	color:#000;
}




/* ////////////////// BRILLENSIMULATOR */
#infotext{
	margin:40px;
	margin-bottom: 80px; 
}

#infotextclone{
	margin:40px;
	margin-bottom: 80px;
	color: red;
}

#info, #message_container{
	margin-top:40px;
	margin-right:20px;
}

.background-fill{
	background-color:rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
	.background-fill{
		background-color:rgba(0, 0, 0, 0);
	}
}

/* ////////////////// interactive landscape */

#berge{ 
	position:absolute; top:0px; left:0px; width:100% ; transform: scale( 1.2, 1.2 );
}


#berge img{
	width:100%;
}

#blume{ 
	position:absolute; right:-5%; bottom:0px; z-index:2; height:calc( 80% );
}

#kuh{ 
	position:absolute; left:calc( -50px + 3% ); bottom:0px; z-index:2; width:calc( 280px - 2% );
}

#landschaft{ 
	position:relative; top:0px; left:0px; width:100%; ; background: #000; border:solid 0px green; overflow:hidden; padding-top: 50%; background:#666; 	
}

#landschaft_wrapper{ 
	position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;
}

/* Slider */

.slider {
	position:relative;
	margin:10px; 
	margin-top:5px;
	margin-bottom:2px;
	-webkit-appearance: none;
	width: 250px;
	height: 10px;
	border-radius: 10px;  
	background: #cccbc6;
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 35px;
	height: 35px;
	border-radius: 50%; 
	background: #666666;
	border:solid 4px #cccbc6;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #666666;
	cursor: pointer;
}

fieldset{
	border:none;
	width:100%; 
	text-align: left;
	margin:0px; 
}

fieldset input{
	width:20px;
	height:20px;
	margin-right:3px; 
	position:relative;
	top:4px;
}

fieldset label{
	position:relative;
	margin-right:30px; 
	font-size: 16px; 
}


#slider_container{
	position:relative;
	clear:both;
	padding:10px;	
	top: 20px;
}

#slider_container p{
	padding-left:10px;	
	font-size: 16px;
	font-family: 'RobotoBold';		
	letter-spacing: 2px;
	margin-bottom: 3px;
}

.slider_eye{
	position:absolute; 
	z-index: 1;
	background: #CCCCCC;
}

.slider_eye::-webkit-slider-thumb{
	background: #CCCCCC;
	border:solid 3px #333;
}

.slider_eye::-moz-range-thumb {
	background: #CCCCCC;
	border:solid 3px #333;
}


.slider_linse{
	position:absolute; 
	z-index: 1;
	background: #438B97;
}

.slider_linse::-webkit-slider-thumb {
	background: #438B97;
	border:solid 3px #333;
}
.slider_linse::-moz-range-thumb {
	background: #438B97;
	border:solid 3px #333;
}


.slider_linse_tmp{
	position:absolute; 
	background: #2f6771; 
	z-index: 0;
}

.slider_linse_tmp::-webkit-slider-thumb {
	display:none;
	opacity:0;
}

.slider_linse_tmp::-moz-range-thumb {
	display:none;	
	opacity:0;
}


.age_radio{
	width:20px; height:20px; top:7px; 
}

#age_radio label span{
	position:relative; 
	top:-6px; 
	margin-left:5px; 
	margin-right:10px; 
}



.slider_status_container{
	position:relative;
	margin-top:25px;	
	width:70px;	
	display:none;
}	

.slider_status{
	background: #438B97;
	width:70px;	
	height: 32px;
	border-radius: 39px;  
	padding:3px;
}

.slider_status::-webkit-slider-thumb{
	background: #438B97;
	border:solid 3px #333;
	width: 28px;
	height: 28px;
}

.slider_status::-moz-range-thumb {
	background: #438B97;
	border:solid 3px #333;
	width: 24px;
	height: 24px;
}



.slider_brille_on_off_container{
	position:relative;
	margin-top:25px;	
	width:70px;	
	display:none;
}

.slider_brille_on_off{
	background: #93ccc3;
	width:70px;	
	height: 32px;
	border-radius: 39px;  
	padding:3px;
}

.slider_brille_on_off::-webkit-slider-thumb{
	background: #93ccc3;
	border:solid 3px #333;
	width: 28px;
	height: 28px;
}

.slider_brille_on_off::-moz-range-thumb {
	background: #93ccc3;
	border:solid 3px #333;
	width: 24px;
	height: 24px;
}





.slider_brille{
	position:absolute; 
	background: #93ccc3;
	z-index: 1;
}

.slider_brille::-webkit-slider-thumb {
	background: #93ccc3;
	border:solid 3px #333;
}

.slider_brille::-moz-range-thumb{
	background: #93ccc3;
	border:solid 3px #333;		
}


.slider_brille_disable::-webkit-slider-thumb {
	opacity:0;
	display:none;
	pointer-events:none
}

.slider_brille_disable::-moz-range-thumb{
	opacity:0;	
	display:none;		
	pointer-events:none	
}




.modus_on_off_container{
	position:relative;
	margin-top:25px;	
	width:70px;	
	left:30px; 
	float:left;
}

.modus_on_off{
	background: #CCCCCC;
	width:70px;	
	height: 32px;
	border-radius: 39px;  
	padding:3px;
}

.modus_on_off::-webkit-slider-thumb{
	background: #CCCCCC;
	border:solid 3px #333;
	width: 28px;
	height: 28px;
}

.modus_on_off::-moz-range-thumb {
	background: #CCCCCC;
	border:solid 3px #333;
	width: 28px;
	height: 28px;
}



.custom_radio{
	position:relative; top:50px; width:20px; height:20px; border-radius:20px; border:solid 4px #fcda0b; margin:10px; margin-right:50px; float:left;  background:#fcda0b; cursor:pointer; 
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.custom_radio_active, .custom_radio:hover{
	background:#3e4454;
}

.custom_radio_label{
	position:absolute; left:-20px; top:-30px; width:60px; text-align:center; 
}

.extra_button{
	width:auto; 
	padding-right:12px;
	padding-left:12px;
	display:block;
	background-color:#666666;

	-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	white-space: nowrap;
}

.extra_button img{
	display:none;
}

@media ( max-width: 767px ) {

	.extra_button{
		width:140px !important;
		min-width:140px !important;
		margin-top:15px;
		padding:0px;
		-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
		-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
		box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
		text-align: center;
		background: transparent !important;
	}

	.extra_button h4{
		display:none;
	}

	.extra_button img{
		position:relative;
		margin:0 auto;
		display:block;
	}

	.thumb{
		padding:0px !important; 
		width:24.6% !important;
		max-width:300px; 
		height:30px;
		float:left;
		display: block;
		margin-bottom:1px;
	}

	#mobilethumbs{
		border:solid 0px red;
		width:96%;
		height:auto;
		white-space: normal;
		overflow: hidden;
		display: block;
	}

	.thumb h4{
		margin-left:0px;
		margin-right:0px;
		padding-left:0px; 
		padding-right:0px; 
	}

	.counter {
		right:-35px !important;
	}

	.pause {
		right:32px !important;
	}

}	

@media (max-width: 575px) {

	.thumb{
		min-width: 20px !important;
		width:24% !important;
	}

	.thumb h4{
		font-size:11px !important;
	}

}


.default_button_active{
	border:solid 0px #FFF;
	background-color: #ffcc00 !important;
	color: #000;

	-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
	box-shadow: inset 0px 0px 0px 0px rgba(204,204,204,1);
}

.default_button_active img{

	filter: invert( 1 );

}



/* TIMER */

.pause {
	position:absolute; 
	top:12px; 
	right:27px; 
	display:block;
	width:25px; 
	height:25px; 
	background:url( ../img/pause.svg );
	background-size: 100%;
	cursor:pointer;
	z-index:10000000;
	display:none;
	border:solid 0px red;
}

.counter {
	position:absolute; 
	top:-55px; 
	right:-40px; 
	display:block;
	transform: scale(0.25);
	cursor:pointer;
	transition: all .2s ease-in-out;
}


#play_icon path:hover{
	fill:#c5c5c5;
	stroke:#c5c5c5;
}


svg {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.circle_animation {
	stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
	stroke-dashoffset: 440;
	transition: all 1s linear;
}

/* LUPE */

#lupe{
	position:absolute; 
	left:25px; 
	bottom:5px; 
	z-index: 1000; 
	cursor:pointer;
}


/* SAVE. OVERLAY */

#save_overlay{
	position:absolute; top:50px; left:30px; height:auto; width:80%; max-width:500px; background:#555; border-radius:5px; clear:both; padding:20px; -webkit-box-shadow: 10px 10px 47px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 47px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 47px 0px rgba(0,0,0,0.75); border:solid 0px #CCC; display:none; z-index:10000000000000000000; color:#FFF !important; overflow:hidden;
}

#close_save_overlay{
	position:absolute; top:5px; right:5px; width:30px; cursor:pointer; pointer-events:auto; 
}

#save_output_container{
	position:relative; color:#FFF; font-size: 12px; width:100%; padding:5px; overflow:hidden; top:0; padding: 40px;
}


.no1{
	position:relative;
	display:inline-block;
	background: url('../img/1.svg') no-repeat;
	top:8px;
	height: 24px;
	width: 24px;
	margin-top: -10px;
}

.no2{
	position:relative;
	display:inline-block;
	background: url('../img/2.svg') no-repeat;
	top:8px;
	height: 24px;
	width: 24px;
	margin-top: -10px;
}

.no3{
	position:relative;
	display:inline-block;
	background: url('../img/3.svg') no-repeat;
	top:8px;
	height: 24px;
	width: 24px;
	margin-top: -10px;
}

#left{
	overflow: hidden
}

#right{
	overflow: hidden
}



#mobile_blume_icon{
	position:absolute;
	top:60%;
	right:15%;
	z-index:99999;	
}

#mobile_kuh_icon{
	position:absolute;
	top:55%;
	left:10%;
	z-index:99999;
}

#mobile_berge_icon{
	position:absolute;
	top:30%;
	left:47%;
	z-index:99999;
}



#canvas{
	position:relative; left:10px; display: block; background-color:rgba(85, 85, 85, 0);
}

#dom_overlay_container{
	position:absolute; pointer-events:none; overflow:hidden; width:100%; height:300px; 
}

.card-near, .card-middle, .card-far{
	background:#333; width:100%; overflow:hidden !important; display: inline-block;
}

.card-image-container{
	position:absolute; width:100%; height:100%; top:0px; left:0px; overflow:hidden; display: inline-block;
}

.landschaft-near{
	position:absolute; top:-10px; left:0px; width:100%; filter:blur(6px); transform: scale( 1.1, 1.1 ); top:-20px; 
}

.landschaft-middle{
	position:absolute; top:-10px; left:0px; width:100%; filter:blur(6px); transform: scale( 1.1, 1.1 );
}

.landschaft-far{
	position:absolute; top:-10px; left:0px; width:100%; filter:blur(0px); transform: scale( 1.1, 1.1 );
}

.blume{
	position:absolute; right:20px; height:130%; 
}

.kuh{
	position:absolute; left:0px; top:0px; height:100%;
}

#instructions-card{
	background:#ffcc00; width:100%;  overflow:hidden; 
}

.home-btn{
	position:absolute; left:0px; top:0px;
}

#slider_container{
	position:relative; margin:10px; top:0px; width:100%; height:auto; background:transparent; display:none; 
}

fieldset{
	display:none;
}

#auge_slider_container, #linse_slider_container, #brille_slider_container{
	position:relative; height:100px; float:left; margin-right:20px; margin-bottom:0px; margin-top:20px; display:none; 
}

#linse_slider_container, #brille_slider_container{
	margin-bottom:50px; 
}

.slider_labels_container{
	position:relative; top:35px; left:10px; width:250px; height:20px; 
}

.custom_radio_label{
	left:-10px; top:-15px; width:110px; 
}

.slider_label_left{
	position:absolute; left:0px; top:-10px;
}

.slider_label_right{
	position:absolute; right:0px; top:-10px;
}

.slider_label_center{
	position:absolute; left:calc( 50% - 25px); top:-10px;
}

.slider_sub_container{
	position:relative; height:70px; left:90px; float:left; margin-right:20px; margin-bottom:0px; margin-top:65px; display:block; 
}

.sub_slider_label_left{
	position:absolute; top:-27px; left:-20px; 
}

.sub_slider_label_right{
	position:absolute; top:-27px; left:100px;
}

.slider_status, .slider_brille_on_off{
	position:absolute;top:-32px; left:10px;
}

#auge_slider_tmp{
	display: none;
}