html,body,nav
{
	margin:0;
	padding:0;	
	font-size: 4vmax; 
	color:#F8F8F8;
	background:rgba(90, 90, 90,1);
	overflow:auto;
}

body
{
	background:rgba(55, 55, 55,1);
    -webkit-text-size-adjust: 100%;
}

nav
{
	top:0px;
	width:100%;
	background:rgba(55, 55, 55,1);
	position: fixed;
	height:2em;
	display: table;
	z-index:2;
}

nav input
{
	display:block;
	position: absolute;
	cursor: pointer;
	top: -9999px;
	left: -9999px;
	z-index: 2; /* and place it over the hamburger */
	-webkit-backface-visibility: hidden;
	-webkit-touch-callout: none;
}

nav img:hover, label:hover, #footer a:hover, #footer img:hover
{
    -webkit-filter: brightness(70%);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

.menu
{
	position:fixed;
	padding: 0.5em;
	padding-top:2em;
	padding-bottom:.1em;
	top:-1em;
	background-color:rgba(215,215,215,1);
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	z-index:-1;

	transform-origin: 0% 0%;
	transform: translate(-100%, 0%);
	transition: transform 0.6s cubic-bezier(0.77,0.2,0.05,1.0);
	overflow-y:hidden;
	border-radius:0 0 0 0;
}

.menu li
{
	padding: .5em 0;
	font-size: .7em;
}

.menu a
{
	text-decoration: none;
	color: #232323;
	transition: color 0.3s ease;
}

.menu a:hover
{
	color: #981E32;
}

.menu *
{
	pointer-events: none;
}

#burgerBox
{
	display: table-cell;
	position:relative;
	height:100%;
	width:2em;
	vertical-align:middle; 
	background:rgba(55, 55, 55,1);
}

nav label
{
	display:block;
	position:relative;
	height:60%;
	width:40%;
	margin:auto;
}

nav input:checked ~ #burgerBox .hamburger
{
	height:0;
	min-height:0;
}

nav input:checked ~ #burgerBox .hamburger:before
{
    top:0;
    height:.25em;
	transform: rotate(45deg)
}

nav input:checked ~ #burgerBox .hamburger:after
{
    top:0;
    height:.25em;
	transform: rotate(-45deg)
}

nav input:checked ~ .menu
{
	transform: scale(1.0, 1.0);
	opacity: 1;
}

.hamburger 
{ 
	position:absolute;
	top:45%;
	font-size:.3em;
	background: #F5F5F5;
	height: .25em;
	width: 100%;
	transition: all 100ms ease-in-out;
}

.hamburger:before 
{
	background: #F5F5F5;
	content: '';
	position: absolute;
	transform: translateY(-.8em);
	height: 0.25em;
	width: 100%;
	transition: all 200ms ease-in-out;
}

.hamburger:after 
{
	background: #F5F5F5;
	content: '';
	position: absolute;
	left: 0;
	transform: translateY(.8em);
	width: 100%;
	height: 0.25em;
	transition: all 200ms ease-in-out;
}
	
#name
{	
	position:relative;
	color:rgba(248,248,248,1);
	background:rgba(55, 55, 55,1);
	overflow:hidden;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-size:.8em;
	height:100%;
	display: table-cell;
	text-align:center; vertical-align:middle; 
	padding-right:.3em;
}

#email
{
	position:relative;
	background:rgba(55, 55, 55,1);
    height:100%;
    display: table-cell;
	vertical-align:middle;
	width:1.3em;
}

#email img
{
	width:.auto;
	height:.65em;
	float:right;
	margin-right:.5em;
}

.section
{	
	width:100%;
	background-size: cover;
    background-repeat: no-repeat;
    padding-top: 1em;
    padding-bottom: .5em;
    height:auto;
}

#headshot img
{

    display: table;
  	margin: auto;
  	margin-top: 2em;
	border-radius:50%;
	height:5em;
}

.blurb
{
	position:relative;
	color:rgba(55, 55, 55,1);
	font-size:.6em;
	margin: 2em 4vw;
	text-align:left;
}

.blurb p
{
	padding:.75em;
	border-radius:0.4em;
	background-color:rgba(248,248,248,.9);
}

#teachingframe .blurb p a
{
    display:block;
    text-align:center;
}

#researchframe .blurb p a
{
    display:block;
    text-align:center;
}

#resourcesframe .blurb 
{
	text-align:center;
}

#homeframe
{
	background-color:rgba(248,248,248,1);
}

#homeframe .blurb
{
	background-color:transparent;
	text-align:center;
	margin: 0em 10vw;
}


#researchframe
{
		padding-top:0.3em;
	background-image: url("research.jpg");
}

#teachingframe
{
		padding-top:0.3em;
	background-image: url("teaching.jpg");
}

#resourcesframe
{
		padding-top:0.3em;
	background-image: url("resources.jpg");
}

#resourcesframe .blurb p
{
	background-color:rgba(248,248,248,.9);
}

.blurb a
{
	font-size:0.8em;
}

#pubsframe
{
	padding-top:0.3em;
	background-image: url("pubs.jpg");
}

#pubsframe span
{
	margin-left:2em;
	height: .5em;
	font-size:.9em;
}

#pubsframe a
{
	font-size:.9em;
}

#footer
{
	height:1em;
	display: table;
	margin-left: auto;
    margin-right: auto;
}

#footer img
{	
	display: table-cell;
	height:.8em;
	margin:0.35em 0;
	margin-right:0.75em;
	padding-top:.0em;
}

#number
{
	display: table-cell;
	font-size:0.6em;
	text-decoration: none;
	color:rgba(248,248,248,1);
	vertical-align:middle;
	padding-top:.25em;
}

.anchor::before 
{
    content: "";
    display: block;
    margin-top: -1em;
    position: absolute;
}

.spacer
{
	width:100%; 
	height:auto;
	text-indent:1em;
	background:rgba(90, 90, 90,1);
	font-size:1em;
	text-align:left;
	padding-top:.1em;
	padding-bottom:.1em;
}

#vid 
{
	width:80%;
	max-width:672px;
	height:54vw;
	max-height:400px;
	margin-top:1.5em;
}

#CV
{
	font-style:italic;
	text-decoration:none;
	display: table-cell;
	font-size:0.8em;
	text-decoration: none;
	color:rgba(248,248,248,1);
	vertical-align:middle;
	padding-top:.1em;
	padding-left:.8em;
}

@media (max-width: 600px) and (max-height: 460px) 
{
	html,body,nav 
	{
		font-size:7vmax;
	}
}

@media (max-device-aspect-ratio: 3/4) and (min-width:600px)
{
	
	html,body,nav 
	{
		font-size:6vmax;
	}
	html,body { height:100%; }
	.blurb p{ font-size:1em; }
}

@media (max-device-aspect-ratio: 3/4) and (max-width:599px)
{
	
	html,body,nav 
	{
		font-size:6vmax;
	}		
	.blurb{ font-size:.5em;}
}

@media (min-width: 800px) and (min-aspect-ratio: 8/5)
{
	
	html,body,nav 
	{
		font-size:3vmax;
	}	
	.blurb
	{ 
		margin-left:15vw;
		margin-right:15vw;
	}
}

@media (min-width: 1300px)
{
	
	html,body,nav 
	{
		font-size:2vmax;
	}
	.blurb
	{ 
		margin-left:20vw;
		margin-right:20vw;
	}
}