/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 100%;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}







/* ==========================================================================
   Author's custom styles
   ========================================================================== 



                Recommended CSS Order
                    Base
                    Layout
                    Module
                    State
                    Theme




                Colors
                ---------------------- 
                Blue:       #0057A3;   
                Dark blue:  #041E35;
                ----------------------

                
                Modular Scale
                ---------------------- 
http://modularscale.com/scale/?px1=14&px2=28&ra1=1.618&ra2=0
                ----------------------
                14px @ 1:1.618   
                28px @ 1:1.618  
                ----------------------
                657.6px = 41.099rem
                502.4px = 31.399rem
                406.4px = 25.401rem
                310.5px = 19.406rem
                251.2px = 15.699rem
                191.9px = 11.994rem
                155.2px = 9.703rem
                118.6px = 7.413rem
                95.9px  = 5.997rem
                73.3px  = 4.581rem
                59.3px  = 3.706rem
                36.6px  = 2.291rem
                28px    = 1.75rem
                22.6px  = 1.416rem
                18px    = 1.125rem
                14px    = .875rem
                10.7px  = .668rem


http://codepen.io/adrianparr/pen/mDEke for toggle


                */






/* ==========================================================================
   TYPOGRAPHY HIERARCHY, DESKTOP
   ==========================================================================*/
/*  ---------------------- 
    Thanks Grid: http://www.adamkaplan.me/grid/
    ---------------------- */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
  /* max-width: 48rem;
  width: 90%; */
}

.column {float: left;}
.column.full {width: 100%;}
.column.two-thirds {width: 60%;}
.column.half {width: 50%;}
.column.third {width: 35%;}
.column.fourth {width: 25%;}
.column.three-fourths {width: 75%;}
.column.flow-opposite, span.flow-opposite {float: right; }
.column.thumbnail {width: 7.413rem;}




/*  ----------------------------------------------------------------------- */
body {
    color: #222222;
    font-family: 'Lato', 'Helvetica', sans-serif;
    font-weight: 400;
}
h1 {font-size: 1.75rem; line-height: 1.75rem;}
h2 {font-size: 1.416rem;}
h3 {font-size: 1rem;}
h4 {font-size: .875rem;}
q {font-size: 1.125rem;}
.q-quote {line-height: 1.75rem;}
.q-title, .q-desc {color: inherit; display: block;}
.q-title {font-size: .875rem; text-align: right;}
.q-desc {font-size: .668rem; text-align: right;}

