/*  -------------------------------------------------------------------
    Elements using font icons
    ------------------------------------------------------------------- */

.splash-credo-head:before,
.team-head:before,
.teams-hex:before,
.teams-hex a:after,
.teams-back:before,
.teams-back:after,
.life-perk > h4:before,
.life-perk > h4:after,
#life-blocks-next:before,
#life-blocks-next:after,
#life-blocks-prev:before,
#life-blocks-prev:after,
.video-modal-open:before,
.locations-remote:before,
.locations-label:before,
.location-link:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/*  -------------------------------------------------------------------
    Splash
    - background image is applied to the #splash element
    - height of .splash-head is adjusted to match height of background
    - .splash-subhead is pulled onto background with negative margins
    - credo is pretty simply centered text, stamp is a background image
    ------------------------------------------------------------------- */

#splash {
    background-color: #4d4e53;
    background-repeat: no-repeat;
    background-position: top center;
    color: #fff;
    text-align: center;
}

.splash-head {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    height: 382px;
    max-width: 510px;
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
    font-family: 'Open Sans Light',sans-serif;
    font-size: 32px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.splash-subhead {
    height: 40px;
    overflow: hidden;
    margin: -70px 0 29px 0;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.splash-credo {
    position: relative;
    padding: 110px 0 20px 0;
    background: url("/static/img/credo-mobile.4be73ba11162.png") center 15px no-repeat;
}

.splash-credo > .contain {
    max-width: 500px;
}

.splash-credo-head {
    margin: 15px 0;
    color: #a2a2a9;
    font-size: 18px;
}

    .splash-credo-head:before {
        content: '\e00f';
        display: inline-block;
        width: 25px;
        margin-right: 2%;
        vertical-align: -0.1em;
    }

.splash-credo p {
    margin: 15px 0;
    font-family: 'Open Sans Light',sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

.splash-credo-head + p {
    font-size: 23px;
    color: #a2a2a9;
    line-height: 1.3;
}

.splash-video {
    width: 298px;
    height: 168px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    background: url("/static/img/are-you-mozillian-video-thumb.98bc043a1e69.jpg") top left no-repeat;
}

    .splash-video .video-modal-open {
        top: 30px;
        left: 15px
    }

@media (max-width: 680px) {

    /* flex box for vertical centering only on mobile,
       other sizes get fixed with so can be handled with padding */
    .splash-head {
        display: -webkit-flex;
        display:         flex;
        -webkit-justify-content: center;
                justify-content: center;
        -webkit-align-items: center;
                align-items: center;
    }
}

@media (min-width: 681px) {

    .splash-head {
        height: 373px;
        margin: 0 auto;
        padding-top: 65px;
        font-size: 41px;
    }

    .splash-subhead {
        margin: -85px 0 44px 0;
        font-size: 14px;
    }

    .splash-credo {
        padding: 30px 0 40px 0;
        background: url("/static/img/credo-tablet.267573a8a40e.png") right top no-repeat;
    }

    .splash-credo-head {
        font-size: 16px;
    }

    .splash-credo p {
        margin: 0.9em 0;
        font-size: 14px;
        line-height: 1.85;
    }

        .splash-credo-head + p {
            font-size: 24px;
            line-height: 1.3;
        }
}

@media (min-width: 921px) {
    .splash-head {
        height: 502px;
        max-width: 660px;
        padding-top: 100px;
        font-size: 55px;
    }

    .splash-subhead {
        margin: -115px 0 74px 0;
        font-size: 21px;
    }

    .splash-credo {
        background: url("/static/img/credo-desktop.7d3859ead324.png") center top no-repeat;
    }

    .splash-credo > .contain {
        max-width: 660px;
    }

    .splash-credo-head {
        font-size: 21px;
    }

    .splash-credo p {
        font-size: 21px;
        line-height: 1.6;
    }

        .splash-credo-head + p {
            font-size: 32px;
            line-height: 1.3;
        }
}

/* backgrounds */

@media (max-width: 320px) {
    #splash { background-image: url("/static/img/careers-banner-320.161e8770cdd8.jpg"); }
}

@media (min-width: 321px) and (max-width: 680px) {
    #splash { background-image: url("/static/img/careers-banner-680.b37632c585da.jpg"); }
}

@media (min-width: 681px) and (max-width: 920px) {
    #splash { background-image: url("/static/img/careers-banner-920.6779745d92b1.jpg"); }
}

@media (min-width: 921px) and (max-width: 1280px) {
    #splash { background-image: url("/static/img/careers-banner-1280.a03f82dd744d.jpg"); }
}

@media (min-width: 921px) and (max-width: 1680px) {
    #splash { background-image: url("/static/img/careers-banner-1680.ce63910e6cc2.jpg"); }
}

@media (min-width: 1680px) {
    #splash { background-image: url("/static/img/careers-banner-2560.28caa6854551.jpg"); }
}

/*  -------------------------------------------------------------------
    Teams & Roles

    - on mobile teams are collapsed by default when js turned on, expanded by adding class
        - navigation is hidden but intro blurb is visible
        - buttons to toggle are added with javascript & hidden on larger screens
    - on larger screens teams are off screen to the right by deafult, slid in by adding class
        - with js off all appear horizontally and navigation works to jump users to the team
        - entire intro section is slid off to the left when a team is displayed
        - second navigation menu is added by javascript, this is slid in with teams
        - a second, delayed, css transition will move items which can recieve :focus off to
          the left after the transition animation is complete (this is to avoid tabing and
          triggering a side scroll)
        - there is a set max-height for items when js is enabled, content oveflowing this
          goes up
    ------------------------------------------------------------------- */

#teams {
    background: #ffffff;
    padding: 20px;
    overflow: hidden;
    z-index: 0;
}

.teams-head {
    margin: 5px 0 0 0;
    font-size: 26px;
    line-height: 1.2;
}

.teams-blurb {
    margin: 10px 0 18px 0;
    font-size: 15px;
}

.teams-volunteer {
    display: none;
}

.teams-nav,
#teams-nav-second {
    display: none;
}

.teams-team {
    position: relative;
    max-width: 500px;
    margin: 0 auto 5px auto;
    background-color: #f6f4ec;
}

    .js-enabled .teams-team {
        max-height: 68px;
        overflow: hidden;
        -webkit-transition: max-height 1s;
                transition: max-height 1s;
    }

    .js-enabled .teams-team.team-current {
        max-height: 500px;
    }

.team-contain {
    padding: 20px;
}

.team-button {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 68px;
    width: 100%;
    margin: 0;
    border: 1px solid transparent;
    padding: 0;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* to get IE to detect hover properly */
    cursor: pointer;
}
    .team-button:focus {
        border-color: #666;
    }

    .team-current .team-button:focus {
        border-color: transparent;
    }

.team-head {
    position: relative;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    height: 68px;
    margin: -20px -20px 0 -20px;
    padding: 10px 10px 10px 88px;
    background: #4eafe9;
    color: #fff;
    font-size: 16px;

    /* flexbox vertical center for those lucky supporters */
     display: -webkit-flex;
     display:         flex;
     -webkit-justify-content: left;
             justify-content: left;
     -webkit-align-items: center;
             align-items: center;
}

    .team-operations .team-head { background: #6dc8a0; }
    .team-people .team-head { background: #4be5e3; }
    .team-business .team-head { background: #ed6a53; }
    .team-marketing .team-head { background: #fbb913; }
    .team-internships .team-head { background: #fb892c; }

    .team-head:before {
        content: '\e003';
        position: absolute;
        top: 0;
        left: 0;
        width: 72px;
        color: #484848;
        font-size: 30px;
        line-height: 68px;
        text-align: center;
    }

        .team-button:hover + .team-head:before,
        .team-button:focus + .team-head:before,
        .team-button:active + .team-head:before,
        .team-current .team-head:before {
            color: #fff;
        }


         .team-operations .team-head:before { content: '\e002'; font-size: 38px; }
         .team-people .team-head:before { content: '\e006'; }
         .team-business .team-head:before { content: '\e00c'; }
         .team-marketing .team-head:before { content: '\e009'; font-size: 47px; }
         .team-internships .team-head:before { content: '\e00b'; font-size: 38px; }

    .team-head:after {
        content: '';
        position: absolute;
        top: 0;
        left: 73px;
        display: block;
        height: 68px;
        border-left: 1px solid #b8b8b8;
        border-left: 1px solid rgba(72, 72, 72, 0.2);
        border-right: 1px solid #eeeeee;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

.teams-team > p {
    margin: 20px;
}

.team-quote {
    display: none;
}


@media (min-width: 681px) {

    #teams {
        position: relative;
        padding: 0;
    }

    #teams-intro {
        position: relative;
        z-index: 3; /* higher z index to cover teams transitioning out on resize */
        right: 0;
        margin: 0;
        padding: 0;
        min-height: 660px;
        overflow: hidden;
        background-color: #fff;

        -webkit-transition: -webkit-transform 1s;
                transition:         transform 1s;
    }

        #teams-intro:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            border-bottom: 1px solid #aaa;
        }

            .js-enabled #teams-intro:after {
                border-bottom: 0;
            }

        #teams-intro:before {
            content: url("/static/img/teams/intro.e1e56634021c.jpg");
            position: absolute;
            bottom: -100px;
            left: 50%;
            z-index: -1;
            margin-left: 22%;
            display: block;
        }

        #teams-intro.teams-intro-hidden {
            right: 100%;
        }

        .mod-csstransitions.mod-csstransforms #teams-intro.teams-intro-hidden {
            right: 0;
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }

    .teams-intro-contain {
        max-width: 940px;
        margin: 0 auto;
        padding: 45px 20px 20px 20px;
    }

    .teams-head {
        position: relative;
        z-index: 4;
        max-width: 960px;
        height: 40px;
        margin: 0 auto -85px auto;
        padding-top: 45px;
        padding-left: 20px;
        font-size: 28px;
        line-height: 1;
    }

    .teams-blurb {
        margin: 0 0 30px 31.5%;
        padding-left: 20px;
        max-width: 40%;
    }

    #teams-nav-second {
        position: relative;
        z-index: 6;
        display: block;
        left: 100%;
        height: 0;
        width: 100%;
        margin: 0 auto;
    }


        #teams-nav-second.teams-nav-show {
            left: 0;
        }

        .mod-csstransitions.mod-csstransforms #teams-nav-second {
            left: 0;

            -webkit-transform: translateX(100%);
                -ms-transform: translateX(100%);
                    transform: translateX(100%);

            -webkit-transition: -webkit-transform 1s, opacity 0.8s ease-out;
                    transition:         transform 1s, opacity 0.8s ease-out;
        }

        .mod-csstransitions.mod-csstransforms #teams-nav-second.teams-nav-show {
            left: 0;
            -webkit-transform: translateX(0);
                -ms-transform: translateX(0);
                    transform: translateX(0);

            -webkit-transition: -webkit-transform 1s, opacity 0.8s ease-in;
                    transition:         transform 1s, opacity 0.8s ease-in;
        }

         #teams-nav-second .teams-nav-wrapper {
             position: relative;
             max-width: 940px;
             margin: 0 auto;
             padding: 20px;
         }


    .teams-nav {
        position: relative;
        display: block;
        height: 352px;
        width: 610px;
    }

        #teams-nav-second .teams-nav {
            position: absolute;
            top: 115px;
            left: 0;
            height: auto;
            width: auto;
        }

    .teams-hex {
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 1;
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 180px;
        width: 180px;
        padding: 36px 23px;
        color: #fff;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
    }

        .teams-hex:before {
            content: '\e005';
            position: absolute;
            top: -10px;
            top: 0px \0/; /* IE8+9  */
            left: -8px;
            z-index: -1;
            color: #4eafe9;
            font-size: 192px;
            vertical-align: top;
        }
            .hex-operations:before { color: #6dc8a0; }
            .hex-people:before { color: #4be5e3; }
            .hex-business:before { color: #ed6a53; }
            .hex-marketing:before { color: #fbb913; }
            .hex-internships:before { color: #fb892c;}

        .hex-operations { left: 187px; }
        .hex-people { left: 374px; }
        .hex-business { top: 162px; left: 93px; }
        .hex-marketing { top: 162px; left: 280px; }
        .hex-internships { top: 162px; left: 467px; }

         #teams-nav-second .teams-hex {
            height: 37px;
            width: 62px;
            padding: 0;
        }

            #teams-nav-second .teams-hex:before {
                top: -17px;
                left: -3px;
                font-size: 68px;
            }

        #teams-nav-second .hex-building { top: 0; left: 20px; }
        #teams-nav-second .hex-operations { top: 56px; left: 52px; }
        #teams-nav-second .hex-people { top: 112px; left: 20px; }
        #teams-nav-second .hex-business { top: 168px; left: 52px; }
        #teams-nav-second .hex-marketing { top: 224px; left: 20px; }
        #teams-nav-second .hex-internships { top: 280px; left: 52px; }

        .teams-hex a {
            display: block;
            background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* to get IE to detect hover properly */
            color: #fff;
            text-decoration: none;
        }

            .teams-hex a:after {
                 content: '\e003';
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 height: 60px;
                 width: 60px;
                 margin-left: -30px;
                 margin-top: -30px;
                 line-height: 60px;
                 font-size: 36px;
                 color: #4d4e53;
             }

                .teams-hex a:hover:after,
                .teams-hex a.current:after {
                    color: #fff;
                }

                .hex-operations a:after { content: '\e002'; font-size: 40px; }
                .hex-people a:after { content: '\e006'; }
                .hex-business a:after { content: '\e00c'; }
                .hex-marketing a:after { content: '\e009'; margin-top: -28px; font-size: 55px; }
                .hex-internships a:after { content: '\e00b'; font-size: 42px; }

            #teams-nav-second .teams-hex a {
                height: 0;
                padding-top: 37px;
                overflow: hidden;
            }

                #teams-nav-second .hex-operations a:after { font-size: 37px; }
                #teams-nav-second .hex-business a:after { font-size: 34px; }
                #teams-nav-second .hex-marketing a:after { font-size: 45px; }
                #teams-nav-second .hex-internships a:after { font-size: 38px; }

        .teams-hex strong {
            position: relative;
            z-index: 1;
            display: block;
            height: 54px;
            padding-bottom: 30px;
            font-size: 13px;
            color: #1c6897;
            }

                .hex-operations strong { color: #0e7849; }
                .hex-people strong { color: #0e908e ; }
                .hex-business strong { color: #b82208 ; }
                .hex-marketing strong { color: #cf6701 ; }
                .hex-internships strong { color: #b84100 ; }


    .teams-volunteer {
        display: block;
    }

    .teams-back {
        position: absolute;
        top: 462px;
        left: 20px;
        z-index: 6;
        display: block;
        margin: 0;
        border: 0;
        padding: 10px 10px 10px 22px;
        background: transparent;
        color: #7f8089;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

        .teams-back:hover,
        .teams-back:focus,
        .teams-back:active {
            color: #0096dd;
        }

        .teams-back:before {
            content: '\e005 ';
            position: absolute;
            top: 12px;
            left: 0;
            font-size: 15px;
        }

        .teams-back:after {
            content: '\e012 ';
            position: absolute;
            top: 16px;
            left: 4px;
            z-index: 5;
            font-size: 8px;
            color: #fff;
        }

    .teams-team {
        position: relative;
        z-index: 1;
        max-width: none;
        min-height: 660px;
        overflow: hidden;
        margin: 0;
        background: 100% 0% no-repeat;
    }

        .js-disabled .teams-team {
            margin-top: -80px;
            padding-top: 100px; /* height of fixed global nav - brings entire team into view when anchor link used for nav */
        }

        .js-enabled .teams-team {
            position: absolute;
            bottom: 0;
            left: 100%;
            width: 100%;
            max-height: none;
            -webkit-transition: -webkit-transform 1s;
                    transition:         transform 1s;
        }

            .mod-csstransitions.mod-csstransforms .teams-team {
                left: 0;
                -webkit-transform: translateX(100%);
                -ms-transform: translateX(100%);
                transform: translateX(100%);
            }

        .js-enabled .teams-team.team-current {
            left: 0;
            z-index: 5;
            max-height: none;
        }

        .mod-csstransitions.mod-csstransforms .teams-team.team-current {
            left: 0;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        .teams-team:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            border-bottom: 1px solid #aaa;
        }

        .js-enabled .teams-team:after {
            content: none;
        }

        .teams-team:before {
            content: none;
            position: absolute;
            bottom: -100px;
            left: 50%;
            margin-left: 22%;
            display: block;
            z-index: -1;
        }

        .js-disabled .team-building:before,
        .team-bg.team-building:before { content: url("/static/img/teams/building.5a64441f609e.jpg"); }
        .js-disabled .team-operations:before,
        .team-bg.team-operations:before { content: url("/static/img/teams/operations.e310418e8257.jpg"); }
        .js-disabled .team-people:before,
        .team-bg.team-people:before { content: url("/static/img/teams/people.e551bba4d08b.jpg"); }
        .js-disabled .team-business:before,
        .team-bg.team-business:before { content: url("/static/img/teams/business.d3c715e63718.jpg"); }
        .js-disabled .team-marketing:before,
        .team-bg.team-marketing:before { content: url("/static/img/teams/marketing.53366412dbf0.jpg"); }
        .js-disabled .team-internships:before,
        .team-bg.team-internships:before { content: url("/static/img/teams/internships.820338535040.jpg"); }

    .team-contain {
        width: 45%;
        max-width: 380px;
        margin: 0 auto;
    }

    .team-button {
        display: none;
    }

    .teams-team .team-head { /* needs extra qualifier to over-ride team specific colouring from mobile */
        position: relative;
        height: auto;
        padding: 100px 0 0 20px;
        background: none;
        color: #4d4e53;
        font-size: 19px;
    }

        .teams-team .team-head:before,
        .teams-team .team-head:after {
            content: none;
        }


    .teams-team > p {
        font-size: 12px;
    }

    .team-quote {
         display: block;
         margin: 1em 0;
         padding: 18px;
         background: #f2f0e9;
         color: #8b8d94;
         font-size: 15px;
         font-style: italic;
         line-height: 1.4;
    }

    .team-quote > blockquote {
        margin: 0 0 10px 0;
        text-indent: -5px;
    }

    .team-quote > figcaption {
        font-style: normal;
        font-weight: 600;
    }

        .team-quote > figcaption:before {
            content: '- ';
        }

    /* hide off screen to prevent focus causing scroll */
    .js-enabled .teams-team .cta,
    .teams-nav-wrapper {
        position: relative;
        left: -9999px;
        -webkit-transition: left 0s 1s;
        transition: left 0s 1s;
    }

    /* bring back before bringing into view */
    .js-enabled .teams-team.team-current .cta,
    .teams-nav-show .teams-nav-wrapper  {
        left: auto;
        -webkit-transition: left 0s 0s;
        transition: left 0s 0s;
    }


}


@media (min-width: 921px) {

    #teams-intro {
        min-height: 760px;
        padding: 0;
    }

    #teams-intro:before {
        bottom: -5px;
    }

    .teams-head {
        padding-top: 60px;
        margin-bottom: -100px;
        font-size: 38px;
    }

    .teams-blurb {
        font-size: 15px;
    }

    .teams-nav {
        position: relative;
        display: block;
        height: 462px;
        width: 820px;
    }

        #teams-nav-second .teams-nav {
            position: absolute;
            top: 160px;
        }

    .teams-hex {
        position: absolute;
        height: 240px;
        width: 240px;
        padding: 53px 25px;
        font-size: 17px;
    }

    .teams-hex:before {
        top: -11px;
        top: 0px \0/; /* IE8+9  */
        left: -10px;
        font-size: 256px;
    }

        .hex-operations { left: 247px; }
        .hex-people { left: 494px; }
        .hex-business { top: 211px; left: 123px; }
        .hex-marketing { top: 211px; left: 370px; }
        .hex-internships { top: 211px; left: 617px; }

        #teams-nav-second .teams-hex {
            height: 48px;
            width: 84px;
        }

            #teams-nav-second .teams-hex:before {
                top: -24px;
                left: -5px;
                font-size: 92px;
            }

        #teams-nav-second .hex-building { top: 0; left: 20px; }
        #teams-nav-second .hex-operations { top: 76px; left: 62px; }
        #teams-nav-second .hex-people { top: 152px; left: 20px; }
        #teams-nav-second .hex-business { top: 228px; left: 62px; }
        #teams-nav-second .hex-marketing { top: 304px; left: 20px; }
        #teams-nav-second .hex-internships { top: 380px; left: 62px; }


        .teams-hex a:after {
             height: 80px;
             width: 80px;
             margin-left: -40px;
             margin-top: -45px;
             line-height: 80px;
             font-size: 50px;
         }

            .hex-marketing a:after { font-size: 65px; }
            .hex-internships a:after { font-size: 55px; }


            #teams-nav-second .teams-hex a {
                padding-top:48px;
            }

                #teams-nav-second .teams-hex a:after {
                    height: 90px;
                    font-size: 40px;
                    line-height: 90px;
                }

                #teams-nav-second .hex-operations a:after { font-size: 37px; }
                #teams-nav-second .hex-business a:after { font-size: 34px; }
                #teams-nav-second .hex-marketing a:after { font-size: 45px; }
                #teams-nav-second .hex-internships a:after { font-size: 38px; }


         .teams-hex strong {
            font-size: 14px;
            padding-bottom: 50px;
        }

    .teams-back {
        top: 642px;
    }

    .teams-team {
        min-height: 760px;
        font-size: 15px;
    }

        .teams-team:before {
            content: none;
            position: absolute;
            bottom: -5px;
            left: 50%;
            margin-left: 22%;
            display: block;
            z-index: -1;
        }

    .team-contain {
        padding-bottom: 60px;
    }

    .teams-team .team-head {
        padding-top: 150px;
        font-size: 26px;
    }

    .team-quote {
        font-size: 21px;
    }

    .team-quote > figcaption {
        font-size: 15px;
    }

}

