@font-face {
    font-family: 'Nexa Light';
    font-style: normal;
    font-weight: normal;
    src: local('Nexa Light'), url('NexaLight.woff') format('woff');
}

body {
  padding: 1vw;
}
#nav {
  max-width: 12%;
  height: 100%;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top, left: 0;
  float: left;
}
#name{
	margin-bottom: 1vw;
}
#menu a:link, #menu a:visited{
	display: block;
	font-family: 'Nexa Light';
	font-size: 1.5vw;
	color: black;
	text-decoration: none;
	margin-bottom: .5em;
	margin-top: .5em;
	text-transform: uppercase;
}
#menu a.select{
	text-decoration: underline;
}
#menu a:hover, #nav a:active{
  text-decoration: underline;
}
#logo img, #content img{
	width: 100%;
	padding-bottom: .75vw;
	float: left;
}
#content {
	width: 86%;
	height: 100%;
	display: inline-block;
	float: left;
	position: relative;
	margin-left: 1.2vw;
	overflow: hidden;
}
#slides{
	height: 40vw;
	width: 100%;
}
#slides img{
	height: 100%;
	max-height: 1500px;
	width: auto;
}
#sliders{
	display: block;
	left: 0;
	width: 10%;
}
#slide-left, #slide-right{
	font-family: 'Nexa Light';
	font-size: 3vw;
	float: left;
	margin-left: 1vw;
	margin-right: 1vw;
}
#slide-left:hover, #slide-right:hover{
  cursor: pointer;
  color: #999E37;
}
#slide-left{
	left: 0; 
}
#slide-right{ 
	right: 0; 
}
#text{
	width: 40%;
	font-family: 'Nexa Light';
	text-align: center;
	font-size: 1.25em;
	float: left;
	padding: 2em;
}
#text a:link{
	color: black;
	text-decoration: none;
}
#text a:hover, #text a:active{
	color: black;
	text-decoration: underline;
}
#headline{
	font-size: 2em;
}
img.me{
	max-width: 40%;
	float:left;
	padding-left: 2em;
}
@media only screen and (max-width: 600px),
(orientation: portrait){
  #nav{
  	max-width: 100%;
  	max-height: 10%;
  	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top, left: 0;
  	float: left;
}
  #menu a:link, #menu a:visited{
	display: inline-block;
	font-size: 2.7vw;
	color: black;
	margin-top: .75em;
	text-transform: uppercase;
	margin-left: .27em;
}
  #menu{
	margin-left: 10%; 
	text-align: right;
	display: flex;
    justify-content: space-between;
}
  #logo{
	max-width: 20%;
	float: left;
	display: inline;
}
  #logo img{
	max-width: 47%;
	float:left;
	bottom: 0;
	padding-bottom: 0;
	vertical-align: baseline;
	display: inline;
}
  #content{
	float: left;
	display: block;
	position: relative;
	margin-top: 2%;
	margin-left: 0;
	width: 100%;
	text-align: center;
}
  #content img{
	max-width: 100%;
	display: inline-block;
}
  #slides{
	width: 100%;
	display: inline-block;
	text-align: center;
	display: flex;
    justify-content: center;
}
  #sliders{
	display: inline-block;
	padding-top: 4.75em;
}
  #slides img{
	height: 120%;
	max-height: 1500px;
	width: auto;
	display: inline-block;
}
  #slide-left, #slide-right{
	font-family: 'Nexa Light';
	font-size: 5vw;
}
  #text{
	width: 100%;
	text-align: center;
	display: block;
	padding: .2em;
	margin-right: 2em;
}
  img.me{
	float:left;
	padding: .2em;
}
}