@charset "utf-8";

@font-face {
font-family: "Font";
src: url("font/AvenirNextLTPro-Regular.otf");
}


:root{
	/*Text*/
	--a:16pt;
	--h2:28pt;
	--h3:20pt;
	--h4:18pt;
	--p1:14pt;
	--p2:18pt;
	--p3:34pt;
	--mainfont:"Font";
	
	/*Colors*/
	--pc:#6666ff; /*The color you are #6666ff  #ff596a #373DF1*/
	--lc:transparent;		/*main bg and text on homepage*/
	--bg:white; /*webside bg and majority of text*/
	--hf:white; /*header fo color*/
	--tc:black; /*textcolopr*/
	--mc:lightslategrey; /*small details*/
	--filter:invert(34%) sepia(78%) saturate(1895%) hue-rotate(226deg) brightness(101%) contrast(103%); /*invert(34%) sepia(78%) saturate(1895%) hue-rotate(226deg) brightness(101%) contrast(103%);https://codepen.io/sosuke/pen/Pjoqqp*/
	
	/*ScreenSizes*/
	--containerwidth:80%;
	--top:10vH;
	
	/*Animations*/
	--ad:0ms;
	--an:1000ms;
}


#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
	pointer-events: none;
	background:var(--bg);
	animation-duration: 400ms;
    animation-timing-function: ease-in-out;
	opacity: 0;
}

@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    animation-name: fade-out;
	opacitiy: 0;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}

em {color:var(--pc);
	font-style:normal;
  	text-transform: uppercase;
  	letter-spacing:0.02em;}

h1{
	font-family:var(--mainfont);
	font-size:var(--h1);
	color:white;
}

h2{
	font-family:var(--mainfont);
	font-size:var(--h2);
	text-align: left;
	color:var(--tc);
}

h3{
	font-family:var(--mainfont);
	font-size:var(--h3);
	color:var(--tc);
}

h4{
	font-family:var(--mainfont);
	font-size:var(--h4);
	color:var(--tc);
}

p1{
	font-family:var(--mainfont);
	font-size:var(--p1);
	color:var(--tc);
}

p2{
	font-family:var(--mainfont);
	font-size:var(--p2);
	color:var(--tc);
}

f{	padding:3%;
  	color: var(--pc);
	font-size: var(--a);
	font-family:var(--mainfont);
	text-align: center;
}

hr{
	border-bottom: 1px;
	border-color: var(--tc);
	width:100%;
	}


.header {
	min-height:100px;
	z-index:99;
	top:0px;
	position: fixed;
	width:100%;
	height:10vH;
	display:flex;
	flex-flow:row nowrap;
	background-color:var(--hf);
	align-items: center;
	justify-content: space-around;
}

.logo {
order:1;
margin:3.4%;
margin-left:7%;
filter:var(--filter);
}


.menue {
position: relative;
order:2;
}

.social {
position: relative;
order:3;
margin-left:auto;
filter:var(--filter);
}


.menue a {
	padding:0 30px;
    color: var(--pc);
    text-decoration: none;
	font-size: var(--a);
	font-family:var(--mainfont);
}

.menue a:hover {
    color: var(--tc);
}


.social a{
	overflow:hidden;
	padding:30px;
}

.social a:hover {
    color: var(--tc);
}

body {
	margin:0;
	background-color:var(--bg);
	background-image:none;
	padding:0;
	border:0;
	overflow-y:scroll;
	overflow-x:hidden;
}



.footer {
	position:relative;
	overflow:hidden;
	bottom:0%;
	width:100%;
	height:10vH;
	display:flex;
	flex-flow:row nowrap;
	background-color:var(--bg);
	align-items: center;
	justify-content:center;
}

/*Homepage*/

.icontainer{
	overflow:auto;
	width:100%;
	margin:auto;
	margin-top:10vH;
	height:80vh;
	display:flex;
	flex-flow:row wrap;
	align-items: flex-start;
	justify-content: center;
	font.size:3em;
}

