@charset "UTF-8";
/* CSS Document */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body { 
 background: white;
}

	@font-face {
   font-family:'Suranna';
   src: url("../Fonts/Suranna/Suranna-Regular.ttf") format('truetype');
   
}
	
		@font-face {
   font-family:'Montserrat-Light';
   src: url("../Fonts/Montserrat/Montserrat-Light.ttf") format("truetype");
   font-weight: normal;	
   font-style: normal;
   
}

/*Responsive*/
@media screen and (max-width: 1554px){
    
  
    /*Breite*/
    oll li, li a {
        width: 100%;
    }
}

/*menü*/
#menue {
	background: white;
	overflow: hidden;
	position: fixed;
	width: 100vw;
	height: 50px;
	margin-top: 0px;
	z-index: 10;
}



/*Liststyle entfernen*/
ol {
    list-style-type:none;
    margin:0;
    padding:0;
	heigth: 400px;
	margin-left:1000px;
    	margin: 0px auto;
	float: right;
	
}
/*horizontale Ansicht*/
li {
    display:inline-block;
    float: right;
    margin-right: 1px;
	text-align: right;
}

/*style Menuelinks*/
li a {

    display:block;
    min-width:120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Montserrat-Light";
    color:#000000;
    text-decoration: none;
	z-index: 40;
transition: width 2s;
}

/*effect_hover*/

a {
  color:#000000;
  text-decoration: none;
  position: relative;
transform: translate(-3px,-3px);

}

li a:after {
  content: ''; /* content ist leer... */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #000000;
  transition: 0.6s;
  transform: scaleX(0);


}

li a:hover:after {
  width: 100%;
  transform: scaleX(1);

}

#titel{
	z-index: 10;
}




#uebermich {
	


width: 100vw;
height: 55vh;
	overflow: hidden;

}

.portfolio {
width: 100vw;
height: 1800px;
	background-color: rgba(250,250,250,1.00);
	background-size: 90vw;
	background-position: center; 
position: relative;
z-index:6;	
}
img {
	position: absolute;
	margin-left: 5%;
	margin-top: 5vh;
	height: 20vh;
	
}

/*text, linie*/

#text {
	overflow: hidden;
	position: absolute;
	font-size: 1.5em;
	color: #EEEEEE;
	height: 60px;
	width: 1200px;
	text-align: justify;
	margin-left: 10vw;
	border-left: solid 2px white;
	margin-top: 45vh;
	padding-left: 20px;
	font-family: "Montserrat-Light";
z-index: 5;
	
}



	
#headline1 {
	 
	color: white; 
	font-family:"Suranna";
	font-size: 400%; 
	position: absolute;
	padding-left:10%;
	margin-top: 13vh;
}


#parallax {
  
  background-image: url("Bilder/bildp.png");
  height: 2800px;
	width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/*kacheln*/
#elemente {
	
	left: 50%;
	display:flex;
		flex-wrap: wrap;
	position: relative;
	z-index: 4;
	width: 1230px;
	margin-top: 6%;
	margin-left: -615px;
	
}


.element1 {
  background: url("Bilder/bild8.jpg");
 
  width: 400px;
  height: 300px;
   
margin-top: 20%;
	margin-right: 15px;
	
	z-index: 1;
}

.element2 {
  background: url("Bilder/bild4.jpg");
  width: 400px;
  height: 450px;
  perspective: 1000px; 
  margin-right: 15px;
margin-top: 20%;	
	

}

.element3 {
  background: url("Bilder/bild5.jpg");
  width: 400px;
  height: 400px;
  perspective: 1000px;
	margin-top: 20%;

}

.element4 {
  background: url("Bilder/bild3.jpg");
  width: 400px;
  height: 600px;
  perspective: 1000px;
margin-top:-135px;
margin-right: 15px;

	
	

}

.element5 {
  background: url("Bilder/bild9.jpg");
  width: 400px;
  height: 350px;
  perspective: 1000px; 
margin-top: 15px;
margin-right: 15px;	
	

}
.element6 {
	background: url("Bilder/bild7.jpg");
  width: 400px;
  height: 450px;
  perspective: 1000px; 
	margin-top: -35px;	
	

}
.element7 {
	background: url("Bilder/bild2.jpg");
  width: 400px;
  height: 400px;
  perspective: 1000px; 
	margin-top: 15px;
	margin-right: 15px;
	

}

.element8 {
	background: url("Bilder/bild1.jpg");
  width: 400px;
  height: 500px;
  perspective: 1000px; 
	margin-top: -85px;	
	margin-right: 15px;
	

}

.element9 {
	background: url("Bilder/bild6.jpg");
  width: 400px;
  height: 450px;
  perspective: 1000px; 
	margin-top: -35px;	
	

}


.zurueck {
	position: absolute;
	font-size: 1.5em;
	color: white;
	text-align: left;
	margin-left: 5vw;
	margin-top: 2630px;
	font-family: "Montserrat-Light";
}

img {
	margin-top:8px;
}

@media (min-width: 850px) and (max-width: 1250px){
	
	#uebermich {

width: 100vw;
height:55vh;
	overflow: hidden;

}
	

	
	#text {
	overflow: hidden;
	position: absolute;
	font-size: 1.5em;
	color: #EEEEEE;
	height: 90px;
	width: 700px;
	text-align: left;
	margin-left:10%;
	border-left: solid 2px white;
		
	margin-top: 35vh;
	padding-right: 20px;
	font-family: "Montserrat-Light";
z-index: 5;
		
	
}
	
	img {
	position: absolute;
	margin-left: 5%;
	margin-top: 7vh;
	height: 10vh;
	
}
	


	
#parallax {
  
  background-image: url("Bilder/bildp.png");
  height: 3000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}	
	

	
	
