html {
    color: #181818;
    font-size: 1em;
    line-height: 1.4;
}

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

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

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

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

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

textarea {
    resize: vertical;
}

iframe {
    width: 100%;
    height: 100%;
}

/* Text selections */

::-moz-selection {
    color: #fff;
    background: #000;
}

::selection {
    color: #fff; 
    background: #000;
}


/*======================================================================================
   

PRELOADER

   
======================================================================================== */

.loader {
    background: #fff;
    height: 100%;
    left: 0px;
    opacity: 1;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9999;
}

.loader-inner { /* http://loading.io */
    background: url(/img/site/loading.gif);
    background-size: cover;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    top: 50%;
    width: 40px;
}


/*======================================================================================
   

GLOBAL

   
======================================================================================== */


#header {
    position: relative;
    width: 100%;
}

.wrapper {
    position: relative;
    width: 86%;
}


/*----------------------------------------------------------------------------*

H1 LOGO

------------------------------------------------------------------------------*/

h1.logo {
    float: left;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    z-index: 9999;
}

    /*Optically aligns logo with hero intro copy*/
    @media only screen and (min-width: 0px) {
        h1.logo {
            width: 107px; 
        }
    }

    @media only screen and (min-width: 768px) {
        h1.logo {
            width: 115px; 
        }
    }

    @media only screen and (min-width: 1025px) {
        h1.logo {
            width: 120px; 
        }
    }


h1.logo a {
    background: url(/img/site/logo_b.png) no-repeat 50% 50%;
    background-size: 107px 10px;
    color: #fff;
    display: block;
    font-size: 12px;
    height: 70px;
    overflow: hidden;
    text-indent: -999px;
    z-index: 9999;

   -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;  
}

h1.logo a.invert {
    background: url(/img/site/logo_w.png) no-repeat 50% 50%;
}

    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
        h1.logo a {
            background: url(/img/site/logo_b@2x.png) no-repeat 50% 50%;
            background-size: 107px 10px;
        }
        h1.logo a.invert {
            background: url(/img/site/logo_w@2x.png) no-repeat 50% 50%;
            background-size: 107px 10px;
        }        
    }

h1.logo a:hover {
    opacity: 0.8;
}




/*----------------------------------------------------------------------------*

GLOBAL - HEADER AND COPY STYLES

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    h2, h3, h4, h5 {
        font-family: "futura-pt", Arial, Helvetica, sans-serif;
        font-weight: 700;
        text-align: left;
    }

    h2 {
        display: none;
        font-style: normal;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: -0.04em;
        line-height: 0.8;
        margin: 100px 0 120px 0;
    }

    h3 {
        font-size: 40px;
        font-style: normal;
        letter-spacing: -0.05em;
        line-height: 100%;
        margin: 0 0 25px 0;
        text-decoration: none;
        text-transform: none;
    }

    h4 {
        color: #181818;
        font-size: 26px;
        letter-spacing: -0.04em;
        margin: 0;
        padding: 30px 0 0 0;
    }

    body {
        color: #181818;
        font-family: "usual", Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.01em;
        line-height: 30px;
    }

    a {
        color: #777;
        text-decoration: none;
    }
}

@media only screen and (min-width: 768px) {

    h3 {
        font-size: 50px;
        margin-top: 80px;
    }

    h4 {
        font-size: 40px;
        letter-spacing: -0.05em;
        padding: 50px 0 0 0;
    }       

    body {
        font-size: 18px;
        line-height: 32px;
    }
}

@media only screen and (min-width: 1025px) {

}




/*======================================================================================
   

HOMEPAGE

   
======================================================================================== */


.hello video {
    fill: #000;
    mask: url(/img/site/intro-alrightsanscombo.svg);
    -webkit-mask-box-image: url(/img/site/intro-alrightsanscombo.svg);
    width: 100%;
}

.hello .hello-fallback { /*hides from all browsers*/
    display: none;
    width: 100%;
}

/* Hello SVG - displays fallback SVG in FireFox*/
@-moz-document url-prefix() { 
    .hello video {
        display: none;
    }
        .hello .hello-fallback {
        display: block;
    }
}

p.intro {
    color: #5e5e5e;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul.project-list {
    padding: 0;
    width: 100%;
}

ul.project-list li {
    display: block;
    float: left;
    height: 260px;
    list-style: none;
    position: relative;
    width: 100%;
}

ul.project-list li a  {
    cursor: pointer;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 20;
}

ul.project-list li div {
    display: block;
    height: 260px;
    position: absolute;
    width: 100%;
}

ul.project-list li div.logo {
    left: 0;
    opacity: 0.93;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    top: 0;

   -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;  
}

ul.project-list li {
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;          
}