.itext{
	width:30%;
	height:700px;
	left:5%;
	color: white;
	padding:40px;
	margin:auto;
	position:absolute;
	color:white;
	
	animation-delay: var(--ad);
	animation-duration:var(--an);
  	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}

.ivideo{
	object-fit: cover;
	object-position: center;
	overflow:hidden;
	width:100%;
	height:80vH;
}




/*Projectgallery Page*/

.pr_title_container{
	z-index:0;
	position:relative;
	overflow:hidden;
	width: var(--containerwidth);
	margin:auto;
	padding-top:var(--top);
	height:auto;
	display:flex;
	align-items:center; 
	justify-content:center;
	flex-flow:row wrap;
	
	animation-delay:var(--ad);
  	animation-duration:var(--an);
 	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}

.container {
  z-index:3;
  height:100%;
  width:40%;
  overflow:hidden;
  margin:auto;
  position:sticky;
  margin:1%;
  margin-bottom:1%;

  animation-delay:var(--ad);
  animation-duration:var(--an);
  animation-timing-function: ease-in-out;
  animation-name:fade-in
}

.container2 {
  z-index:3;
  height:200%;
  width:82%;
  overflow:hidden;
  margin:auto;
  position:sticky;
  margin:1%;
  margin-bottom:1%;

  animation-delay:var(--ad);
  animation-duration:var(--an);
  animation-timing-function: ease-in-out;
  animation-name:fade-in
}





.image {
  align-self: center;
  width:100%;
  height:40vH;
  object-fit: cover;
  object-position: center;
  overflow:hidden;
}


.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:var(--pc);
  overflow: hidden;
  width: inherit;
  height: 1.5%;
  transition: .5s ease;
  display:flex;
  flex-flow:column nowrap;
  align-items: center;
  justify-content: center;
}

.container:hover .overlay {
  height:100%;
  opacity: 95%; 
}

.container2:hover .overlay {
  height:100%;
  opacity: 95%; 
}



.text {
  position: absolute;
  transition: .7s ease;
  white-space: nowrap; 
  color: white;
  overflow: hidden;
  text-align: left;
  opacity: 0;
}

.container:hover .text{
	opacity:1;
}

.container2:hover .text{
	opacity:1;
}



/*Projectpage*/

.hr_color{
	position:sticky;
	top:10vH;
	margin-top:-.5vh;
	width:100%;
	border-bottom-width:10px;
	border-bottom-color:var(--pc);
	border-bottom-style:solid;
	z-index:20;
}


.pr_hero{
	border-bottom-width:1vH;
	border-bottom-color:black;
	border-bottom-style:solid;
	padding:5vH 0px;
	margin:0;
	object-fit: cover;
	object-position: center;
	overflow:hidden;
	width:100%;
	max-height:90vH;
	background-color:black;



	animation-delay:var(--ad);
  	animation-duration:var(--an);
 	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}





.projekt_container{
	position:relative;
	display:flex;
	flex-flow:row wrap;
	width:100%;
}

.pr_title{
	overflow:hidden;
	position:sticky;
	top:15vH;
	bottom:80%;
	left:3%;
	width:25%;
	height:auto;
	max-height:90vH;
	background:var(--lc);
	padding:0 2.5%;
	font-size:10%;
}

	.pr_imagined{
		font-style:italic;
		font-size:12pt;
		color:var(--tc);
		padding:10px 0;
	}

	.pr_tags{
		font-size:12pt;
		font-style:italic;
		color:var(--pc);
	}

.hr_text{
	margin-bottom:20px;
}