/*  -------------------------------------------------------------------
    Life at Mozilla
    ------------------------------------------------------------------- */

#life {
    overflow: hidden; _overflow: visible; zoom: 1; /* clearfix */
    padding: 20px 0;
    background: #414f5a url("/static/img/perks-bg.dadea9a20b61.png") top center;
    color: #fff;
    font-size: 15px;
}

.life-head {
    margin: 0 0 15px 0;
    color: #a2a2a9;
    font-size: 26px;
}

.life-intro-head {
    margin: 15px 0;
    font-family: 'Open Sans Light',sans-serif;
    font-size: 38px;
}

#life-gallery {
    margin: 30px 0;
    height: 226px;
}

.life-perks-head {
    font-size: 21px;
    font-weight: 600;
}

#life-perks {
    overflow: hidden; _overflow: visible; zoom: 1; /* clearfix */
    position: relative;
    text-align: center;
}

.life-perk {
    width: 100%;
    float: left;
    padding: 0 0 20px 0;
    text-align: center;
    vertical-align: top;
}

.life-perk > h4 {
    position: relative;
    padding-top: 85px;
    font-weight: 600;
    text-transform: uppercase;
}

    .life-perk > h4:before,
    .life-perk > h4:after {
        content: '\e005';
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        height: 70px;
        width: 80px;
        margin-left: -40px;
        font-size: 74px;
        line-height: 70px;
        text-align: center;
    }

    .life-perk > h4:before {
        color: #2e3a42;

    }
    .life-perk > h4:after {
        content: '';
        margin-top: -2px;
        color: #4a5966;
        font-size: 40px;
    }

         .life-perk-medical > h4:after { content: '\e001'; margin-top: 2px; }
         .life-perk-quarterly > h4:after { content: '\e00d'; margin-top: -2px; }
         .life-perk-remote > h4:after { content: '\e004'; padding-left: 1px; font-size: 30px; }
         .life-perk-personal > h4:after { content: '\e007'; margin-top: 0px; }
         .life-perk-office > h4:after { content: '\e00a'; padding-left: 1px; }
         .life-perk-snacks > h4:after { content: '\e008'; margin-top: 0px; }

