.grid {width:90%;}
.grid-item { width:20%;}
.grid-stuff { width:90%; text-align:left; float:middle;}



body {

    font-family: "Romain";
    margin: 0;
    background-color:#fff;
	color:#222;	
  	-webkit-font-smoothing:antialiased;	
}

.portrait{
    position:relative;
	vertical-align:bottom;
	z-index: 2;
}

.portrait-2 {
	display: none;	
}

@font-face {
    font-family: "Romain";
    src: url("LectorFSL-Regular.otf");
}

@font-face {
    font-family: "Romain";
    src: url("LectorFSL-Italic.otf");
    font-style: italic;
}

.masonry-layout {
	
	margin: 0;
    padding-left: 5%;
 	padding-right: 5%;
  	column-gap: 1.5em;
  	-webkit-column-gap: 1.5em;
 
}

.masonry-layout__panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 3%;
}



#content {
	display: table-cell;
	padding-left:15%;
	padding-right:15%;
	vertical-align:middle;
}


section {
  width: 100%;
  padding: 0;
  display: table;
  margin: 0;
  background-color:none;		
  max-width: none;
  height: 30vh;	
  z-index:1000;
  
}
	

.intro {
    width: 100%;	
  	height: 60vh;
  	background-color:#fff;
}

.outro {
  	width: 100%;	
  	height: 10vh;
  	background-color:#fff;	
	/*box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .1);*/
}


.nexty {
  	width: 100%;	
	height: 10vh;
  	background-color:#fff;	
}

.bioy {
  width: 100%;	
  height: 10vh;
  background-color:#fcfcfc;
  /*box-shadow: inset 0 10px 6px -6px rgba(0, 0, 0, .1);*/
 
}

.photospot {
  width: 100%;	
  height: 10vh;
  background-color:none;	
  /*box-shadow: inset 0 10px 6px -6px rgba(0, 0, 0, .1);*/
}



footer {
  padding: 1% 2%;
  text-align:center;
  color: white;
  background-color:rgba(255,255,255,.2);
  
}

hr {
	border: .5px solid rgba(0,0,0,.1);
}


h2	{
	font-family: "Romain";
  	font-size:4vw; 
	line-height:4.5vw;
	font-weight:normal;
	color:#222;	
}

h3 {
	font-family: "Romain";
  	font-size:15px; 
	line-height:18px;
	font-weight:normal;
}


h3 a {
  	font-style:none;
	border-bottom: none;
	}

h3 a:hover {
	cursor:pointer;
  	background-color:yellow;
 	border-bottom: none;
	background-size:100% auto;
	display:inline-block;
	width:100%;
	z-index:1;
	}
	
	
h4 {
	font-family: "Romain";
	font-size:20px; 
	line-height:25px;
	text-align:left;
	font-weight:normal;
	}


h4 a {
	font-style:none;
	border-bottom: .5px solid rgba(0,0,0,.1);
}
	

h4 a:hover {
	 background-color:yellow;
	 border-bottom: none;
		}

a {
  	font-weight: normal;
  	position: relative;
	color: #333;
 	text-decoration:none;
}

footer {
  padding: 1% 2%;
  text-align:center;
  background-color:none;
  color: white;
  background-color:rgba(255,255,255,.2);
  	
 
}






@media only screen and (max-width:650px) and (min-device-width :700px), 
only screen and (max-device-width:480px) and (orientation:portrait), 
only screen and (max-device-width:480px) and (orientation:landscape) {

	.grid 			{width:90%;}
	.grid-item 		{ width:100%;}
	.grid-stuff 	{ width:95%; text-align:left; float:left;}
	
	#content 		{padding-left:7%;padding-right:7%;}	
	#content-2 		{ display: table-cell; padding-left:10%; padding-right:10%; vertical-align:middle; }
	
	
	.photoz 		{ width: 100%; height: 60vh; }
	.p-div 			{ width:90%; float:right; padding-right:5%; }
	.photospot 		{ width: 90%; padding-left:5%; height: 20vh; }
	
	.intro 			{height: 90vh; background-color:#fff; }
	
	
	.bioy {
	  height: 90vh;
	}
	
	.nexty {
	  height: 10vh;
	}
	
	h2 				{ font-size:6.5vw; line-height:8vw; text-align:left; font-weight:normal; }
	h2 a 			{ font-style:none; border-bottom: .5px solid rgba(0,0,0,.1);}
	h2 a:hover 		{ background-color:yellow; border-bottom: none; }

	h3 				{ font-size:18px; line-height:23px; font-weight: normal;}
	
 .touch h3 a:hover { text-decoration: none; }
		
	h4 {
	  	font-size:23px; 
		line-height:28px;
		font-weight:normal;
		text-align:center
	 
	}
	

}


@media only screen and (min-width: 600px) {
	
		.grid-item 		{ width:100%;}
		
		.intro 			{ width: 100%; height: 100vh; background-color:#fff;}
		
		.p-div 			{ width:50%; padding-right:7.5%; }
		.portrait		{ position:relative; z-index: 2; width:100%; box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, .4);}
		
		.photospot 		{ width: 100%; height: 20vh; }
		.photoz 		{ width: 100%; height: 80vh; }

		#content 		{ padding-left:5%; padding-right:5%;}
		#content-2 		{ display: table-cell; padding-left:5%; padding-right:5%; vertical-align:middle; }
		
		h4 {font-size:25px; line-height:30px;}
		
		h2 				{ font-size:2.25vw; line-height:3vw; text-align:left; font-weight:normal; }
		h2 a 			{ font-style:none; border-bottom: .5px solid rgba(0,0,0,.1);}
		h2 a:hover 		{ background-color:yellow; border-bottom: none; }
	   
	}



   	@media only screen and (min-width: 700px) {
	
		.grid-item { width:25%;}
		
		.p-div 			{ width:50%; float:right; padding-right:7.5%; }
		.portrait		{ position:relative; z-index: 2; width:100%; box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, .4);}
		
		.photospot 		{ width: 100%; height: 20vh; }
		.photoz 		{ width: 100%; height: 80vh; }
		
		#content 		{ padding-left:5%; padding-right:5%;}
		#content-2 		{ display: table-cell; padding-left:5%; padding-right:5%; vertical-align:middle; }
		
		h4 {font-size:25px; line-height:30px;}
		
		
		h2 a 			{ font-style:none; border-bottom: .5px solid rgba(0,0,0,.1);}
		h2 a:hover 		{ background-color:yellow; border-bottom: none; }
	   
	}

	@media only screen and (min-width: 900px) {
		
		.grid-item { width:20%;}
		
		.intro 			{ height: 90vh; background-color:#fff; }
		
		.p-div 			{ width:40%; float:right; padding-right:7.5%; }
		.portrait		{ position:relative; z-index: 2; width:100%; box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, .4);}
		
		.photospot 		{ width: 100%; height: 20vh; }
		.photoz 		{ width: 100%; height: 80vh; }

		#content 		{ padding-left:10%; padding-right:10%;}
		#content-2 		{ display: table-cell; padding-left:10%; padding-right:10%; vertical-align:middle; }
		
		h4 {font-size:25px; line-height:30px;}
		
	
		h2 a 			{ font-style:none; border-bottom: .5px solid rgba(0,0,0,.1);}
		h2 a:hover 		{ background-color:yellow; border-bottom: none; }
	   
	}