@font-face{
font-family: 'Quicksand';
src: url(./../fonts/Quicksand.ttf);
}

body{
//background-image: url("../images/IntroPicBlur.png");
background-attachment: fixed;
background-position: top center;
font-weight: bolder;
}

#footer{
background-color: #111111;
width: 100%;
height: 45px;
clear: both;
Color: #aaaaaa;
padding-top: 10px;
text-align: center;
}

.header{
width: 100%;
margin-left: auto;
margin-right: auto;
height: 650px;
margin-top: 50px;
margin-bottom: -40px;
overflow: hidden;
}

.header h1{
padding-top: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
margin-bottom: auto;
}

.header p{
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

#about{
width: 100%;
height: 650px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
background-color: #fafafa;
padding-top: 30px;
color: #212121;
}


#about p{
margin-left: 20% ;
margin-right: 20% ;
}

#currvit{
width: 100%;
height: auto;
min-height: 550px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
background-color: #BBDEFB;
padding-top: 30px;
color: #212121;
}


#currvit p{
margin-left: 20% ;
margin-right: 20% ;
}

#projects {
width: 100%;
margin-left: auto ;
margin-right: auto ;
//height: auto;
min-height: 550px;
background-color: #fafafa;
text-align: center;
color: #212121;
padding-top: 1%;
padding-bottom: 0%;
overflow:auto;
}

#blog {
width: 100%;
height: auto;
min-height:30px;
margin-left: auto ;
margin-right: auto ;
//height: 550px;
text-align: center;
background-color: #BBDEFB;
color: #212121;
//margin-bottom: -10%;
size: 15px;
padding-top: 1%;
}

#blogcontent {
width: 60%;
min-height:30px;
text-align: left;
margin-left: 20%;
margin-right: 20%;
background-color: #BBDEFB;
color: #212121;
}

#blogcontentContainer {
margin-top: -3%;
padding-bottom: 20px;
}

#profiles {
width: 100%;
margin-left: auto ;
margin-right: auto ;
height: auto;
min-height: 550px;
text-align: center;
background-color: #bbdefb;
color: #212121;
padding-top: 1%;
size: 15px;
}

#projects p{
margin-bottom: 30px;
height: auto;
}

#itemleft{
width:35%;
float: left;
margin-left: 10% ;
margin-right: auto ;
}
#itemright{
width:35%;
float: right;
margin-left: auto ;
margin-right: 10% ;
}
#itemmid{
width:100%;
float: left;
margin-left: auto ;
margin-right: 10% ;
}

#cvitem{
width:50%;
padding-bottom: 5%;
margin-left: auto ;
margin-right: auto ;
}

#itemleftcv{
width:30%;
float: left;
text-align:right;
margin-left: 10% ;
margin-right: auto ;
}

#itemleftcv img{
float: right;
margin-right: -35%;
width: 300%;
height: 5px;
}

#itemrightcv img{
//height: 10%;
margin-left: -35%;
width: 300%;
height: 5px;
}


#itemrightcv{
width:30%;
float: right;
text-align:left;
margin-left: auto ;
margin-right: 10% ;
}
#itemmidcv{
width:9%;
margin-left: auto ;
margin-right: auto ;
text-align:center;
background-image: url(./../images/bgCvitae.png);
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
}

#itemmidcv p{
	padding-top: 40px;
	margin-left: 15px;
	font-size: 12px;
	word-break: break-all;
}

#itemrightcv p{
padding-top: 10px;
}

#itemleftcv p{
	padding-top: 10px;
}

ul
{
list-style-type: none;
}

#contact {
width: 100%;
margin-left: auto ;
margin-right: auto ;
height: 550px;
background-color: #fafafa;
text-align: center;
color: #212121;
padding-top: 1%;
}


#introduction img {
max-width: 25%;
height: auto;
margin-bottom: 20px;
border-width: 0px;
border-style: solid;
border-radius: 100em;
border-color: #FFFFFF;
}

#introduction{
width: 100%;
height: 550px;
margin-right: auto ;
}

#border{
max-width: 5%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
margin-top: -5px;
border-bottom-style: solid;
border-bottom-width: 5px;
border-color: #2196F3;
}

#bordertop{
max-width: 5%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: -15px;
border-bottom-style: solid;
border-bottom-width: 5px;
border-color: #2196F3;
}