@media (max-width: 680px) {
    /* line these up on the same line until carousel loads */
    .js-enabled .life-perk {
        margin-right: -670px;
    }

    /* fix it once carousel is loaded */
    .caroufredsel_wrapper .life-perk {
        margin-right: 0;
        padding-bottom: 0px;
    }

    /* or if carousel is not initilaized because we're not mobile,
       incase they resize down to mobile */
    .perks-nocarousel .life-perk {
        margin-right: 0;
    }
}

@media (min-width: 681px) {

    #life {
        padding: 30px 0;
    }

    .life-head {
        display:none;
     }

     .life-intro-head {
         font-size: 28px;
     }

    .life-intro-head,
    .life-intro {
        margin-left: auto;
        margin-right: auto;
        max-width: 460px;
        text-align: center;
    }

    #life-gallery {
        margin: 50px 0;
        height: 345px;
    }

    #life-perks-perks {
        margin:0 -20px 0 0;
    }

    .life-perk {
        display: inline-block;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
        width: 33.3%;
        float: left;
        padding-right: 20px;
        text-align: left;
        vertical-align: top;
    }

    .life-perk:nth-child(3n+1) {
        clear: both;
    }

    .life-perk > h4:before,
    .life-perk > h4:after {
        left: 0;
        margin-left: -6px;
    }
}