.no-touch ul.project-list li div.logo-hover {
    opacity: 1.0;
    transform: scale(0.95) rotate(0deg) translate3d(0,0,0) translate(0, 2px);
}

/* Logo Grid */
.asl{                   background-color: #ef4746 }
.apple{                 background-color: #ededed }
.atlantis{              background-color: #f5f5f5 }
.att{                   background-color: #f7f7f7 }
.bestbuy{               background-color: #104380 }
.blackberry{            background-color: #323232 }
.dominos{               background-color: #006391 }
.express{               background-color: #1c1c1c }
.ge{                    background-color: #ebeef2 }
.heytell{               background-color: #ffb53e }
.judesbarbershop{       background-color: #2c2c2c }
.loudcity{              background-color: #83bd0e }
.metro{                 background-color: #2a2b2b }
.statefarm{             background-color: #da1a33 }
.target{                background-color: #f7f7f7 }
.wmcaf{                 background-color: #7c208f } 

.asl-hover{             background-color: #d53838 }
.apple-hover{           background-color: #d5d5d5 }
.atlantis-hover{        background-color: #dcdcdc }
.att-hover{             background-color: #dcdcdc }
.bestbuy-hover{         background-color: #03336b }
.blackberry-hover{      background-color: #1d1d1d }
.dominos-hover{         background-color: #00547a }
.express-hover{         background-color: #000000 }
.ge-hover{              background-color: #d5d5d5 }
.heytell-hover{         background-color: #eb9a17 }
.judesbarbershop-hover{ background-color: #1f1f1f }
.loudcity-hover{        background-color: #70a800 }
.metro-hover{           background-color: #1e1f1f }
.statefarm-hover{       background-color: #bf1027 }
.target-hover{          background-color: #dcdcdc }
.wmcaf-hover{           background-color: #6b1e7b }


li.asl div.logo{ 
    background: url(/img/logo_asl.png) no-repeat 50% 50%;
    background-size: 137px 77px;
}
li.apple div.logo{
    background: url(/img/logo_apple.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.atlantis div.logo {
    background: url(/img/logo_atlantis.png) no-repeat 50% 50%;
    background-size: 153px 27px;
}
li.att div.logo {
    background: url(/img/logo_att.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.bestbuy div.logo {
    background: url(/img/logo_bestbuy.png) no-repeat 50% 50%;
    background-size: 109px 77px;
}
li.blackberry div.logo {
    background: url(/img/logo_blackberry.png) no-repeat 50% 50%;
    background-size: 100px 77px;
}
li.dominos div.logo {
    background: url(/img/logo_dominos.png) no-repeat 50% 50%;
    background-size: 100px 100px;
}
li.express div.logo {
    background: url(/img/logo_express.png) no-repeat 50% 50%;
    background-size: 153px 27px;
}
li.ge div.logo {
    background: url(/img/logo_ge.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.heytell div.logo {
    background: url(/img/logo_heytell.png) no-repeat 50% 50%;
    background-size: 77px 77px
}
li.judesbarbershop div.logo {
    background: url(/img/logo_judesbarbershop.png) no-repeat 50% 50%;
    background-size: 142px 32px;
}
li.loudcity div.logo {
    background: url(/img/logo_loudcity.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.metro div.logo {
    background: url(/img/logo_metro.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.statefarm div.logo {
    background: url(/img/logo_statefarm.png) no-repeat 50% 50%;
    background-size: 100px 77px;
}
li.target div.logo {
    background: url(/img/logo_target.png) no-repeat 50% 50%;
    background-size: 77px 77px;
}
li.wmcaf div.logo {
    background: url(/img/logo_wmcaf.png) no-repeat 50% 50%;
    background-size: 128px 32px;
}


@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 

    li.asl div.logo{ 
        background: url(/img/logo_asl@2x.png) no-repeat 50% 50%;
        background-size: 137px 77px;
    }
    li.apple div.logo{
        background: url(/img/logo_apple@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.atlantis div.logo {
        background: url(/img/logo_atlantis@2x.png) no-repeat 50% 50%;
        background-size: 153px 27px;
    }
    li.att div.logo {
        background: url(/img/logo_att@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.bestbuy div.logo {
        background: url(/img/logo_bestbuy@2x.png) no-repeat 50% 50%;
        background-size: 109px 77px;
    }
    li.blackberry div.logo {
        background: url(/img/logo_blackberry@2x.png) no-repeat 50% 50%;
        background-size: 100px 77px;
    }
    li.dominos div.logo {
        background: url(/img/logo_dominos@2x.png) no-repeat 50% 50%;
        background-size: 100px 100px;
    }
    li.express div.logo {
        background: url(/img/logo_express@2x.png) no-repeat 50% 50%;
        background-size: 153px 27px;
    }
    li.ge div.logo {
        background: url(/img/logo_ge@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.heytell div.logo {
        background: url(/img/logo_heytell@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px
    }
    li.judesbarbershop div.logo {
        background: url(/img/logo_judesbarbershop@2x.png) no-repeat 50% 50%;
        background-size: 142px 32px;
    }
    li.loudcity div.logo {
        background: url(/img/logo_loudcity@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.metro div.logo {
        background: url(/img/logo_metro@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.statefarm div.logo {
        background: url(/img/logo_statefarm@2x.png) no-repeat 50% 50%;
        background-size: 100px 77px;
    }
    li.target div.logo {
        background: url(/img/logo_target@2x.png) no-repeat 50% 50%;
        background-size: 77px 77px;
    }
    li.wmcaf div.logo {
        background: url(/img/logo_wmcaf@2x.png) no-repeat 50% 50%;
        background-size: 128px 32px;
    }
}


#home h3 {
    margin-top: 100px;
    text-align: center;
}

#home h3 span {
    color: #968f8f;
    display: block;
    font-family: "usual", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 24px;
    text-transform: none;
}

ul.freebies-list {
    height: 550px;
    margin: 50px 0 0 0;
    padding: 0;
    width: 100%;
}

ul.freebies-list li {
    display: block;
    float: left;
    list-style: none;
    text-align: center;
}

ul.freebies-list li img{
    display: block;
    margin: 0 auto;
    width: 90%;
}

ul.freebies-list li a {
    color: #181818;
    display: block;
    font-family: "futura-pt", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 25px;
    padding: 40px 0 0 0;
    text-transform: uppercase;
}

ul.freebies-list li a span {
    color: #999999;
    display: block;
    font-family: "usual", Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    list-style: none;
    padding: 0 0 14px 0;
    text-transform: none;
}

ul.freebies-list li a svg.icon {
    display: block;
    fill: rgba(187,187,187,1);
    height: 32px;
    margin: 0 auto 50px auto;
    width: 32px;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.no-touch ul.freebies-list li a:hover svg.icon {
    fill: rgba(0,0,0,1.0);
}


/*----------------------------------------------------------------------------*

HOMEPAGE - OTHER

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    .hello {
        margin: 100px 0 0 0;
    }

    .hello img {
        display: none;
        margin-bottom: 0;
        width: 100%;
    }    

    .wrapper, #hero-image {
        margin: 0 auto;
        width: 85%; 
    }

    p.location {
        color: #b8b8b8;
        font-family: "futura-pt";
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.12em;
        margin: 20px 0 30px 0;
        text-transform: uppercase;
    }

    p.location span.bullet {
        color: #d5d5d5;
    }

    .weather-container {
        display: none;
    }

    p.intro {
        width: 100%;
    }

    ul.project-list li {
        width: 100%;
    }

    ul.freebies-list li {
        width: 100%;
    }

    ul.freebies-list li:last-child {
        margin-bottom: 50px;
    }    

    ul.contact-home {
        height: 25px;
        margin: 0 0 40px 0;
        padding: 0;
        width: auto;
    }

    ul.contact-home li {
        display: block;
        float: left;
        margin: 0 30px 0 0;
        opacity: 0.2;
    }

    ul.contact-home li.email {
        background: url(/img/site/contact_icon_email.png) no-repeat 50% 50%;
        background-size: 25px 25px;
    }
    ul.contact-home li.instagram {
        background: url(/img/site/contact_icon_instagram.png) no-repeat 50% 50%;        
        background-size: 25px 25px;
    }
    ul.contact-home li.facebook {
        background: url(/img/site/contact_icon_facebook.png) no-repeat 50% 50%;
        background-size: 25px 25px;
    }
    ul.contact-home li.linkedin {
        background: url(/img/site/contact_icon_linkedin.png) no-repeat 50% 50%;
        background-size: 25px 25px;
    }

    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
        
        ul.contact-home li.email {
            background: url(/img/site/contact_icon_email@2x.png) no-repeat 50% 50%;
            background-size: 25px 25px;
        }
        ul.contact-home li.instagram {
            background: url(/img/site/contact_icon_instagram@2x.png) no-repeat 50% 50%;        
            background-size: 25px 25px;
        }
        ul.contact-home li.facebook {
            background: url(/img/site/contact_icon_facebook@2x.png) no-repeat 50% 50%;
            background-size: 25px 25px;
        }
        ul.contact-home li.linkedin {
            background: url(/img/site/contact_icon_linkedin@2x.png) no-repeat 50% 50%;
            background-size: 25px 25px;
        }
    }

    ul.contact-home li a{
        display: block;
        height: 25px;
        overflow: hidden;
        position: relative;
        text-indent: -9999px;
        width: 25px;
    }

    ul.project-list {
        margin: 80px 0 0 0;
    }
}


@media only screen and (min-width: 768px) {

    .hello {
        margin: 160px 0 0 0;
    }

    .wrapper, #hero-image {
        margin: 0 auto;
        width: 80%; 
    }

    p.location {
        margin: 50px 0 50px 0;
    }

    .weather-container {
        display: inline;
    }    

    p.intro {
        width: 100%;
    }

    ul.project-list li {
        width: 50%;
    }

    ul.freebies-list li {
        width: 33%;
    }

    ul.freebies-list li:last-child {
        margin-bottom: 140px;
    }        

    ul.contact-home {
        margin: 0 0 60px 0;
    }

    ul.contact-home li {
        display: block;
        margin: 0 32px 0 0;

        -webkit-transition: all 0.45s ease;
        -moz-transition: all 0.45s ease;
        -o-transition: all 0.45s ease;
        -ms-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    ul.contact-home li:hover {
        opacity: 1;
    }

    ul.project-list {
        margin: 100px 0 0 0;
    }
}


@media only screen and (min-width: 1023px) {

    ul.project-list li { /*shows 4 across on iPad landscape*/
        width: 25%;
     }
}


@media only screen and (min-width: 1025px) {

    .hello {
        margin: 200px 0 0 0;
    }

    .wrapper, #hero-image {
        margin: 0 auto;
        max-width: 1200px; 
    }

    p.intro {
        width: 75%;
    }

    ul.project-list li {
        width: 25%;
     }

}


/*======================================================================================
   
PORTFOLIO
   
======================================================================================== */


#hero-image-container{
    position: relative;
    top: 0;
    width: 100%;
    z-index: 1;
}

#hero-image {
    margin: 0 auto 0 auto;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

#portfolio .breakout img {
    width: 100%;
}


/* VIDEO - RESPONSIVE
   From http://embedresponsively.com. 
   Change padding-bottom to Y/X=Z%. 
   Example: 16:9 video would be 9/16 = 56.25% 
   
   Calculated with https://www.ninjaunits.com/calculators/aspect-ratio

   1200 x 980   60:49       ar6049      was ar1122
   1280 x 960   4:3         ar43
   1920 x 1264  120:79      ar12079 
   1280 x 800   8:5         ar85        was ar6140
   1920 x 1080  16:9        ar169    
   1024 x 566   512:283     ar512283    was ar3821
   1920 x 678   320:113     ar320113
   2500 x 270   250:27      ar25027     was ar1926
*/

.video-container { 
    height: 0; 
    max-width: 100%; 
    overflow: hidden; 
    position: relative; 
}

.ar6049     { padding-bottom: 81.666%   }
.ar43       { padding-bottom: 75%       }
.ar12079    { padding-bottom: 65.83%    }
.ar85       { padding-bottom: 62.5%     }
.ar7945     { padding-bottom: 56.96%    }
.ar169      { padding-bottom: 56.25%    }
.ar512283   { padding-bottom: 55.26%    }
.ar320113   { padding-bottom: 35.3125%  }
.ar25027    { padding-bottom: 10.8%     }


.video-container iframe, 
.video-container object, 
.video-container embed { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}


/*----------------------------------------------------------------------------*

PORTFOLIO - BACKGROUND COLORS

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) { /*Adds a white to gray gradient on small*/
    #portfolio {   
        background-color: #f5f5f5;
        background-image: -webkit-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-repeat: no-repeat;
        background-size: 100% 950px;
        background-position: 0 280px;
    }
}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 1025px) { /*Removes white to gray gradient from small and applies white for Skrollr color fade effect*/
    #portfolio {
        background-color: #ffffff;
    }   
}



/*----------------------------------------------------------------------------*

PORTFOLIO - FLUID PARALLAX WINDOW

------------------------------------------------------------------------------*/

#hero {
    height: 750px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

#hero-bg {
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;    position: absolute;
    bottom: 0;
    height: 750px;
    top: 0;
    width: 100%;
}

#darken {
    background-color: #000;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

/* Hero Background Images */

@media only screen and (min-width: 0px) {
    .apple #hero-bg             { background-image: url(/img/apple_hero_bg_small@2x.jpg) }
    .asl #hero-bg               { background-image: url(/img/asl_hero_bg.jpg) }
    .atlantis #hero-bg          { background-image: url(/img/atlantis_hero_bg.jpg) }
    .att #hero-bg               { background-image: url(/img/att_hero_bg.jpg) }
    .bestbuy #hero-bg           { background-image: url(/img/bestbuy_hero_bg.jpg) }
    .blackberry #hero-bg        { background-image: url(/img/blackberry_hero_bg@2x.jpg) }
    .dominos #hero-bg           { background-image: url(/img/dominos_hero_bg.jpg) }
    .express #hero-bg           { background-image: url(/img/express_hero_bg.jpg) }
    .ge #hero-bg                { background-image: url(/img/ge_hero_bg.jpg) }
    .heytell #hero-bg           { background-image: url(/img/heytell_hero_bg@2x.jpg) }
    .judes #hero-bg             { background-image: url(/img/judes_hero_bg.jpg) }
    .loudcity #hero-bg          { background-image: url(/img/loudcity_hero_bg_small@2x.jpg) }
    .metro #hero-bg             { background-image: url(/img/metro_hero_bg@2x.jpg) }
    .statefarm #hero-bg         { background-image: url(/img/statefarm_hero_bg_small@2x.jpg) }
    .target #hero-bg            { background-image: url(/img/target_hero_bg.jpg) }
    .wmcaf #hero-bg             { background-image: url(/img/wmcaf_hero_bg.jpg) }
}

@media only screen and (min-width: 768px) {
    .apple #hero-bg             { background-image: url(/img/apple_hero_bg@2x.jpg) }
    .loudcity #hero-bg          { background-image: url(/img/loudcity_hero_bg.jpg) }
    .statefarm #hero-bg         { background-image: url(/img/statefarm_hero_bg@2x.jpg) }
}

@media only screen and (min-width: 1025px) {

}


/* Hero Background Sizes  */

@media only screen and (min-width: 0px) {
    #hero, #hero-bg {
        height: 280px;
    }
}
@media only screen and (min-width: 540px) {
    #hero, #hero-bg {
        height: 352px;
    }
}
@media only screen and (min-width: 660px) {
    #hero, #hero-bg {
        height: 414px;
    }
}
@media only screen and (min-width: 780px) {
    #hero, #hero-bg {
        height: 467px; /*linear line 477*/
    }
}
@media only screen and (min-width: 900px) {
    #hero, #hero-bg {
        height: 529px; /*linear line 539*/
    }
}
@media only screen and (min-width: 1020px) {
    #hero, #hero-bg {
        height: 601px; /*linear line 601*/
    }
}
@media only screen and (min-width: 1140px) {
    #hero, #hero-bg {
        height: 663px;
    }
}
@media only screen and (min-width: 1260px) {
    #hero, #hero-bg {
        height: 726px;
    }
}
@media only screen and (min-width: 1380px) {
    #hero, #hero-bg {
        height: 788px;
    }
}
@media only screen and (min-width: 1500px) {
    #hero, #hero-bg {
        height: 850px;
    }
}



/*----------------------------------------------------------------------------*

PORTFOLIO - HERO IMAGE

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    /* Global hero configurations */
    #hero-image img {
        margin: 100px auto 0 auto;
        position: relative;
        width: 100%;
    }

    /* Custom hero configurations */
    .target #hero-image img,
    .wmcaf #hero-image img {
        margin: 35px auto -35px auto;
    }

    .express #hero-image img {
        margin: 130px auto 0 auto;
    }

    .loudcity #hero-image-container img {
        margin: 0 auto 52px auto;
    }

    .loudcity #hero-image {
        visibility: hidden;
    }

}

@media only screen and (min-width: 768px) {

    /* Global hero configurations */
    #hero-image img {
        margin: 120px auto 0 auto;
        position: relative;
        width: 100%;
    }

    /* Custom hero configurations */
    .target #hero-image img,
    .wmcaf #hero-image img {
        margin: 0 auto 0 auto;
    }

    .express #hero-image img {
        margin: 195px auto 0 auto;
    }

    .loudcity #hero-image img {
        margin: 0 auto 0 auto;
    }

    .loudcity #hero-image {
        visibility: visible;
    }

}

@media only screen and (min-width: 1025px) {

    /* Global hero configurations */
    #hero-image img {
        margin: 160px auto 0 auto;
        position: relative;
        width: 100%;
    }

    /* Custom hero configurations */
    .target #hero-image img,
    .wmcaf #hero-image img {
        margin: 0 auto 0 auto;
    }

    .express #hero-image img {
        margin: 250px auto 0 auto;
    }

    .loudcity #hero-image img {
        margin: 0 auto 55px auto;
    }
}


/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT INFO

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    /* project-info - default */
    #project-info {
        margin: 50px auto 0 auto;
        width: 100%;
    }

    /* custom project-info */
    .express #project-info {
        margin-top: 0;
    }

    .ge #project-info {
        margin-top: 50px;
    }

    .loudcity #project-info {
        margin-top: 30px;
    }

    /* project-info with hero image float */
    .target #project-info,
    .wmcaf #project-info {
        margin-top: 82px;
    }

    /* project-info with no hero image float */
    .apple #project-info,
    .blackberry #project-info,
    .heytell #project-info,
    .metro #project-info,
    .statefarm #project-info {
        margin-top: 30px;
    }

}

@media only screen and (min-width: 768px) {

    /* custom project-info */
    .express #project-info {
        margin-top: 0;
    }

        .express #project-info h3 {
            margin-top: 5px;
        }

    .ge #project-info {
        margin-top: 60px;
    }

    .loudcity #project-info {
        margin-top: 39px;
    }

    /* project-info with hero image float */
    .target #project-info,
    .wmcaf #project-info {
        margin-top: 40px;
    }

    /* project-info with no hero image float */
    .apple #project-info,
    .blackberry #project-info,
    .heytell #project-info,
    .metro #project-info,
    .statefarm #project-info {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 1025px) {

    #project-info {
        margin: 0 auto;
        margin-left: 7.5%;
        text-align: left;
        width: 85%;
    }

    /* custom project-info */
    .express #project-info {
        margin-top: 30px;
    }

    .ge #project-info {
        margin-top: 60px;
    }

    .loudcity #project-info {
        margin-top: 50px;
    }

    /* project-info with hero image float */
    .target #project-info,
    .wmcaf #project-info {
        margin-top: 81px;
    }

    /* project-info with no hero image float */
    .apple #project-info,
    .blackberry #project-info,
    .heytell #project-info,
    .metro #project-info,
    .statefarm #project-info {
        margin-top: 40px;
    }
}


