@import url("https://use.typekit.net/sco4kwc.css");
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}body,html{width:100%;height:100%}*{box-sizing:border-box;-moz-box-sizing:border-box}
body, html {font-family:'Roboto', sans-serif;font-weight:300;;-webkit-font-smoothing:antialiased;text-rendering: optimizeLegibility;font-weight:300;color:rgb(32,19,42);line-height:1.5em;}
img {height:auto;}
#logo-wrapper {position:relative;}
#logo-wrapper span {position:absolute;top:0;left:0;overflow:hidden;width:0;height:0;text-indent:-99999px;oapcity:0;display:block;background-image:url(images/jb-white.svg);}
h1, h2, h3, h4, h6 {font-family:'museo-sans', sans-serif;font-weight:700;line-height:1.2em;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
h1 {font-size:3.375em;color:#fff;line-height:1.4em;}
h2 {text-transform:uppercase;font-size:2em;background:#f5f5f5;padding:1.8em 2em;text-align:center;position:relative;z-index:25;letter-spacing:.01em;}
h2:after {content:"";position:absolute;left:50%;top:100%;margin-left:-16px;border:16px solid transparent;border-top-color:#f5f5f5;}
h3 {font-size:2.25em;font-weight:300;}
h4 {margin:2em 0 1em;font-size:1.8em;text-transform:uppercase;font-weight:600;}
h5 {font-size:1.3em;}
h6 {font-size:0.9em;opacity:0.5;margin:0.6em 0;font-family:monospace;font-weight:300;}
a {text-decoration:none;color:inherit;cursor:pointer;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
.content {max-width:75em;margin:0 auto;padding:6em 3em;overflow:auto;}
.content p, .content q {margin:1.875em auto;max-width:36em;font-size:1.25em;line-height:1.5em;}
.content p a {border-bottom:1px dotted rgba(0,0,0,0.3);}
.content p a:hover {border-bottom:1px solid rgba(0,0,0,0.3);}
.dark .content p a {border-bottom:1px dotted rgba(255,255,255,0.3);}
.dark .content p a:hover {border-bottom:1px solid rgba(255,255,255,0.3);}
.content q {max-width:720px;margin-top:2em;}
q {opacity:0.3;position:relative;display:block;}
q:before, q:after {display: block;font-size: 2em;position: absolute;top:0;font-family:Georgia, "Times New Roman", Times, serif;overflow:visible;width:20px;font-weight:300;}
q:before {content: "\201C";left:-0.5em;}
q:after {content: "\201D";right:-0.5em;}
.container {width:100%;max-width:75em;margin:0 auto;padding: 0 3em;position:relative;}
header {padding:1.8em 0;overflow:auto;position:fixed;top:0;left:0;width:100%;z-index:30;color:#fff;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
header.thin {padding:.5em 0;background:rgb(10,0,20);}
header nav {display:flex;align-items:center;justify-content:space-between;}
header nav .main-logo {width:3em;height:3em;/*border-radius:50%;*/background:url(images/jb-red.svg) no-repeat center;background-size:contain;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
header nav .main-logo:hover {background-image:url(images/jb-white.svg);}
header.thin nav .main-logo {/*background:rgb(32,19,42);*/width:2.5em;height:2.5em;}
header nav #links {font-size:0.9em;padding:15px 0;}
header nav #links a {margin-left:2em;border-bottom:1px dotted transparent;padding-bottom:.1em;}
header nav #links a:hover {border-bottom-color:#fff;}
/*header.thin nav #links a:hover {border-bottom-color:rgb(32,19,42);}*/
footer {background:rgb(10,0,20);overflow:auto;padding:2em 3em;color:rgba(255,255,255,0.6);font-size:.9em;font-weight:500;position:relative;z-index:5;}
footer div {max-width:75em;margin:0 auto;display:flex;align-items:center;justify-content:center;}
footer span {display:block;}
/*footer span:last-child {text-align:right;}*/
#copy {font-family:Arial, Helvetica, sans-serif;}
/*#contact-links {text-align:center;}*/
#contact-links a {margin:0 .6em;opacity:0.5;display:inline-block;}
#contact-links a:hover {opacity:0.7;}
#contact-links a svg {width:1.5em;height:1.5em;}
#contact-links a svg path {fill:#fff;}
/*#contact-links img {width:20px;}*/
#fb {display:none;}
.up-arrow {display:inline-block;border-bottom:5px solid #999;border-left:5px solid transparent;border-right:5px solid transparent;margin-left:5px;margin-bottom:1px;width:0;height:0;}
.down-arrow {border-top:5px solid #fff;border-left:5px solid transparent;border-right:5px solid transparent;width:0;height:0;margin:0 auto;}
section {min-height:100%;position:relative;z-index:5;}
#contact-box {background:rgb(32,19,42);min-height:0;text-align:center;color:#fff;}
#contact-box p {max-width:26em;margin:2.2em auto;line-height:1.4em;font-weight:300;font-size:1.4em;}
#intro {/*background-image:url(images/intro-bg.jpg);*/background-size:cover;background-position:center center;background-attachment:fixed;padding:4em 0;display:flex;align-items:stretch;}
#intro:before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;/*width:100%;height:100%;background:rgba(30,0,0,0.5) url(images/line.png);z-index:1;opacity:0.4;*/opacity:.97;z-index:1;
background: rgb(32,19,42);
background: -moz-linear-gradient(-25deg, rgb(32,19,42) 30%, rgb(170,31,47) 100%);
background: -webkit-linear-gradient(-25deg, rgb(32,19,42) 30%,rgb(170,31,47) 100%);
background: linear-gradient(145deg, rgb(32,19,42) 30%,rgb(170,31,47) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#120f1b', endColorstr='rgb(170,31,47)',GradientType=1 );
}
#intro h3 {line-height:1.4em;color:rgb(170,31,47);}
#intro .container {display:flex;align-items:stretch;}
#intro .grouper {position:relative;display:flex;align-items:stretch;z-index:5;width:100%;}
#intro .text-wrapper {display:flex;align-items:center;padding-bottom:1em;position:relative;z-index:4;}
#intro .tags {margin-top:.5em;font-size:.8em;margin-left:-.5em;}
#intro .tags h5 {display:inline-block;color:#fff;font-size:1em;padding:.2em .8em;border-radius:1em;background-color:rgba(170,31,47,.8);margin-top:.75em;margin-left:.5em;position:relative;cursor:default;}
#intro .tags .sub {position:absolute;top:100%;left:50%;opacity:0;max-height:0;white-space:nowrap;transform:translateX(-50%);border-radius:1em;padding:1rem .5rem 0;font-size:.725rem;display:flex;align-items:center;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
#intro .tags .sub:before {content:"";display:inline-block;border:6px solid transparent;border-bottom-color:rgb(32,19,42);width:0;height:0;position:absolute;bottom:100%;margin-bottom:-1rem;left:50%;margin-left:-6px;opacity:0;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
#intro .tags h5:hover .sub {max-height:3rem;opacity:1;}
#intro .tags h5:not(:hover) .sub {pointer-events:none;}
#intro .tags h5:hover .sub:before {opacity:1;}
#intro .tags .sub span {display:inline-block;color:#fff;padding:.2em .85em .25em;background-color:rgba(32,19,42,.75);}
#intro .tags .sub span:first-child {border-radius:1em 0 0 1em;padding-left:1rem;}
#intro .tags .sub span:last-child {border-radius:0 1em 1em 0;padding-right:1rem;}
#intro .tags .sub i {opacity:.01;width:1px;position:absolute;right:0;top:0;overflow:hidden;color:rgba(0,0,0,.01);}
#intro h3 + p {margin-top:3em;color:#fff;}
#working-from {position:absolute;bottom:0;left:0;color:#fff;display:flex;align-items:center;font-size:.8em;}
#working-from svg {width:.8em;margin-right:.6em;height:auto;}
#working-from svg path {fill:rgb(170,31,47);}
#splash {color:#fff;line-height:1.8em;padding-top:14em;z-index:2;position:relative;overflow:hidden;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
.third {float:left;width:28%;text-align:center;opacity:0;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
}
.third:first-child {margin-right:8%;}
.third:last-child {margin-left:8%;}
.third img {max-width:80%;margin:0 auto;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
#scroller {position:absolute;bottom:3%;color:#fff;text-align:center;left:50%;width:200px;margin-left:-100px;font-size:0.8em;z-index:2;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
}
#scroller span {display:block;margin-top:0.5em;}
.waypoint {display:block;position:absolute;top:78px;}
.dark {color:#fff;}
.project {background-size:cover;background-attachment:fixed;background-position:center center;position:relative;z-index:2;}
.project .content {text-align:center;}
.button {height:55px;}
.button a {border-radius:6px;font-size:16px;/*font-weight:600;*/font-family:'museo-sans', sans-serif;font-weight:700;padding:15px 1em;background:rgb(170,31,47);text-transform:uppercase;display:inline-block;opacity:0.9;/*box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3);*/letter-spacing:.025em;
transition: all .1s;
-moz-transition: all .1s;
-webkit-transition: all .1s;
-o-transition: all .1s;
}
.button a:hover {opacity:1;}
.project .button a {background:rgba(10,0,20);}
.button a:active {/*box-shadow:none;margin-top:3px;padding-bottom:13px;*/}
.button {display:inline-block;text-align:center;color:#fff;}
.button a {min-width:180px;}
#contact-box .button a {width:12em;}
.macbook {border-radius:1.5em 1.5em 0 0;background:#000;width:700px;height:440px;margin:3em auto 6em;border:3px solid #bbb;border-bottom:none;position:relative;box-shadow:0 0 0.1em rgba(0,0,0,0.3);
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
.macbook:after {content:"";position:absolute;top:100%;left:-13%;width:126%;height:1.2em;background:#ccc;border-bottom:0.5em solid rgba(0,0,0,0.2);border-radius:0 0 1em 1em;z-index:1;box-shadow:0 0.3em 0.4em rgba(0,0,0,0.2);}
.macbook:before {content:"";position:absolute;top:100%;left:42%;width:16%;height:0.5em;background:rgba(0,0,0,0.3);border-radius:0 0 0.5em 0.5em;z-index:2;}
.macbook .screen {position:absolute;top:2em;left:2em;right:2em;bottom:2em;background:#222;overflow:hidden;max-width:630px;}
.macbook .screen:before {content:"";position:absolute; top:-1em;left:50%;margin:-5px;width:10px;height:10px;background:#000;border-radius:5px;border:4px solid #222;border-right-color:#292929;border-bottom-color:#292929;box-sizing:border-box;-moz-box-sizing:border-box;}
.macbook .screen:after {content:"";position:absolute;top:-2em;right:-2em;width:0;height:0;opacity:0.07;border-top-right-radius:1.5em;border-color: #fff #fff transparent transparent;border-style: solid;border-width: 10em;}
.macbook .screen img {width:100%;transform: translateZ(0);-webkit-transform: translateZ(0);vertical-align:middle;}
video, object { left:0; position:fixed; top:0;z-index:1 !important;
/*transition: all .1s;
-moz-transition: all .1s;
-webkit-transition: all .1s;
-o-transition: all .1s;*/
}
#video-container {height: 100%;width: 100%;z-index:-1;position: absolute;top: 0;left: 0;overflow: hidden;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}

/* Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

.has-slider {max-height:100%;opacity:0;overflow:hidden;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
}
.has-slider.slick-initialized {opacity:1;max-height:none;}

.slick-slider .direction {position:absolute;top:50%;left:50%;margin-left:-450px;margin-top:-20px;width:40px;height:60px;display:block;background-position:center center;background-size:contain;background-image:url(images/nav-left.png);background-repeat:no-repeat;opacity:0.2;cursor:pointer;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
.slick-slider .direction:hover {opacity:1;}
.slick-slider .direction.prev {left:6%;background-image:url(images/arrow-left.svg);}
.slick-slider .direction.next {right:6%;background-image:url(images/arrow-right.svg);}
/*
.bx-wrapper, .bx-viewport {height:100% !important;width:100% !important;overflow:hidden;}
.bx-wrapper:after {content:"";position:absolute;top:0;left:0;right:-1px;bottom:0;border:1px solid #000;}
*/
.controls span {position:absolute;top:50%;left:50%;margin-left:-450px;margin-top:-20px;width:40px;height:60px;display:block;background-position:center center;background-size:contain;background-image:url(images/nav-left.png);background-repeat:no-repeat;opacity:0.4;cursor:pointer;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}
.controls span.slider-next {margin-left:420px;background-image:url(images/nav-right.png);}
.controls span a {width:200%;height:200%;display:block;margin:-80% -50%;}
.controls span:hover {opacity:0.75;}

#ie-bg {background-image:url(images/still.jpg);background-position:center center;background-repeat:no-repeat;width:100%;height:100%;}
#ie-popup {position:fixed;top:50%;left:50%;width:500px;height:340px;background:#fff;padding:2em;margin:-170px -250px;text-align:center;}
#ie-popup p {margin:1.4em 0 0.8em;clear:both;}
#ie-popup p.subtext {color:#999;font-size:0.8em;margin-top:0.5em;}
#ie-popup .browser {float:left;margin:0 7px;width:93px;display:block;color:#999;font-size:0.7em;font-weight:500;padding-top:10px;}
#ie-popup .browser img {width:100%;}

.start-project-wrapper {background:#ddd;padding:4em;}
div.start-project {background:#fff;border-radius:1em;padding:3em;max-width:60em;}
div.start-project .form-row {margin-top:1em;}
div.start-project p {margin-top:1em;}
div.start-project .options {margin-top:1em;}
div.start-project .options label {display:inline-block;margin-right:1em;margin-bottom:1em;position:relative;cursor:pointer;}
div.start-project .options label input {appearance:none;-moz-appearance:none;opacity:0;width:0;height:0;margin:0;position:absolute;top:0;left:0;}
div.start-project .options label span {display:inline-block;padding:.5em 1em;border-radius:.5em;color:rgb(170,31,47);border:2px solid rgb(170,31,47);font-weight:700;font-size:1.1em;color:#777;border-color:#777;
transition: all .1s ease;
-moz-transition: all .1s ease;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
}
div.start-project .options label span:hover {/*background-color:rgba(170,31,47,0.05);*/border-color:rgb(170,31,47);color:rgb(170,31,47);}
div.start-project .options label input:checked + span {background-color:rgba(170,31,47,1);color:#fff;border-color:rgb(170,31,47)}

@media screen and (min-width: 1700px){
	header {padding:2.5em 0;}
	header.thin {padding:.75em 0;}
	h3 {font-size:3em;}
	h6 {font-size:1em;}
}

@media screen and (max-width: 1500px){
	body {font-size:95%;}
}
@media screen and (max-width: 1200px){
	body {font-size:90%;}
	.macbook {width:600px;height:378px;}
}
@media screen and (max-height: 750px) {
	h4 {margin:1em 0;}
	.macbook {width:600px;height:380px;}
}
@media screen and (max-width: 1024px){
	.macbook {width:560px;height:350px;}
	.macbook .screen:after {border-width: 7em;}
	.macbook .screen:before {margin:-3px;width:6px;height:6px;}
}
@media screen and (max-width: 800px){
	footer span:nth-child(n+3) {display:none;}
	footer span {width:50%;}
	#contact-links {text-align:right;width:50%;}
	#contact-links a {margin-right:0;}
	.macbook {width:400px;height:258px;}
	.controls span {margin-left: -280px;margin-top:-10px;width:20px;height:40px;}
	.controls span.slider-next {margin-left: 250px;}
	#intro .tags .sub {display:none;}

}
@media screen and (max-width: 600px){
	body {font-size:75%;}
	.macbook {width:230px;height:146px;}
	.macbook:after {height:1.2em;}
	.project, #intro {background-attachment:scroll;}
	#intro {padding:5em 0 3em;}
	header {padding:1.2em 0;}
	header.thin {padding:0;}
	footer {font-size:0.7em;}
	#contact-links .email-link {display:none;}
	#contact-links img {width:16px;}
	#contact-links a {margin-left:1.6em;}
	#contact-links a:first-child {margin-left:0;}
	.macbook .screen {top:1em;left:1em;bottom:1em;right:1em;}
	section:not(#intro) {min-height:0;}
	/*#links {padding-top:15px;display:none;}*/
	.macbook .screen:after {border-width: 4em;top:-1em;right:-1em;}
	.macbook .screen:before {display:none;}
	.button a {padding-bottom:18px;}
	.content {padding:4em 2.5em;}
	.content, .container {padding-left:2.5em;padding-right:2.5em;}
	.controls {display:none;}
	h2 {padding:1em 2em;}
	h3 {font-size:2em;}
	video {display:none;}
	#contact-box .button a {width:auto;}
	header nav #links a {margin-left:1em;}
	#working-from {font-size:.9em;}
	footer span i, #intro .text i, #links i {display:none;}
}
@media screen and (max-width: 400px){
	#intro h1 {font-size:2.5em;}
	#intro h3 {font-size:1.6em;}
	.content, .container {padding-left:2em;padding-right:2em;}
}
@media print {
	header, nav {width:100% !important;border:none;box-shadow:none;position:static;background:none !important;text-align:center;}
	#logo {width:96px;float:none;margin-top:10%;}
	nav:after {content:"Hodephinitely - Web Design & Development";padding:15px 0 50px;display:block;margin:15px 0;font-size:1.8em;border-bottom:1px solid #ddd;}
	.third img, #video-container, #links, .button, footer, #intro, .macbook:after, .macbook:before,
	.macbook .screen:after, .macbook .screen:before, .controls {display:none !important;}
	h2 {border-bottom:1px solid #ccc;color:#000 !important;padding:25px;display:none;}
	.content {padding:25px 0;}
	#intro {background:#000 !important;height:200px;width:100%;}
	.project {color:#000 !important;display:none;}
	.macbook, .macbook .screen {width:100%;padding:0;margin:0;background:none;overflow:hidden;border:none;height:auto;border-radius:0;}
	body {font-size:80%;}
	.macbook .screen {position:static;}
	#contact-box .button:after {content:"hi@hodephinitely.com";}
	ul.bxslider {width:100% !important;overflow:auto;}
	ul.bxslider li {display:none;}
	ul.bxslider li.bx-clone + li {display:block;}
	ul.bxslider li img {width:100% !important;display:block;opacity:1;}
	.bx-wrapper:after {display:none;}
	#contact-box p:after {content:"hi@hodephinitely.com";padding:15px 0;display:block;margin:15px 0;font-size:0.9em;color:#000;padding:20px;border-radius:5px;border:1px solid #ddd;margin:50px 100px 0;}
}