@media (min-width: 921px) {

    #life {
        padding: 50px 0;
    }

    .life-intro-head {
        max-width: 620px;
        font-size: 38px;
    }

    .life-intro {
        max-width: 620px;
    }

    #life-gallery {
        height: 460px;
        margin: 60px 0;
    }

    .life-perks-head {
        font-size: 26px;
    }


}


 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Life - Carousel
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* javascript enabled but no media query support */
#life-gallery {
    display: none;
}

/* no javascript and no media queries */
.js-disabled #life-gallery {
    display: block;
    height: 345px;
    background-image: url("/static/img/gallery/gallery-tablet-1.6c7fb51cd01a.jpg");
}

/* real browsers
   - height set by media queries
   - other configerations set by class added by js
 */

@media (max-width:680px) {
    #life-gallery,
    #life-blocks {
        height:225px;
    }
}
@media (min-width:681px) {
    #life-gallery,
    #life-blocks {
        height:345;
    }
}
@media (min-width:921px) {
    #life-gallery,
    #life-blocks {
        height:460px;
    }
}

@media (min-width:1px) {
    #life-gallery {
        display: block;
    }

    #life-gallery.life-blocks-small,
    .life-blocks-small #life-blocks {
        height: 225px;
    }

    #life-gallery.life-blocks-medium,
    .life-blocks-medium #life-blocks {
        height: 345px;
    }

    #life-gallery.life-blocks-large,
    .life-blocks-large #life-blocks  {
        height: 460px;
    }

}

