@charset "UTF-8";
/*					MENU*/

body {
	/*				Text nicht anwälbar*/
				
				-moz-user-select: none;
				-khtml-user-select: none;
				user-select: none;
				font-family: 'Roboto', sans-serif;
}


/*******************************Menu*******************************/


.overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.4);
	overflow-x: hidden;
	transition: 0.5s;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}


a {
	text-decoration: none;
	color: hsla(0,0%,100%,0.70);
}


a:hover {
	color: #D92029;
}


#scene {
	background-color: hsla(0,0%,0%,0.51);
	position: relative;
	overflow: hidden;
	width: 100%;
	display: block;
}


li {
	display: inline;
	list-style-type: none;
	margin: 40px;
	font-size: 7.5vh;
	font-weight: 300;
}


.menu {
	width: 20000px;
	padding-top: 40vh;
	margin-left: -30vh;
	margin-right: auto;
}


section {
	width: 100%;
	height: 100%;
}


.menu-smartphone {
	display: none;
	background-color: hsla(0,0%,0%,0.51);
	margin: 0px;
	padding: 0px;
	top: 0;
	right: 0;
	padding-top: 90px;
	padding-bottom: 200px;
	width: 100%;
	height: 100%;
	text-align: center;
	
}



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



/*******************************Splash Screen*******************************/

	


#splash {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background-color: #FFFFFF;
	/* width: 200px;
						  height: 200px;*/

	margin: auto;
	
}

 @keyframes spin {
 	0% {
	 	transform: rotate(0deg);
	}
	100% {
	 	transform: rotate(360deg);
	}
}


.loading {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0.16rem solid rgba(0, 0, 0, 0.06);
	border-top-color: Black;
	animation: spin 1s infinite linear;
	margin: auto;
}


/*******************************Erklärung*******************************/

#erklaerung {
	width: 100%;
	height: 310px;
	z-index: 200;
	/* background-color: rgba(255,255,255,0.66);*/
	position: absolute;
	bottom: 0;
}



#erklaerungcenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 310px;
	font-size: 20px;
	text-align: center;
}


#erklaerungcenter video {
	border-style: solid;
    border-width: 1px;
    border-color: grey;
	box-sizing: border-box;
}



#iconcenter-smartphone {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 310px;
	font-size: 20px;
	text-align: center;
}

.erklaerung-element {
	width: 310px;
}

.center {
	width: 200px;
	text-align: center;
}



/*******************************Lightbox*******************************/


	.lightbox-size {
		width: 70vw;
		height: 39.4vw;
		overflow: hidden;
		background-color: black;
	}



/*******************************Overlay Responsiv*******************************/


@media (min-width: 1024px) {
	
	/*	ICON/VIDEO WECHSEL  */
	#iconcenter-smartphone {
		display: none;
	}
}



@media (max-width: 1024px) {
	
	
	/*	ICON/VIDEO WECHSEL*/
	#erklaerungcenter {
		display: none;
	}
	
	/*	DEAKTIVIERT DIE ERKLAERUNG FUER SMARTPHONES*/
	#erklaerung {
		display: none;
	}

}


/*******************************MENU Responsiv*******************************/

@media (max-width: 1024px) {
	

						
						  
	li {
		display: list-item;
		font-size: 6.5vw;
		margin-left: 22px;
	}
	#scene {
		display: none;
	}
	
	
	.menu-smartphone {
	display: block;
	
	}
	

}