/*!
Theme Name: liquidify
Theme URI: http://underscores.me/
Author: Jeremy Tani
Author URI: http://liquidadvertising.com/
Description: Liquid Advertising Website
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: liquidify
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

liquidify is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
     ========================================================================== */



.hide,
.disabled {
    display: none;
}

/* ==============================
RESPONSIVE
============================== */

.tablet {
    display: none;
}

/* ============================== 
WORDPRESS OVERRIDES
============================== */
.entry-header{
    display:none;
}

.site-content .desc{
    padding-right:0;
}

/* ==============================
ANIMATIONS
============================== */

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: perspective(400px) translateY(0%);
    }
    1% {
        opacity: 0;
        transform: perspective(400px) translateY(40px);
    }
    100% {
        opacity: 1 !important;
        transform: perspective(400px) translateY(0%);
        animation-timing-function: ease-out;
    }
}


/* ==============================
COLORS
============================== */

.gray {
    color: #7c7c7c;

}

.bluegray {
    color: #7c7c7c;
}

.dark-gray {
    color: #6f6f6f;
}

.blue {
    color: #006df0;
}

.black {
    color: #000;
}

.white {
    color: #fff;
}

/* ==============================
BACKGROUNDS
============================== */

.bg-white {
    background: #fff !important;
}

.bg-gray {
    background: #f9f9f9 !important;
}

/* ==============================
FONTS
============================== */

.hero-description-font {
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.header-font {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    letter-spacing: 0em;
    font-size: 4.5em;
}

.subheader-font {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    letter-spacing: 0em;
    font-size: 16px;
}

.sans-font {
    font-family: Montserrat, sans-serif;
}

.light {
    font-weight: 100;
}

.semi-light {
    font-weight: 300;
}

.bold {
    font-weight: 600;
}

.boldExtra {
    font-weight: 700;
}

/* ==============================
ALIGNMENT
============================== */

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

/* ==============================
BODY
============================== */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    font-family: "proxima-nova", "Open Sans", Arial, sans-serif;
    overflow: hidden;
}

ul {
    padding: 0;
}

li {
    list-style: none;
    text-align: left;
}

h1 {
    font-size: 5.5em;
    font-weight: 700;
    line-height: 0.9em;
    text-align: left;
}

h2 {
    font-size: 1.3em;
    font-weight: 600;
}

h3 {
    font-size: 30px;
    font-weight: 300;
}

.site-content .body-section h3 {
    font-size: 3.5em;
}

h4 {
    font-weight: 300;
}

p {
    font-size: 17px;
    line-height: 1.71em;
    margin: 0;
}

/* ============================== 
BOOTSTRAP GENERAL OVERRIDES
============================== */
.container {
    width: 100%;
}

.container-fluid {
    max-width: 1440px;
    width: 88vw;
}

.row{
    margin-left:0;
    margin-right:0;
}

.unbreakable {
    white-space: nowrap;
}

.container-fluid.fix .content .row {
    margin-left: 0px;
}

/* ==============================
PRELOADER
============================== */

.preloader {
    background: #fff;
    height: 100vh;
    opacity: 1;
    position: fixed;
    top: 0;
    transform: translateY(0%);
    transition: 500ms transform;
    width: 100vw;
    z-index: 1000;
}

.preloader.preloader-out {
    transform: translateY(calc( -100% - 10vw)) !important;
}

.preloader-wave {
    position: absolute;
    bottom: 0;
    transform: translateY(calc( 100% - 1px)) rotate(180deg);
    width: 100%;
}

.preloader-wave path {
    fill: #fff;
}

/* ==============================
LOAD OUT
============================== */

.loadOut {
    background: #fff;
    height: 100vh;
    position: fixed;
    top: 0;
    transform: translateY(175%);
    transition: 200ms transform;
    width: 100vw;
    z-index: 1000;
}

.loadOut.leave {
    transform: translateY(0%);
}

.loadOut-wave {
    transform: translateY(-100%);
    width: 100%;
}

/* ============================== 
GENERAL ELEMENTS
============================== */
.site-content .body-section{
    opacity:0;
    overflow:hidden;
    padding: 3em 0;
    text-align:left;
    transform: perspective(1000px) rotateX(5deg) translateY(5%);
    transform-origin:50% 100%;
}