.portfolio {
width: 100vw;
height: 2200px;
	background-color: rgb(250 250 250);
	background-size: 90vw;
	background-position: center; 
position: relative;
z-index:6;	
}	
	
	#elemente {
		position: absolute;
		overflow:hidden;
		display:flex;
		flex-direction: row;
	
	z-index: 4;
	height: 2000px;
		width:830px;
	left: 50%;
		margin-left: -415px;
}
	
	.element1 {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px; 
margin-top: 15%;
	z-index: 1;


}

	.element2 {
	
  background-color: transparent;
  width: 400px;
  height: 370px;
  perspective: 1000px; 
		margin-top: 15%;
  
	
	

}
	.element3 {
	
		
  background-color: transparent;
  width: 400px;
  height: 400px;
  perspective: 1000px;
		margin-top: -55px;
		
	
	
	

}
.element4 {
  background-color: transparent;
  width: 400px;
  height: 600px;
	margin-left: 15px;
  perspective: 1000px;
	margin-top:15px;



	
	
	

}
	.element5 {
		
  background-color: transparent;
  width: 400px;
  height: 365px;
  perspective: 1000px; 
	margin-top:-255px;	

}

	
.element6 {
	
  background-color: transparent;
  width: 400px;
  height: 395px;
  perspective: 1000px; 
	margin-top: 15px;	

}
	.element7 {
	background: url("Bilder/bild2.jpg");
  width: 400px;
  height: 400px;
  perspective: 1000px; 
	margin-top: -285px;
	margin-right: 15px;
	

}

.element8 {
	background: url("Bilder/bild1.jpg");
  width: 400px;
  height: 500px;
  perspective: 1000px; 
	margin-top: 15px;	
	margin-right: 15px;
	

}

.element9 {
	background: url("Bilder/bild6.jpg");
  width: 400px;
  height: 450px;
  perspective: 1000px; 
	margin-top: -385px;	
	

}
#headline1 {
	 
	color: white; 
	font-family:"suranna";
	font-size: 300%; 
	width: 800px;
	position: absolute;
	padding-left:10%;
	margin-top: 10vw;
}
.zurueck {
	position: absolute;
	font-size: 1.5em;
	color: white;
	text-align: left;
	margin-left: 5vw;
	margin-top: 2850px;
	font-family: "Montserrat-Light";
}
		
	
}

	

@media (min-width: 0px) and (max-width: 849px){
	
	#uebermich {
	

width: 100vw;
height: 55vh;
	overflow: hidden;

}
	
	
	
	#text {
	overflow: hidden;
	position: absolute;
	font-size: 1.2em;
	color: #EEEEEE;
	height: 75px;
	width: 300px;
	text-align: right;
	margin-left: 15%;
	border-right: solid 2px white;
		border-left: none;
	margin-top: 35vh;
	padding-right: 20px;
	font-family: "Montserrat-Light";
z-index: 5;
	
}
	
	#headline1 {
	 
	color: white; 
	font-family:"suranna";
	font-size: 300%; 
	width: 500px;
	position: absolute;
	padding-left:10%;
	margin-top: 10%;
}
	
	
	img {
	position: absolute;
	margin-left: 5%;
	margin-top: 7vh;
	height: 10vh;
	
}
	


	
#parallax {
  
  background-image: url("Bilder/bildp.png");
  height: 4900px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}	
	
	
	
.portfolio {
width: 100vw;
height: 4150px;
	background-color: rgb(250 250 250);
/*background-image: url("Element 5.png");*/
	background-size: 90vw;
	background-position: center; 
position: relative;
z-index:6;	
}	
	
	#elemente {
		position: absolute;
		overflow:hidden;
		display:flex;
		flex-direction: column;
	
	z-index: 4;
	height: 4100px;
		width:400px;
	left: 50%;
		margin-left: -200px;
}
	
	.element1 {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px; 
margin-top: 40%;
	z-index: 1;

}

	.element2 {
	
  background-color: transparent;
  width: 400px;
  height: 450px;
  perspective: 1000px; 
		margin-top: 15px;
  
	
	

}
	.element3 {
	
		
  background-color: transparent;
  width: 400px;
  height: 400px;
  perspective: 1000px;
		margin-top: 15px;
		
	
	
	

}
.element4 {
  background-color: transparent;
  width: 400px;
  height: 500px;
  perspective: 1000px;
	margin-top:15px;



	
	
	

}
	.element5 {
		
  background-color: transparent;
  width: 400px;
  height: 350px;
  perspective: 1000px; 
	margin-top: 15px;

	
	
	

}

	
.element6 {
	
  background-color: transparent;
  width: 400px;
  height: 400px;
  perspective: 1000px; 
	margin-top: 15px;
	
	
	
	

}
	
		.element7 {
	background: url("Bilder/bild2.jpg");
  width: 400px;
  height: 400px;
  perspective: 1000px; 
	margin-top: 15px;
	margin-right: 15px;
	

}

.element8 {
	background: url("Bilder/bild1.jpg");
  width: 400px;
  height: 500px;
  perspective: 1000px; 
	margin-top: 15px;	
	margin-right: 15px;
	

}

.element9 {
	background: url("Bilder/bild6.jpg");
  width: 400px;
  height: 450px;
  perspective: 1000px; 
	margin-top: 15px;	
	

}
	
	.zurueck {
	position: absolute;
	font-size: 1.5em;
	color: white;
	text-align: left;
	margin-left: 5vw;
	margin-top: 4770px;
	font-family: "Montserrat-Light";
}

		
}