body{
	background-color: #18261C;
	overflow: auto;
	color: white;
}

@font-face{
	font-family: Barlow;
	src: url(Barlow-Regular.ttf);
}

@font-face{
	font-family: Ubuntu;
	src: url(Ubuntu-Light.ttf);
}

/*Sprache Unsichtbar display*/
.SUd {
    display: none;
}
/*Sprache Sichtbar display*/
.SSd {
    display: inline-block;
}
/*Sprache Unsichtbar visibility*/
.SUv {
    visibility: hidden;
    opacity: 0;
    transition-property: opacity, visibility;
    transition-duration: 0.5s;
}
/*Sprache Sichtbar visibility*/
.SSv {
    visibility: visible;
    opacity: 1;
    transition-property: opacity, visibility;
    transition-duration: 0.5s;
}
h1{
	font-family: Barlow, Sans-Serif;
	font-size:1.3em;
	font-weight: 300;
}

h2{
	font-family: Barlow, Sans-Serif;
	font-size:2em;
	font-weight: 300;
}
h3{
	margin-top: -0.7em;
	font-family: Barlow, Sans-Serif;
	font-size:1.5em;
	font-weight: 300;
}
h4{
	margin-top:4em;
	margin-bottom: 4em;
	font-family: Ubuntu, Sans-Serif;
	font-size:1em;
	font-weight: 300;
	line-height: 1.35em;
}
#about p{
	font-size: 1.1em;
	line-height: 1.4em;
}


p{
	font-family: Ubuntu, Sans-Serif;
	font-size:1em;
	line-height: 1.3em;
	font-weight: 300;
}

#about p+.numbers{
	line-height: 0.1em;
}

video{
	width:100%;
}

img{
	width: 100%;
}

.flex-container{
	padding-top: 5vh;
	padding-left: 8%;
	padding-right: 8%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 5%;
}
.text{
	flex-basis: auto;
	flex-grow: 1;
	align-self: auto;
	width:35vh;
	padding-right: 5vw;
}
.bilder{
	padding-top: 3%;
	flex-basis: auto;
	flex-grow: 1;
	align-self: auto;
	width:55vh;
	flex-direction: column;
}

#home-container{
	overflow: hidden;
	top:0;
	width:100vw;
	right:0;
	height: 100vh;
	position: fixed;
}


.anfang {
	position: absolute;
	top:0;
	left:0;
	width: 180vw;
	height: calc(180vw/1920*1080);

	opacity: 0;
	animation-name: anfang;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

.hidden-a{
	position: absolute;
	top: -9999px;
	left: -9999px;
	color: white !important;
}

@keyframes anfang{
	from{opacity: 0;}
	to{opacity: 1;}
}

#m-hover{
	z-index: 10;
	position: absolute;
	cursor: pointer;
	top:14vw;
	left: 82vw;
	width: 12vw;
	height: 12vw;
}

#auge{
	position: absolute;
	width:8vw;
	left: 84vw;
	top: 10vw;

	visibility: hidden;
	opacity: 0;

	transition-property: visibility, opacity;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(.3,1.5,.34,1.05);
}

#m-hover:hover~#auge,
#m-hover:focus~#auge{
	visibility: visible;
	opacity: 1;
}

#auge-d{
	transition-property: transform;
	transition-duration: 0.5s;
	transition-delay: 0.4s;
	transition-timing-function: cubic-bezier(.3,1.5,.34,1.05);
}

#m-hover:hover~#auge #auge-d,
#m-hover:focus~#auge #auge-d{
	transform: translate(10%, 5%);
}

.auge{
	position: absolute;
}


.unten{
	position: absolute;
	bottom: 6%;
	left: 53%;
	color:white;
	text-decoration: none;
	font-size: 1.3vw;
	font-family: Barlow, Sans-Serif;
}
.unten.impressum{
	left: 62%;
}
#sprach-home-DE{
	position: absolute;
	bottom: 5.35%;
	left: 67.5%;
}
#sprach-home-EN{
	position: absolute;
	bottom: 5.35%;
	left: 69%;
}
.sprache img{
	height: 2.5vw;
	width: 2.5vw;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}

.scene{
	left:53.5%;
	bottom: 2.5%;
	display: none;
}

#datenschutz{
	cursor: pointer;
}

#datenschutz:hover~.scene,
#datenschutz:focus~.scene{
	display: inline;
}



.img{
	z-index:2;
	transition: transform 0.4s cubic-bezier(.3,1.5,.34,1.05);
}

a.plop-container>.img:hover,
a.plop-container:focus>.img{
	cursor: pointer;
	transform: translate(-50%, -50%) rotate(-35deg) scale(calc(1.1*var(--img-size)));
}

/*shine*/
.imgbg{
	z-index:1;
	width:50%;
	position: absolute;

	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%) rotate(-35deg) scale(calc(0.8*var(--img-size)));
	transform: translate(-50%, -50%) rotate(-35deg) scale(calc(0.8*var(--img-size)));
	visibility: hidden;
	opacity: 0;
	transition-property: opacity, transform, visibility;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
}
a.plop-container>.img:hover+.imgbg,
a.plop-container:focus>.img+.imgbg{
	visibility: visible;
	opacity: 1;
	transform:translate(-50%, -50%) rotate(-35deg) scale(calc(1.2*var(--img-size)));
}
/*shine end*/




/*overlay*/
#overlay{
	z-index: 11;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: white;
	width:0.1vw;
	height: 0;
	display: none;

	animation-name: overlay;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