/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT INFO CHILD ELEMENTS

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    p.description {
        margin: 0;
        padding: 0;
        text-align: left;
        width: 100%;
    }

    p.description {
        color: #181818;
        float: left;
        margin-bottom: 20px;
        width: 100%;
    }

    ul.meta {
        clear: both;
        float: left;
        line-height: 24px;
        margin: 0;
        margin-bottom: 70px;
        padding: 0;
        width: 100%;
    }

    ul.meta li {
        float: left;
        list-style: none;
        padding: 12px 40px 4px 0;
        text-align: left;
    }

    ul.meta h5 {
        color: #cccccc;
        display: block;
        font-family: "futura-pt", Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.15em;
        margin: 0 auto;
        text-transform: uppercase;
    }

    ul.meta li a { /*same styles as section-detail a*/
        color: #181818;
    }

    ul.meta li a span { /*same styles as section-detail a*/
        padding-right: 5px;

        -webkit-transition: all 0.45s ease;
        -moz-transition: all 0.45s ease;
        -o-transition: all 0.45s ease;
        -ms-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    ul.meta li a:hover { /*same styles as section-detail a*/
        color: #777;
    }  

    ul.meta li a:hover span { /*same styles as section-detail a*/
        color: #777;
        padding-right: 10px;
    }
}