.pr_projekt{
	position:relative;
	top:10vH;
	overflow:hidden;
	width:60%;
	margin:auto;
	height:auto;
	margin-bottom:10vH;
	display:flex;
	flex-flow:row wrap;
	background-color:var(--bg);
	align-items:center;
	scroll-snap-type: y mandatory;

	animation-duration:2500ms;
  	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}

	.pr_detail{
		width:100%;
		overflow:hidden;
		background: var(--lc);
		height:100vH;
		display:flex;
		flex-flow:column wrap;
		align-items:flex-start;
		justify-content: flex-start;
		margin:auto;
		scroll-snap-align: start;
		}

		.pr_subtitle{
			background: var(--lc);
			overflow:hidden;
			width:100%;
			padding:1% 0 5% 0;
			display:flex;
			flex-flow:column nowrap;
			align-items: flex-start;
			justify-content: center;
			}



		.pr_img{
			width:100%;
			overflow:hidden;
			height:auto;
			max-height:70vH;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}


		.pr_detail_d{
		width:100%;
		overflow:hidden;
		background: var(--lc);
		height:80vH;
		display:flex;
		flex-flow:column wrap;
		align-items:flex-start;
		justify-content: flex-start;
		margin:auto;
		scroll-snap-align: start;
		}

		.pr_img_d{
			align-self: center;
			width:auto;
			overflow:hidden;
			height:60vH;
			object-fit: cover;
			object-position:center;
			transition: 0.3s;
		}


		.mySlides1{
			width:100%;
			max-height: 70vH;
			overflow:hidden;
			height:auto;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}

		.mySlides2{
			width:100%;
			max-height:70vH;
			overflow:hidden;
			height:auto;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}


		.mySlides3{
			width:100%;
			max-height: 70vH;
			overflow:hidden;
			height:auto;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}


		.pr_detial_text{
			margin-top:20px;
			font-size: 12pt;
			text-align:left;
			padding: 0;
			color:var(--mc);
	}

.pr_bottom{
	position:relative;
	height:50%;
	display:flex;
	flex-flow:row wrap;
	width:100vW;
	margin:auto;
	background-color:var(--pc);
	margin-bottom:12vH;
}

	.pr_btext{
		top:-5vH;
		position:relative;
		font-family:var(--mainfont);
		color:white;
		width:30vw;
		height:auto;
		margin:auto 5vw;
		text-align:center;
	}

	.pr_bimg{
		opacity:.5; 
		height:100%;
		width:30vw;
		object-fit:cover;
		object-position: center;
	}



	.pr_bimg:hover{
		opacity:1; 
		transition: 0.5s ease;
		cursor: pointer;
	}


/*Gallery*/
		.gallery{
			height:70vH;
			margin:auto;
			width:100%;
			overflow:hidden;
			background-color:black;
			display:flex;
			flex-flow:column nowrap;
			align-items: center;
			justify-content: center;

		}

		.mySlides{
			margin:auto;
			width:auto ;
			height:100%;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}

		.mySlides_2{
			margin:2% 0;
			width:auto ;
			height:100%;
			object-fit: cover;
			object-position: center;
			transition: 0.3s;
		}


		.button_left{
			left:0;
			margin-top:2%;
			width:50px;
			height:50px;
			background-color:var(--pc);
			color:white;
			opacity: 1;
			position:relative;
			top:0;
			cursor: pointer;
			border:none;
		}

		.button_right{
			margin-top:2%;
			width:50px;
			height:50px;
			background-color:var(--pc);
			color:white;
			opacity: 1;
			position:relative;
			right:-91%;
			cursor: pointer;
			border:none;
		}

		.button_right:hover{
			opacity:0.2;
		}

		.button_left:hover{
			opacity:0.2;
		}

		.video{
			width:100%;
			height:auto;
		}


/*About*/
.about_container {
	display:flex;
	flex-flow:column nowrap;
	justify-content: center;
	align-items: center;
	width:var(--containerwidth);
	max-width:var(--containerwidth);
	height:auto;
	background-color:var(--lc);
	margin:var(--top) auto 10vH auto;
	padding:3% 50px;
	animation-delay: var(--ad);
	animation-duration:var(--an);
  	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}

