@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,700italic,900);
@import url(http://fonts.googleapis.com/css?family=Ubuntu:500italic,500,400,300);



body{
background-color: rgba(255,255,255,1);
margin: 0px;
padding: 0px;
overflow-y:scroll;
}

body a{
	text-decoration: none;
   	outline: none;
}



.Wrapper{
	position: absolute;
	width: 900px;
	height: auto;
	margin-left: -450px;
	left: 50%;
}








/*     ----------     HIER BEGINNT DER HEADER BEREICH     -----------    */






.Header{
	position: relative;
	width: 100%;
	height: 110px;
	background-color: rgb(255,255,255);
	padding-top: 20px;
	margin-top: 20px;
	/*margin-top: -8px;*/
	border-style: solid;
	border-width: 1px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-color: rgb(192,192,192);
	text-decoration: none;
}

#name{
	position: relative;
	float: left;
	width: 220px;
	text-align: left;
	color: black;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	font-style: italic;
	font-size: 35px;
	/*padding-left: 10px;*/
	margin-right: -10px;
	letter-spacing: 1px;
	word-spacing: 2px;
}



#projekte{
	position: relative;
	margin-left: 385px;
	padding-left: 8px;
	padding-top: 2px;
	float: left;
	width: 100px;
	text-align: left;
	color: black;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 14px;

}

#uli{
	position: relative;
	float: left;
	padding-top: 2px;
	margin-left: -5px;
	width: 100px;
	text-align: left;
	color: black;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 14px;
}

#impressum{
	position: relative;
	float: left;
	padding-top: 2px;
	margin-left: -5px;
	width: 100px;
	text-align: left;
	color: black;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 14px;
}

.overlayProjekte {
	position: absolute;
	background-color: rgba(190,190,190,0.3);
	width: 100px;
	height: 20px;
	top: 20;
	left: 579;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-ms-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-transform: skew(-20deg);
	z-index: 5;
}

.overlayProjekte:hover {
	background-color: rgba(130,130,130,0.1);
}



.overlayUli {
	position: absolute;
	background-color: rgba(190,190,190,0.3);
	width: 100px;
	height: 20px;
	top: 20;
	left: 679;
	border-right-style: solid;
	border-left-style: solid;
	border-right-width: 1px;
	border-left-width: 1px;
	border-color: rgb(0,0,0);
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-ms-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-transform: skew(-20deg);
	z-index: 5;
}

.overlayUli:hover {
	background-color: rgba(130,130,130,0.1);
}



.overlayImpressum {
	position: absolute;
	background-color: rgba(190,190,190,0.3);
	width: 100px;
	height: 20px;
	top: 20;
	left: 779;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px; 
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-ms-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-transform: skew(-20deg);
	z-index: 5;
}

.overlayImpressum:hover {
	background-color: rgba(130,130,130,0.1);
}


#selected {
	background-color: rgba(190,190,190,0);
}

#kommentar{
	width: 250px;
	height: auto;
	position: absolute;
	top: 69px;
	left: 85px;
	color: rgb(192,192,192);
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 20px;
}

#flughilfe{
	position: absolute;
	height: 30px;
	width: 30px;
	left: -30px;
	z-index: 1;
}

#flyer{
	position: relative;
	overflow: visible;
	animation:myfirst 2s;
	-webkit-animation:myfirst 2s; /* Safari and Chrome */
}

@keyframes myfirst
{
0%   {left:-1000px; top:0px; color: rgb(0,0,0);}
100% {left:0px; top:0px; color: rgb(0,0,0);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:-1000px; top:0px; color: rgb(0,0,0);}
100% {left:0px; top:0px; color: rgb(0,0,0);}
}






/*     ----------     HIER BEGINNT DER NAVIGATION BEREICH     -----------    */






.Navigation{
	position: relative;
	width: 100%;
	height: 720px;
	background-color: rgb(255,255,255);
	margin-top: 20px;
	margin-left: 25px;
}


.Projekt{
	position: relative;
	text-align: left;
	text-decoration: none;
	float: left;
	color: black;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
	font-size: 15px;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
	border-color: rgb(255,255,255);
}

.Projekt:hover{
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: rgb(192,192,192);    /* später 192,192,192 */
}

#projekt0{
	position: absolute;
	width: 850px;
	height: 200px;
	/*background-color: rgb(255,0,0);*/
	/*float: left;*/

}

#projekt0 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}


#projekt0:hover div{
	bottom: 0px;
}

#projekt1{
	position: absolute;
	width: 250px;
	height: 200px;
	top: 250px;
	/*background-color: rgb(255,0,0);*/
	/*float: left;*/

}

#projekt1 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}


#projekt1:hover div{
	bottom: 0px;
}

#projekt2{
	position: absolute;
	width: 250px;
	height: 200px;
	left: 250px;
	top: 250px;
	background-color: rgb(192,192,192);
	/*float: left;*/
	margin-left: 50px;

}

#projekt2 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}

#projekt2:hover div{
	bottom: 0px;
}

#projekt3{
	position: absolute;
	width: 250px;
	height: 200px;
	left: 550px;
	top: 250px;
	background-color: rgb(192,192,192);
	/*float: left;*/
	margin-left: 50px;

}

#projekt3 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}

#projekt3:hover div{
	bottom: 0px;
}

#projekt4{
	width: 250px;
	height: 200px;
	background-color: rgb(192,192,192);
	position: absolute;
	top: 500px;
	/*float: left;*/
	/*margin-left: 50px;*/

}

#projekt4 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}

#projekt4:hover div{
	bottom: 0px;
}

