/*

    WALKER AND SCOBLE
    Main Stylesheet


    SWATCHES:

    Green       #BED63A     rgba(190,214,58)
    Black       #151715     rgba(21,23,21)

    NOTES:

    .block {}
    .block__element {}
    .block--modifier {}

*/


/*==================================================================
    Fonts 
==================================================================*/

@font-face {
    font-family: 'SourceSansProLight';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/SourceSansPro-Light-webfont.eot');
    src: url('../fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Light-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-Light-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-Light-webfont.svg#SourceSansProLight') format('svg');
    }

@font-face {
    font-family: "SSGeomiconsSquared";
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/ss-geomicons-squared.eot');
    src: url('../fonts/ss-geomicons-squared.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ss-geomicons-squared.woff') format('woff'),
         url('../fonts/ss-geomicons-squared.ttf')  format('truetype'),
         url('../fonts/ss-geomicons-squared.svg#SSGeomiconsSquared') format('svg');
    }

/*==================================================================
    Reset 
==================================================================*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, ul, li, ol, dl, p, figure, form, fieldset, input, textarea { border: 0; font-size: 100%; margin: 0; padding: 0; }
section, nav, article, aside, header, footer, figure, figcaption, details { display: block }
audio, video, canvas { display: inline-block; *display: inline; zoom: 1; }
ul, ol, dl, li, dt, dd { padding: 0; margin: 0; list-style: none; }
strong { font-weight: normal; }

/*==================================================================
    Base 
==================================================================*/