.about_profile{
	width:400px;
	overflow:hidden;
	height:400px;
	margin:auto;
	padding: 2.5%;
	border-radius: 50%;
	border:medium;
	border-color:var(--bg);
}

.about_text{
	margin: 50px 0;
	width:var(--containerwidth);
}

.about_list_container{
	width:100%;
	height:auto;
	margin-top:7vh;
	background-color: var(--lc);
	display:flex;
	flex-flow:row wrap;
	align-items:flex-start;
	justify-content: center;
}

.listelement{
	border-style:solid;
	border-width:0 0 0 1px;
	border-color:var(--pc);
	width:27%;
	color:red;
	height:auto;
	display:flex;
	flex-flow:column wrap;
	align-items: flex-start;
	padding:0 2.5% 0 1%;
	margin-bottom:50px;
	margin-right:2.5%;
}

.listtitle{
	color:var(--pc);
	font-style:italic;
	padding-bottom:10px;
}

.lighttext{
	color:var(--mc);
}
/*Contact*/

.contact{
	position:relative;
	top:10vH;
	margin:10vH auto 20vH auto;
	padding:5vH;
	height: 50vH;
	display:flex;
	flex-flow:column nowrap;
	align-items: center;
	justify-content:center;
	text-align: center;
	color: var(--bg);
	background-color: var(--lc);
	width:var(--containerwidth);
	animation-delay: var(--ad);
	animation-duration:var(--an);
  	animation-timing-function: ease-in-out;
  	animation-name:fade-in
}

.hidden{
	display:none;
}

.overlay_menue {}



@media only screen and (max-width: 1400px){
	:root{
	

.itext{
	order:1;
	width:90%;
	height:10%;
	padding:40px;
	margin:1%;
	
}

.iimg{
	order:2;
	object-fit: cover;
	object-position: center;
	overflow:hidden;
	width:100%;
	height:1000px;
	margin:0;
}

.icontainer{
	flex-flow: column warp;
	width:100%;
	margin-top:100px;
	height:auto;
}
.container {
	height:100%;
}



.pr_title_container{
	flex-flow:column nowrap;
}


.pr_hero{
		top:10vH;
		padding-bottom:2%;
	}

.hr_color{
	padding-top:-2%;
	top:10vH;
}





.projekt_container{
top:1vH;
position:sticky;
justify-content: center;
max-width:var(--containerwidth);
margin:auto;
margin-bottom:40%;
}

.container{
	width:100%;
}

.container2{
	width:100%;
}

.image{
	width:100%;
	height:auto;
	max-height:70vH; 
}




	
.pr_title{
	top:10vH;
	left:0;
	position:relative;
	width:100%;
	height:auto;
	max-height: none;
	margin:0;
	padding:20px 0;
}


	

.pr_projekt{
	position:relative;
	top:10vH;
	width:100%;
	margin:auto;
	}

	.pr_subtitle{
		order:4;
		margin:auto;
	}
	
	
	.pr_detail{
		order:4;
		height:auto;
	}
	
	.pr_detial_text{
		order:4;
		width:100%;
		padding:5px 0;
		margin:0;
		margin-bottom:20px;
	}
	
	.pr_img{
		order:4;
		width:100%;
		padding:10px 0;
		max-height: 500px;
		overflow:hidden;
	}


.pr_btext{
	font-size:0.8em;
	}

	
.menue a {
		padding: 0px -20px;}
	

.about_profile{
	width:300px;
	height:300px;
	}
	
.contact{
	height:70vH;}
	
	.about_container{
		max-width:100vw;
		width:90vw;
		position:relative;
		padding:0 5vw;
	}


.pr_bottom{
	display:none;
}
}





@media only screen and (max-width: 600px){		
	

.listelement{
	width:100%;
	}
	
.about_container {
	width:90%;
	position:absolute;
	top:10vH;
	margin:auto;
}
	
.about_text{
	width:100%;
}

.menue a {
		padding: 0px -20px;}
}

.text {
	font-size:14px;
	width:100%;
	margin:auto;
}


}