@media only screen and (min-width: 768px) {

    p.description {
        margin-bottom: 20px;
    }    

    ul.meta {
        margin-bottom: 120px;
    }
}


@media only screen and (min-width: 1025px) {

}


@media only screen and (min-width: 1240px) {
    
    p.description {
        clear: none;
        float: left;
        margin-bottom: 160px;        
        width: 68%;
    }

    ul.meta {
        clear: none;
        float: right;
        min-width: 220px;
        width: 20%;
    }   
}


/*----------------------------------------------------------------------------*

PORTFOLIO - SECTION DETAIL

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    .section-detail {
        margin: 40px auto 40px auto;
        position: relative;
        text-align: left;
        width: 100%;
    }  
    
    .section-detail .keyline {
        border-bottom: 2px solid #c8c8c8;
        display: block;
        height: 1px;
        left: 0;
        position: absolute;
        top: 0;
        width: 40px;
    }

    .section-detail p {
        display: block;
        width: 100%;
    }  

    p.notitle {
        padding-top: 40px;
    }  

    .section-detail a {
        color: #777;
    }

    .section-detail a span {
        padding-right: 5px;

        -webkit-transition: all 0.45s ease;
        -moz-transition: all 0.45s ease;
        -o-transition: all 0.45s ease;
        -ms-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    .section-detail a:hover {
        color: #181818;
    }  

    .section-detail a:hover span {
        color: #181818;
        padding-right: 10px;
    }
}


@media only screen and (min-width: 768px) {

    .section-detail {
        margin: 40px auto 80px auto;
        position: relative;
    }  

    p.notitle {
        padding-top: 40px;
    }  
}


@media only screen and (min-width: 1025px) {

    .section-detail {
        margin: 60px auto 120px auto;
        width: 85%;
    }  

    .section-detail p {
        width: 65%;
    }
}



/*----------------------------------------------------------------------------*

PORTFOLIO - PAGE ELEMENT MARGINS + SHADOWS

------------------------------------------------------------------------------*/

