@charset "UTF-8";
/* CSS Document */

#mqnav {
	visibility: hidden;
}

#drop {
	visibility: hidden;
}

#mobbio {
	visibility: hidden;
}

#nav {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width: 20%;
	min-width: 200px;
	min-height: 150px;
	height: 75%;
	float: left;
	margin: auto;
 	position: fixed;
  	top: 0; bottom: 0; 
	background-color: #FFFFFF;
	padding-top: 0px;
	font-family: 'Roboto Condensed', sans-serif;
	padding-left: 4%;
	padding-right: 5%;

}

#content {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	max-width: 85%;
	height: 75%;
	overflow:hidden;
	margin: auto;
  	position: absolute;
  	top: 0; left: 18%; bottom: 0; right: 0;
	background-color: 000000;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #000000;
	font-family: 'Roboto Condensed', sans-serif;
	
}

h1 {
	font-weight: 400;
	font-size: 24px;
	margin: 0;
	color: #4D9AB3;
}

h2 {
	font-weight: 300;
	font-size: 14px;
	line-height: 200%;
	
}
.photos {
	margin-right: 10px;
}

#inner {
	overflow-y: hidden;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

img {
	padding-right: 10px;
}

a:link {
	text-decoration: none;
	color: #4A4A4A;
}
a:visited {
	text-decoration: none;
	color: #4A4A4A;
}
a:hover {
	text-decoration: none;
	color: #4D9AB3;
}
a:active {
	text-decoration: none;
	color: #4D9AB3;
}

p {
	margin-top: 43px;
	padding: 0;
}

#bio{
	font-weight: 300;
	font-size: 14px;
	width: 70%;
	padding-left: 10px;
}

#descr{
	width: 800px !important;
 	height:100%; /* CHANGE */
	overflow-y:hidden;
  	white-space: nowrap;
  	line-height: 0;
 	font-size: 12px;
}	

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

  
#drop {
	visibility:visible;
	font-size: 36px;
	margin: auto;
	padding-top: 10px;	
	padding-left: 10px;
	height: 55px;
}

#mqnav {
	   background-color: #FFFFFF;
		width: 100%;
		height: 30%;
		position: fixed;
  		top: 10px; bottom: 0; 
		margin: 0;		
		float: left;
		margin: 0;
		padding-left: 10px;
		padding-right: 20%;
		visibility:visible;
		padding-top: 0;
}

h3 {
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	padding: 0;
	margin: 0;
}

	
h2 {
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	padding: 0;
	margin: 0;
}
	


p {
	margin-top: 0;
	padding:0px;
	font-weight: 300;
}
	
#nav { 
		visibility: hidden;
       background-color: #FFFFFF;
		width: 100%;
		height: 35%;
		min-height: 280px;
		position: fixed;
  		top: 0; bottom: 0; 
		margin: 0;		
		float: left;
		margin: 0;
		padding-top: 10px;	
		padding-left: 40%;
		padding-right: 25%;
		
}
	
/*#content {
		max-width: 100%;
		margin-top: auto;
		margin-left: 0;
		position: absolute;
  		top: 280px; bottom: 0; left: 0; right: 0;
		height: auto;	
		float:left;
} */

#content {
		max-width: 100%;
		margin-top: auto;
		margin-left: 0;
		position: fixed;
  		top: 100px; bottom: 0; left: 0; right: 0;
		height: 50%;	
		float:left;
}

#inner {
	overflow: scroll;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#img {
	max-width: 100%;
	height: auto;
	margin: 0;
}

/*p {
	margin-top: 43px;
	padding-left: 10px;
	line-height: 125%;
}
*/
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
 
#content {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	max-width: 85%;
	height: 75%;
	overflow:hidden;
	margin: auto;
  	position: absolute;
  	top: 0; left: 25%; bottom: 0; right: 0;
	background-color: 000000;
}
  }