@media screen and (max-width:1300px){
 #navi-top-left{
   width: 55%;
   height: 88px;
   background-image: url(./../images/PRIcongNavi.png);
   float: left;
   margin-left: 1%;
   margin-top: -88px;
   background-repeat: no-repeat;
 }

#navi-top ul{
	margin: 0px;
	padding: 0px;
	margin-top: 30px;
	float: right;
	padding-right: 5%;
 }

 #navi-top{
	width: 45%;
	height: 88px;
	float: right;
	margin-top: -88px;
 }
}

@media screen and (max-width:1024px){
 #header3 {
  width: 100%;
 }

 #header2 {
  width: 50%;
 }

 #header1 {
  width: 50%;
 }

 .nav{
	margin: 0px;
	padding: 0px;
	margin-top: 30px;
	float: right;
	padding-right: 5%;
 }

 #navi-top-left{
   width: 50%;
   height: 88px;
   background-image: url(./../images/PRIcongNavismaller.png);
   float: left;
   margin-left: 1%;
   margin-top: -88px;
   background-repeat: no-repeat;
 }

 #navi-top{
	width: 50%;
	height: 88px;
	float: right;
	margin-top: -88px;
 }

 #content{
  width: 100%;
  height: 550px;
  background-color: #08D6A0;
  float: left;
  color: #FFFFFF;
 }

 #information{
  width: 100%;
  height: 550px;
  float: right;
  background-color: #08D6A0;
  color: #FFFFFF;
 }
}

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

   #navi-top{
	width: 87%;
	float: right;
	margin-right: -10px;
	margin-top: -105px;
   }

   #navi{
	  background-image: url(./../images/backgroundnavi.png);
	  padding-top: 75px;
	  position: fixed;
	  top: 0px;
	  right: 8;
	  left: 8;
	  margin-left: auto;
	  margin-right: auto;
   }

 #navi-top-left{
   width: 13%;
   height: 88px;
   background-image: url(./../images/PRIcongNavismallest.png);
   float: left;
   margin-left: 2%;
   margin-top: -50px;
   background-repeat: no-repeat;
 }

 .nav li a{
 height: 35px;
width: 120px;
display: block;
text-decoration: none;
color: #ADF5B4;
text-align: center;
font-size: 90%;
}

 #header3 {
  width: 100%;
 }

 #header2{
   width: 50%;
 }

 #header1{
   width: 50%;
 }
}
@media screen and (min-width:560px){
.nav{
	display:block !important;
}

#navi-top-left{
	display:block !important;
}
}

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

body{
	font-size:80%;
}
#navi-top-left{
	display:block;
   width: 15%;
   height: 44px;
   background-image: url(./../images/PRIcongNavismallest.png);
   float: left;
   margin-left: 2%;
   margin-top: -47px;
   background-repeat: no-repeat;
 }
   #navi-top{
	width: 80%;
	float: left;
	margin-left: -10%;
   // margin-top: -105px;
   }



   #navi{
	  background-image: url(./../images/backgroundnavi.png);
	  padding-top: 48px;
	  position: fixed;
	  top: 0px;
	  right: 8px;
	  left: 8px;
	  margin-left: auto;
	  margin-right: auto;
   }

	#navi-top ul.nav li a{
	 //height: 1000px;
	 width: 80px;
	 padding-left: 10%;
	 //text-decoration: none;
	//color: #ADF5B4;
	// text-align: left;
	 /*font-size: 50%;*/
	// display: none;
	//float: left;
	}
	
	.nav{
	 //   width: 50%;
		display:none;
	}
	
	#navi-top ul.nav li{
		width: 15%;
		float: left;
		padding-top: 30px;
		padding-left: 10%;
		//display: block;
		//text-align: left;
	}
	
	#menubar{
		width: 20%;
		height: 44px;
		float: right;
		display: block;
		margin-right: 15px;
		margin-top: -50px;
	}
	
	#menubar li{
		list-style: none;
	}
	
	#menubar li a.menubutton{
		padding-top: 15%;
	}
	
	#header{
		margin-top: 44px;
	}

 #header3 {
  width: 100%;
 }

 #header2{
   width: 100%;
 }

 #header1{
   width: 100%;
 }
 
 @media screen and (max-width:400px){
	#navi-top ul.nav li{
		font-size: 110%;
		font-weight: bolder;
		//display: block;
		//text-align: left;
	}
 }
}