#life-blocks {
    overflow: hidden; _overflow: visible; zoom: 1; /* clearfix */
    position: relative;
    display: block;
}

.life-blocks-contain {
    overflow: hidden; _overflow: visible; zoom: 1; /* clearfix */
    float: left;
    width: 100%;
}

#life-blocks .caroufredsel_wrapper {
    /* override inline styles added by plugin */
    overflow: visible !important;
    margin: 0 auto !important;
}

.life-blocks-frame {
    position: relative;
    float: left;
}

    .life-blocks-small .life-blocks-frame {
        width: 280px;
        height: 225px;
        margin: 0 5px;
    }

    .life-blocks-medium .life-blocks-frame {
        width: 360px;
        height: 345px;
    }

    .life-blocks-large .life-blocks-frame {
        width: 480px;
        height: 460px;
    }

/* small image sprites
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* first sprite */
.life-blocks-small .life-blocks-frame-31,
.life-blocks-small .life-blocks-frame-32,
.life-blocks-small .life-blocks-frame-33,
.life-blocks-small .life-blocks-frame-34,
.life-blocks-small .life-blocks-frame-35,
.life-blocks-small .life-blocks-frame-1,
.life-blocks-small .life-blocks-frame-2,
.life-blocks-small .life-blocks-frame-3,
.life-blocks-small .life-blocks-frame-4,
.life-blocks-small .life-blocks-frame-5 {
    background-image: url("/static/img/gallery/gallery-mobile-1.c0c615bcb9eb.jpg");
}

/* second sprite */
.life-blocks-small .sprite-load-2 .life-blocks-frame-26,
.life-blocks-small .sprite-load-2 .life-blocks-frame-27,
.life-blocks-small .sprite-load-2 .life-blocks-frame-28,
.life-blocks-small .sprite-load-2 .life-blocks-frame-29,
.life-blocks-small .sprite-load-2 .life-blocks-frame-30,
.life-blocks-small .sprite-load-2 .life-blocks-frame-6,
.life-blocks-small .sprite-load-2 .life-blocks-frame-7,
.life-blocks-small .sprite-load-2 .life-blocks-frame-8,
.life-blocks-small .sprite-load-2 .life-blocks-frame-9,
.life-blocks-small .sprite-load-2 .life-blocks-frame-10 {
    background-image: url("/static/img/gallery/gallery-mobile-2.4bb027b0518b.jpg");
}

/* third sprite */
.life-blocks-small .sprite-load-3 .life-blocks-frame-21,
.life-blocks-small .sprite-load-3 .life-blocks-frame-22,
.life-blocks-small .sprite-load-3 .life-blocks-frame-23,
.life-blocks-small .sprite-load-3 .life-blocks-frame-24,
.life-blocks-small .sprite-load-3 .life-blocks-frame-25,
.life-blocks-small .sprite-load-3 .life-blocks-frame-11,
.life-blocks-small .sprite-load-3 .life-blocks-frame-12,
.life-blocks-small .sprite-load-3 .life-blocks-frame-13,
.life-blocks-small .sprite-load-3 .life-blocks-frame-14,
.life-blocks-small .sprite-load-3 .life-blocks-frame-15 {
    background-image: url("/static/img/gallery/gallery-mobile-3.9ccfbbe653f4.jpg");
}

/* fourth sprite */
.life-blocks-small .sprite-load-4 .life-blocks-frame-16,
.life-blocks-small .sprite-load-4 .life-blocks-frame-17,
.life-blocks-small .sprite-load-4 .life-blocks-frame-18,
.life-blocks-small .sprite-load-4 .life-blocks-frame-19,
.life-blocks-small .sprite-load-4 .life-blocks-frame-20 {
    background-image: url("/static/img/gallery/gallery-mobile-4.b75af56b98ab.jpg");
}

/* second image */
.life-blocks-small .life-blocks-frame-32,
.life-blocks-small .life-blocks-frame-27,
.life-blocks-small .life-blocks-frame-22 {
    background-position: -280px 0;
}
/* third image */
.life-blocks-small .life-blocks-frame-33,
.life-blocks-small .life-blocks-frame-28,
.life-blocks-small .life-blocks-frame-23,
.life-blocks-small .life-blocks-frame-17{
    background-position: -560px 0;
}
/* fourth image */
.life-blocks-small .life-blocks-frame-34,
.life-blocks-small .life-blocks-frame-29,
.life-blocks-small .life-blocks-frame-24,
.life-blocks-small .life-blocks-frame-18{
    background-position: -840px 0;
}
/* fifth image */
.life-blocks-small .life-blocks-frame-35,
.life-blocks-small .life-blocks-frame-30,
.life-blocks-small .life-blocks-frame-25,
.life-blocks-small .life-blocks-frame-19 {
    background-position: -1120px 0;
}
/* sixth image */
.life-blocks-small .life-blocks-frame-1,
.life-blocks-small .life-blocks-frame-6,
.life-blocks-small .life-blocks-frame-11,
.life-blocks-small .life-blocks-frame-20 {
    background-position: -1400px 0;
}
/* seventh image */
.life-blocks-small .life-blocks-frame-2,
.life-blocks-small .life-blocks-frame-7,
.life-blocks-small .life-blocks-frame-12 {
    background-position: -1680px 0;
}
/* eighth image */
.life-blocks-small .life-blocks-frame-3,
.life-blocks-small .life-blocks-frame-8,
.life-blocks-small .life-blocks-frame-13 {
    background-position: -1960px 0;
}
/* ninth image */
.life-blocks-small .life-blocks-frame-4,
.life-blocks-small .life-blocks-frame-9,
.life-blocks-small .life-blocks-frame-14 {
    background-position: -2240px 0;
}
/* tenth image */
.life-blocks-small .life-blocks-frame-5,
.life-blocks-small .life-blocks-frame-10,
.life-blocks-small .life-blocks-frame-15 {
    background-position: -2520px 0;
}