html, form, input, textarea { color: #151715; font-family: 'SourceSansProLight', 'Helvetica Neue', 'Arial', sans-serif; font-size: 1em; line-height: 1.4; }
h2, h3, h4 { font-weight: normal; margin-bottom: 1em; text-align: center; }
img { display: block; width: auto; max-width: 100%; height: auto; }
a { color: #151715; }

h1, .alpha { font-size: 2em; }
h2, .beta  { font-size: 1.5em; }
h3, .gamma { font-size: 1.25em; }
h4, .delta { font-size: 1.125em; }

@media screen and (min-width: 800px) {
    html, form, input, textarea { font-size: 18px; font-size: 1.125rem; }
    }

/*==================================================================
    Layout 
==================================================================*/

/* Sections */

[role="banner"] { background: #fff; position: relative; z-index: 1; -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); box-shadow: 0 0 4px rgba(0,0,0,0.3); }
[role="main"] { background: #E8E8E8; }
[role="contentinfo"] { background: #151715; color: #fff; text-align: center; }

/* Clearing */

[role="banner"]:before, [role="main"]:before, [role="contentinfo"]:before, .cf:before { content: ""; display: table; }
[role="banner"]:after,  [role="main"]:after,  [role="contentinfo"]:after,  .cf:after  { content: ""; display: table; clear: both; }

/* Container */

.constrain { margin: 0 auto; max-width: 1024px; position: relative; }

/*==================================================================
    Modules 
==================================================================*/

/* Navigation */

.main-nav { max-height: 0; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.main-nav.show { max-height: 5em; }
.main-nav li { background: #151715; float: left; text-align: center; width: 33.33333%; }
.main-nav li a { border-left: 1px solid rgba(255,255,255,0.2); color: #fff; display: block; padding: 0.5em 0; text-decoration: none; }
.main-nav li:first-child a { border-left: none; }

@media screen and (min-width: 1024px) {
    .main-nav { margin-right: -1em; max-height: none; position: absolute; right: 0; }
    .main-nav li { background: transparent; width: auto; }
    .main-nav li a { border-left-color: #BED63A; color: #151715; padding: 0 1em; }
    }

/* Masthead */

.mast { margin: 1em; padding: 0 1em; position: relative; }
.mast__logo { border-bottom: 1px solid #BED63A; margin: 0 auto; max-width: 450px; padding-bottom: 0.5em; }
.mast__logo img { width: 100%; }
.mast__slogan { margin: 0.5em 0 0 0; }
.mast__nav-toggle { cursor: pointer; display: block; left: 0; position: absolute; text-decoration: none; top: 0; }
.mast__phone { display: block; position: absolute; right: 0; text-decoration: none; top: 0; }

@media screen and (min-width: 1024px) {
    .mast { position: static; }
    .mast__nav-toggle { display: none; }
    .mast__phone { left: 0; right: auto; }
    }

/* MAIN CONTENT */

.grid { position: relative; }
[class^="grid__box"] { padding: 2em; position: relative; background: #BED63A; background-image: -webkit-linear-gradient(top right, #BED63A 50%, #F2F7D8 100%); background-image: -moz-linear-gradient(top right, #BED63A 50%, #F2F7D8 100%); background-image: linear-gradient(to bottom left, #BED63A 50%, #F2F7D8 100%); }
.grid__box--intro { background: #151715; color: #fff; }
.grid__box--form { background: #fff; }
.grid__box--map { }

@media screen and (min-width: 800px) {
    .grid { display: table; width: 100%; }
    [class^="grid__box"] { display: table-cell; height: 400px; vertical-align: top; width: 50%; }
    .grid__box--intro { }
    .grid__box--form { background: #BED63A; background-image: -webkit-linear-gradient(bottom left, #BED63A 50%, #F2F7D8 100%); background-image: -moz-linear-gradient(bottom left, #BED63A 50%, #F2F7D8 100%); background-image: linear-gradient(to top right, #BED63A 50%, #F2F7D8 100%); }
    .grid__box--map { background: #fff; }
    }

/* Location Map */

#location-map { width: 100%; height: 400px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2); box-shadow: 0 0 4px rgba(0,0,0,0.2); }
#location-map label { width: auto; display: inline; }
#location-map img { max-width: none; }

/* Footer */

.footer { padding: 3em 0; text-align: center; }
.footer a { color: #fff; }
.footer strong { color: #BED63A; }
.footer img { margin-left: auto; margin-right: auto; margin-top: 0.5em; margin-bottom: 0.1em; }

/* Lists */

.list { margin-bottom: 1em; }
.list li { padding-left: 2em; margin-left: 0; position: relative; }
.list li:before { content: ' '; color: #BED63A; position: absolute; left: 0; top: 50%; }
.list--intro li:before { content: '\2713'; }
.list--people li:before { content: '\1F464'; }
.list--people small { color: #999; font-size: 75%; }
.list--contact li { margin-top: 1em; padding-left: 2.5em; }
.list--contact li:before { content: attr(data-icon); color: #151715; font-size: 1.5em; }

/* Message Form */

.message-form input, .message-form textarea { background: #e7e7e7; margin-bottom: 0.5em; padding: 0.5em 0.75em; width: 100%; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1); box-shadow: inset 0 0 4px rgba(0,0,0,0.1); -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; }
.message-form input:focus, .message-form textarea:focus { background: #151715; color: #fff; outline: 0; }
.message-form input[type="submit"] { background: #151715; color: #fff; cursor: pointer; padding: 0.75em; }
.message-form input[type="submit"]:hover { background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; padding: 0.75em; }
.message-form input[type="submit"]:after { color: #fff; }
.message-form p { display: inline-block; vertical-align: top; width: 100%; }
.message-form p.half--left { padding-right: 0.5em; width: 50% }
.message-form p.half--right { padding-left: 0.5em; width: 50%; }

@media screen and (min-width: 800px) { 
    .message-form input, .form textarea { background: #fff; -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2); box-shadow: 0 0 4px rgba(0,0,0,0.2); }
    }

/*==================================================================
    Icons 
==================================================================*/

html:hover [class^="icon"]{-ms-zoom: 1;}
.icon:before { content: attr(data-icon); font-family: "SSGeomiconsSquared"; font-style: normal; font-weight: normal; line-height: 0; text-decoration: none; white-space: nowrap; -webkit-font-smoothing: antialiased; }

/*==================================================================
    State 
==================================================================*/

.is-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
@media screen and (max-width: 799px) { .is-hidden-mobile { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } }
@media screen and (min-width: 800px) { .is-hidden-desk { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } }