/*! MerkelWerks Custom Styles | MIT License | https://merkelwerks.com/
*
*  Built on ZURB Foundation
*
*  Chris Merkel, Michelle Merkel
*/



/* ==========================================================================
Layout and Backgrounds
==========================================================================
*/
/* Layout areas */

body {
    background: #0e4059;
    color: #d6c788;
    font-family: 'Alegreya Sans', Candara, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

header {
    background: #005c8c;
    color: #e8f4fa;
    position: relative;
}

footer {
    color: #d6c788;
    margin: 0;
    overflow: hidden;
    padding: .5em 1em 1em;
}

.main {
    background:#fffdde;
    color: #0e4059;
    padding: 2.2em 2em 2em;
}

.side {
    background:#f2e4b6;
    color: #665b2e;
    padding: 2.2em 2em 2em;
}

.page-shape {
    /* 1) horizontal offset, 2) vertical offset, 3) blur radius, 4) spread radius, 5) Color */
    -webkit-box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.25);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0 5px 25px 5px rgba(0, 0, 0, 0.25);  /* Firefox 3.5 - 3.6 */
    box-shadow:         0 5px 25px 5px rgba(0, 0, 0, 0.25);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}


/* ==========================================================================
Typography
==========================================================================*/

/* Text Selections */
::-moz-selection {
    background: #ffd738;
    text-shadow: none;
}

::selection {
    background: #ffd738;
    text-shadow: none;
}

/* Links */
a { color:#269900; }
a:hover, a:focus { color:#e57a00; cursor: pointer; }

/* Horizontal Rules */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    line-height: 1.0;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    text-rendering: optimizeLegibility;
}
h4,
h5,
h6 {
    font-weight: 700;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    color: inherit;
    font-size: 60%;
    font-weight: 700;
    line-height: 1.0;
}

h1 {
    font-size: 2.125rem;
}

h2 {
    font-size: 1.6875rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {}

.subheader {
    line-height: 1.4;
    color: inherit;
    font-weight: normal;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
}

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.0625em) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /* line-height: 1.1;*/
    }
    h1 {
        font-size: 2.75rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.6875rem;
    }
    h4 {
        font-size: 1.4375rem;
    }
    h5 {
        font-size: 1.125rem;
    }
    h6 {
        font-size: 1rem;
    }
}

/* 3) min-width 641px, large screens */
@media only screen and (min-width: 64.063em) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /* line-height: 1.1;*/
    }
    h1 {
        font-size: 2.75rem;
    }
    h2 {
        font-size: 1.875rem;
    }
    h3 {
        font-size: 1.6875rem;
    }
    h4 {
        font-size: 1.4375rem;
    }
    h5 {
        font-size: 1.125rem;
    }
    h6 {
        font-size: 1rem;
    }
}


/* ==========================================================================
Header
==========================================================================*/

header.hero {
    overflow: visible;
}
header.hero h1 {
    display: block;
    font-size: 1em;
    line-height: 1;
    margin: 0;
    position: relative;
}
header.hero img.logo {
    position: absolute;
    z-index: 99;
}

/* max-width 640px, mobile-only styles */
@media only screen {
    header {
        height:5.625em;
    }
    .hero h1 {
        height: 5.625em;
    }
    .hero img.logo {
        left: 0.118em;
        bottom: -0.294em;
        width: 17.5em;
        min-width: 15em;
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
            Color='rgba(0,0,0,0.5)')";
            filter: url(#drop-shadow);
        -webkit-filter: drop-shadow(0 5px 2px rgba(0,0,0,0.5));
        filter: drop-shadow(0 5px 2px rgba(0,0,0,0.5));
    }
}

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
    header {
        bottom: -0.5em;
        height: 8em;
        margin-top: -0.5em;
    }
    .hero h1 {
        height: 8em;
    }
    .hero img.logo {
        left: 2.4em;
        bottom: -0.25em;
        width: 21.875em;
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
            Color='rgba(0,0,0,0.5)')";
            filter: url(#drop-shadow);
        -webkit-filter: drop-shadow(0 5px 2px rgba(0,0,0,0.5));
        filter: drop-shadow(0 5px 2px rgba(0,0,0,0.5));
    }
}

/* 3) min-width 641px, large screens */
@media only screen and (min-width: 64.063em) {
    header {
        height: 9.875em;
    }
    .hero h1 {
        height: 9.875em;
    }
    .hero img.logo {
        left: 5em;
        width: 26.625em;
    }
}


/* ==========================================================================
Buttons and Menus
==========================================================================*/
button, .button {
    border-radius: .4em;
    border-style: solid;
    border-width: 0;
    padding: .875rem 1.125rem .875rem;
}

.button.secondary {
    position: relative;
    color: #269900;
    background-color: #faf3dc;
    box-shadow: 0 0 0 1px #faf3dc inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 4px 0 0 rgba(201, 190, 140, .8),
        0 4px 0 1px rgba(153,139,80,.8),
        0 4px 10px 0px rgba(0,0,0,0.4)
}

button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus  {
    color: #005986;
    background-color: #cce4f0;
    box-shadow: 0 0 0 1px #cce4f0 inset,
        0 0 0 2px rgba(255,255,255,0.3) inset,
        0 4px 0 0 rgba(167, 211, 233, .8),
        0 4px 0 1px rgba(0,119,179,.8),
        0 4px 10px 0px rgba(0,0,0,0.4)
}

.button-group.stack > li {
    margin: 0.75em 0 1.75em;
}

.button-group.stack > li > button, .button-group.stack > li .button,
.button-group.stack > li:first-child button, .button-group.stack > li:first-child .button {
    margin: .1em 0 1em;
    border-top:1px solid rgba(255,255,255,0.6);
}
.button-group.stack > li:first-child button, .button-group.stack > li:first-child .button {
    margin: 0 0 1em;
}

button.secondary:active, .button.secondary:active {
    top:4px;
    box-shadow:0 0 0 0 #cce4f0 inset,
        0 0 0 0 rgba(255,255,255,0.3) inset,
        0 0 0 0 rgba(167, 211, 233, .8),
        0 0 0 1px rgba(0,119,179,.8),
        0 0 0 0px rgba(0,0,0,0.4)
}


/* ==========================================================================
Icons
==========================================================================*/
/* 1) max-width 640px, mobile-only styles */
@media only screen {
    .icons-gears {
        background: transparent url(../img/mw-icons.svg) no-repeat;
        background-size: 8.250em 8.250em;
        display: block;
        padding-left: 2.625em;
        padding-top: 0.063em;
    }
    .icons-gears.services { background-position: -2.063em -4.125em; }
    .icons-gears.portfolio { background-position: 0px -6.188em; }
    .icons-gears.mission { background-position: -4.188em -2.063em; }
    .icons-gears.about { background-position: -6.250em 0; }
}

/* 2) min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
    .icons-gears {
        padding-top: 0;
    }
}

/* 3) min-width 641px, large screens */
@media only screen and (min-width: 64.063em) {

}

.button.icon { padding-left:24px; }
.button.icon img { margin-left:-24px; margin-right:12px;}

.button-group.stack > li.icon-small { margin: 1em 0 .1em 26px; }
.button-group.stack > li.icon-small img { margin-right:6px; }


/* ==========================================================================
Sidebar
==========================================================================*/
.side a { color: #006900}
.side a:hover, .side a:focus {
    color: #0067a3;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

.side p { color: #665b2e; }

/* 2) min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
    h3 {
        margin-top: 1.125em;
    }
    .side > h3:first-child {
        margin-top: 0.296em;
    }
}


/* ==========================================================================
Footer
==========================================================================*/

footer .copywrite { font-size:80%; }


/* ==========================================================================
Homepage
==========================================================================*/
.home-services ul, .home-portfolio ul {
    margin-left: 1.50em;
}

.home-portfolio {
    
}

/*.main .home-about {
    padding-left: 3.4em;
}*/