#portfolio .wrapper {
    text-align: center;
}

/*Hardware GPU acceleration trick*/
#portfolio .wrapper img {
    transform: scale(1) rotate(0deg) translate3d(0,0,0);
    transform-origin: center top;
}


@media only screen and (min-width: 0px) {

    #portfolio .wrapper img, 
    #portfolio .video-container, 
    #portfolio .breakout {
        height: auto;
        margin-bottom: 50px;
        width: 100%;
    }

    .slideshow-break { /* Needed to clear space under slideshow*/
        clear: both; 
        height: 50px !important;  /*Set to same as margin-bottom above*/
        width: 100%; 
    }

    #portfolio .wrapper img, 
    #portfolio .video-container {
        box-shadow: 0 10px 15px rgba(0,0,0,0.12);    
    }

    /*wshadow is for comps that start white at the top*/
    #portfolio .wrapper img.wshadow {
        box-shadow: 0 5px 15px rgba(0,0,0,0.12);    
    }
}


@media only screen and (min-width: 768px) {

    #portfolio .wrapper img, 
    #portfolio .video-container, 
    #portfolio .breakout {
        margin-bottom: 100px;
    }

    .slideshow-break { 
        height: 100px !important;  /*Set to same as margin-bottom above*/
    }

    #portfolio .last, #portfolio img.last {
        margin-bottom: 20px;
    }
}