h1,h2,h3,.q-title,.q-em {
    font-weight: 900;
    font-style: italic;
}
h2,h3,h4,q {color: #0057A3;}

.tracked,h3,h4,.q,.animate,a
 {
    letter-spacing: .25em;
    text-transform: uppercase;
    font-style: normal;
}
::-webkit-input-placeholder { letter-spacing: .25em; text-transform: uppercase; font-style: normal; opacity: .25;}
::-moz-placeholder { letter-spacing: .25em; text-transform: uppercase; font-style: normal; opacity: .25;} /* firefox 19+ */
:-ms-input-placeholder { letter-spacing: .25em; text-transform: uppercase; font-style: normal; opacity: .25;} /* ie */
input:-moz-placeholder { letter-spacing: .25em; text-transform: uppercase; font-style: normal; opacity: .25;}


nav li, footer li, body li {list-style: none;}
.blk {color: #222222;}

::-moz-selection {
    color: #FFFFFF;
    background: #0057A3;
    text-shadow: none;
}
::selection {
    color: #FFFFFF;
    background: #0057A3;
    text-shadow: none;
}

    /*  ---------------------- 
        LINKS
        ----------------------*/
    a {
        color: inherit;
        text-decoration: none;
        text-shadow: 0 1px 2px rgba(0,0,0,.15);
    }
    .blue {
        color: #0057A3;
        text-decoration: none;
    }
    .cta {
        font-size: inherit;
        font-weight: 900;
        text-align: center;
        padding: 1rem 3rem;
        border: 2px solid #CCCCCC;
        border-radius: 3px;
        box-shadow: 0 0 15px rgba(0,0,0,.2);
        background: url("../img/circuit_gray.svg"); 
        background-color: #FFFFFF;
        background-repeat: repeat-x repeat-y;
    }
    .cta:hover {border-color: #0057A3;}
    .page-profile .cta-center {
        display: block;
        margin: 0 auto;
    }
    #profile-clients > div {
        margin-bottom: 4rem;
    }
    #profile-clients > div > q:first-of-type {
        display: block;
        margin-bottom: 1rem;
    }
    .page-home .cta {margin-bottom: 5rem;}

    .animate {}
    .animate:hover {}
    .animate:active {
        -webkit-transform: scaleX(.95) scaleY(.95);
        transform: scaleX(.95) scaleY(.95);
    }
    .page-results .container a:hover:not(.cta) {border-bottom: 1px solid #0057A3;}
/* ==========================================================================
   LAYOUT
   ==========================================================================*/
.readability {
    max-width: 545px;
}
.hr {
    width: 100%;
}
.hr-flip {
    width: 100%;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

/*  ---------------------- 
    PAGE-HOME
    ----------------------*/



/*  ---------------------- 
    PAGE-PROFILE
    ----------------------*/
    .page-profile section {margin-bottom: 2.291rem;}
    .hr-sm {width: 11.994rem; margin-bottom: 0;}
    .header + img {vertical-align: top;}
    .header h2 {font-size: 1.125rem;}
    /* mobile */
    @media (max-width: 54.75rem){
        .page-profile .header {
            margin-top: -39px;
            padding: 5%;
        }
        .header + img {margin-top: 0;}
        .column.thumbnail {width: 33.33333%; margin-top: .5rem;}
        section#bios h2 {font-size: 140%;}
        section#bios h4 {font-size: 80%;}
    }
    /* desktop */
    @media (min-width: 54.75rem){
        .page-profile .header {
            margin-top: -20px;
            position: relative;
            float: left;
            z-index: -1;
            width: 100%;
            height: 24.5rem;
            background: rgb(222, 222, 222);
            background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-profile.png') rgb(222, 222, 222);
            background:    -moz-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-profile.png') rgb(222, 222, 222);
            background:      -o-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-profile.png') rgb(222, 222, 222);
            background:     -ms-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-profile.png') rgb(222, 222, 222);
            background:         linear-gradient(450deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-profile.png') rgb(222, 222, 222);
            background-repeat: repeat, no-repeat;
            background-size: 100% 100%, cover;
            background-position: 0% 0%, 0% 70%;
        }
    }

    @media (max-width: 549px){
        .column.benefit {width: 100%;}
    }


    .benefit {max-width: 500px;}

    #bios h2, #bios h4 {margin-top: 0; margin-bottom: 0;}
    #bios li {margin-bottom: .668rem;}
    .rt-of-thumbnail {margin-left: 1rem;}
    .executive-highlights {margin-top: 1rem; margin-bottom: 1.75rem; padding-right: 2.291rem;}
    @media (max-width: 55.375rem){
        .column.half.tony, .column.half.steve{width: 100%;}
        .column.half.steve {margin-top: }   /* ADJUST MARGINS */
    }
    #profile-benefits ul {padding-left: 0;}
    #profile-benefits li {margin-right: 4.581rem;}


    .page-profile .cta-center, .page-results .cta {
        margin-bottom: 4.581rem;
    }

    @media (min-width: 54.75rem){
        .page-profile .cta {margin-left: 33%;}
    }


    @media (min-width: 70.188rem){
        #profile-clients .flow-opposite {margin-right: 20%;}
    }
    @media (min-width: 88.1878rem){
        #profile-clients .flow-opposite {margin-right: 40%;}   
    }

    footer.internal a {opacity: .66;}

    img.social {width: 1.5rem;}
    .no-tracking {
        letter-spacing: inherit;
        text-transform: inherit;
        text-decoration: underline;
    }

/*  ---------------------- 
    PAGE-RESULTS
    ----------------------*/
    /* mobile */
    @media (max-width: 54.75rem){
        .page-results .header {
            margin-top: -39px;
            padding: 5%;
            background-position: right top;
        }
        .header + img {margin-top: 0;}
        .page-results img.thumbnail {display: none;}

    }



    /* desktop */
    @media (min-width: 54.75rem){
        .page-results .header {
            margin-top: -20px;
            position: relative;
            float: left;
            z-index: -1;
            width: 100%;
            height: 22rem;
            background: rgb(222, 222, 222);
            background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-results.png') rgb(222, 222, 222);
            background:    -moz-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-results.png') rgb(222, 222, 222);
            background:      -o-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-results.png') rgb(222, 222, 222);
            background:     -ms-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-results.png') rgb(222, 222, 222);
            background:         linear-gradient(450deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.89) 40.95238095238095%), url('../img/page-results.png') rgb(222, 222, 222);
            background-repeat: repeat, no-repeat;
            background-size: 100% 100%, cover;
            background-position: 0% 0%, 0% 70%;
        }
        .page-results img.thumbnail {
            margin-top: 1.125rem;
        }
        .thumbnail {margin-right: 1.95rem;}
    }
    .results li {margin-bottom: 1rem;}
    #results-launch li {margin-top: -.75rem; padding-left: 1rem;}
    .results a {color: #0057A3;}
    .page-results .cta, #contact-area .submit-button{
        display: inline-block;
        font-weight: 400;
        color: #FFFFFF;
        background-color: #0057A3;
        background-image: url("../img/circuit_darken.svg");
        background-repeat: repeat-x repeat-y;        
        background-size: 100px;
        text-shadow: 0 2px #041E35;
        border: solid 1px #041E35;
    }
    .hideA, .hideB, .hideC, .hideD, .hideE, .hideF {
        display: none;
    }
    .page-results .column.thumbnail {width: 5.997rem}
    .page-results .readability {width: 100%;}
    .page-results section {margin-bottom: 3.706rem;}



/* ==========================================================================
   NAVIGATION
   ==========================================================================*/
nav {
    /* position: relative; */
    font-weight: 700;
    z-index: 0;
    background-color: rgba(255,255,255,.95);
}
.logo {
    font-size: 1.75rem;
    padding-top: .6rem;
}
.logo-superscript {
    font-size: 1.125rem;
    font-weight: 900;
    color: #0057A3;
    position: relative;
    top: -.35em;
}


nav > ul {
    margin-top: 0;
    width: 101%;
}
nav li:not(.logo) {
    padding-left: 0;
}
.icon {
    height: 1.75rem;
}
nav + img {
    vertical-align: top;
}

nav li {
    float: left;
    height: 3.706em;
}
nav li:last-of-type, .submit-button {
    color: #FFFFFF;
    background-color: #0057A3;
    background-image: url("../img/circuit_darken.svg");
    background-size: 100px;
    background-repeat: repeat-x repeat-y;
    text-shadow: 0 2px #041E35;
}
nav li:last-of-type:hover, .page-results .cta:hover, #contact-area .submit-button:hover { background-image: url("../img/circuit_darkest.svg"); }
/* ==========================================================================
   RESPONSIVE
   ==========================================================================*/
/*  ---------------------- 
    DESKTOP
    ----------------------*/
@media (min-width: 54.75rem){
    nav {height: 3.706em;/*overflow: hidden;*/}
    ul {display: inline-block;}
    nav li:not(.logo) {
        width: 17%;
        text-align: center;
        padding-top: 1em;
    }
    .logo {width: 32%;}
    .page-home .container {
        float: right;
        text-shadow: 0 1px 0 #FFFFFF;
    }

    .page-home {
        background: url("../img/page-home.png") no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: left top;
    }
    .page-home .cta {
        display: inline-block;
        margin-top: .875rem;}
    body.page-home {
        z-index: 1;
        position: fixed;
        height: 100%;
        width: 100%;
    }
    body.page-home, .gradient {
        background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.97) 35%, rgba(255,255,255,0.97) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(35%,rgba(255,255,255,0.97)), color-stop(100%,rgba(255,255,255,0.97))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.97) 35%,rgba(255,255,255,0.97) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.97) 35%,rgba(255,255,255,0.97) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.97) 35%,rgba(255,255,255,0.97) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.97) 35%,rgba(255,255,255,0.97) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e6ffffff',GradientType=1 ); /* IE6-9 */
    }
    .gradient {height: 15.699rem; width: 100%;}

    .page-profile .intro {
        height: 25.401rem;
        margin-top: -22px;
        background: url("../img/page-profile-mobile2.png") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
}
    .page-profile .intro div {height: 24rem}