#projekt5{
	width: 250px;
	height: 200px;
	background-color: rgb(0,255,255);
	position: absolute;
	top: 500px;
	left: 250px;
	/*float: left;*/
	margin-left: 50px;

}

#projekt5 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}

#projekt5:hover div{
	bottom: 0px;
}

#projekt6{
	width: 250px;
	height: 200px;
	background-color: rgb(192,192,192);
	position: absolute;
	top: 500px;
	left: 550px;
	/*float: left;*/
	margin-left: 50px;

}

#projekt6 div{
	padding-top: 5px;
	height: 40px;
	width: 100%;
	position: absolute;
	bottom: -45px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.8);
}

#projekt6:hover div{
	bottom: 0px;
}

#projekt7{
	width: 250px;
	height: 200px;
	background-color: rgb(192,192,192);
	position: absolute;
	top: 500px;
	/*float: left;*/
	/*margin-left: 50px;*/

}

#projekt7 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.7);
}

#projekt7:hover div{
	bottom: 0px;
}

#projekt8{
	width: 250px;
	height: 200px;
	background-color: rgb(0,255,255);
	position: absolute;
	top: 500px;
	left: 250px;
	/*float: left;*/
	margin-left: 50px;

}

#projekt8 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.7);
}

#projekt8:hover div{
	bottom: 0px;
}

#projekt9{
	width: 250px;
	height: 200px;
	background-color: rgb(192,192,192);
	position: absolute;
	top: 500px;
	left: 550px;
	/*float: left;*/
	margin-left: 50px;

}

#projekt9 div{
	padding-top: 5px;
	height: 25px;
	width: 100%;
	position: absolute;
	bottom: -30px;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
	background-color: rgba(192,192,192,0.7);
}

#projekt9:hover div{
	bottom: 0px;
}





/*     ----------     HIER BEGINNT DER FOOTER BEREICH     -----------    */






.Footer {
	border-style: solid;
	border-width: 1px;
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-color: rgb(192,192,192);
	width: 100%;
	height: 113px;
	float: left;
}

#copyright {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 13px;
	margin-top: 23px;
	text-decoration: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}




/*     ----------     Impressum  / CV   -----------    */






.Disclaimer{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	height: auto;
	width: 60%;
	line-height: 140%;
	float: left;
}

.Disclaimer a{
	color: rgb(0,0,0);
}

.Disclaimer a:hover{
	color: rgb(192,192,192);
}

.Disclaimer2{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	height: auto;
	width: auto;
	line-height: 140%;
	float: right;
	margin-right: 95px;
}

.Disclaimer2 a{
	text-decoration: none;
	color: rgb(0,0,0);
}

.CV-Bild{
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	height: auto;
	width: auto;
	/*line-height: 140%;*/
	float: right;
	/*margin-right: 95px;*/
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	text-decoration: none;
	line-height: 140%;
}

.CV-Bild a{
	text-decoration: none;
	color: rgb(0,0,0);
}



/*     ----------     Projekte     -----------    */



.Content {
	width: 100%;
	height: 1270px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	text-decoration: none;
	margin-top: 20px;
	/*margin-bottom: 20px;*/
}

.ContentSmall {
	width: 100%;
	height: 960px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	text-decoration: none;
	margin-top: 20px;
	/*margin-bottom: 20px;*/
}

.ContentSpezial {
	width: 100%;
	height: 1198px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	text-decoration: none;
	margin-top: 20px;
	/*margin-bottom: 20px;*/
}

.ProjektName{
	color: rgb(0,0,0);
	/*background-color: rgb(70,255,201);*/
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	width: 350px;
	height: 25px;
	position: absolute;
	line-height: 120%;
	float: left;
	/*text-decoration: underline;*/
	/*text-align: center;*/
}

.Beschreibung1{
	color: rgb(0,0,0);
	/*background-color: rgb(255,0,0);*/
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	width: 75px;
	height: auto;
	line-height: 130%;
	position: absolute;
	float: left;
	margin-top: 40px;
}

#beschreibungConsight1{
	color: rgb(0,0,0);
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	width: 350px;
	height: auto;
	line-height: 130%;
	position: absolute;
	float: left;
	margin-top: 40px;

}

.Beschreibung2{
	color: rgba(0,0,0,0.6);
	/*background-color: rgb(0,255,0);*/
	width: 275px;
	height: auto;
	line-height: 130%;
	position: absolute;
	float: left;
	left: 75px;
	margin-top: 40px;
}

.Video{
	/*position: absolute;*/
	float: right;
	
}

.Text{
	color: rgb(0,0,0);
	/*background-color: rgb(0,255,255);*/
	width: 320px;
	margin-right: 30px;
	height: auto;
	position: absolute;
	float: left;
	line-height: 120%;
	/*clear: left;*/
	/*top: 471px;*/
	margin-top: 330px;
	
}

.Text a{
	color: rgb(0,0,0);
}

.Text a:hover{
	color: rgb(192,192,192);
	
}
.Bild1{
	/*background-color: rgb(255,255,0);*/
	width: 533px;
	height: 300px;
	position: absolute;
	margin-left: 367px;
	margin-top: 330px;
}

.Bild2{
	/*background-color: rgb(255,0,255);*/
	width: 533px;
	height: 300px;
	position: absolute;
	margin-left: 367px;
	margin-top: 640px;
	text-align: center;
}

.Bild3{
	/*background-color: rgb(255,20,140);*/
	width: 533px;
	height: 300px;
	position: absolute;
	margin-left: 367px;
	margin-top: 950px;
	text-align: center;
}






/*---------------------- TO DO -----------------------*/

/*
	filter:blur() auf navigation bilder anwenden ????


*/