@media only screen and (min-width: 1025px) {
    
    #portfolio .wrapper img, 
    #portfolio .video-container, 
    #portfolio .breakout {
        margin-bottom: 160px;
    }

    .slideshow-break { 
        height: 160px !important;  /*Set to same as margin-bottom above*/
    }

    #portfolio .last, #portfolio img.last {
        margin-bottom: 50px;
    }
}


/* noshadow */
#portfolio .wrapper img.noshadow,
#portfolio .noshadow,
#portfolio #slideshow-dominos-builder img {
    box-shadow: none;
}



/*----------------------------------------------------------------------------*

PORTFOLIO - COMP COLUMNS

------------------------------------------------------------------------------*/

.comp-col {
    width: 100%;
}


/* 2-UP -- Set image width to 1128 @2x 564 @1x */

@media only screen and (min-width: 0px) {
    .comp-col-left {
        float: left;
        width: 50%;
    }

    .comp-col-right {
        float: left;
        width: 50%;
    }

    .comp-col img {
        width: 94% !important;
    }

    .comp-col-left img {
        float: left;
    }

    .comp-col-right img {
        float: right;
    }
}

@media only screen and (min-width: 1025px) {
    .comp-col img {
        max-width: 564px;
    }
}


/* 4-UP -- Set image width to 540 @2x 270 @1x */