/*  ---------------------- 
    MOBILE
    ----------------------*/
@media (max-width: 54.74rem){
    nav li {
        float: none; 
        width: 100%;
        height: 2.291rem;
        padding-left: 2rem !important;
        padding-top: .4rem;
        box-shadow: 0 1px 1px #DDDDDD;
    }
    nav li:last-of-type {
        padding-left: 4.3rem !important;
        padding-top: .45rem;
    }
    nav li.home  {
        padding-top: 1rem;
        padding-bottom: 1.85rem;
    }

    nav ul {
        display: block;
        padding-left: 0;
    } 
    .logo {
        padding-bottom: 3rem;
        margin-bottom: -.5rem;
    }
    nav li:not(.logo) {margin-bottom: 0px;}
    .hr {margin-top: -1em;}

    .page-home {
        background: url("../img/page-home-mobile.png") no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: right top;
    }

    .cta {
        width: 100%;
        display: block;
        text-align: center;
    }
}


                        @media (min-width: 54.7rem){
                            .page-home .container, .header .readability {
                                margin-right: 5%;
                                float: right;
                                margin-top: 1rem;
                            }
                        }  
                        @media (min-width: 65rem){
                            .page-home .container, .header .readability {
                                margin-right: 10%;
                            }
                        }    
                        @media (min-width: 90rem){
                            .page-home .container, .header .readability {
                                margin-right: 25%;
                            }
                        }                