/* medium image sprites
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* first sprite */
.life-blocks-medium .life-blocks-frame-1,
.life-blocks-medium .life-blocks-frame-2,
.life-blocks-medium .life-blocks-frame-3,
.life-blocks-medium .life-blocks-frame-4 {
    background-image: url("/static/img/gallery/gallery-tablet-1.6c7fb51cd01a.jpg");
}

/* second sprite */
.life-blocks-medium .sprite-load-2 .life-blocks-frame-5,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-6,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-7,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-8,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-9,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-10,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-11,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-12,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-13,
.life-blocks-medium .sprite-load-2 .life-blocks-frame-14 {
    background-image: url("/static/img/gallery/gallery-tablet-2.387e7b938b25.jpg");
}

/* second image */
.life-blocks-medium .life-blocks-frame-2,
.life-blocks-medium .life-blocks-frame-6{
    background-position: -360px 0;
}
/* third image */
.life-blocks-medium .life-blocks-frame-3,
.life-blocks-medium .life-blocks-frame-7{
    background-position: -720px 0;
}
/* fourth image */
.life-blocks-medium .life-blocks-frame-4,
.life-blocks-medium .life-blocks-frame-8 {
    background-position: -1080px 0;
}
/* fifth image */
.life-blocks-medium .life-blocks-frame-9 {
    background-position: -1440px 0;
}
/* sixth image */
.life-blocks-medium .life-blocks-frame-10{
    background-position: -1800px 0;
}
/* seventh image */
.life-blocks-medium .life-blocks-frame-11 {
    background-position: -2160px 0;
}
/* eighth image */
.life-blocks-medium .life-blocks-frame-12 {
    background-position: -2520px 0;
}
/* ninth image */
.life-blocks-medium .life-blocks-frame-13 {
    background-position: -2880px 0;
}
/* tenth image */
.life-blocks-medium .life-blocks-frame-14 {
    background-position: -3240px 0;
}


/* large image sprites
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* first sprite */
.life-blocks-large .life-blocks-frame-1,
.life-blocks-large .life-blocks-frame-2,
.life-blocks-large .life-blocks-frame-3,
.life-blocks-large .life-blocks-frame-4,
.life-blocks-large .life-blocks-frame-5,
.life-blocks-large .life-blocks-frame-6 {
    background-image: url("/static/img/gallery/gallery-desktop-1.2ce13e74b26b.jpg");
}

/* second sprite */
.life-blocks-large .sprite-load-2 .life-blocks-frame-7,
.life-blocks-large .sprite-load-2 .life-blocks-frame-8,
.life-blocks-large .sprite-load-2 .life-blocks-frame-9,
.life-blocks-large .sprite-load-2 .life-blocks-frame-10,
.life-blocks-large .sprite-load-2 .life-blocks-frame-11,
.life-blocks-large .sprite-load-2 .life-blocks-frame-12,
.life-blocks-large .sprite-load-2 .life-blocks-frame-13,
.life-blocks-large .sprite-load-2 .life-blocks-frame-14 {
    background-image: url("/static/img/gallery/gallery-desktop-2.87bac100ba9d.jpg");
}

/* second image */
.life-blocks-large .life-blocks-frame-2,
.life-blocks-large .life-blocks-frame-8{
    background-position: -480px 0;
}
/* third image */
.life-blocks-large .life-blocks-frame-3,
.life-blocks-large .life-blocks-frame-9{
    background-position: -960px 0;
}
/* fourth image */
.life-blocks-large .life-blocks-frame-4,
.life-blocks-large .life-blocks-frame-10 {
    background-position: -1440px 0;
}
/* fifth image */
.life-blocks-large .life-blocks-frame-5,
.life-blocks-large .life-blocks-frame-11 {
    background-position: -1920px 0;
}
/* sixth image */
.life-blocks-large .life-blocks-frame-6,
.life-blocks-large .life-blocks-frame-12{
    background-position: -2400px 0;
}
/* seventh image */
.life-blocks-large .life-blocks-frame-13 {
    background-position: -2880px 0;
}
/* eighth image */
.life-blocks-large .life-blocks-frame-14 {
    background-position: -3360px 0;
}

/*  -------------------------------------------------------------------
    Community
    - mobile & non media query browsers get fixed width boxes of 280px
        - this also avoids need for them to support background size to display background at correct size
    - tablet and larger switch to flexable background size to support flexable boxes
    ------------------------------------------------------------------- */

#community {
    position: relative;
    overflow: hidden; _overflow: visible; zoom: 1; /* clearfix */
    background: #2e3a42;
    color: #fff;
    text-align: center;
}

.community-head {
    font-size: 21px;
    font-weight: 600;
    text-align: left;
}

.community-boxes {
    position: relative;
    margin-right: -20px;
}

.community-box {
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 300px;
    margin-bottom: 25px;
    padding-right: 20px;
    text-align: left;
    vertical-align: top;
}

    .community-box:before {
        content: '';
        display: block;
        height: 0;
        width: 100%;
        padding-top: 56%;
        background-image: url("/static/img/community/community-mobile.e6ae057c8881.jpg");
    }

    .community-monument:before {
        background-position: -560px 0;
    }
    .community-interns:before {
        background-position: -280px 0;
    }
    .community-reps:before {
        background-position: 0 -160px;
    }
    .community-desk:before {
        background-position: -280px -160px;
    }
    .community-festival:before {
        background-position: -560px -160px;
    }

