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

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


/*//////////// home ////////////////*/
#home{
	overflow: hidden;	
}
			
			
#headerhome{
	display: flex;
	position: relative;
	flex-direction: row;

}

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

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

@media screen and (min-width: 961px) {
	#instructions-card{font-size: 24px;}
}

@media screen and (max-width: 960px) {
	#instructions-card{font-size: 16px;}
}




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

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

}

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

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

@media screen and (min-width: 576px) {
	#content-wrap {padding-bottom: 180px;}   /* Footer height */
	#home-content {top:80px;}
}

@media screen and (max-width: 575px) {
	#content-wrap {padding-bottom: 100px;}   /* Footer height */
	#home-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-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:50px;
	list-style:decimal url(data:img/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	font-size:16px;
}

.iconlist li {
	position: relative;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 5px;

}

.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');}
/*//////////////////////*/

.col, .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);
}

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

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

}
.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;
}
#label{
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:10;
}
#label_human{
	position:absolute;
	bottom:10px;
	left:0px;
	padding-left:10px;
	z-index:100;
	width:100%;
	height:auto;

}
#original-pic{
	z-index:20;
}
/*--- GENERAL ---*/
body{
	font-family:"RobotoRegular";
	font-size: 16px;
	background-color: #333;
	color:#ffffff;
	margin:0px;
}

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

img {
	pointer-events: none;
}

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

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


p{
	margin-bottom: 25px;
}

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

#output, #output_h{
	display:none;
}

#preload{
	display:none;
}



/*--- CONTENT ---*/
#right{
	overflow-y: hidden;
	overflow-x: hidden;
}

#left{
	overflow-y: hidden;
	overflow-x: hidden;
}

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

}
#circle_container{
	position:relative;
	top:0;
	width:100%;
	min-height:400px;
	display:none;
	z-index:1011;
		
}

#switch{
	position:relative;
	top:0px;
	left:20px;
	z-index:100;
	
}

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

/*--- TIME ---*/
#timeswitch{
	position:absolute;
	top:30px;
	left:0;
	z-index:101;
}


.timeicon_container{
	width:60px;
	height:50px;

	background-color:rgba(0,0,0,0.5);

	border-top-left-radius: 0;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 0;

	cursor:pointer;
}

#timeicon{
	width:50px;
	height:50px;
}

.timebuttonicon{
	margin:8px;
	margin-top:2px;
	margin-bottom:0px;
	width:50px;
	height:50px;
}

#timebuttons{
	position:absolute;
	top:30px;

	display:flex;
	z-index:102;
	background-color:rgba(0,0,0,0.6);
	border-top-left-radius: 0;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 0;

	font-size:14px;
	text-align:center;
	margin-right:20px;
}

@media (max-width: 768px) {
	#timeswitch{
		top:calc(50% - 20px);
	}
	
	#timebuttons{
		top:calc(50% - 20px);
	}
}



.timebutton{
	margin-right:22px;
	cursor: pointer;
}



/*--- SLIDER ---*/
.slider {
	z-index:20;
	position:absolute;
	bottom:50px;
	-webkit-appearance: none;
	width: 100%;
	height: 30px;
	background: rgba(0,0,0,0);
	outline: none;

	/*prevent page from scrolling*/
	touch-action: none;

}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 30px;
	height: 30px;
	border: 0;
	cursor: pointer;
	background: url('../img/handle.svg');

}

.slider::-moz-range-thumb {
	width: 30px;
	height: 30px;
	background: #ff00ff;
	background: url('../img/handle.svg');
	border: 0;
	cursor: pointer;
}

input[type=range]{
	pointer-events: none;
}
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---*/


.rs-handle {
	background-color: #bbb;
}

.rs-handle_image {
	width:100%;
	height:100%;
	pointer-events: none;
	background-image: url('../img/roundslider_handle.svg');
	background-size: 100%;
	pointer-events: none;
}
	

.rs-container {
	touch-action:none;
}


span.rs-line {
	position:relative;
	display: block;
	height: 10px;
	width: 10px;
	border-radius:5px;
	background: #333;
}

.rs-disabled{
	opacity:0.7;
	pointer-events: none;
}

.rs-handle{
	background-color:rgba(0,0,0,0);
}

.zindex_zero{
	z-index:1;
}

#split_line {
	position: absolute;
	background: white;
	width: 2px; 
	height: 100%;

}

/* svg effect */
.effect_image {
	position: absolute;
	top:0;
	left:0;
	height: 0px; 
	width: 0px;
}

.effect_image_h {
	position: absolute;
	top:0;
	left:0;
	height: 0px; 
	width: 0px;
}


#effect-pic{
	opacity:1;
}

#original-pic{
	opacity:1;
}

/*--- NAVIGATION---*/

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

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

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


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


.thumb{
	min-width: 100px;
	max-width: 150px;
	margin: 1px;
	padding: 0px;
	background-color: rgba(0,0,0,0.3);
	text-align:center;
	cursor:pointer;
}

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




/*--- RECEPTORS---*/
#receptors_container{
	position: absolute;
	width:calc(40% - 40px);
	top:calc(30% + 20px);
	left:calc(30% + 20px);
}

.clip-circle {
	clip-path: circle(48% at center);
	-webkit-clip-path: circle(48% at center);
}


.amount{
	position:absolute;
	width:80px;
	height:40px;
	line-height:16px;
	text-align:center;
	top: -50px;
	left: calc(50% - 40px);
	border-radius: 5px;
	background-color:#fff;
	border: 2px solid black;
	display:none;
	pointer-events: none;
}


#legende_button{
	position:relative;
	top: -60px;
	left: 45px;
	pointer-events:pointer;
	display:block;
	z-index:1012;
}

#legende{
	position:relative;
	padding: 50px;
	padding-top: 0px;
	display:none;
}

.sticky-offset {
    top: 20px;
}