/* General reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, title {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* JHR Take 2 */
body { background-color: #eee; font-family: neue-haas-grotesk-display, sans-serif; color:#000; font-weight: 200; }
h1, h2, h3 { font-weight: 700; }
a:link, a:visited, a:active { color:#333; }
h1 { font-size: 24px; color:#fff; }
h2 { font-size: 20px;  }
h3 { font-size: 18px; }
		
div.logo-container { position: absolute; top:55px; right:10px; height:50px; width:50px; z-index: 10; padding: 0 10px;}
div.splash-container { position: absolute; top:38px; right:0; height:400px; width:400px;  z-index: -10; }
div.linkedin-container {display: inline-block; height:14px; position: fixed; top:10px; right:40px; z-index: 650;}
div.nav-background { position: fixed; top: 0; left: 0; padding: 10px 0; background-color: #000; width: 100%; z-index: 500; height:26px;}
div.nav-container { position: fixed; top:0; left:40px; color:#fff; padding: 10px 0; border-bottom:1px #222 solid; background-color: #000; width: 100%; z-index: 600; }
div.nav-container h1 { display: inline-block; font-size: 24px; }
div.nav-container a, div.nav-container a:visited { text-decoration: none; color:#fff; }
img.jhrlogo { height:100%; }
img.splash { height:100%; opacity: 0.5; }

div.intro-container { margin:20px; padding:55px 15px 10px 15px; }
div.intro { max-width: 390px; margin:0 auto; line-height: 24px; font-weight: 300; font-size: 18px; }
div.intro p { padding-top: 5px; }
div.intro h3 { display: inline; }

div.portfolio {padding:0 20px 20px 20px;}		
div.portfolio-section { max-width: 830px; padding:5px 20px; margin:0 auto; text-align: center; border-top: 1px #f0f0f0 solid; }
div.portfolio-section-large { padding:5px 20px; margin:0 auto; text-align: center; background-color: #fafafa; border-top: 1px #f0f0f0 solid; margin-bottom:20px;}
div.portfolio-section h3, div.portfolio-section-large h3 { padding:5px; text-align:left; max-width: 830px; padding:5px 0; margin:0 auto; }
		
.portfolio-block { height:180px; width:180px; margin:10px; display: inline-block; text-align: left; font-size: 12px; font-weight: 300; position: relative; border: 1px #333 solid; overflow:hidden; opacity:0.8 
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s; }
.portfolio-block:hover {opacity:1;}
.portfolio-block img {position:absolute; top:0; left:0; width:100%;}
.portfolio-block div { position:absolute; bottom:0; left:0; padding: 5px; background-color: #fff; color: #000; opacity: 0; width:95%; border-top:1px #000 solid;
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s; }
.portfolio-block:hover div {opacity:1;}
.portfolio-block a {display: block; color:#fff; overflow: hidden; background-color:#000; padding: 5px; margin: 5px 0 0 0; vertical-align: middle; text-decoration: none; position: relative; opacity: 0.7; width:160px;
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;}
.portfolio-block a:link, portfolio-block a:visited {}    
.portfolio-block a:hover {opacity: 1;}

.arrow-right { display:inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff;
position:absolute; bottom:6px; right:5px; }
		
a.portfolio-block-large, div.portfolio-block-large {margin:10px; display: inline-block; text-align: left; font-size: 12px; font-weight: 300; position: relative; background-color: #fff;}
a.portfolio-block-large div, div.portfolio-block-large div {position:absolute; top:0; left:0; padding: 5px; background-color: #fff; color: #000; opacity: 0.95;}
		
a.mobile, div.mobile {height: 600px; max-width:480px;}
a.mobile img, div.mobile img {height:100%;}
a.desktop, div.desktop {max-width: 1200px; border: 1px #888 solid; padding-top: 24px;}
a.desktop div, div.desktop div {color:#fff; background-color: #000;}
a.desktop img, div.desktop img {width:100%}
a.logo-b, div.logo-b, a.logo-w, div.logo-w {width: 330px; height:330px; border: 1px #888 solid; padding:44px 10px 10px 10px; vertical-align: top;}
a.logo-b, div.logo-b { background-color: #fff; }
a.logo-w, div.logo-w { background-color: #000; }
a.logo-b div, div.logo-b div {color:#fff; background-color: #000;}
a.logo-w div, div.logo-w div {color:#000; background-color: #fff;}
a.logo-b img, div.logo-b img, a.logo-w img, div.logo-w img {width:100%;}
div.cd {padding-top: 24px;}
div.dphv {max-width: 350px; vertical-align: top;}
div.dphv img { width: 100%; }
div.hecht {border: 1px #888 solid; padding-top: 24px; }
div.hecht div {color:#fff; background-color: #000;}
div.stc div {color: #000; background-color: #fff;}
div.postcard {max-width: 480px; padding:24px 10px 10px 10px; background-color: #fff; border: 1px #888 solid;}
div.postcard div {color:#fff; background-color: #000;}
div.postcard img { width: 100%; }
		
		

@media screen and (max-width: 600px) {
	img.splash {opacity: 0.2;}
}
		
@media screen and (max-width: 400px) {
	div.nav-container { left:0px; color:#fff; padding: 10px 0 10px 40px; }
	div.nav-container h1 { display: block; }
	div.intro-container { padding-top:120px; }
	div.linkedin-container { right:10px; }
	div.splash-container { width:300px; }
}

@media (hover: none) { 
	a.portfolio-block {height: 200px;}
	a.portfolio-block div {opacity: 1;}
	div.portfolio-block {height: 240px;}
	div.portfolio-block div {opacity: 1;}
	div.portfolio-block a {padding: 10px 5px;}
}