.site-content .body-section.enter{
    opacity:1;
    transform: perspective(1000px) rotateX(0deg) translateY(0%);

    -webkit-transition: 300ms opacity, 1000ms transform cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition: 300ms opacity, 1000ms transform cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition: 300ms opacity, 1000ms transform cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition: 300ms opacity, 1000ms transform cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

/* ==============================
SITE CONTENT
============================== */

body.active .site-content {
    opacity: 1;
    text-align: center;
}

.site-content {
    opacity: 0;
}


/* ============================== 
HERO BLOCK
============================== */
.site-content .body-section.hero-block{
    display:flex;
    height:auto;
    margin-top:80px;
    min-height:75vh;
    padding:0;
    position:relative;
    width:100%;
}

.site-content .body-section.hero-block .background {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.site-content .hero-block .mobile-background {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.site-content .hero .darken {
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.site-content .hero-block video {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.site-content .body-section.hero-block .container-fluid{
    align-self: center;
}

.site-content .body-section.hero-block .container-fluid{
    overflow:hidden;
}

.mobile .site-content .hero-block .mobile-background.zoom, 
.site-content .hero-block .background.zoom {
    transform: scale(1.2);
    transition: 30000ms transform;
}

.site-content .body-section.hero-block .header-font{
    opacity:1;
    transform:translateY(110%);
    padding-bottom: 0.5em;
}

.site-content .body-section.hero-block.enter .header-font{
    opacity:1;
    transform:translateY(0);

    -webkit-transition: 2500ms opacity 400ms, 2500ms transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition: 2500ms opacity 400ms, 2500ms transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition: 2500ms opacity 400ms, 2500ms transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition: 2500ms opacity 400ms,  2500ms transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

/* ============================== 
PROJECT INFO
============================== */
.site-content .body-section.overview p{
    margin-bottom: 1.4em;
}

.site-content .body-section.overview .col-6,
.site-content .body-section.overview .desc{
    padding:0;
}

.site-content .body-section .text-container{
    overflow:hidden;
}

.site-content .body-section .cs_title{
    transform:translateY(105%) translateX(10px);
    transform-origin:0 0;
}

.site-content .body-section.enter .cs_title{
    transform:translateY(0) translateX(0px);

    -webkit-transition: 1000ms transform 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    -moz-transition: 1000ms transform 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    -o-transition: 1000ms transform 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    transition: 1000ms transform 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

}

.site-content .body-section.overview .summary-text{
    opacity:0;
    transform:translateY(100%);
}

.site-content .body-section.overview.enter .summary-text{
    opacity:1;
    transform:translateY(0);

    -webkit-transition: 1200ms opacity 900ms, 1200ms transform 900ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition: 1200ms opacity 900ms, 1200ms transform 900ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition: 1200ms opacity 900ms, 1200ms transform 900ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition: 1200ms opacity 900ms, 1200ms transform 900ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

/* ============================== 
CASE STUDY VIDEO WRAPPER
============================== */
.site-content .body-section.cs_video_wrapper .client{
    padding:0;
}

/* ==============================
FULL WIDTH VIDEO
============================== */

.site-content .body-section.videoplayer{
    display: inline-block;
    overflow:visible;
    padding:0;
    position: relative;
}

.site-content .body-section.videoplayer .videobox {
    padding:0;
}

#content-videoplayer {
    background:#fff;
    margin:0;
    padding:0;
    width:100%;
    /* -webkit-box-shadow: 0px 23px 57px -2px rgba(10,10,10,0.52);
     -moz-box-shadow: 0px 23px 57px -2px rgba(10,10,10,0.52);
     box-shadow: 0px 23px 57px -2px rgba(10,10,10,0.52); */
}

.video-play-btn {
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-play-btn img {
    left: 50%;
    max-width:100px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 16%;
}

/* ============================== 
RIPPLES
============================== */
.site-content section.body-section.ripples .ripple {
    height: 100%;
    left: 0%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}


/* ============================== 
PREVIEW BLOCK
============================== */
.site-content .body-section.preview_block {
    padding-bottom: 15px;
    padding-top: 0px;
    margin-top: 0;
}

.site-content .body-section.preview_block .preview {
    height:32vw;
    margin-top: 20px;
    overflow:hidden;
    padding-bottom: 0px;
    /*padding-top: 32vw;*/
    position: relative;
        
}

.site-content .body-section.preview_block .preview .bg{
    height:100%;
    left:0;
    position: absolute;
    top:0;
    transform:scale(1);
    transition:500ms transform;
    width:100%;
}

.site-content .body-section.preview_block .preview .bg.sw{
    display:none;
}

.site-content .body-section.preview_block .preview a:after{
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 75%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 75%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    content:"";
    height:100%;
    left:0;
    opacity:0.6;
    pointer-events:none;
    position: absolute;
    top:0;
    transition:500ms opacity;
    width:100%;
}

.no-touchevents .site-content .body-section.preview_block .preview:hover a:after{
    opacity:1;
}

.no-touchevents .site-content .body-section.preview_block .preview:hover .bg{
    transform:scale(1.1);
}

.site-content .body-section.preview_block .preview.left{
    text-align: left;
}

.site-content .body-section.preview_block .preview.right{
    text-align: right;
}

.site-content .body-section.preview_block a {
    color: #fff;
}

.site-content .body-section.preview_block .preview .details {
    position: absolute;
    bottom: 9%;
    width: calc(100% - 30px);
    z-index:1;
}

.site-content .body-section.preview_block .preview.left .details {
    padding-left: 0px;
}

.site-content .body-section.preview_block .preview.right .details {
    padding-right: 0px;
}

.site-content .body-section.preview_block .preview .details h3 {
    font-size: 29px;
    margin-bottom: 4px;
}

/* ============================== 
JOB POSTING
============================== */
.post-template-job-posting{
    background:#e8e8e8;
    opacity:1;
}

#job-posting{
    margin:90px auto 0;
    min-height:calc(100vh - 300px);
    padding:8em 0;
}

#job-posting .content p{
    color:#8b8989;
    margin:1em auto;
    -webkit-font-smoothing: antialiased;
}

#job-posting .content h3{
    display:block;
    font-size:2em;
    font-weight:600;
    position: relative;
}

#job-posting .content .location{
    padding:0;
}

#job-posting .content .positions{
    padding:4em 0;
}

#job-posting .content .location h3:before{
    bottom:-30px;
    content: '';
    background: #464646;
    height:1px;
    opacity:1;
    position: absolute;
    width:100%;
}

#job-posting ul{
    color:#8b8989;
    font-size:16px;
    margin:1em auto;
    -webkit-font-smoothing: antialiased;
}