@media only screen and (min-width: 0px) {
    .comp-col-4 {
        float: left;
        width: 25%;
    }

    .comp-col-4 img {
        width: 90% !important;
    }
}

@media only screen and (min-width: 1025px) {
    .comp-col-4 img {
        max-width: 270px;
    }
}



/*----------------------------------------------------------------------------*

PORTFOLIO - CSS SLIDESHOW GALLERY
http://fofwebdesign.co.uk/template/_testing/cross-fade-slideshow-img-js.htm

------------------------------------------------------------------------------*/

/*VIP Photoshoot*/
#slideshow-vip { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 66.666% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-vip img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-vip img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-vip .show, #slideshow-vip .show { opacity:1 }


/*BBMCC Photoshoot*/
#slideshow-bbmcc { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 48.333% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-bbmcc img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-bbmcc img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-bbmcc .show, #slideshow-bbmcc .show { opacity:1 }


/*Domino's Promos*/
#slideshow-dominos-promo { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 39.166% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-dominos-promo img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-dominos-promo img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-dominos-promo .show, #slideshow-dominos-promo .show { opacity:1 }


/*Domino's Pizza Builder*/
#slideshow-dominos-builder { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 77.666% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-dominos-builder img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-dominos-builder img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-dominos-builder .show, #slideshow-dominos-builder .show { opacity:1 }