#imprint:target~#overlay, #privacypolicy:target~#overlay, #undlesen:target~#overlay, #pipfy:target~#overlay, #ijo:target~#overlay, #formmodul:target~#overlay, #slidenotes:target~#overlay, #compad:target~#overlay{
	display: inline;

}

@keyframes overlay{
	0%{width: 0.1vw; height:0; background-color: white;}
	33%{width: 0.1vw; height: 100vh; background-color: white;}
	100%{width: 100vw; height: 150vh; background-color: #233332;}
}


#overlay-auge{
	z-index:3;
	position: fixed;
	left: 50vw;
	top: 0;
	background-color: white;
	width:0.1vw;
	height: 0;
	display: none;


	animation-name: overlayauge;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes overlayauge{
	0%{width: 0.1vw; height:0; left: 50vw; background-color: white;}
	50%{width: 0.1vw; height: 100vh; left:50vw; background-color: white;}
	100%{width: 100vw; height: 150vh; left:0; background-color: #332323;}
}

#about:target~#overlay-auge{
	display: inline;

}

#zurueck{
	z-index: 12;
	position: absolute;
	left: 1vw;
	top: 1vw;
	width: 1.5vw;
	display: none;
	opacity: 0;

	animation-name: zurueck;
	animation-delay: 1.35s;
	animation-duration: 0.3s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
.sprache{
	border: none;
	background: none;
	width: 2.5vw;
	height: 2.5vw;
}

.sprach-unter{
	z-index: 12;
	position: absolute;
	top: 1vw;
	width: 1.5vw;
	display: none;
	opacity: 0;
	cursor: pointer;

	animation-name: zurueck;
	animation-delay: 1.35s;
	animation-duration: 0.3s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
.sprach-unter img{
	width: 2.5vw;
	height: 2.5vw;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}

#sprach-unter-DE{
	right: 5vw;
}
#sprach-unter-EN{
	right: 2.5vw;
}

@keyframes zurueck{
	from{opacity: 0;}
	to{opacity: 1;}
}

#undlesen:target~#zurueck, #pipfy:target~#zurueck, #ijo:target~#zurueck, #formmodul:target~#zurueck, #slidenotes:target~#zurueck, #compad:target~#zurueck, #about:target~#zurueck, #privacypolicy:target~#zurueck, #imprint:target~#zurueck{
	display: inline;
}
#undlesen:target~.sprach-unter,
#pipfy:target~.sprach-unter,
#compad:target~.sprach-unter,
#ijo:target~.sprach-unter,
#formmodul:target~.sprach-unter,
#slidenotes:target~.sprach-unter,
#about:target~.sprach-unter,
#privacypolicy:target~.sprach-unter,
#imprint:target~.sprach-unter{
	display: inline;
}

/*overlay end*/

.unterseite{
	display: none;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	overflow: auto;

	animation-name: unterseite;
	animation-delay: 0.85s;
	animation-duration: 0.3s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
@keyframes unterseite{
	from{opacity: 0;}
	to{opacity: 1;}
}

/*privacy policy*/
#privacypolicy,
#imprint{
		padding-top: 8vh;
		padding-left: 8vh;
		padding-right: 3vh;
}
#privacypolicy p{
	max-width: 40em;
}



/*about*/
#about{
	z-index: 11;
	padding-top: 3vw;
	text-align: center;
}

.link{
	font-family: Ubuntu, Sans-Serif;
	color: white;
	text-decoration: underline;
}
.numbers{
	font-family: Barlow, Sans-Serif;
}

#marielux{
	position: relative;
	width: 9em;
}

#about:target, #privacypolicy:target, #imprint:target, #undlesen:target, #ijo:target, #pipfy:target, #slidenotes:target, #formmodul:target, #compad:target{
	display: inline;
}
#imprint, #privacypolicy, #undlesen, #ijo, #pipfy, #slidenotes, #formmodul, #compad{
	z-index: 12;
}






@media only screen and (max-width: 80vh) {

	.anfang{
		width: calc(110vh/1080*1920);
		height: 110vh;
	}
	.halo1{
		border-width: calc(0.2vh*0.8);
	}
	.halo2{
		border-width: calc(0.4vh*0.8);
	}
	.halo3{
		border-width: calc(0.2vh*0.8);
	}
	#m-hover{
		width: calc(12vh*1.08642);
		height: calc(12vh*1.08642);
		top: calc(14vh*1.08642);
		left: calc(82vh*1.08642);
	}
	#auge{
		width: calc(8vh*1.08642);
		left: calc(84vh*1.08642);
		top: calc(10vh*1.08642);
	}
	#about{
		padding-top: 10vh;
		padding-left: 5vh;
		padding-right:3vh;
	}
	#overlay{
		width:0.15vh;
	}
	#overlay-auge{
		width:0.15vh;
	}
	#zurueck{
		left:2.5vh;
		top:2.5vh;
		width: 3vh;
	}
	.sprach-unter{
		top: 1.5vh;
	}

	#sprach-unter-DE{
		right: 11vh;
	}
	#sprach-unter-EN{
		right: 6vh;
	}
	.flex-container,
	#privacypolicy,
	#imprint{
		padding-left: 5.5vh;
	}
	:root{
		--faktor: 0.06vh;
	}
	.unten{
		font-size: 1.7vh;
	}
	.unten.impressum{
		left:63.5%;
	}
	#sprach-home-DE{
		bottom: 8.3%;
		left: 70%;
	}
	#sprach-home-EN{
		bottom: 8.3%;
		left: 72%;
	}
	.sprache img{
		height: 3.269vh;
		width: 3.269vh;
	}
	.sprach-unter img{
		width: 4.5vh;
		height: 4.5vh;
	}

}