/*  ---------------------- 
    WIDESCREEN
    ----------------------
@media (min-width: 65rem){
    .logo {margin-top: .75rem;}
    nav {background-color: pink;}
    html body {font-size: 125%;
        line-height: 150%;}
    h1 {font-size: 2.291rem;
        line-height: 2.291rem}
}
*/

/* ==========================================================================
   FOOTER
   ==========================================================================*/
footer {
    width: 100%;
    color: #FFFFFF;
    background-color: rgba(0,0,0,.85);
    font-size: 80%;

}
footer {
    padding: .5rem;
}
footer a{
    padding-left: .5rem;
    border-bottom: 1px solid #666666;
}





/* mobile */
@media (max-width: 54.75rem){
    .page-home footer {
        position: relative;
    }
}


/* desktop */
@media (min-width: 54.75rem){
    .page-home footer {
        position: fixed;
        bottom: 0;
    }
}


.page-profile footer {
    position: relative;
    display: inline-block;
    bottom: 0;
}

.page-home #credits {
    display: none;
    margin-top: 1rem;
    opacity: .6;
    transition-property: display;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease;
}
#credits hr {
    opacity: .25;
}
.bio-photo {
    border: 2px solid #DDDDDD;
    border-radius: 3px;
}   
footer .opacity {
    opacity: .33;
    padding-left: .5rem;
}
/* ==========================================================================
   FORM
   ========================================================================== */

#page-wrap {
    /* display: none; */
    /* display: block; */
    max-width: 31.399rem;
    margin: 5% auto;
    border: 2px solid #FFFFFF ;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0,0,0,.15) ;
    /*
    margin: 20px auto;
    min-height: 500px;
    height: 500px;*/
}
#page-wrap a {
    float: right;
    background-color: white;
}
#page-wrap p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    font-style: italic;
}
#page-wrap li {
    list-style: none;
}

#contact-area {
    background-color: #F8F8F8;
    padding: 1rem 2rem;
}

#contact-area input, #contact-area textarea {
    padding: .5rem;
    width: 100%;
    font-family: inherit;
    margin: 0px 0px 10px 0px;
    border: none;
    border-bottom: 2px solid #E2E2E2;
}

/
#contact-area .submit-form {
    border: 1px solid #041E35;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(0,0,0,.2);
}

#contact-area input:not(.submit-button), #contact-area textarea {
    background-color: inherit;
}
#contact-area textarea {
    height: 2.5rem;
}


#contact-area textarea:focus, #contact-area input:focus {
    outline: none;
    border-bottom: 2px solid #0057A3;
}

/*
form > input:last-of-type {
    display: block;
    margin-top: 1.5rem !important;
}
*/

.page-connect form:nth-child(4) {background-color: pink;}

#contact-area form > input {margin-bottom: 1.125rem;}
#contact-area form > textarea {margin-bottom: 3rem;}
#contact-area label {opacity: .65;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}