/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT NAV

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    #home .project-nav {
        visibility: hidden;
    }

    .project-nav {
        height: 40px;
        margin: 20px 0 50px 0;
        position: relative;
    }

    .project-nav a {
        display: block;
        height: 40px;
        margin: 0;
        opacity: 0.2;
        padding: 0 0;
        position: relative;
        width: 40%;

        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        -ms-transition: all 0.25s;
        transition: all 0.25s;
    }

    .project-nav a.backtohome {
        height: 40px;
        float: left;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        text-indent: -9999px;
        width: 20%;
    }

    .project-nav a.prev {
        float: left;
    }

    .project-nav a.next {
        float: right;
    }

    .project-nav a span {
        display: block;
        height: 20px;
        margin-top: 10px;
        position: absolute;
        width: 20px;
    }

    .project-nav a.prev span {
        background: url(/img/site/prev_project_small.png) no-repeat 50% 50%;
        left: 0px;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.prev span {
                background: url(/img/site/prev_project_small@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }

    .project-nav a.next span {
        background: url(/img/site/next_project_small.png) no-repeat 50% 50%;
        right: 0px;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.next span {
                background: url(/img/site/next_project_small@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }

    .project-nav a.backtohome {
        background: url(/img/site/backtohome.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.backtohome {
                background: url(/img/site/backtohome@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }


    .project-nav a.prev span,
    .project-nav a.next span {
        opacity: 1;
    
    /*  -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none; */
    }

    .project-nav a h3 {
        color: #181818;
        display: none;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 3.6;
        margin: 0;
        opacity: 1;
        position: relative;
        white-space: nowrap;
        /* -webkit-transition: none, -webkit-transform none;
        transition: opacity none, transform none; */
    }

/*    .project-nav a h3.small-title {
        display: block;
    }    
*/
    .project-nav a.prev h3 {
        padding-left: 20px;
        -webkit-transform: none;
        transform: none;
    }

    .project-nav a.next h3 {
        padding-right: 20px;
        text-align: right;

        -webkit-transform: none;
        transform: none;
    }

    .no-touch .project-nav a:hover {
        /*background: transparent;*/        
        box-shadow: none; 
    }

    .no-touch .project-nav a:hover h3 {
        opacity: 1;
        -webkit-transition-delay: 0;
        transition-delay: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .no-touch .project-nav a:hover {
        opacity: 1;
    }


}


@media only screen and (min-width: 768px) {

   .project-nav {
        height: 80px;
        margin-bottom: 0;
    }

    .project-nav a {
        opacity: 1;
        height: 80px;
        margin: 0;
        overflow: hidden;
        padding: 0 0;
        position: fixed;
        top: 50%;
        top: calc(50% - 40px);
        width: 60px;
        z-index: 9998;

        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        -ms-transition: all 0.25s;
        transition: all 0.25s;
    }

    .project-nav a.backtohome {
        display: none;
    }

    .project-nav a.prev {
        left: 0;
    }

    .project-nav a.next {
        right: 0;
    }

    .project-nav a span {
        display: block;
        height: 60px;
        margin-top: 10px;
        position: absolute;
        width: 60px;
    }

    .project-nav a.prev span,
    .project-nav a.next span {
        opacity: 0.2;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .project-nav a.prev span {
        background: url(/img/site/prev_project_large.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.prev span {
                background: url(/img/site/prev_project_large@2x.png) no-repeat 50% 50%;
                background-size: 60px 60px;
            }
        }

    .project-nav a.next span {
        right: 0px;
        background: url(/img/site/next_project_large.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.next span {
                background: url(/img/site/next_project_large@2x.png) no-repeat 50% 50%;
                background-size: 60px 60px;
            }
        }

    .project-nav a h3 {
        color: #181818;
        display: block;
        font-size: 16px;
        font-weight: 700;
        line-height: 5;
        margin: 0;
        opacity: 0;
        position: absolute;
        text-transform: uppercase;
        top: 0;
        white-space: nowrap;

        -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
        transition: opacity 0.2s, transform 0.2s;
    }

/*    .project-nav a h3.small-title {
        display: none;
    }    
*/
    .project-nav a.prev h3 {
        right: 30px;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .project-nav a.next h3 {
        left: 30px;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .no-touch .project-nav a:hover {
        background: #fff;
        box-shadow: 0 0 50px rgba(0,0,0,0.1); 
        width: 270px;
    }

    .no-touch .project-nav a:hover h3 {
        opacity: 1;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .no-touch .project-nav a:hover {
        opacity: 1;
    }

    .no-touch .project-nav a:hover span {
        opacity: 1;
        transform: scale(0.85);
    }
}

@media only screen and (min-width: 1025px) {

}



/*----------------------------------------------------------------------------*

PORTFOLIO - BACK TO TOP

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {
    
    a.backtotop {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    
    a.backtotop {
        background: url(/img/site/backtotop.png) no-repeat 50% 50%;
        display: block;
        height: 60px;
        margin: 0 auto;
        margin-bottom: 80px;
        opacity: 0.2;
        overflow: hidden;
        text-indent: -9999px;
        width: 60px;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

       @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            a.backtotop {
                background: url(/img/site/backtotop@2x.png) no-repeat 50% 50%;
                background-size: 60px 60px;
            }
         }

    .no-touch a.backtotop:hover {
        opacity: 1;
        transform: scale(0.90);
    }
}

@media only screen and (min-width: 1023px) {
    
}




/*======================================================================================
   

HELPER CLASSES

   
======================================================================================== */


.hidden {
    opacity: 0;

}

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

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

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* This is throwing errors
.clearfix {
    *zoom: 1;
}
*/


/*======================================================================================
   

BREAKPOINTS

   
======================================================================================== */

@media only screen and (min-width: 0px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1025px) {
}