/* 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, index.htmldd, 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.css take 3 */

body { font-family: neue-haas-grotesk-display, sans-serif; color:#000; font-weight: 200; font-size: 36px; font-style: normal; position: relative;
	background-size: 20px 20px;
    background-image: linear-gradient(to right, #eef 1px, transparent 1px), linear-gradient(to bottom, #eef 1px, transparent 1px);
}
em {font-weight: 400;}
strong {font-weight: 700;}
i {font-style: italic;}
small {font-size: 28px;}
span {display:inline-block;}
ol {display: block; list-style: decimal; margin: 0 0 20px 40px; padding-left: 40px; font-size: 20px; font-weight: 200;}
ol li {font-weight: 200; font-size: 20px; vertical-align: top; padding-bottom: 10px;}
ol li span {font-weight: 200; font-size: 30px;}
div.form {border: 1px solid #000; width: 300px; margin: 10px 0; padding: 10px; background-color: #eef; border-radius: 5px;}
a.submit {margin:0; height: 30px; width:100px; text-align: center; font-size: 20px; color: #fff; border: none; display: block; margin-top: 10px; clear: left; border-radius: 5px;}


.check-container {display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 20px; line-height: 30px; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check-container input[type=checkbox] {position: absolute; opacity: 0; cursor: pointer; height: 0;width: 0;}

/* custom checkbox */
.check-container .checkmark {position:absolute; top:0; left:0; height:25px; width:25px; background-color:#fff; border: 1px solid #000;}


/* when checked, add a blue background */
.check-container input:checked ~ .checkmark {background-color: #2196F3;}

.check-container input ~ .submit {background-color: #ccc;} 
.check-container input:checked ~ .submit {background-color: #000;} 

/* hide checkmark when not checked */
.checkmark:after {content: ""; position: absolute; display: none; }

/* show checkmark when checked */
.check-container input:checked ~ .checkmark:after { display: block; }

/* style the checkmark/indicator */
.check-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
div#robot-message {border: 1px solid #000; width: 300px; margin: 10px 0; padding: 10px; background-color: #eef; border-radius: 5px; display: none;}


#topnav {position:fixed; top:0; left:0; width:100%; height:40px; background-color: #fff; color:#000; border-bottom: 1px solid #eef; text-align: right; z-index:1000; box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
#topnav ul {font-size: 18px; line-height: 28px; font-weight: 300; padding:10px 10px 0 0;}
#topnav ul li {position: relative; display: inline; padding:10px 20px;}
#topnav a {color: #000; text-decoration: none;}
#topnav a div {position: absolute; top:15px; right:15px; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid transparent; display: block;
	-webkit-transition: border-right 0.5s, right 0.5s; /* For Safari 3.1 to 6.0 */
    transition: border-right 0.5s, right 0.5s;
    }
#topnav a:hover div {border-left: 5px solid #000; right:5px;}
#topnav span {display: block; position: absolute; top:0; left:65px; font-size:24px; padding-top:10px;}

img.jhrlogo {height: 100%; max-height: 80px;}
div.logo-container {position: absolute; top: 0; left: 0; text-align: center; height:60px; padding:5px;}

div#main {}
div.section {min-height:calc(100vh - 260px); position:relative; padding: 50px 50px 0 50px; overflow: hidden; margin: 20px 40px;}
div.section p {margin-bottom: 20px;}
a.continue {margin-top:20px; background-color: #111; border-radius: 10px; color:#fff; text-align: center; font-size: 20px; padding:10px; display:inline-block; text-decoration: none; width:120px; position: relative;}
a.continue div {width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; top:32px; left:65px;
	 -webkit-transition: border-top 1s, top 1s; /* For Safari 3.1 to 6.0 */
    transition: border-top 1s, top 1s;
}
a.continue:hover div {border-top:5px solid #111; top:39px;}

a.button {display: inline-block; background-color: #e11; color:#fff; padding:10px; margin:5px 10px 0 0;border-radius: 10px; font-weight: 200; text-decoration: none; text-align:center; font-size: 20px; width:120px; position: relative;
	-webkit-transition: background-color 1s; /* For Safari 3.1 to 6.0 */
    transition: background-color 1s;
}
a.button div {width: 0; height: 0; border-right: 5px solid #fff; border-bottom: 5px solid transparent; border-top: 5px solid transparent; position: absolute; top:16px; left:6px;
	 -webkit-transition: border-right 1s, left 1s; /* For Safari 3.1 to 6.0 */
    transition: border-right 1s, left 1s;
}
a.button:hover div {border-right:5px solid #e11; left:-5px;}


div.caption {position:relative; background-color: #fff; border-radius:10px; display: inline-block; width:300px; font-size: 20px; padding: 20px; font-weight: 400; border: 1px solid #999;}
div.caption small {font-weight:200; font-size: 16px;}
div.caption div.blurb {font-size: 14px; display: inline-block; padding:5px; text-align: right; border-right:1px solid #999; border-left:1px solid #999; float:right; border-radius: 5px;}
div.caption div.blurb img.pointer {}


div.table {margin:0 20px; display: inline-block; width:calc(100% - 40px); text-align: center;}
div.column {width:32%; display: inline-block; position: relative;}
div.column img {width:100%; position:absolute; top:2vw; left:0}
div.buffer {display: inline-block; width:40px;}
div.mobile {}
div.mobile img {width:50%; position:absolute; top:0; left:25%;}
div.text p {text-align: left;}
div.column div.caption {width:auto; margin:5px;margin-top:20vw;}
div.column div.caption div.arrow {position: absolute; top:-8px; left:calc(50% - 8px); border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent;}
div.column div.caption div.arrow-line {position: absolute; top:-10px; left:calc(50% - 10px); border-bottom: 10px solid #999; border-left: 10px solid transparent; border-right: 10px solid transparent;}


div#one p, div#ten p {margin-right:80px; margin-left: 40px; margin-top:20px;}
div#one img.background, div#ten img.background {height: 80vh; float: right; opacity: 0.5; margin-right:40px; max-height: 700px;}
div#one a.continue {margin:0 0 0 40px; }
div.logo-container-body {position: relative; padding:5px 0 0 80px; margin-top:30px;}
div.logo-container-body img {position: absolute; top: 0; left:0; height:80px;}

div#two {background-color:#0085cf; color:#fff;}
div#two img {height:65vh; float: left; margin: 0 20px 0 0;}
div#two p {padding-top: 20px; padding-right:20px;}
div#two div.caption div.arrow {position: absolute; top:22px; left:-8px; border-bottom: 8px solid transparent; border-right: 8px solid #fff; border-top: 8px solid transparent;}
div#two div.caption div.arrow-line {position: absolute; top:20px; left:-10px; border-bottom: 10px solid transparent; border-right: 10px solid #999; border-top: 10px solid transparent;}


div#three {background-color: #cb8; padding-right:55vw; text-align: right;}
div#three img {height:40vw; position:absolute; top:30px; left:40vw;}
div#three p {padding:40px 40px 0 40px; text-align:left;}
div#three div.caption {text-align: left;}
div#three div.caption div.arrow {position: absolute; top:22px; right:-8px; border-bottom: 8px solid transparent; border-left: 8px solid #fff; border-top: 8px solid transparent;}
div#three div.caption div.arrow-line {position: absolute; top:20px; right:-10px; border-bottom: 10px solid transparent; border-left: 10px solid #999; border-top: 10px solid transparent;}
div#three a.continue {margin:20px 0 0 40px;float:left;}


div#four, div#seven {color:#fff;}
div#two div.caption, div#three div.caption, div#four div.caption, div#seven div.caption, div#eight div.caption {color:#000;}

div#four {background-color: #666; padding-left:55vw;}
div#four img {height:40vw; position:absolute; top:30px; left:-5vw;}
div#four p {padding-top: 20px; padding-right:20px;}
div#four div.caption div.arrow {position: absolute; top:22px; left:-8px; border-bottom: 8px solid transparent; border-right: 8px solid #fff; border-top: 8px solid transparent;}
div#four div.caption div.arrow-line {position: absolute; top:20px; left:-10px; border-bottom: 10px solid transparent; border-right: 10px solid #999; border-top: 10px solid transparent;}



div#six {background-color: #000; color: #fff;}
div#six img {height:65vh; float: left; margin-right:20px;}
div#six p {padding-top: 20px; padding-right:20px;}
div#six div.caption {color: #000;}
div#six div.caption div.arrow {position: absolute; top:22px; left:-8px; border-bottom: 8px solid transparent; border-right: 8px solid #fff; border-top: 8px solid transparent;}
div#six div.caption div.arrow-line {position: absolute; top:20px; left:-10px; border-bottom: 10px solid transparent; border-right: 10px solid #999; border-top: 10px solid transparent;}
div#six a.continue {background-color: #fff; color: #111;}
div#six a.continue div {border-top: 5px solid #000; position:
	 -webkit-transition: border-top 1s, top 1s; /* For Safari 3.1 to 6.0 */
    transition: border-top 1s, top 1s;
}
div#six a.continue:hover div {border-top:5px solid #fff;}

div#seven {background-color: #963;}
div#seven img {height:80vh; float: left; margin-left: 20px; margin-right:20px; margin-top:5vh;}
div#seven p {padding-top: 10vh; padding-right:20px;}
div#seven div.caption div.arrow {position: absolute; top:22px; left:-8px; border-bottom: 8px solid transparent; border-right: 8px solid #fff; border-top: 8px solid transparent;}
div#seven div.caption div.arrow-line {position: absolute; top:20px; left:-10px; border-bottom: 10px solid transparent; border-right: 10px solid #999; border-top: 10px solid transparent;}

div#eight {background-color:#666; color:#fff;}
div#eight img {height:70vh; float: right; margin-left: 20px; margin-right:20px; margin-top:5vh;}
div#eight p {padding-top: 10vh; padding-left:20px;}
div#eight div.caption {float:right;}
div#eight div.caption div.arrow {position: absolute; top:22px; right:-8px; border-bottom: 8px solid transparent; border-left: 8px solid #fff; border-top: 8px solid transparent;}
div#eight div.caption div.arrow-line {position: absolute; top:20px; right:-10px; border-bottom: 10px solid transparent; border-left: 10px solid #999; border-top: 10px solid transparent;}
div#eight a.continue {margin:20px 0 0 40px; }

div#nine div.column img {width:80%; position:absolute; top:2vw; left:10%;}

div#ten {border-top:1px solid #999;}

/* Slide-in sections */
.web-menu {position:fixed; top:40px; left:100%; width:10px; height:calc(100vh - 40px); background-color: #fff; width:calc(100%); z-index: 100; overflow-y: scroll;}

div.close-container {position: fixed; left:100%; top:0; z-index: 200; height:100vh; padding:10px 0 0 50px; width:50px; background-color: #000;}

a.close {background-color:#fff; border-radius: 20px; width:40px; height:40px; font-size: 60px; text-decoration: none; color:#000; display:inline-block;  text-align: center;margin-top:55px; position: relative; 
	-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
a.close:hover {cursor: hand; color:#e11;}
a.close span {transform: rotate(45deg); position:absolute; top:-10px; left:6px;}
a.close div {width: 0; height: 0; border-left: 5px solid #000; border-bottom: 5px solid transparent; border-top: 5px solid transparent; position: absolute; top:16px; right:5px;
	 -webkit-transition: border-left 1s, right 1s; /* For Safari 3.1 to 6.0 */
    transition: border-left 1s, right 1s;
}
a.close:hover div {border-left:5px solid #fff; right:-5px;}


a.overlay-continue {margin-top:20px; background-color: #111; border-radius: 10px; color:#fff; text-align: center; font-size: 20px; padding:10px; display:inline-block; text-decoration: none; width:120px; position: relative;}
a.overlay-continue div {width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; top:32px; left:65px;
	 -webkit-transition: border-top 1s, top 1s; /* For Safari 3.1 to 6.0 */
    transition: border-top 1s, top 1s;
}
a.overlay-continue:hover div {border-top:5px solid #111; top:39px;}

.web-menu {background-color:#000; color:#fff;}
.web-menu-content {position: relative; font-size: 30px; padding: 0 50px; max-width: 800px; margin: 0 auto; line-height: 45px;}
.web-menu-content img {width:70vw; max-width: 100%;}
.web-menu-content img.sketch_mobile {width:25vw; float:right;}
.web-menu-content img.sketch_mobile_left {width:25vw; float:left;}
.web-menu-content img.poster {height:90vh; width:auto; float:left;}
.web-menu-content img.album {width:100%; margin:0 auto;}
.clear {clear: both;}
.web-menu-content p {padding-top:5px; padding-bottom:15px;}
.web-menu-content strong {}
div.headline {padding-top: 10vh; font-size: 70px; line-height: 60px; clear: left; border-bottom:1px solid #333; margin-bottom:10px;}
span.credit {font-size: 20px; display: block; margin-bottom: 20px; line-height: 25px;}

div.portfolio-block {border:1px solid #000; position: relative; padding-top:20vh; margin-top: 20px;}
div.portfolio-block div {font-size: 18px; background-color: #000; color:#fff; position:absolute;top:0; left:0; padding:6px;}
div.ct-project {}