/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

body {
    overflow-x:hidden;
}

 ul {list-style-type:none;}
* { margin:0; padding:0; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
 
::-moz-selection {
    background: #fff;
	color: #6eb8b7;
    text-shadow: none;
}

::selection {
    background: #fff;
	color: #6eb8b7;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

img { border:none; }

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Caliper Styles
   ========================================================================== */

/*
 * Body Wrapper
 */
   
html, body, #bodywrapper {
	height:100%;
	position:relative;
	}
	
body > #bodywrapper { 
	height: auto;
	min-height: 100%;
	}

/*
 * General Typography
 */

a:link { text-decoration: none; color: #7d7d7d; }
a:active { text-decoration: none; color: #7d7d7d; }
a:visited { text-decoration: none; color: #7d7d7d; }
.no-touch a:hover { text-decoration: none; color: #000000; }

.PFDinTextCompPro-Medium { 
	font-family: PFDinTextCompPro-Medium;
	font-weight: normal;
	font-style: normal;
}

.PFDinTextStd-Medium { 
	font-family: PFDinTextStd-Medium;
	font-weight: normal;
	font-style: normal;
}

body {
	font-size:11px;
	font-family: "Helvetica", "Arial", sans-serif;
	color: #7d7d7d;
	}


h1 {
	text-transform: uppercase;
	font-family: PFDinTextStd-Medium, Helvetica, "Arial", sans-serif;
	font-weight:400;
	margin-bottom: 6px;
	color: #252525
}

h2 {
	text-transform: uppercase;
	font-weight:400;
	font-style:italic;
	margin-bottom: 6px;
	}
	
h3 {
	font-weight:400;
	font-style:italic;
	margin-bottom: 6px;
	}

h4 {
	text-transform: uppercase;
	font-family: PFDinTextStd-Medium, Helvetica, "Arial", sans-serif;
	font-weight:400;
	margin-bottom: 6px;
	color: #B0B0B0;
}	

.caption {
	font-size:36px;
	color: #636363;
	padding-top:0px;
	padding-bottom:0px;
	}

.projtxt h1 a:link, 
.projtxt h1 a:active, 
.projtxt h1 a:visited, 
.projtxt h1 a:hover {
	color:#252525;
	}

.projtxt a:link, 
.projtxt a:active, 
.projtxt a:visited,
.projtxt a:hover {
	color:#7d7d7d;
	}
	
.textcolumns a:link, 
.textcolumns a:active, 
.textcolumns a:visited{
	color:#464646;
	}

.textcolumns a:hover {
	color:#7d7d7d;
	}

.currentpage {
	color:#252525;
	}

/*
 * Header
 */

.headerwrapper {
	position:fixed;
	top:0;
	height: 180px;
	display:block;
	width: 100%;
	}
	
.headerbg {
	position:fixed;
	top:0;
	z-index:9;
	width: 100%;
	height: 180px;
	background: ;
	z-index:9;
	}

.navbg {
	position:fixed;
	z-index:7;
	width: 100%;
	background: ;
	top:180px;
	}

.header,
.indexheader {
	position:fixed;
	display:block;
	margin-top:10px;
	margin-bottom:10px;
	width:100%;
	clear:both;
	z-index:10;
	}

/* Logo */
.logo,
.indexlogo {
	display:block;
	margin-left:100px;
	float:left;
	}

/* Navigation Menu */
.nav,
.indexnav,
.projnav {
	display:block;
	float:right;
	margin-right:70px;
	padding-top:11px;
	text-align:right;
	}

.nav li,
.indexnav li,
.projnav li {
	float:right;
	padding-left:40px;
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
	font-size:10px;
	}
	
.navleft,
.indexnavleft,
.projnavleft {
	display:block;
	float:left;
	margin-right:70px;
	padding-top:11px;
	text-align:left;
	}

.navleft li,
.indexnavleft li,
.projnavleft li {
	float:left;
	padding-left:40px;
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
	font-size:10px;
	}

.infolist {
	display:none;
	padding-top:10px;
	}
	
.infolist li{
	float:none;
	text-align:left;
	padding:0;
	}
	
.mobileinformation {
	display:none;
	}
	

/* Header Max Width and Margins */
@media all and (min-width: 1310px) {
.header {
	max-width:1180px;
	left:50%;
	margin-left:-590px;
	padding-left:0px;
	}

.projnav {
	padding-right:8px;
	}
	
.nav,
.projnav {
	margin-right:0px;
	}

.logo {
	margin-left:0px;
	}
}	

/*
 * Index Full Page
 */	

 .indexspan {
	height:100%;
	}
 
 .indextitle {
	position:absolute;
	width: 100%;	
	top:40%;
	text-align:center;
	text-transform: uppercase;
	font-family: PFDinTextCompPro-Medium, Helvetica, Arial, sans-serif;
	font-size:7.5vw;
	color:#fff;
	}
	
@media all and (max-width: 1060px) {
.indextitle {
	font-size:80px;
	}
}

@media all and (max-width: 613px) {
.indextitle {
	line-height:75px;
	}
}	
 
/*
 * Index Full Page Slideshow
 */	

 * { margin:0; padding:0; }
body { background:#fff; height:100%; }
	img { border:none; }
	
	#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
	
	#supersized {  display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		
		#supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; padding-top: 0px; background:#fff; }
		#supersized a { width:100%; height:100%; display:block; }
			#supersized li.prevslide { z-index:-20; }
			#supersized li.activeslide { z-index:-10; }
			#supersized li.image-loading { background:#fff url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
				#supersized li.image-loading img{ visibility:hidden; }
			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

 /*
 * Scrolling Content
 */	

 /* Sets Scrolling Content Column Max Width */
.scroll,
.indexscroll {
		
		max-width:660px;
		padding-bottom:120px;
		margin-left:40px;
		margin-right:0px;
		
}

 /* Sets Visibility of Navigation Hover Below Index Information Level */
.indexscroll {
		position:relative;
		z-index:8;
		}
		
//

.scrollright,
.indexscrollright {
		float:right;
		max-width:50%;
		padding-bottom:120px;
		margin-left:0px;
		margin-right:100px;
}

 /* Sets Visibility of Navigation Hover Below Index Information Level */
.indexscrollright {
		position:relative;
		z-index:8;
		}

/* Sets Scrolling Content Max Width and Centering on Large Browser */
@media all and (min-width: 1310px) {
.scrollmaxwidth {
	max-width:1180px;
	margin-right:auto;
	margin-left:auto;
	}
	
.scroll {
	margin:0px;
	}
}

.sectionwrapper {
	margin-top:-20px;
	clear:both;
	}


.section {
	padding-top: 80px;
	}

.section  img{
	max-width:100%;
	height:auto;
	width: auto\9; /* ie8 */
	}
	
.sectionwrapperright {
	margin-top:-20px;
	clear:both;
	}


.sectionright {
	padding-top: 80px;
	}

.sectionright  img{
	max-width:100%;
	height:auto;
	width: auto\9; /* ie8 */
	}

.subsection 	{
		margin-top:0px;
		}

.subsection img {
	max-width:100%;
	}

#profile {
	margin-top:-30px;
	}

/* Responsive Description Columns */
.textcolumns {
    -webkit-column-width: 310px; /* Chrome, Safari, Opera */
    -moz-column-width: 310px; /* Firefox */  
    column-width: 310px;
	
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	
	max-width:660px
} 

/* Static Columns */
.columns {
	width:660px;
	overflow-x:hidden;
	}

.fixedcolumns {
	display:inline-block;
	width:310px;
	padding-bottom:15px;
	}

.fixedcolumnsbr {
	display:inline-block;
	width:310px;
	padding-bottom:15px;
	color: #B0B0B0;
	line-height:1.6em;
	}

.fixedcolumnsen {
	display:inline-block;
	width:310px;
	padding-bottom:15px;
	color: #000000;
	line-height:1.6em;
	}

.fixedcolumnsbrli {
	display:inline-block;
	width:310px;
	padding-bottom:15px;
	color: #B0B0B0;
	}

.fixedcolumnsenli {
	display:inline-block;
	width:310px;
	padding-bottom:15px;
	color: #000000;
	}

.profilecolumn {
	padding-bottom:30px;
	column-break-inside: avoid; 
	}
	
div.profilecolumn { 
	display: inline-block; 
	}
	
.phsection {
	padding-top:20px;
	}
	
.phlogo {
	float:left;
	margin-top:4px;
	margin-right:10px;
	}
	
.phlinks {
	float:left;
	}

.researchintro {
	margin-bottom:60px;
	}
	
.researchimg {
	padding-top:20px;
	}

.researchimg  img{
	width:100%;
	}
	
.profileimg {
	margin-top:35px;
	margin-bottom:35px;
	}

@media (max-width: 916px) {
.columnhide {
	display:none;
	}
}	
	
@media (min-width: 917px) {
.columnhide {
	display:normal;
	}
}
	
@media (max-width: 639px) {
#presstitle {
	display:none;
	}
}	

@media (min-width: 640px) {
#presstitle {
	display:normal;
	}
}

/* Globes */

.globebox {
	float:left;
	width:154px;
	}

.aglobe {
	margin-left: 2px;
	}	

.bglobe {
	margin-left: 40px;
	}	

.cglobe {
	margin-left: 35px;
	}	

.dglobe {
	margin-left: 70px;
	}			

.globewrapper {
	margin-top:-20px;
	clear:both;
	}

.globesection {
	padding-top: 80px;
	}

.globesection  img{
	max-width:100%;
	height:auto;
	width: auto\9; /* ie8 */
	}

.mobileglobesection {
	display:none;
	}	

/* Event Photos */

.eventphoto {
	float:left;
	width:155px;
	}

.eventphotol {
margin-right: 2px;
	}

.eventphotor {
margin-left: 2px;
	}	


/*
 * Project Menu Page
 */
 
.projects {
	display:block;
	padding-top:20px;
	margin-left:60px;
	margin-right:62px;
	}

.projimgwrapper {
	position:relative;
	height:auto;
	width: auto\9; /* ie8 */
	display:block;
	float:left;
	}

.projimg {
	margin-right:8px;
	margin-bottom:8px;
	}
	
.projimg img {
	width:100%;
	max-width:100%;
	}

.projinfo {
	position:absolute;
	width:100%;
	height:50px;
	margin-top:-50px;
	background:rgba(255,255,255, 1);
	text-align:left;
	padding-top:8px;
	padding-left:6px;
	}
 
.projecttitle {
	margin-bottom:0px;
	color:#252525; 
	font-size:14px;  
	font-family: PFDinTextStd-Medium, Helvetica, "Arial", sans-serif;
	text-transform:uppercase;
	}

.projectdescription {
	color: #7d7d7d
	}
	
  /* Footer Spacing */
 .clearspan {
	clear:both;
	height:90px;
	}
 
/* Project Menu Media quires for a responsive layout */

/* For tablets & smart phones */
@media (min-width: 481px) {
.projimgwrapper {
	width:50%;
	}
}

/* For smaller displays */
@media (min-width: 829px) {
.projimgwrapper {
	width:33.33%;
	}
}

/* For smartphones */
@media (max-width: 480px) {
.projimgwrapper {
	width:100%;
	}
}

/* Project Menu Page Centering and Max Width */
@media all and (min-width: 1310px) {
.projects {
	max-width:1180px;
	margin-right:auto;
	margin-left:auto;
	}
}	

/*
 * Individual Project Sliding Images
 */

 .slideimg img{
width:100%;
}
 
/* Navigation */
.slidesjs-navigation {
margin-top:-30%;
position:relative;
z-index:10;
}

/* Previous */
.slidesjs-previous {
margin-left: 10px;
float: left;
}

/* Next */
.slidesjs-next.controls{
margin-right: 10px;
float: right;
}

/* Slide Icons */
.slidesjs-pagination {
margin-top: -25px;
margin-right: 10px;
float: right;
list-style: none;
position:relative;
z-index:10;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
background-position: 0 -26px
}

.slidesjs-pagination li {
float: left;
margin: 0px;
width:10px;
}

/* Prevent the slideshow from flashing on load */
#slides {
display: none;
}

/* Prevent image container to cause footer automatic scrolling*/
.containerwrapper {		
padding-top: 20px;
}

/* Image Container*/
.container {		
margin-top: 0px;
margin-left: 60px;
margin-right: 70px;
position:relative;
z-index: 1;
}

/* Fixed Project Image Max Width */
@media all and (min-width: 1310px) {
.container {
	max-width:1180px;
	margin-right:auto;
	margin-left:auto;
	}
}

.photocredit {
	float:right;
	padding-top:6px;
	font-size:9.2px;
	color: #7d7d7d;
	font-family: "Helvetica", "Arial", sans-serif;
	}

/*
 * 404 Error Page
 */	

 .errorspan {
	padding-top:120px;
	padding-bottom:40px;
	}
 
 .error {
 	display:block;
 	max-width:455px;
	padding-left:60px;
	padding-right:70px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	text-transform: uppercase;
	font-family: PFDinTextCompPro-Medium, Helvetica, Arial, sans-serif;
	font-size:40px;
	}

.error a:link, 
.error a:active, 
.error a:visited {
	color:#252525;
	}

.errorlink a:hover {
	color:#252525;
	}

.errorlinkchange a:hover {
	color:#7d7d7d;
	}

/*
 * Footer
 */
 
.footer,
.indexfooter {
	clear:both;
	position:relative;
	z-index:10;
	height:40px;
	margin-top:-40px;
	padding-left:60px;
	padding-right:70px;
}

.footer li,
.indexfooter li {
	font-family: "Helvetica", "Arial", sans-serif;
	font-size:9.2px;
	color: #acacac;
}

.footertitle {
	float:left;
	margin-left:-5px;
	padding-right:40px;
	font-family: "Helvetica", "Arial", sans-serif;
	color: #acacac;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
}

.footertitle img {
	float:left;
	padding-right:3px;
	}

.footercontact {
	float:right;
	margin-top:-3px;
	}
	
.footercontact ul {
	display:block;
	float:right;
	width:110px;
	padding-left:20px;
	text-align:right;
}

/* Footer Max Width and Margins */
@media all and (min-width: 1310px) {
.footer {
	max-width:1180px;
	margin-right:auto;
	margin-left:auto;
	}
	
.footertitle {
	margin-left:0px;
	}
}	

/* Project Menu Page Centering and Max Width */
@media all and (max-width: 810px) {
.footercontact {
	display:none;
	}
}	

/* Project Menu Page Centering and Max Width */
@media all and (max-width: 530px) {
#studiofooter {
	display:none;
	}
}	