.community-box > h4 {
    margin: 0.8em 0 0.5em 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.community-box > p {
    margin: 0.5em 0;
}

.community-box img {
    height: auto;
    width: 100%;
    max-width: 100%;
}

.community-box a:hover,
.community-box a:focus,
.community-box a:active {
    color: #4bbde6;
}

.video-modal {
    position: absolute;
    z-index: 1;
    top: 200px;
    left: -9999px;
    display: block;
    width: 650px;
    margin-left: -340px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    border: 1px solid #fff;
    padding: 14px 14px 14px 14px;
    background: #464543;
    background: rgba(255, 255, 255, 0.75);
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    opacity: 0;

    -webkit-transition: opacity 1s, left 0s 1s;
            transition: opacity 1s, left 0s 1s;
}


.video-play {
     left: 50%;
     opacity: 1;

     -webkit-transition: opacity 1s, left 0s 0s;
             transition: opacity 1s, left 0s 0s;

}

.video-modal-open {
    position: absolute;
    top: 0;
    left: 0;
    height: 55%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}
    .video-modal-open:before {
        content: '\e014';
        padding-right: 20px;
        font-size: 80px;
        color: #fff;
        opacity: 0.5;
    }

    .video-modal-open:hover:before {
        opacity: 0.8;
        cursor: pointer;
    }

.video-modal-close {
    position: absolute;
    top: 7px;
    right: 11px;
    display: block;
    height: 18px;
    width: 18px;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.video-modal-close {
    position: absolute;
    top: 7px;
    right: 11px;
    display: block;
    height: 18px;
    width: 18px;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    margin-top: 14px;
    padding-top: 56.1%;
}

.video-wrapper .video-js {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

@media (max-width: 680px) {
    .community-modal-open {
        display: none;
    }

    .community-box a {
        display: none;
    }
}

@media (min-width: 681px) {
    #community {
        padding: 40px 0;
    }

    .community-head {
        margin-bottom: 30px;
    }

    .community-box {
        width: 33.3%;
        min-width: 280px;
    }

    .community-box:before {
         background-size: 300% 200%;
    }
        .community-monument:before {
            background-position: -200% 0;
        }
        .community-interns:before {
            background-position: -100% 0;
        }
        .community-reps:before {
            background-position: 0% -100%;
        }
        .community-desk:before {
            background-position: -100% -100%;
        }
        .community-festival:before {
            background-position: -200% -100%;
        }
}

@media (min-width: 921px) {
    #community {
        padding: 50px 0;
    }

    .community-head {
        margin-bottom: 30px;
        font-size: 26px;
    }

    .community-box {
        width: 33%;
        max-width: 330px;
        margin-bottom: 60px;
    }

    .community-box:before {
        background-image: url("/static/img/community/community-desktop.22684131f2db.jpg");
    }
}


/*  -------------------------------------------------------------------
    Locations
    - without javascript or media queries user gets a list of locations
      they can hover over to reveal more
    - with javascript and media queries mobile users get a select box they
      can pick out of
        - select box goes in a relatively positioned parent and given 0 opacity
            - user activates select by clicking invisible select or tabing to it
    - without js but with mq larger screens get a map with pointers that lead off site
    - with js and mq larger screens get a map with pointers that open a modal
    - map is fixed, not flexable
    ------------------------------------------------------------------- */

#locations {
    position: relative;
    padding: 20px 0;
    font-size: 15px;
}

.locations-head {
    max-width: 500px;
    margin: 10px auto;
    padding: 0 20px;
    font-size: 26px;
    color: #a2a2a9;
}

.locations-subhead {
    max-width: 500px;
    margin: 10px auto;
    padding: 0 20px;
    font-size: 38px;
    font-family: 'Open Sans Light',sans-serif;
    line-height: 1.2;
}

.locations-remote {
    max-width: 500px;
    position: relative;
    margin: 10px auto 20px auto;
    padding: 56px 20px 0 20px;
}

    .locations-remote:before {
        content: '\e004';
        position: absolute;
        top: 5px;
        left: 20px;
        font-size: 38px;
    }

.locations-remote > p {
    margin: 0;
}

    .locations-remote-pins {
        display: none;
    }

.locations-remote > strong {
    font-weight: 600;
    text-transform: uppercase;
}

.locations-menu {
    position: relative;
    max-width: 500px;
    height: 47px;
    margin: 0 auto;
    background-color: #c8c6b6;
    color: #fff;
}

    #locations-select {
        position: absolute;
        z-index: 1;
        height: 47px;
        width: 100%;
        margin: 0;
        padding: 10px 0;
        opacity: 0;
        background-color: #c8c6b6;
    }

    .locations-label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0 20px;
        line-height: 47px;
    }

        .locations-label:before {
            content: '\e013';
            position: absolute;
            top: 0;
            right: 0;
            height: 47px;
            width: 50px;
            font-size: 25px;
            line-height: 47px;
            text-align: center;
        }

        #locations-select:focus + .locations-label {
            outline: 1px solid #4d4e53;
            color: #4d4e53;
        }

#locations-list {
    margin: 0;
    padding: 0;
}

.locations-location {
    display: block;
    max-width: 500px;
    margin: 0 auto 3px auto;
}

.location-link {
    display: block;
    padding: 3px 20px;
    background-color: #c8c6b6;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}
    .location-link:link,
    .location-link:visited {
        color: #fff;
    }

    .location-link:hover,
    .location-link:focus,
    .location-link:active {
       text-decoration: none;
    }

.location-details {
    display: none;
    padding: 20px;
    background-color: #fff;
}

    .locations-location:hover .location-details {
        display: block;
    }

.location-close {
    display: none;
}

.locations-tag {
    display: none;
}

@media (max-width:680px) {

    .js-enabled .location-link {
        display: none;
    }

    .js-enabled .locations-location {
        max-height: 0;
        overflow: hidden;
        margin-bottom: 0;

        -webkit-transition: max-height 1s;
                transition: max-height 1s;

    }

        .js-enabled .locations-location.location-current {
            max-height: 250px;
        }

    .js-enabled .location-details {
         display: block;
    }

}

@media (min-width: 681px) {

    #locations {
        height: 520px;
        overflow: hidden;
        padding: 25px 0 30px 0;
        background: url("/static/img/locations-tablet.8b10ca72d3b2.jpg") top center no-repeat;
    }

    .locations-head {
        position: absolute;
        left: -9999px;
    }

    .locations-subhead {
        margin-top: 0;
        margin-bottom: 0;
        height: 400px; /* makes space for absolutely positioned map */
        color: #c13832;
        font-size: 41px;
        line-height: 1.1;
        text-align: center;
    }

    .locations-menu {
        display: none;
    }

    #locations-list{
        position: absolute;
        top: 130px;
        left: 50%;
        display: block;
        height: 350px;
        width: 700px;
        max-width: none;
        margin-left: -350px;
    }

    .location-link {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0;
        background-color: transparent;
        color: #4d4e53;
        font-size: 12px;
        white-space: nowrap;
    }

        .location-link:link,
        .location-link:visited {
            color: #4d4e53;
        }

        .location-link:before {
            content: '\e000';
            position: absolute;
            top: -2px;
            left: -23px;
            color: #c13832;
            font-size: 20px;
        }

             .location-link:hover:before,
             .location-link:focus:before,
             .location-link:active:before {
                 color: #4d4e53;
             }

        #mountian-view .location-link { top: 35%; left: 12%; }
        #auckland .location-link { top: 86%; left: auto; right: 5%; }
            #auckland .location-link:before { left: auto; right: -23px; }
        #beijing .location-link { top: 26%; left: auto; right: 20.5%; }
            #beijing .location-link:before { left: auto; right: -23px; }
        #berlin .location-link { top: 19%; left: 49.5%; }
        #boston .location-link { top: 25.5%; left: 27%; }
        #london .location-link { top: 18%; left: auto; right: 57%; }
            #london .location-link:before { left: auto; right: -23px; }
        #paris .location-link { top: 23%; left: auto; right: 56%; }
            #paris .location-link:before { left: auto; right: -23px; }
        #portland .location-link { top: 24%; left: auto; right: 92%; }
            #portland .location-link:before { left: auto; right: -23px; }
        #san-francisco .location-link { top: 30%; left: 11%; }
        #taipei .location-link { top: 37%; left: 87%; }
        #tokyo .location-link { top: 29%; left: 90%; }
        #toronto .location-link { top: 21%; left: 25.5%; }
        #vancouver .location-link { top: 16%; left: 12.5%; }
            #vancouver .location-link:before { left: -18px; top: 8px; }


    .location-details {
        position: absolute;
        top: 11px;
        left: -9999px;
        z-index: 1;
        display: block;
        width: 342px;
        margin-left: -187px;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        border: 1px solid #000;
        padding: 14px 14px 14px 14px;
        background: #464543;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        text-shadow: 1px 1px 3px #000;
        opacity: 0;

         -webkit-transition: opacity 1s, left 0s 1s;
                 transition: opacity 1s, left 0s 1s;
    }

         .location-current .location-details {
             left: 50%;
             opacity: 1;

             -webkit-transition: opacity 1s, left 0s 0s;
                     transition: opacity 1s, left 0s 0s;
         }

        .location-details > strong {
            display: inline-block;
            margin-bottom: 15px;
            font-size: 21px;
            line-height: 1.2;
        }

    .location-close {
        position: absolute;
        top: 7px;
        right: 11px;
        display: block;
        height: 18px;
        width: 18px;
        border: 0;
        margin: 0;
        padding: 0;
        background: none;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
        cursor: pointer;
    }

    .locations-remote {
         -moz-box-sizing: border-box;
              box-sizing: border-box;
         width: 50%;
         max-width: 340px;
         padding: 0 0 0 60px;
         font-size: 12px;
    }

        .locations-remote:before {
            top: -14px;
            left: 10px;
            color: #c8c6b6;
            font-size: 30px;
        }

        .locations-remote-pins {
            display: block;
        }
        .locations-remote-nopins {
            display: none;
        }
}

