@charset "utf-8";

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

NAME - WEAREPOPUP
AUTH - LARS @ LARSATTACKS
DATE - 25.02.2015

---------------------------------------------------------------------------------------------

DOC STRUCTURE
-
01 - Defaults
02 - Typography
     Headings
03 - Header & Nav
04 - Section Styles
05 - Media Queries
06 - Animations
07 - Image Aspect Ratio
08 - Flex
09 - Parallax
10 - Retina
11 - Bootstrap
12 - BigVideo Styles
13 - Scroll to next Section Arrows
------------------------------------------------------------------------------------------ */


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

01. DEFAULTS
------------------------------------------------------------------------------------------- */

body { }

.centre {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

@media only screen and (min-width : 992px) {
    .centre-desktop {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }
}


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

02. Typography ( fonts.com )

Avenir Next Demi Bold   - "Avenir Next Cyr W00 Bold"
Avenir Next Demi        - "Avenir Next Cyr W00 Demi";
Avenir Next             - "AvenirNextLTW01-Regular"
Avenir Next Ultra Light - "Avenir Next Cyr W00 Ult Light"
Avenir Next Ultra Thin  - "Avenir Next Cyr W00 Thin""
------------------------------------------------------------------------------------------- */

html { font-size: 62.5% }

body {
    font-family: "AvenirNextLTW01-Regular";
    font-style: normal;
    font-size: 1em;
    line-height: 1em;
}

h1 { }
h2 { font-family: "Avenir Next Cyr W00 Demi"; font-size: 6.0rem; line-height: 1.5em; margin-bottom: 15px; }
h3 { font-family: "Avenir Next Cyr W00 Demi"; font-size: 2.2rem; line-height: 2.9rem; letter-spacing: 0.02em; }
h4 { font-family: "Avenir Next Cyr W00 Demi"; }
h5 { font-family: "Avenir Next Cyr W00 Demi"; }
h6 { font-family: "Avenir Next Cyr W00 Demi"; }

p   { font-family: "Avenir Next W01 Light"; font-size: 1.8rem; line-height: 24px; margin-bottom: 10px; }
nav { font-size: 1.4rem; }
em  { } 
ul   { font-family: "Avenir Next W01 Light"; font-size: 1.8rem; line-height: 24px; margin-top: 20px; list-style-type: none; margin-left: 0; padding: 0; color: #666; text-align: right;}
li   { margin-bottom: 10px; }

.bold { font-family: "Avenir Next Cyr W00 Demi"; }

header #hero h3 { font-family: "Avenir Next W01 Light"; }
header #hero form .btn { font-family: "AvenirNextLTW01-Regular"; }
header #hero form input#email { font-family: "AvenirNextLTW01-Regular"; }
header #hero form input[type="submit"] { font-family: "AvenirNextLTW01-Regular"; }
header.nyc #hero { color: white; }

section.popup-our-places figure figcaption h3 span { font-family: "AvenirNextLTW01-Regular"; }

/*
    Level-Up the font-weight for Retina Devices
*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    p {
        font-family: "AvenirNextLTW01-Regular";
    }
}

@media only screen and (min-width : 320px)  {
    html.touch p { font-family: "AvenirNextLTW01-Regular"; }
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
    p { line-height: 23px; }
}





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

03. HEADER, NAV AND FORM
------------------------------------------------------------------------------------------- */

header { height: 697px; }
header a { color: black; }

header .navbar-simple { }
header .navbar-simple ul { }
header .navbar-simple ul li { float: left; }
header .navbar-simple ul li a { padding-top: 12px; padding-bottom: 8px; }

header .navbar-popup { background: #FFF;  -webkit-box-shadow: 0 4px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 4px rgba(0, 0, 0, 0.1); }
header .navbar-popup ul.nav { }
header .navbar-popup ul.nav li { }
header .navbar-popup ul.nav li a { }
header .navbar-popup ul.nav li a:hover { background: none; }
header .navbar-popup ul.nav a.list { background: #49ACB2; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position: relative; top: 6px; color: #FFF; text-shadow: 0px 0px 0px #FFF; padding: 9px 24px; }
header .navbar-popup ul.nav a.list:hover { background: #49ACB2; }
header .navbar-popup .navbar-header { }
header .navbar-popup .navbar-header h1.navbar-brand { width: 100px; text-indent: -777777px; height: 54px; padding: 0px; background: url('../img/ui/logo_100x32.png?s=a2') no-repeat center center transparent; background-size: contain; margin-bottom: 0px; }
header .navbar-popup .navbar-header h1.navbar-brand img { width: 100%; -webkit-transform: translate3d(0, 0, 0); }
header .navbar-popup .navbar-header .navbar-toggle .icon-bar { background: black; }

header .navbar-popup.affix { width: 100%; padding-top: 0px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.85); }

header #hero-image {
    /* background: url('../img/content/homepage-large.jpg') no-repeat center bottom transparent; */
    /* background: url('../img/content/unnamed.jpg') no-repeat center bottom transparent; */
    background: 
        url('../img/content/2560homepage.jpg') no-repeat center bottom transparent;
    background-size: cover; position: absolute; height: 100%; width: 100%; top: 0px; z-index: -2; opacity: 1;}
header.nyc #hero-image { background-image: url('../img/content/2560homepageNYC.jpg');}
header #hero-video { z-index: 0; position: absolute; top: 0; left: 0; }

header #hero { text-align: center; width: 100%; color: black; z-index: 10; }
header #hero h2 { color: inherit; background: url('../img/content/wapu_large_logo.png?s=a2') no-repeat center bottom transparent; text-indent: -777777px; background-size: 100%; max-width: 600px; margin: 0 auto; /* line-height: 4em; line-height: 17vw; */ height: 0px; padding-bottom: 18%; }
header #hero h3 { font-size: 2.7rem; margin-bottom: 25px; color: inherit; line-height: 1.4em; margin-top: 35px; padding-left: 18%; padding-right: 18%; }
header.nyc #hero h2 { color: inherit; background: url('../img/content/wapu_large_logo_white.png?s=a2') no-repeat center bottom transparent; text-indent: -777777px; background-size: 100%; max-width: 600px; margin: 0 auto; /* line-height: 4em; line-height: 17vw; */ height: 0px; padding-bottom: 18%; }
@media only screen and (max-width:767px) {
    header #hero h2 { display: none; }
}
/*
    fix header to the top for touch devices
    using html.touch Modernizr property
*/
html.touch header .navbar-popup { }
html.touch header .navbar-popup.affix,
html.touch header .navbar-popup.affix-top { position: fixed; width: 100%; }

/*
    And also on desktop now
*/
header .navbar-popup.affix,
header .navbar-popup.affix-top { position: fixed; width: 100%; }

@media only screen and (min-width : 768px) { /*  and (max-width : 768px) */
    html.touch header .navbar-popup.affix,
    html.touch header .navbar-popup.affix-top { padding-bottom: 12px; padding-top: 0px; }
}



/*
    MAINFORM
*/
form.mainForm { margin-top: 5%; margin-bottom: 15%; padding: 25px; background: rgb(68, 65, 65); background: rgba(247, 247, 242, 0.4); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
form.mainForm p { margin-left: -15px; margin-right: -15px; color: #FFF; font-size: 1.6rem; line-height: 1.7em; margin-bottom: 15px; color: #FFF; font-size: 18px; line-height: 26px; text-align: center; margin-bottom: 12px; padding: 0px 16px; }
form.mainForm > p { font-size: 2.0rem; margin-bottom: 25px; color: #000; }

form.mainForm .row { margin-bottom: 0px; }
form.mainForm .row:last-of-type { margin-bottom: 0px; }

form.mainForm .row.emailRow { position: relative; }
form.mainForm .row.emailRow > div { margin-top: 17px; }
form.mainForm .row.ani-height { height: 0px; overflow: hidden; }
form.mainForm .row.ani-height.visible { height: 68px; }

form.mainForm .row .form-group { padding: 0px 18px; margin-bottom: 0px; }
form.mainForm .row .form-group.col-mid { padding: 0px 8px; }

form.mainForm .row .form-group .btn { height: 38px; text-transform: none; line-height: 1em; letter-spacing: 0px; }
form.mainForm .row .form-group .btn:hover { background: #ff6666; }
form.mainForm .row .form-group .btn:first-of-type { margin-bottom: 1px; }
form.mainForm .row .form-group .btn.selected { background: #ff6666; color: white; }

form.mainForm .row .form-group .btn-split-level {}
form.mainForm .row .form-group .btn-split-level:first-of-type {
    -webkit-border-bottom-right-radius: 0px;
       -moz-border-bottom-right-radius: 0px;
            border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
       -moz-border-bottom-left-radius: 0px;
            border-bottom-left-radius: 0px;
}
form.mainForm .row .form-group .btn-split-level:last-of-type  {
    -webkit-border-top-right-radius: 0px;
       -moz-border-top-right-radius: 0px;
            border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
       -moz-border-top-left-radius: 0px;
            border-top-left-radius: 0px;
}

form.mainForm .row .form-group .btn.btn-vertical-center { display: table; width: 100%; }
form.mainForm .row .form-group .btn.btn-vertical-center i { display: table-cell; vertical-align: middle; font-style: normal;  }

form.mainForm .row .form-group.doubleHeightBtn .btn { height: 86px !important; padding-top: 18px; line-height: 1.3em; }

form.mainForm input,
form.mainForm a.btn { white-space: normal !important; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; height: 48px; background: #d7d7cf; color: #323231; cursor: pointer; border: 0px; font-size: 1.6rem; width: 100%; }
form.mainForm input#email,
form.mainForm input#email_bottom { border: 0; height: 48px; background: #fff; color: #d7d7cf; }
form.mainForm input[type="submit"] { position: absolute; top: 0; z-index: 10; background: #ff6666; width: 15%; margin: 7px; height: 34px !important; line-height: 0.5em !important; color: #FFF; font-size: 1.3rem; right: 19px; padding: 0px; }
form.mainForm input[type="submit"]:hover { background: #ff9999 !important; }
form.mainForm input::-webkit-input-placeholder { text-align: left; color: #999; }

/*
    MAINFORM responsiveness
*/
@media only screen and (min-width : 320px) and (max-width : 767px) {
    form.mainForm p { font-size: 1.5em; line-height: 1.5em; }
    form.mainForm .row { margin-bottom: 0px; }
    form.mainForm .row.emailRow > div { margin-top: 0px; }
    form.mainForm .row .form-group { padding: 0px 18px !important; margin-bottom: 10px; }
    form.mainForm .row .form-group .btn { height: 38px !important; }
    form.mainForm .row .form-group.doubleHeightBtn .btn { height: 50px !important; }
    form.mainForm input[type="submit"] {
        line-height: 1.3em !important;
        padding: 5px;
    }
}

@media only screen and (min-width : 768px) and (max-width : 810px) {
    form.mainForm .btn.btn-split-level i { font-size: 0.9em; }
}

/*
    Form spreads out too much on large screens, needs restraining
*/
@media only screen and (min-width : 1600px) {
    form.mainForm { width: 870px; margin-left: auto; margin-right: auto; }
}

/*
    MIRRORED FORM TWEAKS
    We re-use the form from the header on the bottom of the page
*/
.popup-our-features form.mainForm { margin-bottom: 40px; }

@media only screen and (min-width : 320px) and (max-width : 992px) {
    .popup-our-features .form h3 { text-align: center; margin-top: 50px; border-top: 1px solid #B0A8A8; padding-top: 40px; padding-bottom: 25px; }
}

@media only screen and (min-width : 992px) {
    .popup-our-features h3 { text-align: center; margin-top: 50px; border-top: 1px solid #B0A8A8; padding-top: 5%; padding-bottom: 0; }
}


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

04. SECTION STYLES
------------------------------------------------------------------------------------------- */

h2 { color: #333333; }
p  { color: #666666; }

body                             { background: transparent; }
header                           { background: transparent; }
section.popup-our-message        { background: #F2F2F2; }
section.popup-our-places         { background: white; }
section.popup-our-clients        { background: white; }
section.popup-our-features       { background: #E0DDDB; }
section.popup-our-message.invert { background: #363636; }

section { }
section h2,
section p { text-align: center; }

section.popup-our-message { position: relative; }
section.popup-our-message > div { padding-top: 40px; padding-bottom: 40px; }
section.popup-our-features > div { padding-top: 60px; padding-bottom: 60px; }

section.popup-our-places { }
section.popup-our-places figure { padding: 0px; position: relative; }
section.popup-our-places figure img { width: 100%; }
section.popup-our-places figure figcaption { position: absolute; bottom: 10px; background: #FFF; overflow: hidden; }
section.popup-our-places figure figcaption h3 { margin: 0; font-size: 1.4rem; color: #232323; text-align: left; padding: 5px 5px 1px 5px; line-height: 1.2em; }
section.popup-our-places figure figcaption h3 span { color: #777; display: block; font-size: 11px; }
section.popup-our-places figure figcaption p { display: none; }

section.popup-our-clients { }
section.popup-our-clients figure { padding: 0px; }
section.popup-our-clients figure img { width: 100%; }
section.popup-our-clients figure figcaption { -webkit-backface-visibility: hidden; pointer-events: none; opacity: 0; position: absolute; top: 0px; width: 100%; height: 100%; background: rgb(68, 65, 65); background: rgba(0,0,0,.7); text-align: center; color: white; padding: 10px; }
section.popup-our-clients figure figcaption > div { width: 100%; padding: 15px; }
section.popup-our-clients figure figcaption > div > p { font-size: 1.4rem; line-height: 1.4em; color: #DDD; }
section.popup-our-clients figure:hover figcaption { opacity: 1; pointer-events: auto; }

section.popup-our-features { position: relative; }
section.popup-our-features h2 { margin-bottom: 7%; }
section.popup-our-features .col { text-align: center; }
section.popup-our-features .col em { font-size: 2rem; font-style: normal; line-height: 1em; padding-bottom: 100px; display: block; margin-bottom: 26px; }
section.popup-our-features .col h3 { margin-bottom: 25px; }
section.popup-our-features .col p { font-size: 1.6rem; line-height: 1.5em; color: #333; margin-bottom: 19px; padding: 0px 20px; }
section.popup-our-features .col.fast { }
section.popup-our-features .col.fast em { background: url('../img/icons/features-fast.png') no-repeat center bottom transparent; background-size: 102px; }
section.popup-our-features .col.flexible { }
section.popup-our-features .col.flexible em { background: url('../img/icons/features-flexible.png') no-repeat center bottom transparent; background-size: 93px; }
section.popup-our-features .col.open { }
section.popup-our-features .col.open em { background: url('../img/icons/features-open.png') no-repeat center bottom transparent; background-size: 63px; }
section.popup-our-features .col.flex { padding-top: 8% !important; padding-bottom: 8% !important; }

section.popup-our-message.invert { }
section.popup-our-message.invert h2 { color: white; }
section.popup-our-message.invert p { color: white; }
section.popup-our-message.invert p:last-of-type { margin-bottom: 0px; }

footer { background: #333; font-size: 1.25em; line-height: 1.75em; }
footer .white { color: #FFF; }
footer .container { padding: 40px 0; text-align: center; }
footer span,
footer a { margin: 0.4em 1em 0 0; }
footer a { color: #A8A8A7; }
footer a:hover { color: white; text-decoration: none; }

/*
    Message panel layouts

    .col-standard-layout
    .col-inverted-layout
*/

.popup-our-message .col-standard-layout .col-image { }
.popup-our-message .col-standard-layout .col-image img { float: right; }
.popup-our-message .col-standard-layout .col-copy { }

@media only screen and (min-width : 768px)  {
    .popup-our-message .col-standard-layout .col-copy * { text-align: left; }
}

.popup-our-message .col-inverted-layout .col-image { }
.popup-our-message .col-inverted-layout .col-image img { float: left; }
.popup-our-message .col-inverted-layout .col-copy { }

@media only screen and (min-width : 768px)  {
    .popup-our-message .col-inverted-layout .col-copy * { text-align: right; }
}


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

05. MEDIA QUERIES
------------------------------------------------------------------------------------------- */

/* 320 < 480 ------------------------------------------------------------------------------ */
@media only screen and (min-width : 320px) and (max-width : 480px) {

    /* body:before { content: "BP Grid = min:320, max:480"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    .navbar-brand { margin-top: 0px; margin-bottom: 0px; }

    /* REM */
    html { font-size: 50%; }

    header #hero { position: relative; top: -1% }
    header #hero h3 { font-size: 2.7rem; }

}


/* 320 < 768 ------------------------------------------------------------------------------ */
@media only screen and (min-width : 320px) and (max-width : 768px) {

    /* body:before { content: "BP Grid = min:320, max:768"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    /* Background */
    header #hero-image { background-image: url('../img/content/480x480.jpg'); }
    header.nyc #hero-image { background-image: url('../img/content/480x480_NYC.png');}

    /* NAV */
    .navbar-static-top { position: fixed; width: 100%; }
    .navbar-right { margin-left: 0px; }
    .navbar-right li { text-align: center; }
    .navbar-popup { background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.85); }
    header .navbar-popup .navbar-header h1.navbar-brand { width: 100px; }

    /* Footer */
    footer span,
    footer a { width: 100%; text-align: center; display: block; margin-top: 1em; font-size: 1em; }
    footer .container { padding: 15px 0; }

}

@media only screen and (min-width : 320px) and (max-width : 992px) {

    /* Features Section */
    section.popup-our-features .col { text-align: center; border-bottom: 1px solid #BEB5B0; padding-bottom: 40px; }
    section.popup-our-features .col:not(:first-of-type) { padding-top: 40px; }
    section.popup-our-features .col:last-of-type { border-bottom: none; }

}

/* Custom, iPhone Retina ------------------------------------------------------------------ */
@media only screen and (min-width : 320px) {

    /* body:before { content: "BP Grid = min:320"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    /* Nav Collapse  */
    .navbar-toggle { padding-top: 13px; }

    /* Logo */
    header h1.navbar-brand { margin-left: 20px; margin-top: 0px; }

}

/* Extra Small Devices, Phones ------------------------------------------------------------ */
@media only screen and (min-width : 480px) {

    /* body:before { content: "BP Grid = min:480"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

}

/* Small Devices, Tablets ----------------------------------------------------------------- */
@media only screen and (min-width : 768px) {

    /* body:before { content: "BP Grid = min:768"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    /* Background */
    header #hero-image { background-image: url('../img/content/768.jpg'); }
    header.nyc #hero-image { background-image: url('../img/content/768_NYC.jpg'); }

    /* Collapse  */
    header nav { overflow: hidden; padding-top: 9px; }

    /* Logo */
    header .navbar-popup { padding: 0px 86px; height: 61px; overflow: hidden; }
    header h1.navbar-brand { margin-top: 3px; margin-left: 0px; }

    /* Nav */
    header .navbar-popup ul.nav li { margin-right: 15px; }
    header .navbar-popup ul.nav li:last-of-type { margin-right: 0px; }
    header .navbar-popup.affix { padding-bottom: 12px; }

}

/* Medium Devices, Desktops --------------------------------------------------------------- */
@media only screen and (min-width : 992px) {

    /* body:before { content: "BP Grid = min:992"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    /* Features Section */
    section.popup-our-features .col { border-bottom: none; }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* body:before { content: "BP Grid = min:1200"; padding: 0.5em; display: block; text-align: center; background: #FF0; position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; }*/

    /* Background */
    header #hero-image { background-image: url('../img/content/2560homepage.jpg'); }
    header.nyc #hero-image { background-image: url('../img/content/2560homepageNYC.jpg');}

}

/* BEYOND */
@media only screen and (min-width : 1600px) {
    /* was:
          header #hero h2 { position: relative; margin-top: -20%; border: 1px solid red;}
       but changed to:
    */
    header .vcenterContainer { position: relative; margin-top: -5%; }
}



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

06. Animations
------------------------------------------------------------------------------------------- */
.ani-opacity {
    -webkit-transition: opacity 150ms ease-in-out;
       -moz-transition: opacity 150ms ease-in-out;
        -ms-transition: opacity 150ms ease-in-out;
         -o-transition: opacity 150ms ease-in-out;
            transition: opacity 150ms ease-in-out;
}

.ani-background {
    -webkit-transition: background 150ms ease;
       -moz-transition: background 150ms ease;
        -ms-transition: background 150ms ease;
         -o-transition: background 150ms ease;
            transition: background 150ms ease;
}

.ani-height {
    -webkit-transition: height 750ms ease;
       -moz-transition: height 750ms ease;
        -ms-transition: height 750ms ease;
         -o-transition: height 750ms ease;
            transition: height 750ms ease;
}

header #hero form .row .form-group .btn {
    -webkit-transition: background 150ms;
       -moz-transition: background 150ms;
        -ms-transition: background 150ms;
         -o-transition: background 150ms;
            transition: background 150ms;
}


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

07. IMAGE ASPECT RATIOS

    430x285 = 86:56 = 66%
------------------------------------------------------------------------------------------- */

section.popup-our-places div.col { padding-left: 0px; padding-right: 0px; }
section.popup-our-places div.col figure { position: relative; height: 0; overflow: hidden; padding-top: 66%; }
section.popup-our-places div.col figure img {  position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; max-width: 100%; max-height: 100%; }

section.popup-our-clients div.col { padding-left: 0px; padding-right: 0px; }
section.popup-our-clients div.col figure { position: relative; height: 0; overflow: hidden; padding-top: 66%; }
section.popup-our-clients div.col figure img {  position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; max-width: 100%; max-height: 100%; }

/*
    Full-width images on very small viewports
*/

@media only screen and (min-width : 320px) and (max-width : 480px) {
    section.popup-our-places  .col { width: 100%; }
    section.popup-our-clients .col { width: 100%; }
}




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

08. FLEX

    CHANGE CONTAINERS HEIGHT DEPENDING ON THE VIEWPORT
------------------------------------------------------------------------------------------- */

section.flex h2 { margin-top: 0px; }
section.flex p:last-of-type { margin-bottom: 0px; }

/* Frontpage flexing */

.vcenterContainer {
    display: table;
    height: 100%;
    position: absolute;
    top: 70px;
}
.vcenter {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

header .container-fluid { height: 100%; }
header .container-fluid > .row { height: 100%; }





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

09. PARALLAX
------------------------------------------------------------------------------------------- */

section.popup-our-message { z-index: 10; }
section.popup-our-places { z-index: -1; overflow: hidden; }
section.popup-our-clients { z-index: -1; overflow: hidden; }

.parallax { position: relative; }

/*
    Those Default Values are going to be overridden by javascript
    so that it fits according to the viewport
*/

section.popup-our-places { height: 700px;  }
section.popup-our-clients { height: 700px; }

@media only screen and (min-width : 320px)  {
    section.popup-our-places  { height: 1100px; }
    section.popup-our-clients { height: 1100px; }
}
@media only screen and (min-width : 480px)  {
    section.popup-our-places  { height: 900px; }
    section.popup-our-clients { height: 900px; }
}
@media only screen and (min-width : 768px)  {
    section.popup-our-places  { height: 500px; }
    section.popup-our-clients { height: 350px; }
}
@media only screen and (min-width : 992px)  {
    section.popup-our-places  { height: 700px; }
    section.popup-our-clients { height: 700px; }
}
@media only screen and (min-width : 1200px) {
    section.popup-our-places { max-height: 900px; }
    section.popup-our-clients { max-height: 900px; }
}

/*
    Touch Devices don't parallax
*/
html.touch section.popup-our-places,
html.touch section.popup-our-clients {
    /*
        height: auto !important;
        max-height: auto !important;
    */
}

/*
    Fix Limit of Spaces / Clients on touch

    The max heights defined for the parallax sections don't apply on
    non-touch devices so I'm defining them here.
*/

/* Limit to 3 */
@media only screen and (min-width : 320px) and (max-width : 480px) {
    html.touch section div.col:nth-child(4) ~ div.col { display: none; }
    html.touch section.popup-our-places,
    html.touch section.popup-our-clients {
        height: auto !important;
        max-height: auto !important;
    }
}

@media only screen and (min-width : 480px) and (max-width : 768px) {
    /*html.touch section div.col:nth-child(10) ~ div.col { display: none; } */
}

@media only screen and (min-width : 768px) and (max-width : 992px){
    /* html.touch section div.col:nth-child(13) ~ div.col { display: none; } */
}

@media only screen and (min-width : 992px) {
    /* html.touch section div.col:nth-child(10) ~ div.col { display: none; } */
}

@media only screen and (min-width : 1200px) {
    /* html.touch section div.col:nth-child(13) ~ div.col { display: none; } */
}




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

10. Retina
------------------------------------------------------------------------------------------- */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

    header .navbar-popup .navbar-header h1.navbar-brand { background-image: url('../img/ui/logo_100x32@2x.png?s=a2'); background-size: 100px; }

    header.nyc #hero h2 {
        background-image: url('../img/content/wapu_large_logo_white@2x.png?s=a2');
    }
    
    header #hero h2 {
        background-image: url('../img/content/wapu_large_logo@2x.png?s=a2');
        background-size: contain;
    }

}




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

11. Bootstrap
------------------------------------------------------------------------------------------- */

.resetRowGutter {
    margin-right: 0px;
    margin-left: 0px;
}


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

12. BigVideo Styles
------------------------------------------------------------------------------------------- */

#big-video-wrap {
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in-out;
       -moz-transition: opacity 300ms ease-in-out;
        -ms-transition: opacity 300ms ease-in-out;
         -o-transition: opacity 300ms ease-in-out;
            transition: opacity 300ms ease-in-out;
}
#big-video-wrap.visible { opacity: 1; }
#big-video-wrap:before { content: ""; width: 100%; height: 100%; background: #FFF; position: absolute; top: 0; left: 0; z-index: 100; opacity: 0.8; }

#big-video-wrap { z-index: -1; overflow: hidden; position: fixed; height: 780px; width: 100%; top: 0; left: 0; }
#big-video-vid,
#big-video-image { position: absolute;  }
#big-video-control-container { position: fixed; bottom: 0; padding: 10px; width: 100%; background: rgba(0,0,0,.25); }
#big-video-control { width: 100%; height: 16px; position:r elative;}
#big-video-control-middle { margin: 0 56px 0 24px; }
#big-video-control-bar { width: 100%; height: 16px; position: relative; cursor: pointer; }
#big-video-control-progress {position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track {position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}



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

13. Scroll to next Section Arrows
------------------------------------------------------------------------------------------- */

@-webkit-keyframes fadeInSlide {
  0%   { opacity: 0; top: -50px; }
  100% { opacity: 1; top: -24px; }
}

@keyframes fadeInSlide {
  0%   { opacity: 0; top: -50px; }
  100% { opacity: 1; top: -24px; }
}

.next-arrow {
    position: absolute;
    text-align: center;
    display: block;
    left: 47%;
    width: 50px;
    height: 50px;
    font-size: 23px;
    background: #FFF;
    padding: 8px;
    color: #C5C5C5;
    border: 7px solid #F2F2F2;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

/*
    Disable animation on ipads, etc,
    Chrome on iPad has issues....
*/

html:not(.touch) .next-arrow:first-of-type {
    opacity: 0;
    -webkit-animation: fadeInSlide 0.8s ease-in-out .4s;
            animation: fadeInSlide 0.8s ease-in-out .4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.next-arrow.next-arrow-top { top: -24px; }
.next-arrow.next-arrow-bottom { bottom: -24px; }

.next-arrow:hover { padding-top: 10px; }

.next-arrow:hover,
.next-arrow:active,
.next-arrow:visited,
.next-arrow:link {
    background: #f2fcfc;
    color: #C5C5C5;
    text-decoration: none;;
}

/*
    Scrollto-Anchor Offset so that the viewport gets scrolled into a sensible place
*/
a.anchor { position: absolute; top: -80px; }