/* 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;}


/*------------------------------------------ 
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 {position:relative;float:left;margin:0 0 20px 0;width:100%;}

@media only screen and (min-width: 480px) and (max-width: 979px) {
.wrapper {padding:0 5px;width:470px;margin:0 auto;}
}

@media only screen and (min-width: 1px) and (max-width: 480px) {
.wrapper {padding:0 5px;}
}

/*------------------------------------------ 
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(0, 0, 0, .2);color:#fff;}
::-moz-selection {background:rgba(0, 0, 0, .2);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:100;font-size:16px;line-height:24px;margin-bottom:20px;}
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 {-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;}

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

#full-background {display:none;}


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

#opening {z-index:9998;padding:12% 0 0 0;margin:0 0 3% 0;background:rgba(0, 104, 92, 1);position:relative;color:#fff;border-top:5px solid rgba(246, 80, 38, 1);}
#opening h1, .photo h1 {font-family:"museo-slab";text-transform:uppercase;font-weight:700;font-size:72px;line-height:62px;letter-spacing:-6px;}
#background h1, #work h1, #more h1, #contact h1, #ArticleIntro h1, .photo-1 h1, .photo h1 {font-family:"museo-slab";text-transform:uppercase;font-weight:700;font-size:42px;line-height:38px;letter-spacing:-3px;}
#opening h1 span {position:relative;}
#opening p {color: rgba(255, 255, 255, .8);font-weight:100;}
#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:-30px; left:0;background:rgba(0, 104, 92, 1);position:absolute;z-index:-1;}
#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;font-weight:300;font-size:6px;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 10px 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;}

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

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

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


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

#background h1, #more h1, #contact h1 {position:relative;color:rgba(0, 104, 92, 1); word-spacing:10px;}
h1 {font-family:"museo-slab";}
h2 {color:rgba(0, 104, 92, 1);font-size:12px;line-height:20px;font-weight:600;letter-spacing:2px;text-transform:uppercase;}
#background h2 {color:rgba(0, 104, 92, 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;}
#more h1 {font-size:24px;letter-spacing:0;word-spacing:0;}


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

#work {background:#fff;}
.example {width:100%;float:left;position:relative;border-bottom:3px solid rgba(0, 104, 92, 1);}
.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;font-family:"aktiv-grotesk-std";background:rgba(255, 255, 255, .7);
z-index:998;-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;}
.example span h6 {margin-top:25%;font-family:"museo-slab";font-weight:700;font-size:24px;line-height:30px;text-transform:uppercase;color:rgba(0, 104, 92, 1);}
.buttonB {color:#fff;background:rgba(0, 104, 92, 1);font-size:12px;text-transform:uppercase;text-align:center;border-radius:50px;height:40px;width:200px;margin:20px auto 0 auto;line-height:40px;}

/* ---------------------------
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:200px;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:120px;width:100%;content:""; top:-80px; left:0;background:#fff;position:absolute;}
.photo-1 h1 {margin-top:20%;} 
.photo h1 {margin-top:5%;} 
.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:160px;image-rendering: optimizequality;overflow: hidden;}



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

#contact {background:#fff;padding-top: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: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:5px;}
.submit {cursor:pointer;color:#fff;background:rgba(0, 104, 92, .8);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:20px;height:180px;}
input, textarea, #commentform {border-radius:none;}

.contact {display:none;}


/*--------   footer  ------------*/
.icons {margin: 0;}
.social-1, .social-2, .social-3, .social-4, .social-5, .social-6 {color:#ffffff;float:left;width:100%;height:60px;text-align:center;
line-height:60px;font-size:48px;}
.social-1:hover, .social-2:hover, .social-3:hover, .social-4:hover, .social-5:hover, .social-6:hover {}
.social-6 {background:rgba(59, 89, 152, 1);}
.social-6:hover {background:rgba(59, 89, 152, 1);}
.social-5 {background:rgba(221, 75, 57, 1);}
.social-5:hover {background:rgba(221, 75, 57, 1);}
.social-4 {background:rgba(0, 123, 182, 1);}
.social-4:hover {background:rgba(0, 123, 182, 1);}
.social-3 {background:rgba(81, 127, 164, 1);}
.social-3:hover {background:rgba(81, 127, 164, 1);}
.social-2 {background:rgba(234, 76, 137, 1);}
.social-2:hover {background:rgba(234, 76, 137, 1);}
.social-1 {background:rgba(85, 172, 238, 1);}
.social-1:hover {background:rgba(85, 172, 238, 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);z-index:9999;border-bottom:5px solid rgba(246, 80, 38, 1);}
#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:-40px; left:0;background:rgba(0, 104, 92, 1);position:absolute;}
#footer p {color:#fff;}
#more {background:#fff;z-index:999;}

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

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

h3 {color:rgba(0, 104, 92, 1);font-size:24px;font-weight:700;letter-spacing:-1px;font-family:"museo-slab";line-height:1em;margin-bottom:10px;}


#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: 0 10px 0 0;}
#ArticleBody img:first-child {border:none;}

.screen, .text {margin:30px auto;border:1px solid rgba(0, 0, 0, .4);}
.text {border:none;}


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

#more {background:#fff;}
#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;position:relative;top:-30px;}
.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 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 {z-index:999;background:#fff;}


@media only screen and (max-device-width: 480px) {
	
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;}
}



@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);}



.mobile {display:none;}