#job-posting ul li{
    list-style:disc;
    margin-left:2em;
}

#job-posting .content{
    color:#292b2c;
    margin:0 auto;
    max-width:1440px;
    padding:0px 15px;
    width:88vw;
}

#job-posting .content .prompt,
#job-posting .content .body-content,
#job-posting .content .prompt a{
    display:block;
    max-width:800px;
    position: relative;
    width:100%;
}

#job-posting .content .prompt{
    margin-top:2em;
    text-transform:uppercase;
}

#job-posting .content .prompt a{
    color:#2953da;
    display:inline-block;
    font-size:1em;
    font-weight:600;
    letter-spacing:0.2em;
    text-decoration: none;
    width:auto;
}









.no-touchevents #job-posting .content .prompt a:hover{
    color:#000;
}

#job-posting .content .prompt a span:before{
    background:#2953da;
    bottom:0;
    content:'';
    height:1px;
    left:0;
    max-width:0px;
    position: absolute;
    transition:250ms max-width;
    vertical-align: middle;
    width:100%;
}

.no-touchevents #job-posting .content .prompt a:hover span:before{
    max-width:100px;
}

#job-posting .content .prompt a span{
    display: inline-block;
    vertical-align: middle;
}



@media (min-width: 576px) {
    /* ============================== 
    HERO BLOCK
    ============================== */
    .site-content .hero.hero-block h1.project{
        font-size:5.7em;
    }

    /* ============================== 
    JOB POSTING
    ============================== */
    #job-posting .content .prompt a:before{
        display:inline-block;
    }

    .no-touchevents #job-posting .content .prompt a:hover{
        color:#2953da;
    }

}

@media (min-width: 577px) {
    .site-content .body-section h3{
        font-size: 4.5rem;
    }
}



@media (min-width:768px){
    /* ============================== 
    WAVE
    ============================== */
    .container-fullwidth.mid .wave-canvas{
        display:block;
    }

    header .container-fullwidth.mid{
        background:none;
    }


    /* ============================== 
    PREVIEW BLOCK
    ============================== */
    .site-content .body-section.preview_block{
        height:21vw;
        max-height:260px;
    }

    .site-content .body-section.preview_block .container{
        height:100%;
    }

    .site-content .body-section.preview_block .preview{
        height:calc(100% - 20px);
        max-width:calc(50% - 7.5px);
    }

    .site-content .body-section.preview_block .preview:nth-child(2){
        margin-left:15px;
    }

    .site-content .body-section.preview_block .preview .details h3{
        font-size: 3em;
        margin-bottom: 4px;
    }
}

@media (min-width: 769px) {
    .row{
        display:flex;
        flex-wrap:wrap;
        margin-left:0;
        margin-right:0;
    }

    .site-content .desc{
        padding-right:40px;
    }

    /* ============================== 
    HERO BLOCK
    ============================== */
    .site-content .body-section.hero-block{
        margin-top:0;
    }

    .site-content .hero.hero-block h1.project{
        font-size:8.7em;
    }
}



@media (min-width: 930px) {
    .site-content.display.in .hero .hero-carousel h1, 
    .site-content.display.in .hero.hero-block h1{
        max-width:900px;
        width:100%;
    }
}

@media (min-width:992px){

    /* ============================== 
    CAREERS
    ============================== */
    #job-posting .content .positions{
        padding:0;
    }

    #job-posting .content .location h3:before{
        opacity:0;
    }
}

@media (min-width:1441px){


    /* ============================== 
    PREVIEW BLOCK
    ============================== */

    .site-content .body-section.preview_block .preview .bg.default{
        display:none;
    }


    .site-content .body-section.preview_block .preview .bg.sw{
        display:block;
    }

}