@media (min-width: 921px) {

    #locations {
        height: 680px;
        padding: 40px 0;
        background: url("/static/img/locations-desktop.2ddd25bf3443.jpg") top center no-repeat;
    }

        .moz-no-touch #locations {
            height: auto;
        }

        .moz-no-touch #locations.pin {
            background-attachment: fixed;
            background-position: 50% -50px;
        }

    .locations-subhead {
        height: 540px; /* makes space for absolutely positioned map */
        font-size: 55px;
    }

    #locations-list {
        width: 940px;
        height: 470px;
        top: 180px;
        margin-left: -470px;
    }

    .location-link {
        font-size: 16px;
    }

    .locations-remote {
        max-width: 540px;
        padding: 0 100px;
        font-size: 15px;
    }

    .locations-remote:before {
        top: -8px;
        left: 50px;
    }

    .locations-tag {
        display: block;
        max-width: 500px;
        margin: 10px auto;
        padding: 250px 20px 150px 20px;
        color: #c13832;
        font-family: 'Open Sans Light',sans-serif;
        font-size: 55px;
        line-height: 1.2;
        text-align: center;
    }
}

/*  -------------------------------------------------------------------
    Next / "and You?"
    ------------------------------------------------------------------- */

#next {
    text-align: center;
}

#next-teaser {
    display: none;
}

@media (min-width: 681px) {
    #next-teaser {
        position: relative;
        display: block;
        height: 540px;
        background: #292324 top right;
        color: #fff;
    }

    .next-box {
        position: relative;
        display: inline-block;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
        height: 200px;
        width: 28%;
        max-width: 195px;
        margin: 75px 2% 100px 2%;
        padding: 65px 25px 25px 25px;
        background: #c13832;
        background: rgba(193, 56, 50, 0.8);
        font-size: 18px;
        font-family: 'Open Sans Light',sans-serif;
        line-height: 1.2;
        text-align: left;
        vertical-align: top;

    }

    .next-box > strong {
         display: block;
         font-size: 20px;
         font-family: 'Open Sans',sans-serif;
     }

     .next-you {
         margin: 0;
         font-size: 45px;
         line-height: 1;
         font-family: 'Open Sans Light',sans-serif;
     }

     .next-you > em {
         font-size: 65px;
         font-family: 'Open Sans',sans-serif;
         font-weight: 600;
         font-style: normal;
         text-transform: uppercase;
     }
}

@media (min-width: 921px) {
    #next-teaser {
        height: 640px;
    }

        #next.pin #next-teaser {
            background-attachment: fixed;
            background-position: 100% 100px;
        }

    .next-box {
        height: 280px;
        width: 270px;
        max-width: 270px;
        margin: 75px 10px 100px 10px;
        padding: 65px 25px 25px 25px;
        font-size: 33px;

        opacity: 0;
        -webkit-transition: opacity 1s ease-out;
                transition: opacity 1s ease-out;
     }

        .moz-touch .next-box,
        .next-box.show {
            opacity: 1;
        }

        .next-box > strong {
            font-size: 38px;
        }

     .next-you {
         font-size: 45px;
         opacity: 0;
        -webkit-transition: opacity 1s ease-out;
                transition: opacity 1s ease-out;
     }
        .moz-touch .next-you,
        .next-you.show {
            opacity: 1;
        }

     .next-you > em {
         font-size: 65px;
      }

}

/* backgrounds */


@media (min-width: 681px) {
    #next-teaser {
        background-image: url("/static/img/next-920.9b55f411849d.jpg");
    }
}

@media (min-width: 921px) {
    #next-teaser {
        background-image: url("/static/img/next-1280.9de44a7eb2f5.jpg");
    }
}

@media (min-width: 1281px) {
    #next-teaser {
        background-image: url("/static/img/next-1680.7372652ac4c0.jpg");
    }
}

@media (min-width: 1681px) {
    #next-teaser {
        background-image: url("/static/img/next-2560.8eb8586dfa5d.jpg");
    }
}

@media (min-width: 2561px) {
    #next-teaser {
        background-position: center top;
    }
}

/*  Error Pages 404 & 500 */

#error {
    padding-bottom: 50px;
}

    #error h1 {
        font-size: 38px;
    }