/* Reset
------------------------------------------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, menu {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
input, textarea {font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;margin:0;}
ul, li {list-style-type:none;}
figure {margin:0;padding:0;}
input[type='submit'] {-webkit-appearance: none;-moz-appearance: none;appearance: none; }

/* Grid Containers
------------------------------------------ */
.wrapper {width:1170px;padding:0 30px;margin:0 auto;position:relative;float:none;}


/* Grid
------------------------------------------ */
.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {float:left;margin:0 30px 30px 0;position:relative;padding:0;}

.column-1 {width:70px;}
.column-2 {width:170px;}
.column-3 {width:270px;}
.column-4 {width:370px;}
.column-5 {width:470px;}
.column-6 {width:570px;}
.column-7 {width:670px;}
.column-8 {width:770px;}
.column-9 {width:870px;}
.column-10 {width:970px;}
.column-11 {width:1070px;}
.column-12 {width:1170px;margin-right:0;}
.last {margin-right:0px;position:relative;}

/*------------------------------------------ 
Body ------------------------------------------------------------*/

body{margin:0;padding:0;margin:0;padding:0;font-family:"aktiv-grotesk-std", helvetica, arial, sans serif;font-size:17px;}
::selection {background:rgba(246, 80, 38, 1);color:#fff;}
::-moz-selection {background:rgba(246, 80, 38, 1);color:#fff;}



/*------------------------------------------ 
Universal Styles ---------------------------*/

.linkage {padding-top:150px;}
img {max-width:100%;}
section {float:left;width:100%;position:relative;}
p {font-family: "aktiv-grotesk-std";font-weight:300;margin-top:10px;font-size:18px;line-height:28px;}
p a {color:rgba(246, 80, 38, 1); font-weight:400;}
p a i {font-size:10px; margin:0 3px;}
a:hover {background:rgba(246, 80, 38, 1);color:rgba(255, 255, 255, 1)}
b {font-weight:600;}
.right {float:right;}
.left {float:left;}

/*------------------------------------------ 
Transitions ---------------------------*/

body, a, menu li a, menu li a:hover, menu li a:hover span, menu li a span, figure:hover, figure:before, .button, .button h6 span, .button:hover h6 span, .button:hover h6 i, .button:hover, .buttonB, .buttonB:hover, .oval, .oval:hover, .stat-1, .stat-2, .stat-3, .stat-4, .stat-1:hover, .stat-2:hover, .stat-3:hover, .stat-4:hover, .prev a:hover, .next a:hover, .example-1:hover, .example-1, .example:hover, .example, .example span:hover, .example span:hover h6, input:hover, textarea:hover, input:focus, textarea:focus, .ArticleIntro h1 a:hover i, .ArticleIntro h1 a i, .box:hover, project:hover, .box, .project, .btn, .btn:hover, .submit, .submit:hover, .default, .fixed, .contact:hover, .contact, #more a:hover, #more a:hover h5, #more a:hover .dek:before {-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;text-decoration:none;}

/*------------------------------------------ 
Headings ---------------------------*/

h1 {font-family:"museo-slab";font-weight:700;font-size:110px;line-height:90px;letter-spacing:-6px;text-transform:uppercase;position:relative;color:rgba(0, 104, 92, 1); word-spacing:10px;}
h2 {color:rgba(0, 104, 92, 1);font-size:14px;line-height:20px;font-weight:600;letter-spacing:3px;text-transform:uppercase;}
#opening p, #ArticleIntro p {color: rgba(255, 255, 255, .8);}
#opening p {font-size:32px;line-height:42px;font-weight:100;}


/*------------------------------------------ 
Full Background ------------------------------------------------------------*/

#full-background {background: url("") no-repeat scroll center top / 100% auto #000;background-image: url("http://markhobbsdesign.com/images/kazoo-3.jpg");background-size:100% auto;color: #FFFFFF;display: block;height: 100%;image-rendering: optimizequality;overflow: hidden;position: fixed;top: 0;width: 100%;z-index: -999;padding:5% 0 0 0;}
/*
#full-background:after {position:absolute;top:0;left:0;height:100%;width:100%;content:"";background:rgba(246, 80, 38, .5);}
*/
#full-background .wrapper {z-index:9998;}



/*------------------------------------------ 
Opening ------------------------------------------------------------*/

#opening {z-index:9998;padding:12% 0 2% 0;margin:0 0 40% 0;background:rgba(0, 104, 92, 1);position:relative;color:#fff;border-top:5px solid rgba(246, 80, 38, 1);}
#opening h1, #full-background h1, .photo-1 h1, .photo h1 {color:#fff;margin-top:20%;}
.photo h1 {margin-top:10%;}
#opening h1 {margin-top:0;}
#opening:after {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
height:200px;width:100%;content:""; bottom:-120px; left:0;background:rgba(0, 104, 92, 1);position:absolute;z-index:-1;}
#opening h2:before {position:absolute;background:rgba(255, 255, 255, 1);top:-10px;left:0;height:3px;width:100%;content:"";}
#opening h2 {color:#fff;position:relative;display:inline;top:30px;}
#opening i {font-size:12px;position:relative;top:-2px;margin-left:10px;}


/*-------------
Navigation ----------------------------------------*/

.btn {border:1px solid rgba(255, 255, 255, .4);color:rgba(255, 255, 255, .4);padding:5px 10px;font-weight:300;font-size:10px;text-transform:uppercase;letter-spacing:2px;}
.btn:hover {background:#fff;color:rgba(0, 104, 92, 1);}
.logo {font-family:"museo-slab";color:rgba(255, 255, 255, .4);}
.logo:hover {color:#fff;background:none;}
.btn, .logo {float:left;margin: 0 20px 0 0;}

/*-------------------------
 fixed nav --------------------------*/
 
.fixed {position:fixed;z-index:9999;padding:20px 0 20px 20px;top:0;left:0;width:100%;}
.fixed:after {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
height:200px;width:100%;content:""; bottom:10px; left:0;background:rgba(0, 104, 92, 1);position:absolute;z-index:-1;}
.fixed .btn {border:1px solid rgba(255, 255, 255, 1);color:rgba(255, 255, 255, 1);}
.fixed .btn:hover {background:#fff;color:rgba(0, 104, 92, 1);}
.fixed .logo {color:#fff;}


/*------------------------------------------ 
Profile ------------------------------------------------------------*/

#background {background:#fff;z-index:999;}
#background:before, #contact:before {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
height:200px;width:100%;content:""; top:-80px; left:0;background:#fff;position:absolute;}
#background p {color:#000;position:relative;z-index:9999;}



/*------------------------------------------ 
Work ------------------------------------------------------------*/

#work {background:#fff;}
.example {width:33.33%;float:left;position:relative;}
.example:after {box-shadow:1px 1px 0px 0px rgba(255, 255, 255, .4) inset;position:absolute;content:"";left:0;top:0;width:100%;height:100%;}
.example img {float:left;} 

.example span{color:#fff;width:100%;padding:0;height:100%;left:0;text-align:center;position:absolute;opacity:0;font-family:"aktiv-grotesk-std";background:rgba(255, 255, 255, .1);
z-index:998;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.example span h6 {margin-top:25%;}
.example span:hover{opacity:1;}
.example span h6 {font-family:"museo-slab";font-weight:700;font-size:24px;line-height:30px;text-transform:uppercase;color:rgba(0, 104, 92, 1);}
.buttonB {background:#fff;color:rgba(0, 104, 92, 1);font-size:12px;text-transform:uppercase;border:2px solid rgba(0, 104, 92, 1);text-align:center;border-radius:50px;height:40px;width:200px;margin:20px auto 0 auto;line-height:40px;}
.buttonB:hover {border-radius:0;color:#fff;background:rgba(0, 104, 92, 1);box-shadow:none;}

/* Rectangle Out */
.hvr-rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: rgba(255, 255, 255, .9);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .9);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
  color: white;
}
.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* ---------------------------
Photo ----------------------------------------------------------*/

.photo {background: url("") no-repeat scroll center top / 100% auto #000;background-image: url("http://markhobbsdesign.com/images/landscape.jpg");background-size:100% auto;color: #FFFFFF;display: block;height:500px;image-rendering: optimizequality;overflow: hidden;}
.photo-1:before {-moz-transform: skewY(3deg);-webkit-transform: skewY(3deg);-o-transform: skewY(3deg);-ms-transform: skewY(3deg);transform: skewY(3deg);
height:200px;width:100%;content:""; top:-80px; left:0;background:#fff;position:absolute;}
.photo-1 {background: url("") no-repeat scroll center bottom / 100% auto #000;background-image: url("http://markhobbsdesign.com/images/city.jpg");background-size:100% auto;color: #FFFFFF;display: block;height:450px;image-rendering: optimizequality;overflow: hidden;}

/*------------ contact --------------------*/

#contact {background:#fff;}
#contact .column-12 {height:550px;}
#contact p {font-size:28px;line-height:40px;}
#commentform {font-family: "aktiv-grotesk-std";}
input, textarea {background:rgba(0, 104, 92, .3);font-weight:300;font-size:14px;line-height:20px;padding:20px 0;float:left;width:100%;text-indent:20px;border:none;box-shadow:0px 0px 0px 2px rgba(0, 104, 92, 1) inset;}
#commentform input {margin-bottom:20px;}
.submit {cursor:pointer;color:#fff;background:rgba(0, 104, 92, .8);height:60px;line-height:40px;text-align:center;font-size:14px;font-weight:500;text-transform:uppercase;box-shadow:none;}
.submit:hover {box-shadow:none;background:rgba(0, 104, 92, 1);}
textarea {margin-bottom:20px;height:180px;}

.contact {height:40px;width:100%;background:rgba(0, 104, 92, .3);box-shadow:0 0 0 2px rgba(0, 104, 92, 1) inset;color:#fff;font-size:36px;line-height:40px;text-align:center;float:left;overflow:hidden;}
.contact:hover {color:#fff;font-size:72px;box-shadow:none;}
.facebook:hover {background:rgba(59, 89, 152, 1);}
.google:hover {background:rgba(221, 75, 57, 1);}
.linked:hover {background:rgba(0, 123, 182, 1);}
.instagram:hover {background:rgba(81, 127, 164, 1);}
.dribbble:hover {background:rgba(234, 76, 137, 1);}
.twitter:hover {background:rgba(85, 172, 238, 1);}



/*--------   more  ------------*/

#more {background:#fff;height:500px;}
#more a {color:#000;}
#more a:hover, #more a:hover h5 {color:rgba(246, 80, 38, 1)}
.more {height:300px;overflow:hidden;}
.dek {background:#fff;padding:0 20px 20px 20px;position:relative;}
.dek:before {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
content:"";position:absolute;top:-20px;left:0;height:50px;width:100%;background:#fff;z-index:0;}
#more a:hover .dek:before {top:-50px;height:70px;}
#more h5 {font-size:24px;line-height:30px;font-weight:600;color:rgba(0, 104, 92, 1);text-transform:uppercase;position:relative;z-index:2;margin:0;padding:0;}
#more .column-4:after {box-shadow:-1px -1px 0 0 rgba(0, 104, 92, 1) inset, 1px 1px 0 0 rgba(0, 104, 92, 1) inset;content:"";position:absolute;top:0;left:0;height:100%;width:100%;}
#more .column-4 {z-index:999;background:#fff;}
#more h1 {font-size:60px;letter-spacing:-3px;}



/*--------   footer  ------------*/
.social {color:#ffffff;float:left;font-size:36px;width:15%;}
.social:hover {text-shadow:0px 1px 2px rgba(0, 0, 0, .2);background:none;color:rgba(246, 80, 38, 1);}

h5 {border-bottom:1px solid rgba(255, 255, 255, .4);margin:0 0 20px 0;font-size:24px;line-height:36px;font-weight:100;padding-bottom: 5px;color:#ffffff;text-transform:uppercase;}
h5 span {border-bottom: 2px solid rgba(246, 80, 38, 1);padding-bottom:7px;}
#footer {background:rgba(0, 104, 92, 1);border-bottom:5px solid rgba(246, 80, 38, 1);padding:100px 0 0;}
#footer:before {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
height:200px;width:100%;content:""; top:-80px; left:0;background:rgba(0, 104, 92, 1);position:absolute;}
#footer p {color:#fff;}


/*------------------------------------------ 
Article ------------------------------------------------------------*/

#top {padding-top:70px;border-top:5px solid rgba(246, 80, 38, 1);}
#ArticleIntro {position:relative;height:100%;position:fixed;top:0;width:100%;z-index:-999;background:rgba(0, 104, 92, 1);}
#ArticleBody {margin-top:300px; background:#fff;}

h3 {color:rgba(0, 104, 92, 1);font-size:72px;font-weight:700;letter-spacing:-1px;font-family:"museo-slab";line-height:1em;}
h3 i {padding-right:20px;}

#ArticleBody .wrapper {margin-top:-300px;}

#ArticleBody:before {-moz-transform: skewY(-3deg);-webkit-transform: skewY(-3deg);-o-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);
height:200px;width:100%;content:""; top:-100px; left:0;background:#fff;position:absolute;}

#ArticleBody p {border-left:5px solid rgba(0, 104, 92, 1);margin:30px 0 0 0;padding:0 0 0 20px;}
/*
#ArticleBody p:first-child:first-letter {color: rgba(0, 104, 92, 1);float: left;font-family: "aktiv-grotesk-std", helvetica, arial, sans serif;font-size: 60px;font-weight: 900;
margin: 7px 0 0;padding: 0 5px 0 0;}
*/
.screen, .text {width:80%;margin:30px auto;}

#top .btn {border:1px solid #fff;color:#fff;}
#top .btn:hover {color:rgba(0, 104, 92, 1);}
#top .logo {font-family:"museo-slab";color:#fff;}




/*------------------------------------------ 
Timeline ------------------------------------------------------------*/

.stats {position:relative;width:100%;height:100%;}
.stat-1, .stat-2, .stat-3, .stat-4, .stat-5, .stat-6, .stat-7, .stat-8, .stat-9, .stat-10, .stat-11, .stat-12 {text-align:center;border-radius:50%;cursor:pointer;color:rgba(255, 255, 255, 1);background:#fff;border:3px solid rgba(0, 104, 92, 1);position:relative;color:rgba(0, 104, 92, 1);font-weight:600;font-size:12px;}
.stat-1:hover, .stat-2:hover, .stat-3:hover, .stat-4:hover, .stat-5:hover, .stat-6:hover, .stat-7:hover, .stat-8:hover, .stat-9:hover, .stat-10:hover, .stat-11:hover, .stat-12:hover {margin-left:-5px;margin-top:-20px;background:rgba(0, 104, 92, 1);color:#fff;color:#fff;}
.stat-1 {top:70px;left:40px;height:40px;width:40px;line-height:40px;}
.stat-1:hover {height:50px;width:50px;line-height:50px;}
.stat-2 {top:60px;left:30px;height:60px;width:60px;line-height:60px;}
.stat-2:hover {height:70px;width:70px;line-height:70px;}
.stat-3 {top:50px;height:80px;width:80px;line-height:80px;}
.stat-3:hover {height:90px;width:90px;margin-left:-5px;line-height:90px;}
.stat-4 {top:40px;height:100px;width:100px;line-height:100px;}
.stat-4:hover {height:110px;width:110px;line-height:110px;}
.stat-5 {top:30px;height:120px;width:120px;line-height:120px;}
.stat-5:hover {height:130px;width:130px;line-height:130px;}
.stat-6 {top:20px;height:140px;width:140px;line-height:140px;}
.stat-6:hover {height:150px;width:150px;line-height:150px;}
.stat-7 {top:10px;left:90px;height:160px;width:160px;line-height:160px;}
.stat-7:hover {height:170px;width:170px;line-height:170px;}
.stat-8 {top:0px;left:90px;height:180px;width:180px;line-height:180px;}
.stat-8:hover {height:190px;width:190px;line-height:190px;}
.stat-9 {top:-10px;left:100px;height:200px;width:200px;line-height:200px;}
.stat-9:hover {height:210px;width:210px;line-height:210px;margin-bottom:10px;}
.stat-10 {height:220px;width:220px;line-height:220px;}
stat-10:hover {height:230px;width:230px;line-height:230px;}
.stat-11 {height:240px;width:240px;line-height:240px;}
.stat-11:hover {height:250px;width:250px;line-height:250px;}
.stat-12 {top:-300px;height:260px;width:260px;line-height:260px;}
.stat-12:hover {height:270px;width:270px;line-height:270px;}

/*------------------------------------------ 
Timeline wrapper ------------------------------------------------------------*/

.timeline{padding:80px 0 120px 0;width: 100%;height:100px;margin:-50px auto 0 0;}
.timeline li a{display: block;outline: none;}
.timeline li a span{color:#000;width:170px;height: auto;padding:10px;left:50%;margin-left:-96px;font-weight: 300;font-size: 12px;line-height: 16px;text-align: center;border: 1px solid #fff;background: rgba(255, 255, 255, 1);border-radius: 5px;position: absolute;bottom: 100px;opacity: 0;
box-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;font-family:"aktiv-grotesk-std";}
.timeline li a span b {text-transform:uppercase;}
.timeline li a span:before,.timeline li a span:after{content: "";position: absolute;bottom: -12px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0, 0, 0, 0.2);}
.timeline li a span:after{bottom: -11px;margin-left: -10px;border-top: 10px solid rgba(255, 255, 255, 1);}
.timeline li a:hover span{opacity: 1;bottom: 110%;}




@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {


input[type='submit'] {-webkit-appearance: none;-moz-appearance: none;appearance: none; }

#ArticleBody p:first-child:first-letter {color: rgba(0, 104, 92, 1);float: left;font-family: "aktiv-grotesk-std", helvetica, arial, sans serif;font-size: 80px;font-weight: 900;
margin: 7px 0 0;padding: 10px 10px 10px 0;}

#commentform {font-family: "aktiv-grotesk-std";}
input, textarea {background:rgba(0, 104, 92, .3);font-weight:300;font-size:14px;line-height:20px;padding:2% 0;float:left;width:100%;text-indent:20px;border:none;box-shadow:0px 0px 0px 2px rgba(0, 104, 92, 1) inset;}
#commentform input {margin-bottom:10px;}
.submit {cursor:pointer;color:#fff;background:rgba(0, 104, 92, 1);height:60px;line-height:20px;text-align:center;font-size:14px;font-weight:500;text-transform:uppercase;box-shadow:none;}
.submit:hover {box-shadow:none;background:rgba(0, 104, 92, 1);}
textarea {margin-bottom:10px;height:180px;}
input, textarea, #commentform, .submit {border-radius:0;}

}

/*------------------------------------------ 
Thanks ------------------------------------------------------------*/

#thanks {padding:12% 0 2% 0;background:rgba(0, 104, 92, 1);border-top:5px solid rgba(246, 80, 38, 1);}
#thanks h1 {color:#fff;margin-top:20%;}
#thanks h1 {margin-top:0;}
thanks h2:before {position:absolute;background:rgba(255, 255, 255, 1);top:-10px;left:0;height:3px;width:100%;content:"";}
#thanks h2 {color:#fff;position:relative;display:inline;top:30px;}
#thanks i {font-size:12px;position:relative;top:-2px;margin-left:10px;}
#thanks p {color: rgba(255, 255, 255, .8);}