body {
	background-color:#e8e3d7;
	font-family: 'Roboto', sans-serif;
	color:#292929;
	font-weight:300;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {color:#292929; text-decoration:none; border-bottom:1px dotted;}
a:hover {border-bottom:1px solid;}

header {margin-bottom: 0.3em}

h1 {font-family:'Roboto Slab', serif; font-weight:300}
h2 {font-size:1em; font-weight:300; margin:0.4em 0 1.1em 0;}

.line {display: inline-block}
.profilepic {width:74px; margin:-0.5% -3px 0.8em 0; position:relative; float:right;}

/* Homepage gallery ---------------- */

ul {list-style:none; margin:0; padding:0;}

#thumbs {position:relative; clear:both; overflow:hidden;}
#thumbs li {float:left; position:relative; overflow:hidden;}
#thumbs .imgpresize {position:relative; width:100%; height:0; padding-top:69.5%; background-color:rgba(255, 255, 255, .5);} /* Makes a space for images even before they're loaded so they don't pop in and rearrange the page */
#thumbs li img {position:absolute; top:0; left:0; height: auto; max-width: 100%; min-width: 100%; display: block;}

li .thumboverlay {
	background-color: white;
	position: absolute;
	opacity: 0;
	display: block;
	bottom: 0px;
	left: 0px;
}

li:hover .thumboverlay {opacity:1;}

.thumboverlay h3 {
	font-family:'Roboto Slab', serif;
	font-weight:400;
	font-variation:bold;
	font-size:1em;
	margin:10px 14px 12px 14px;
}

.thumboverlay p {font-size:0.9em; font-weight:300; margin:0px 10px 14px 14px;}

/* Page ----------------*/

.oneacross, .twoacross, .fouracross, .eightacross {width:100%; float:left; clear:both;}
.twoacross div {width:50%; float:left;}
.fouracross div {width:25%; float:left;}
.eightacross div {width:12.5%; float:left; position:relative; padding-bottom:12.5%; background-color:rgba(255, 255, 255, .5);}
.oneacross img, .oneacross video, .oneacross iframe, .twoacross img, .fouracross img {max-width:100%; display:block; background-color:rgba(255, 255, 255, .5);}
.twoacross img, .fouracross img {min-width: 100%;}
.eightacross img {max-width:100%; min-width: 100%; position:absolute; top:0; left:0}
.twoacross .videowrapper {padding-bottom:28.2%;}
.twoacross .videowrapper.sixteennine {padding-bottom:31.54%;}

#bananas div {padding-bottom:25%; background-color:#F6F6F6; position:relative;}
#bananas img {position:absolute;;}

.dark, .dark a, .dark .divider {color:#c9c9c9; background-color:#262626; border-color:#c9c9c9;}
.black, .black a, .black .divider {color:#aaa; background-color:black; border-color:#888;}
.light {background-color:white;}
.light div img, .light iframe, .light #swiffycontainer {border:1px #ddd solid;}
.light div img {margin-left: -1px; margin-top: -1px; position: relative; top: 1px; left: 1px;}
.darkpurple, .darkpurple a, .darkpurple .divider {color:#c9c9c9; background-color:#4f4550; border-color:#c9c9c9;}
.yellow {background-color:#ffda3b;}
.lightish {background-color:#F6F2E7;}
.white {background-color:white;}
.green, .green .divider {background-color: #a3cd54; color: white; border-color: white;}

.pagetext {
	max-width: 30em;
	margin-top: 0.5em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 2.6em;
	clear: both;
	float: left;
}
.pagetext p {margin:0.5em 0 0.5em 0; line-height:1.4em;}
.fineprint {max-width: 30em; font-size:0.9em; line-height:1.4em; margin:1.2em 0 0.4em 0;}
.fineprint strong {font-weight:400;}
.subhead {font-family:'Roboto Slab'; font-weight:700; text-transform:uppercase; margin-right:0.2em;}
.subhead2 {margin:1.8em 0 -0.5em 0; font-family:'Roboto Slab'; font-size:1.2em; font-weight:400;}
.divider {clear:both; border-top:1px #292929 dotted; margin:50px 0 22px 0; max-width:30em}

/* Video responsive ----------------*/

.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videowrapperSquare {
	position: relative;
	padding-bottom: 50%; /* 1:1 */
	height: 0;
}
.videowrapper iframe, .videowrapperSquare iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Make HTML5 animation full width ----------------*/

.main {
	width: 100%;
	display: inline-block;
	position: relative;
}

.main:after {
    display: block;
    content: '';
}

.animalMRI:after {
	padding-top: 62%; /*aspect ratio*/
}

.lifecycle:after {
	padding-top: 40%; /*aspect ratio*/
}

#swiffycontainer {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
    background-color:white;
}

/* Responsive nonsense ---------------- */

@media screen and (max-width: 800px) {
	body {margin: 4% 5% 10% 5%;}
	#thumbs li {width: 50%}
	h1 {font-size:2.5em; margin:0 0 0.4em 0; line-height: 1.1em;}
	h2 {margin-top: 0.6em;}
	.profilepic {width:60px;}
	/*li .thumboverlay {position:relative; opacity:1; height:100%; margin-bottom:12px; padding-top:7px; white-space: nowrap;}
	.thumboverlay h3 {font-size:1em; margin:0px 4px 0px 10px; overflow: hidden; text-overflow: ellipsis;}
	.thumboverlay p {font-size:0.8em; margin:0px 4px 11px 10px;; overflow: hidden; text-overflow: ellipsis;}*/
	li:hover .thumboverlay {opacity:0;}
	li a {text-decoration:none;}
	.twoacross div {width:100%}
	.twoacross .videowrapper {padding-bottom:56.25%;}
	.twoacross .videowrapperSquare {padding-bottom:100%;}
	.twoacross .videowrapper.sixteennine {padding-bottom:63.08%;}
	.fouracross div {width:50%;}
	.eightacross div {width:25%; padding-bottom:25%;}
	#bananas div {padding-bottom:50%;}
	footer {max-width:100%;}
}

@media screen and (min-width: 800px) {
	body {margin: 3.3% 4.5% 5.5% 4.5%}
	#thumbs li {width: 33.3%}
	h1 {font-size:3em; margin:0 0 0.5em 0;}
}

@media screen and (min-width: 1440px) {
	#thumbs li {width: 25%}
	h1 {font-size:3em; margin:0 0 0.5em 0;}
}