/* ==========================================================================
   Photoset - Nupersized
   ========================================================================== */

#photoset {
	
	overflow: visible;
	height:100vh;
}






/* ==========================================================================
   Smartphone Media Query Adjustments
   ========================================================================== */

/* Smartphone (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {


.header,
.indexheader {
	margin-top:8px;
	margin-bottom:0px;
	}

.logo img,
.indexlogo img {
	width:60px;
	height:21px;
	}	
	
.nav,
.indexnav,
.projnav {
	padding-top:3px;
	}
	
.nav li,
.indexnav li,
.projnav li {
	float:none;
	padding-left:0px;
	text-align:right;
	line-height: 15px;
	}
	
.mobileinformation {
	display:inline;
	}

.information {
	display:none;
	}

.globesection  {
	display:none;
	}

.mobileglobesection {
	display:inline;
	}		
	
#supersized li {
	padding-top: 0px;
	}
	
#contact {
	margin-top:-60px;
	}
	
.caption {
	font-size:25px;
	}

.projects {
	padding-top:3px;
	}
	
.footer,
.indexfooter {
	min-width:0px;
	}
	
.studiofooter {
	display:none;
	}
	
.footercontact{
	display:none;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
.headerwrapper {
	height: 50px;
	}
	
.headerbg {
	height: 50px;
	}	
	
.logo,
.indexlogo {
	margin-left:35px;
	}

.nav,
.indexnav,
.projnav {
	margin-right:35px;
	}

.indextitle {
	font-size:45px;
	}
	
.indexscroll,
.container,
.scroll {
	max-width:310px;
	margin-left:35px;
	margin-right:80px;
	}

.projects {
	margin-left:35px;
	margin-right:80px;
	}
	
.footer,
.indexfooter {
	padding-left:35px;
	}
}

/* Smartphones (portrait) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
.headerwrapper {
	height: 100%;
	}
	
.headerbg {
	height: 100%;
	}
		
.logo,
.indexlogo {
	margin-left:20px;
	}

.nav,
.indexnav,
.projnav {
	margin-right:20px;
	}

.indextitle {
	font-size:57px;
	line-height:53px;
	}

.indexscroll,
.container,
.scroll {
	max-width:310px;
	margin-left:20px;
	margin-right:80px;
	}

.projects {
	margin-left:20px;
	margin-right:12px;
	}

.footer,
.indexfooter {
	padding-left:20px;
	}
}


/* ==========================================================================
   Ipad Media Query Adjustments
   ========================================================================== */
	
/* Ipad (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
.indextitle {
	font-size:105px;
	}
	
.mobileinformation {
	display:inline;
	}

.information {
	display:none;
	}
}	
	

/* Ipad (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.indextitle {
	line-height:100px;
	}
}
	
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

