/*

    1.0 SETTINGS
        1.1 CLASSES
        1.2 FORMS
        1.3 SLIDER
    2.0 HEADER
        2.1 HEADER SECTION ACTIVE
        2.2 JOIN OVERLAY
        2.3 LIGHTBOX
        2.4 PAGE LOADER
    3.0 COVER
        3.1 COVER ANIMATIONS
    4.0 VIDEO
        4.1 VIDEO ANIAMTIONS
    5.0 PRESENCE
        5.1 PRESENCE ANIMATIONS
    6.0 AGENTS
        6.1 AGENTS ANIMATIONS
    7.0 MARKETING
        7.1 SIGN VIDEO
        7.2 MARKETING ANIMATIONS
    8.0 TECHNOLOGY
        8.1 TECHNOLOGY ANIMATIONS
    9.0 SUPPORT
        9.1 SUPPORT ANIMATIONS
    10.0 PRINCIPLES
    11.0 JOIN
    12.0 FOOTER
    13.0 ANIMATIONS

*/

/*  1.0 SETTINGS  */

*,*:before,*:after{
    box-sizing:border-box
    }

@font-face{
    font-family:'Compass Serif';
    font-weight:normal;
    font-style:normal;
    src:url('../fonts/CompassSerif-Regular.eot');
    src:url('../fonts/CompassSerif-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CompassSerif-Regular.woff2') format('woff2'),
        url('../fonts/CompassSerif-Regular.woff') format('woff'),
        url('../fonts/CompassSerif-Regular.ttf') format('truetype');
}

@font-face{
    font-family:'Compass Sans';
    font-weight:normal;
    font-style:normal;
    src:url('../fonts/CompassSans-Regular.eot');
    src:url('../fonts/CompassSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CompassSans-Regular.woff2') format('woff2'),
        url('../fonts/CompassSans-Regular.woff') format('woff'),
        url('../fonts/CompassSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family:'Compass Sans';
    font-weight:bold;
    font-style:normal;
    src:url('../fonts/CompassSans-Medium.eot');
    src:url('../fonts/CompassSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CompassSans-Medium.woff2') format('woff2'),
        url('../fonts/CompassSans-Medium.woff') format('woff'),
        url('../fonts/CompassSans-Medium.ttf') format('truetype');
}

::-moz-selection{
    background:#f2f2f2
    }

::selection{
    background:#f2f2f2
    }

::-moz-selection{
    background:#f2f2f2
    }

html{
    height:100%;
    background:#fff
    }

body{
    position:relative;
    height:100%;
    margin:0;
    padding:.1px 0 0;
    font:14px/1em "Compass Sans",Helvetica,sans-serif;
    background:#fff;
    -webkit-font-smoothing:subpixel-antialiased
    }

img{
    display:block;
    max-width:100%;
    height:auto !important;
    margin:0
    }

hr{
    outline:none;
    border:none
    }

/*   1.1 CLASSES  */

.width{
        width:90%;
        max-width:1050px;
        margin:auto
        }

.w-s{
            max-width:500px
            }

.clear:after{
            content:"";
            display:block;
            height:0;
            clear:both
            }

.g-flex{
        display:flex;
        display:-webkit-flex;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap
        }

.g-center{
            align-items:center;
            -webkit-align-items:center
            }

.g-bottom{
            align-items:flex-end;
            -webkit-align-items:flex-end;
            }

.d-rtl{
        direction:rtl
        }

.d-rtl > *{
            direction:initial
            }

.object-fit,
    .object-contain{
        position:absolute;
        display:block;
        width:100%;
        height:100%;
        top:0;
        left:0;
        overflow:hidden
        }

.object-fit img{
            position:relative;
            width:100%;
            height:100% !important;
            max-width:none;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            -o-object-fit:cover;
               object-fit:cover;
            -webkit-backface-visibility:hidden
            }

.object-contain img{
            position:relative;
            width:100%;
            height:100% !important;
            max-width:none;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            -o-object-fit:contain;
               object-fit:contain
            }

h1,h2,h3,h4,h5,h6,.t-title{
        margin:-2.4px 0;
        font:24px/1.2em "Compass Serif",Times New Roman,serif
        }

.t-heading{
            font:75px/1.25em "Compass Serif",Times new Roman,serif
            }

.t-large{
            margin:-5.5px 0;
            font:44px/1.25em "Compass Serif",Times new Roman,serif
            }

.t-large-sans{
            margin:-5.5px 0;
            font:44px/1.25em "Compass Sans",Helvetica,sans-serif
            }

.t-p{
            font:400 16px/1.4em "Compass Sans",Helvetica,sans-serif
            }

.t-pl{
            font:400 18px/1.4em "Compass Sans",Helvetica,sans-serif
            }

p,ol,ul{
            margin:27px 0;
            font:16px/1.375em "Compass Sans",Helvetica,sans-serif
            }

p:empty{
            display:none
            }

ol,ul{
            padding:0 0 0 17px
            }

a{
            position:relative;
            word-wrap:break-word;
            text-decoration:none;
            border:none;
            outline:none;
            cursor:pointer;
            color:inherit;
            transition:.2s
            }

a:hover,
        a:visited{
            color:auto
            }

p a,
        ol a,
        ul a{
            text-decoration:none;
            color:inherit
            }

p a:hover,
        ol a:hover,
        ul a:hover{
            opacity:.7
            }

.cr-black{color:#000}

.cr-white{color:#fff}

.bg-black{background:#000}

.bg-white{background:#fff}

.arrow{
        position:relative;
        display:inline-block;
        width:30px;
        height:2px;
        vertical-align:6px;
        background-color:#000;
        transition:background-color .2s ease-out;
        z-index:1
        }

.arrow:before,
        .arrow:after{
            content:"";
            position:absolute;
            width:6.5px;
            height:2px;
            left:26px;
            background-color:#000;
            transform-origin:center;
            transition:background-color .2s ease-out
            }

.arrow:after{
            bottom:-2px;
            transform:rotate(-45deg)
            }

.arrow:before{
            top:-2px;
            transform:rotate(45deg)
            }

.button{
        display:inline-block;
        position:relative;
        height:70px;
        padding:0 40px;
        font:20px/70px "Compass Sans",Helvetica,sans-serif;
        background:#fff;
        transition:.2s;
        cursor:pointer
        }

.button .arrow{
            margin-left:15px
            }

.button .text{
            position:relative;
            display:inline-block;
            z-index:1
            }

.button_hover:hover .arrow,
        .button_hover:hover .arrow:before,
        .button_hover:hover .arrow:after{
            background-color:#fff
            }

.hover{
            position:absolute;
            width:100%;
            height:0;
            top:0;
            left:0;
            background:#000;
            transition:.2s
            }

.button.hover_in .hover{
                height:100%
                }

.button.hover_out .hover{
                top:auto;
                bottom:0
                }

.button_hover_ltr .hover{
                width:0;
                height:100%
                }

.button_hover_ltr.hover_in .hover{
                width:100%
                }

.button_hover_ltr.hover_out .hover{
                right:0;
                left:auto
                }

.button.bg-black{
            color:#fff;
            background:#000
            }

.button.bg-black .arrow,
            .button.bg-black .arrow:before,
            .button.bg-black .arrow:after{
                background-color:#fff
                }

.button.bg-black .hover{
                background:#fff
                }

.button.bg-black.button_hover:hover{
                color:#000
                }

.button.bg-black.button_hover:hover .arrow,
            .button.bg-black.button_hover:hover .arrow:before,
            .button.bg-black.button_hover:hover .arrow:after{
                background-color:#000 !important
                }

/*  1.1 CLASSES - END  */

/*  1.2 FORMS  */

input,textarea,select,button{
        padding:0;
        background:transparent;
        border:0;
        border-radius:0;
        outline:none;
        -webkit-appearance:none;
        -moz-appearance:none
        }

input,
    select{
        display:block;
        width:100%;
        height:60px;
        margin:0 0 15px;
        padding:0 20px;
        font:16px/60px "Compass Sans",Helvetica,sans-serif;
        background:#fff;
        border-radius:1px;
        transition:.3s
        }

input:last-of-type{
            margin:0
            }

input::-webkit-input-placeholder{
            color:#ccc
            }

input::-moz-placeholder{
            color:#ccc
            }

input:-ms-input-placeholder{
            color:#ccc
            }

input:-moz-placeholder{
            color:#ccc
            }

select{
        background:#fff url(../img/icon-dropdown.svg) calc(100% - 18px) 25px no-repeat;
        background-size:18px;
        cursor:pointer;
        }

@-webkit-keyframes shake{
        10%,90%{
            transform:translate3d(-1px,0,0)
        }
        20%,80%{
            transform:translate3d(2px,0,0)
        }
        30%,50%,70%{
            transform:translate3d(-4px,0,0)
        }
        40%,60%{
            transform:translate3d(4px,0,0)
        }
    }

@keyframes shake{
        10%,90%{
            transform:translate3d(-1px,0,0)
        }
        20%,80%{
            transform:translate3d(2px,0,0)
        }
        30%,50%,70%{
            transform:translate3d(-4px,0,0)
        }
        40%,60%{
            transform:translate3d(4px,0,0)
        }
    }

input.input_error{
        box-shadow:inset 0 0 0 2px #f77 !important;
        -webkit-animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
                animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        }

/*  1.2 FORMS - END  */

/*  1.3 SLIDER  */

.slick-slider{
        display:block;
        position:relative;
        overflow:hidden;
        margin:0 !important;
        padding:0 !important;
        -webkit-user-select:text;
        -moz-user-select:text;
        -ms-user-select:text;
        user-select: text;
        -webkit-touch-callout:none;
        -khtml-user-select:none;
        touch-action:pan-y;
        -webkit-tap-highlight-color:transparent
        }

.slick-list.draggable{
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none
        }

.slick-slider .slick-list{
        display:block;
        position:relative;
        overflow:hidden;
        margin:0;
        padding:0
        }

.slick-slider .slick-list:focus{
        outline:none
        }

.slick-slider .slick-list.dragging{
        cursor:pointer;
        cursor:hand
        }

.slick-slider .slick-list,
    .slick-slider .slick-list .slick-track{
        transform:translate3d(0,0,0);
        }

.slick-slider .slick-list .slick-track{
        position:relative;
        display:block;
        top:0;
        left:0
        }

.slick-slider .slick-list .slick-track:after{
        clear:both
        }

.slick-slide{
        float:left;
        height:100%;
        min-height:1px;
        list-style:none
        }

.slick-slide img{
        display:block;
        width:100%;
        vertical-align:bottom
        }

.slick-slide.slick-loading img{
        display:none
        }

.slick-slide.dragging img{
        pointer-events:none
        }

.slick-vertical .slick-slide{
        display:block;
        height:auto;
        border:1px solid transparent
        }

/*  LOADING  */

.slider{
        position:relative;
        margin:0;
        padding:0;
        list-style:none;
        opacity:0
        }

.slider ul{
        margin:0;
        padding:0
        }

.slider ul li{
        display:none
        }

.slider ul li:first-of-type{
        display:block
        }

.slider.loaded{
        -webkit-animation:fadein .4s both;
        animation:fadein .4s both
        }

.slider.loaded ul li{
        display:block
        }

@-webkit-keyframes fadein{
        0%{
            opacity:0
        }
        100%{
            opacity:1
        }
    }

@keyframes fadein{
        0%{
            opacity:0
        }
        100%{
            opacity:1
        }
    }

/*  ARROWS  */

.slider-controls{
        width:100%;
        margin:30px 0 0;
        font-size:0
        }

.slider-controls > *:not(.slider-controls_next){
            position:relative;
            display:inline-block;
            width:40px;
            height:40px;
            background:transparent;
            border:2px solid #ccc;
            cursor:pointer;
            transition:.3s;
            outline:none
            }

.slider-controls > * .arrow{
            transition:.3s;
            z-index:1
            }

.slider-controls > * .arrow,
        .slider-controls > * .arrow:before,
        .slider-controls > * .arrow:after{
            background-color:#000
            }

.slider-controls > *:hover .arrow,
        .slider-controls > *:hover .arrow:before,
        .slider-controls > *:hover .arrow:after{
            background-color:#000
            }

.slider-controls > * .hover{
            position:absolute;
            width:0;
            height:100%;
            top:0;
            background:#f2f2f2;
            transition:.2s
            }

.slider-controls.controls_black > * .hover{
            background:#fff
            }

.slider-controls.controls_white > * .arrow,
        .slider-controls.controls_white > * .arrow:before,
        .slider-controls.controls_white > * .arrow:after{
            background-color:#ccc
            }

.slider-controls.controls_white > *:hover .arrow,
        .slider-controls.controls_white > *:hover .arrow:before,
        .slider-controls.controls_white > *:hover .arrow:after{
            background-color:#000
            }

.slider-controls.controls_white > * .hover{
            background:#fff
            }

.slider-progress.controls_white{
                background:#5e5e5e
                }

.slider-progress.controls_white .progress_active{
                background:#fff
                }

.slider-controls > *.hover_in .hover{
            width:100%
            }

.slider-controls .slider_prev .hover,
        .slider-controls .slider_next.hover_out .hover{
            left:auto;
            right:0
            }

.slider-controls .slider_next .hover,
        .slider-controls .slider_prev.hover_out .hover{
            left:0;
            right:auto
            }

.slider-controls > *:hover{
            }

.slider-controls > * .arrow{
            position:absolute;
            top:50%;
            left:50%;
            right:auto;
            transform:translate(-50%,-50%);
            transition:.3s
            }

.slider-controls .slider_prev .arrow{
            transform:translate(-50%,-50%) rotate(180deg)
            }

.slider-controls .slider_prev .arrow{
            width:15px
            }

.slider-controls .slider_prev .arrow:before,
        .slider-controls .slider_prev .arrow:after{
            left:10px
            }

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

                .slider-controls .slider_prev:hover .arrow{
                    transform:translate(-62%,-50%) rotate(180deg)
                    }

                .slider-controls .slider_next:hover .arrow{
                    transform:translate(-38%,-50%)
                    }

            }

.slider-controls .slider_next{
            width:65px;
            margin-left:-2px
            }

.slider-controls .slider-controls_next{
            display:inline-block;
            vertical-align:top;
            margin-left:40px;
            font:16px/37px 'Compass Sans',sans-serif;
            cursor:pointer;
            transition:.3s
            }

.slider-controls .slider-controls_next:hover{
            opacity:.7
            }

.slider-progress{
        position:relative;
        width:100%;
        height:2px;
        margin:48px 0 0;
        font-size:0;
        background:#cccccc;
        cursor:pointer
        }

.slider-progress button{
            flex:1;
            height:10px;
            transform:translateY(-50%);
            margin:0;
            padding:0;
            border:none;
            cursor:pointer;
            opacity:0
            }

.slider-progress .progress_active{
            position:absolute;
            top:0;
            left:0;
            height:2px;
            transition:ease-in .6s;
            background:#000
            }

.slider-controls,
    .slider-progress{
        opacity:0
        }

.loaded .slider-controls,
        .loaded .slider-progress{
            -webkit-animation:fadein .6s both;
            animation:fadein .6s both
            }

/*  1.3 SLIDER - END  */

/*  1.0 SETTINGS - END  */

/*  2.0 HEADER  */

#header{
    position:fixed;
    width:100%;
    top:0;
    visibility:hidden;
    transform:translateY(-120px);
    font-size:0;
    background:#fff;
    border-bottom:2px solid rgba(0,0,0,.1);
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    transition:.3s;
    z-index:100
    }

#header-steps{
        position:relative;
        display:inline-block;
        width:calc(100% - 245px);
        vertical-align:middle
        }

#header-steps .step{
        position:relative;
        display:inline-block;
        width:12.5%;
        cursor:pointer;
        transition:.2s
        }

#header-steps .step:before{
        content:"1";
        display:block;
        width:20px;
        height:20px;
        margin:0 auto;
        font-weight:700;
        font-size:12px;
        line-height:20px;
        text-align:center;
        border-radius:100%;
        color:#ccc;
        box-shadow:0 0 0 2px #ccc;
        transition:.2s
        }

#header-steps .step:nth-of-type(2):before{content:"2"}

#header-steps .step:nth-of-type(3):before{content:"3"}

#header-steps .step:nth-of-type(4):before{content:"4"}

#header-steps .step:nth-of-type(5):before{content:"5"}

#header-steps .step:nth-of-type(6):before{content:"6"}

#header-steps .step:nth-of-type(7):before{content:"7"}

#header-steps .step:nth-of-type(8):before{content:"8"}

#header-steps .step .step-title{
        position:absolute;
        width:100%;
        bottom:0;
        transform:translateY(22px);
        text-align:center;
        font-weight:700;
        font-size:12px;
        opacity:0;
        transition:.2s
        }

#header-steps .step:hover .step-title{
            transform:translateY(15px);
            opacity:1
            }

#header-steps .step:hover::before{
            transform:translateY(-6px);
            color:#000;
            box-shadow:0 0 0 2px #000
            }

#header-steps #step_active{
        position:absolute;
        width:12.5%;
        height:2px;
        bottom:-26px;
        background:#000;
        transition:.3s
        }

#header-button{
    display:inline-block;
    width:245px;
    vertical-align:middle
    }

#header-button .hover{
        background:#eee
        }

/*  2.1 HEADER SECTION ACTIVE  */

html.loaded.scrolled_video:not(.scroll_cover) #header{
        visibility:visible;
        transition:.6s .3s;
        transform:translateY(0)
        }

@-webkit-keyframes stepSlideDown{
            0%{
                transform:translateX(-60px)
            }
            100%{
                transform:translateY(0)
            }
        }

@keyframes stepSlideDown{
            0%{
                transform:translateY(-60px)
            }
            100%{
                transform:translateY(0)
            }
        }

html:not(.scroll_cover) #header .step{
            opacity:1;
            -webkit-animation:stepSlideDown .3s both;
            animation:stepSlideDown .3s both
            }

html:not(.scroll_cover) #header .step:nth-of-type(1){-webkit-animation-delay:.3s;animation-delay:.3s}

html:not(.scroll_cover) #header .step:nth-of-type(2){-webkit-animation-delay:.37s;animation-delay:.37s}

html:not(.scroll_cover) #header .step:nth-of-type(3){-webkit-animation-delay:.44s;animation-delay:.44s}

html:not(.scroll_cover) #header .step:nth-of-type(4){-webkit-animation-delay:.51s;animation-delay:.51s}

html:not(.scroll_cover) #header .step:nth-of-type(5){-webkit-animation-delay:.58s;animation-delay:.58s}

html:not(.scroll_cover) #header .step:nth-of-type(6){-webkit-animation-delay:.65s;animation-delay:.65s}

html:not(.scroll_cover) #header .step:nth-of-type(7){-webkit-animation-delay:.72s;animation-delay:.72s}

html:not(.scroll_cover) #header .step:nth-of-type(8){-webkit-animation-delay:.8s;animation-delay:.8s}

html.scroll_video #header-steps .step:nth-of-type(1):before,
    html.scroll_presence #header-steps .step:nth-of-type(2):before,
    html.scroll_agents #header-steps .step:nth-of-type(3):before,
    html.scroll_marketing #header-steps .step:nth-of-type(4):before,
    html.scroll_technology #header-steps .step:nth-of-type(5):before,
    html.scroll_support #header-steps .step:nth-of-type(6):before,
    html.scroll_principles #header-steps .step:nth-of-type(7):before,
    html.scroll_join #header-steps .step:nth-of-type(8):before{
        transform:translateY(-6px);
        color:#000;
        box-shadow:0 0 0 2px #000
        }

html.scroll_video #header-steps .step:nth-of-type(1) .step-title,
    html.scroll_presence #header-steps .step:nth-of-type(2) .step-title,
    html.scroll_agents #header-steps .step:nth-of-type(3) .step-title,
    html.scroll_marketing #header-steps .step:nth-of-type(4) .step-title,
    html.scroll_technology #header-steps .step:nth-of-type(5) .step-title,
    html.scroll_support #header-steps .step:nth-of-type(6) .step-title,
    html.scroll_principles #header-steps .step:nth-of-type(7) .step-title,
    html.scroll_join #header-steps .step:nth-of-type(8) .step-title{
        transform:translateY(15px);
        opacity:1
        }

html.scroll_video #step_active{left:0}

html.scroll_presence #step_active{left:12.5%}

html.scroll_agents #step_active{left:25%}

html.scroll_marketing #step_active{left:37.5%}

html.scroll_technology #step_active{left:50%}

html.scroll_support #step_active{left:62.5%}

html.scroll_principles #step_active{left:75%}

html.scroll_join #step_active{left:87.5%}

/*  2.1 HEADER SECTION ACTIVE - END  */

/*  2.2 JOIN OVERLAY  */

.field-group{
        display:flex;
        display:-webkit-flex;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap
        }

.field-group .field{
            width:calc(50% - 15px);
            margin:0 30px 30px 0
            }

.field-group .field:nth-of-type(2n){
            margin:0 0 30px
            }

.field label,
        .field-group legend{
            display:block;
            width:100%;
            margin:0 0 12px;
            font-size:16px
            }

.field-group legend ~ .field label{
            display:none
            }

#join-overlay{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:0;
        pointer-events:none;
        transition:.6s;
        z-index:200
        }

#join-logo{
        position:relative;
        max-width:205px;
        margin:40px auto 60px;
        z-index:10
        }

#join-close{
            position:fixed;
            width:45px;
            top:30px;
            right:30px;
            cursor:pointer;
            transition:.3s
            }

#join-close:hover{
            transform:scale(1.1,1.1)
            }

#join-content{
        position:fixed;
        width:100%;
        max-width:1600px;
        top:55%;
        left:50%;
        transform:translate(-50%,-50%)
        }

#join-content h2{
            display:inline-block;
            width:50%;
            padding:0 75px
            }

#join-select{
            display:inline-block;
            width:50%
            }

#join-select hr{
            height:2px;
            margin:100px 0;
            background:#595959;
            -webkit-animation-delay:.9s !important;
            animation-delay:.9s !important
            }

#join-select .select{
            position:relative;
            }

#join-select .select:nth-of-type(2){
            -webkit-animation-delay:1.2s !important;
            animation-delay:1.2s !important
            }

#join-select .select a{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:200
            }

#join-select .select p{
            max-width:370px
            }

#join-select .select > *{
            opacity:.4;
            transition:.3s
            }

#join-select .select a:hover ~ *{
            opacity:1
            }

#join-select .select img{
            position:absolute;
            width:25px;
            top:50%;
            right:30px;
            transform:translateY(-50%)
            }

#join-input{
        position:relative;
        display:inline-block;
        width:50%;
        padding-right:5%
        }

#join-input p{
            margin:30px 0 9px
            }

#join-input .button{
            width:calc(50% - 15px);
            height:60px;
            margin:20px 0 0;
            padding:0 60px;
            font:16px/45px "Compass Sans",Helvetica,sans-serif;
            box-shadow:inset 0 0 0 2px #ccc;
            transition:.6s
            }

#join-form select{
            margin:15px 0 0
            }

#join-input #join-input-success{
        position:absolute;
        width:100%;
        max-width:500px;
        top:0;
        margin:50px 0 0;
        pointer-events:none;
        opacity:0;
        pointer-events:none;
        transition:.6s .9s
        }

#join-input.form_submit #join-input-form{
        opacity:0;
        transition:.9s
        }

#join-input.form_submit #join-input-success{
            opacity:1;
            pointer-events:auto
            }

#join-input-cta{
        margin:60px 0 0
        }

#join-input-cta a .arrow{
            margin-left:20px;
            vertical-align:3px
            }

#join-input-cta a .arrow,
        #join-input-cta a .arrow:before,
        #join-input-cta .arrow:after{
            background:#fff
            }

html.join_show #join-overlay{
        visibility:visible !important;
        opacity:1;
        pointer-events:auto;
        transition-delay:.3s
        }

html.join_show #join-select hr,
        html.join_show #join-select .select{
            -webkit-animation:fadeinUp .6s .6s both;
            animation:fadeinUp .6s .6s both
            }

html.join_show #header{
            transform:translateY(-120px) !important;
            transition-delay:0s !important
            }

/*  2.2 JOIN OVERLAY  */

/*  2.3 LIGHTBOX  */

#lightbox{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background:#000;
        opacity:0;
        pointer-events:none;
        transition:.6s;
        z-index:300
        }

#lightbox-slider{
        margin-top:80px;
        opacity:0
        }

#lightbox-slider.loaded{
            -webkit-animation:fadein .6s both;
            animation:fadein .6s both
            }

#lightbox-slider .slick-list .slick-track{
            margin-left:5%
            }

#lightbox-slider ul li{
            height:calc(100vh - 280px);
            margin-right:40px
            }

#lightbox-slider ul li img{
            width:auto !important;
            height:100% !important
            }

#lightbox-slider .slider-controls,
    #lightbox-slider .slider-progress{
        width:90%;
        margin-left:5%
        }

.icon_close{
        position:fixed;
        width:40px;
        height:40px;
        top:20px;
        right:30px;
        transform-origin:center;
        cursor:pointer;
        z-index:350
        }

.icon_close:before,
        .icon_close:after{
            content:"";
            position:absolute;
            display:block;
            width:50px;
            height:1px;
            top:50%;
            left:50%;
            background:#fff;
            transition:.6s;
            -webkit-backface-visibility:hidden
            }

.icon_close:before{
            transform:translate(-50%,-50%) rotate(45deg)
            }

.icon_close:after{
            transform:translate(-50%,-50%) rotate(-45deg)
            }

.icon_close:hover::before,
        .icon_close:hover::after{
            width:55px
            }

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

            [slide-lightbox] li img{
                cursor:pointer;
                transition:.6s
                }

            [slide-lightbox] li img:hover{
                opacity:.6
                }

        }

html.lightbox_show{
        overflow:hidden
        }

html.lightbox_show #lightbox{
            visibility:visible !important;
            opacity:1;
            pointer-events:auto
            }

html.lightbox_shaow #lightbox-slider ul{
            opacity:0
            }

/*  2.3 LIGHTBOX - END  */

/*  2.4 PAGE LOADER  */

@-webkit-keyframes pageLoader{
        0%{
            transform:translateY(0)
        }
        100%{
            display:none;
            transform:translateY(-100%)
        }
    }

@keyframes pageLoader{
        0%{
            transform:translateY(0)
        }
        100%{
            display:none;
            transform:translateY(-100%)
        }
    }

#page-loader{
        -webkit-animation:pageLoader .6s 2.4s ease-in both;
        animation:pageLoader .6s 2.4s ease-in both
        }

@-webkit-keyframes pageLoaderLogo{
        0%{
            transform:translate(-50%,200%);
            opacity:0
        }
        50%,75%{
            transform:translate(-50%,-50%);
            opacity:1
        }
        100%{
            transform:translate(-50%,-75%);
            opacity:0
        }
    }

@keyframes pageLoaderLogo{
        0%{
            transform:translate(-50%,200%);
            opacity:0
        }
        50%,75%{
            transform:translate(-50%,-50%);
            opacity:1
        }
        100%{
            transform:translate(-50%,-75%);
            opacity:0
        }
    }

#loader-logo{
        position:fixed;
        width:205px;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        opacity:0;
        -webkit-animation:pageLoaderLogo 3s both;
        animation:pageLoaderLogo 3s both;
        z-index:510
        }

#loader-logo svg path,
    #loader-logo svg rect{
        fill:#1a1a1a
        }

#loader-logo-needle{
            position:absolute;
            width:27px;
            height:27px;
            left:31px;
            transform-origin:center
            }

@-webkit-keyframes pageLoaderNeedle{
            0%{
                transform:translate(-50%,-50%) rotate(-45deg)
            }
            100%{
                transform:translate(-50%,-50%) rotate(315deg)
            }
        }

@keyframes pageLoaderNeedle{
            0%{
                transform:translate(-50%,-50%) rotate(-45deg)
            }
            100%{
                transform:translate(-50%,-50%) rotate(315deg)
            }
        }

#loader-logo-needle:before{
            content:"";
            position:absolute;
            display:block;
            width:13px;
            height:3.8px;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%) rotate(45deg);
            -webkit-animation:pageLoaderNeedle 2s ease-out both;
            animation:pageLoaderNeedle 2s ease-out both;
            -webkit-backface-visibility:hidden;
            background:#1a1a1a
            }

html.loaded #page-loader{
        display:none
        }

/*  2.4 PAGE LOADER - END  */

/*  2.0 HEADER - END  */

/*  3.0 COVER  */

#section-cover{
    position:relative;
    min-height:90vh;
    padding:.1px;
    background:#999
    }

#cover-logo{
    position:relative;
    max-width:205px;
    margin:40px auto 60px;
    opacity:0;
    z-index:10
    }

#cover-content{
    position:relative;
    text-align:center;
    z-index:10
    }

#cover-content #cover-heading{
        height:110px;
        margin:45px 0
        }

#cover-content #cover-heading h1{
        display:inline-block;
        margin:auto;
        opacity:0;
        transform-origin:center;
        -webkit-backface-visibility:hidden
        }

#cover-content .v-line{
        position:relative;
        display:block;
        width:1px;
        height:calc(45vh - 232px);
        margin:auto;
        }

#cover-content .v-line .line{
        position:absolute;
        width:100%;
        top:0;
        left:0;
        background:#fff
        }

#cover-content #cover-content-location{
        margin:60px 0;
        letter-spacing:.05em
        }

#cover-video{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
    background:#000
    }

#cover-video video{
        position:absolute;
        min-width:100%;
        min-height:100%;
        top:0;
        left:0;
        opacity:.75
        }

#cover-button{
    position:absolute;
    left:50%;
    bottom:-35px;
    transform:translateX(-50%);
    z-index:20
    }

#cover-button .button{
        float:right
        }

#cover-button .button:hover{
        box-shadow:2px 2px 8px 2px rgba(0,0,0,.1)
        }

#cover-button .button .hover{
        transition:.3s
        }

/*  3.1 COVER ANIMATION  */

html.scrolled_cover #cover-logo{
        -webkit-animation:fadein .9s both;
        animation:fadein .9s both
        }

#cover-content #cover-heading h1{
        transform:translate3d(0px,0px,0px) scale(1,1);
        opacity:0;
        transition: opacity 1.2s .6s,
                    transform 6s ease-out
        }

html.scrolled_cover #cover-content #cover-heading h1{
            opacity:1;
            transform:translate3d(0px,0px,0px) scale(1.2,1.2)
            }

#cover-content .v-line .line{
        height:0;
        transition:1.2s ease
        }

#cover-content .v-line-delay .line{
            transition-delay:.6s
            }

html.scrolled_cover #cover-content .v-line .line{
            height:100%
            }

#cover-content #cover-content-location{
        opacity:0;
        transition:1.2s 2s
        }

html.scrolled_cover #cover-content #cover-content-location{
            opacity:1 !important
            }

/*  3.1 COVER ANIMATION - END  */

/*  3.0 COVER - END  */

/*  4.0 VIDEOS  */

#section-video{
    margin:120px auto 75px
    }

#video-header{
    margin:0 auto 45px
    }

#video-header #header-title h2{
        max-width:750px
        }

#video-header #header-text p{
        float:right;
        max-width:420px;
        margin:auto
        }

#video-content{

    }

.video-main-thumbnail{
        position:relative;
        overflow:hidden
        }

.video-main-thumbnail.video_play .video-main-play,
        .video-main-thumbnail.video_play .object-fit{
            opacity:0 !important;
            pointer-events:none;
            transition:.6s .6s;
            }

.video-main-thumbnail .video-main-play{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            white-space:nowrap;
            font-size:18px;
            cursor:pointer;
            transition:.3s;
            z-index:10
            }

.video-main-thumbnail .video-main-play:hover{
            opacity:.6
            }

.video-main-thumbnail .video-main-play img{
            display:inline-block;
            height:21px !important;
            margin:0 18px 0 0;
            vertical-align:middle
            }

.video-main-thumbnail .object-fit{
            background:#000;
            cursor:pointer;
            z-index:5
            }

.video-main-thumbnail .object-fit img{
            opacity:.6
            }

.video-main-thumbnail iframe{
            width:100%
            }

.video-main-content{
        margin:35px 20px 45px
        }

.video-main-content p{
            margin:0
            }

.video-slide ul li{
            width:232.5px;
            margin-right:40px
            }

.video-slide ul li:last-of-type{
            margin-right:0
            }

.video-slide .video{
        cursor:pointer
        }

.video-slide .video .video-thumbnail{
            position:relative;
            margin:0 0 30px;
            background:#f2f2f2;
            opacity:.3;
            transition:.6s
            }

.video-slide .video:hover .video-thumbnail,
        .video-slide .video.active .video-thumbnail{
            opacity:1
            }

.video-slide .video .video-thumbnail:after{
            content:"";
            display:block;
            padding-top:70%
            }

.video-slide .video p{
            margin:15px 0 0;
            color:#cacaca
            }

.video-slide .slider-controls,
    .video-slide .slider-progress{
        margin-left:auto;
        margin-right:auto
        }

/*  4.1 VIDEO ANIAMTIONS  */

.video-main-thumbnail .hover{
        background:#f2f2f2;
        transition:.6s;
        z-index:20
        }

.video-main-thumbnail .hover.hover_in{
            height:105%
            }

.video-main-thumbnail .hover.hover_out{
            height:0;
            top:auto;
            bottom:0
            }

#section-video .video-main-thumbnail .object-fit,
    #section-video .video-main-thumbnail iframe{
        opacity:0
        }

html.scrolled_video #section-video .video-main-thumbnail .object-fit,
        html.scrolled_video #section-video .video-main-thumbnail iframe{
            opacity:1;
            transition-delay:.6s
            }

/*  4.1 VIDEO ANIMATIONS - END  */

/*  4.0 VIDEOS - END  */

/*  5.0 PRESENCE  */

#section-presence{
    padding:.1px;
    background:#f2f2f2
    }

#presence-header img{
    width:66px;
    margin:0 0 50px
    }

.metric{
        position:relative;
        width:calc(50% - 20px);
        margin:0 40px 40px 0
        }

.metric:nth-of-type(2n){
        margin:0 0 40px
        }

.metric .metric-heading{
        font-size:50px;
        line-height:1em
        }

.metric p{
        margin:10px 0 0
        }

#presence-map-selector{
    position:relative;
    width:280px;
    height:610px;
    overflow:hidden;
    margin:0 30px 100px 0;
    background:#fff;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    box-shadow: 0 0 0 1px #cacaca,
                2px 2px 8px 2px rgba(0,0,0,.1);
    border-radius:2px
    }

#presence-map-selector-scroll{
        height:100%;
        padding:0 20px 30px;
        overflow-y:scroll;
        overflow-x:hidden
        }

#presence-map-selector:after{
        content:"";
        position:absolute;
        width:100%;
        height:30px;
        bottom:0;
        left:0;
        background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
        pointer-events:none;
        z-index:10
        }

#presence-map-selector .selector{
        border-bottom:1px solid #f2f2f2
        }

#presence-map-selector .selector .selector-title{
        position:relative;
        padding:20px 0;
        font-size:16px;
        cursor:pointer;
        transition:.3s
        }

#presence-map-selector .selector:hover .selector-title{
            padding:20px 6px
            }

#presence-map-selector .selector .arrow{
        position:absolute;
        right:0;
        top:50%;
        transform:translateY(-50%);
        transition:.2s
        }

#presence-map-selector .selector .arrow.arrow_back{
        visibility:hidden;
        right:-60px;
        transform:translateY(-50%) rotate(180deg);
        transition:.2s
        }

#presence-map-selector .selector.active .selector-title{
            padding-left:0 !important
            }

#presence-map-selector .selector.active .arrow:not(.arrow_back){
            right:-60px
            }

#presence-map-selector .selector.active .arrow.arrow_back{
            visibility:visible;
            right:0;
            transition-delay:.2s
            }

#presence-map-selector .selector-content{
        /* turned off - Jason/SGM request */
        display:none !important;
        margin:0;
        padding:0;
        list-style:none
        }

#presence-map-selector .selector-content li{
        padding:5px 0;
        font-size:12px;
        color:#bbb;
        border-top:1px solid #f2f2f2
        }

#presence-map-container{
    position:relative;
    width:calc(100% - 310px)
    }

#presence-map-container .location{
        position:absolute;
        width:10px;
        height:10px;
        transform:translate(-50%,-50%);
        background:#000;
        border-radius:100%;
        box-shadow:0 0 0 3px rgba(0,0,0,.2);
        cursor:pointer;
        opacity:0;
        transition:.3s
        }

#presence-map-container .location:hover{
        width:15px;
        height:15px
        }

#presence-map-container .location.active{
        width:40px;
        height:40px;
        background:#fff;
        box-shadow:0 0 0 5px rgba(0,0,0,.2);
        transition-timing-function:cubic-bezier(.17,.67,.45,1.8);
        z-index:10
        }

.location[data-location="new york city"]{
        top:30%;
        left:92%
        }

.location[data-location="boston"]{
        top:19%;
        left:95%
        }

.location[data-location="washington dc"]{
        top:42%;
        left:90%
        }

.location[data-location="washington dc"]{
        top:42%;
        left:90%
        }

.location[data-location="miami"]{
        top:95%;
        left:87%
        }

.location[data-location="the hamptons"]{
        top:26%;
        left:94%
        }

.location[data-location="los angeles"]{
        top:61%;
        left:9%
        }

.location[data-location="santa barbara"]{
        top:60%;
        left:6%
        }

.location[data-location="aspen"]{
        top:47%;
        left:29%
        }

.location[data-location="san francisco"]{
        top:48%;
        left:2%
        }

.location[data-location="chicago"]{
        top:33%;
        left:65%
        }

.location[data-location="dallas"]{
        top:74%;
        left:49%
        }

.location[data-location="san diego"]{
        top:68%;
        left:10%
        }

.location[data-location="austin"]{
        top:80%;
        left:47%
        }

.location[data-location="nashville"]{
        top:60%;
        left:64%
        }

.location[data-location="philadelphia"]{
        top:33%;
        left:90%
        }

.location[data-location="seattle"]{
        top:4%;
        left:7%
        }

.location[data-location="atlanta"]{
        top:68%;
        left:72%
        }

.location[data-location="houston"]{
        top:89%;
        left:52%
        }

.location[data-location="northeast florida"]{
        top:78%;
        left:83%
        }

.location[data-location="westchester"]{
        top:25%;
        left:90%
        }

.location[data-location="denver"]{
        top:43%;
        left:34%
        }

.location[data-location="bakersfield"]{
        top:57%;
        left:7%
        }

.location[data-location="lake tahoe"]{
        top:40%;
        left:7%
        }

.location[data-location="telluride"]{
        top:52%;
        left:26%
        }

.location[data-location="orlando"]{
        top:84%;
        left:84%
        }

/*  5.1 PRESENCE ANIMATIONS  */

html.scrolled_presence #presence-map-container .location{
        -webkit-animation:fadein .6s both;
        animation:fadein .6s both
        }

/*  5.1 PRESENCE ANIMATIONS - END  */

/*  5.0 PRESENCE  */

/*  6.0 AGENTS  */

#section-agents{
    min-height:900px
    }

.section-header{
        margin:80px auto -40px
        }

.section-headerBottom{
        margin:80px auto;
        }

.section-header img{
        width:100px;
        margin:0 0 45px
        }

.header-left{
        display:inline-block;
        width:550px;
        margin-right:90px
        }

.header-left p{
        max-width:440px
        }

.header-right{
        width:calc(100% - 640px);
        margin-top:60px
        }

.header-right hr{
        margin:0 0 45px;
        width:40px;
        height:2px;
        background:#000
        }

#agents-content{
    margin:90px 0 0
    }

#agent-info{
        position:absolute;
        width:590px;
        margin-left:5%;
        z-index:10
        }

#agent-info ul{
        background:#f2f2f2
        }

#agent-info ul li{
        width:590px;
        padding:60px 60px 20px
        }

#agent-info span{
        display:block;
        font:16px/1.375em "Compass Sans",Helvetica,sans-serif
        }

#agent-info .agent-location{
        margin:0 0 40px
        }

#agent-info h3{
        margin:0 0 45px
        }

#agent-info h3 span{
            margin:10px 0 0
            }

#agent-info .info{
        width:calc(50% - 25px);
        margin:0 50px 40px 0
        }

#agent-info .info:nth-of-type(2n){
        margin:0 0 40px
        }

#agent-info .info:before{
        content:"";
        display:block;
        height:2px;
        width:25px;
        margin:0 0 20px;
        background:#000
        }

#agent-info .info p{
        margin:15px 0 0;
        font-size:24px
        }

#agent-info .slider-controls{
        padding-left:170px
        }

#agent-info .slider-controls .slider_prev .hover,
    #agent-info .slider-controls .slider_next .hover{
        background:#f2f2f2
        }

#agent-image{
    position:relative;
    float:right;
    width:calc(95% - 485px);
    overflow:hidden;
    margin:75px 0 0;
    pointer-events:none
    }

#agent-image .image{
        position:relative;
        height:600px;
        }

#agent-image .hover{
        position:absolute;
        width:150%;
        height:100%;
        top:0;
        background:#f2f2f2;
        transform:translateX(100%);
        z-index:1
        }

/*  6.1 AGENTS ANIMATIONS  */

#agent-info .slick-list{
        opacity:0
        }

html.scrolled_agents #agent-info .slick-list{
            opacity:1;
            transition:1.2s 1.2s
            }

#agent-image .hover_load{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background:#fff;
        z-index:2
        }

html.scrolled_agents #agent-image .hover_load{
            width:0;
            transition:.6s .6s
            }

#agent-info ul.slider_beforechange li > *{
        -webkit-animation:fadeoutUp .6s both;
        animation:fadeoutUp .6s both
        }

#agent-info ul.slider_afterchange li.slick-active > *{
        -webkit-animation:fadeinDown .6s both;
        animation:fadeinDown .6s both
        }

@-webkit-keyframes slideNext{
        0%{
            transform:translateX(100%)
        }
        100%{
            transform:translateX(-100%)
        }
    }

@keyframes slideNext{
        0%{
            transform:translateX(100%)
        }
        100%{
            transform:translateX(-100%)
        }
    }

#agent-image.slide_next .hover{
        right:0;
        -webkit-animation:slideNext 1s ease-in-out both;
        animation:slideNext 1s ease-in-out both
        }

@-webkit-keyframes slidePrev{
        0%{
            transform:translateX(-100%)
        }
        100%{
            transform:translateX(100%)
        }
    }

@keyframes slidePrev{
        0%{
            transform:translateX(-100%)
        }
        100%{
            transform:translateX(100%)
        }
    }

#agent-image.slide_prev .hover{
        right:0;
        -webkit-animation:slidePrev 1s ease-in-out both;
        animation:slidePrev 1s ease-in-out both
        }

/*  6.1 AGENTS ANIMATIONS - END  */

/*  6.0 AGENTS  */

/*  7.0 MARKETING  */

#section-marketing{
    overflow:hidden;
    padding:.1px;
    background:#f2f2f2
    }

#marketing-content{
    margin:90px 0
    }

.marketing-selector{
        position:relative;
        width:33.33%;
        cursor:pointer
        }

.marketing-selector img{
        transition:.9s
        }

.marketing-selector:after{
        content:"";
        display:block;
        padding-top:100%
        }

.marketing-selector .marketing-title{
        position:absolute;
        bottom:0;
        padding:20px;
        font-weight:700;
        font-size:27px;
        line-height:1.5em;
        pointer-events:none;
        z-index:10
        }

.marketing-selector:before{
        content:"";
        position:absolute;
        display:block;
        width:100%;
        height:50%;
        bottom:0;
        background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
        z-index:5
        }

.marketing-selector:hover img{
        opacity:.6
        }

#marketing-selectors{
    display:none;
    padding:.1px 0;
    }

#marketing-selectors .width{
        margin:90px auto 30px
        }

#marketing-selectors [data-slide]{
        position:relative;
        width:16.66%;
        transform-origin:left top;
        margin:0;
        font:700 16px/1.5em "Compass Sans",Helvetica,sans-serif;
        cursor:pointer;
        opacity:.3;
        transition:.6s
        }

#marketing-selectors [data-slide].active{
        opacity:1
        }

#marketing-selectors [data-slide]:before{
        content:"";
        position:absolute;
        width:30px;
        height:1px;
        top:5px;
        left:-25px;
        transform:rotate(-90deg);
        background:#000
        }

#marketing-selectors [data-slide]:after{
        content:"01.";
        position:absolute;
        top:0;
        left:-15px;
        transform:rotate(-90deg) translateX(40px);
        font:700 16px/1em "Compass Serif",Times New roman,serif;
        }

#marketing-selectors [data-slide]:nth-of-type(2):after{content:"02."}

#marketing-selectors [data-slide]:nth-of-type(3):after{content:"03."}

#marketing-selectors [data-slide]:nth-of-type(4):after{content:"04."}

#marketing-selectors [data-slide]:nth-of-type(5):after{content:"05."}

#marketing-selectors [data-slide]:nth-of-type(6):after{content:"06."}

#marketing-slides{
    position:relative;
    transition:.6s .6s
    }

#marketing-slides > div{
        position:absolute;
        top:0;
        width:100%;
        visibility:hidden
        }

#marketing-slides img{
        max-width:420px;
        max-height:420px
        }

#marketing-slides img.videoThumb{
        max-width:2000px;
        max-height:2000px
        }

#marketing-slides .slick-track{
        margin-left:calc(50% - 525px);
        }

#marketing-slides .slick-slide{
        height:420px;
        margin-right:40px;
        display:flex;
        align-items:flex-end;
        }

#marketing-slides .slick-slide img{
        width:auto !important
        }

#slide-agent-logos .slick-slide:nth-of-type(3n+1) img,
    #slide-listing-photography .slick-slide:nth-of-type(3n+1) img,
    #slide-agent-lifestyle-photography .slick-slide:nth-of-type(3n+1) img{margin-bottom:40px}

#slide-agent-logos .slick-slide:nth-of-type(3n+3) img,
    #slide-listing-photography .slick-slide:nth-of-type(3n+3) img,
    #slide-agent-lifestyle-photography .slick-slide:nth-of-type(3n+3) img{margin-bottom:80px}

#marketing-slides .slider-controls .hover{
        background:#fff !important
        }

#slide-agent-logos{
    padding:90px 0;
    transition:.6s .3s
    }

#slide-agent-logos.active{
        background:#000;
        transition-delay:0s
        }

#slide-agent-logos .slick-slide{
        height:360px
        }

#slide-agent-logos img{
        max-width:280px;
        max-height:280px
        }

#slide-agent-logos .slider-controls{
        margin-top:0
        }

#slide-listing-photography,
#slide-agent-lifestyle-photography,
#slide-social-media{
    padding-top:30px
    }

#slide-video-production .slick-slide{
        height:auto !important
        }

#slide-video-production .hover{
        background:#fff
        }

#slide-video-production .slider-controls,
    #slide-video-production .slider-progress{
        width:100%
        }

#slide-social-media .slick-slide{}

#slide-social-media .slick-slide img{
        max-width:420px
        }

#slide-email-marketing .slick-slide{
    height:620px
    }

#slide-email-marketing img{
        max-height:620px
        }

#marketing-sign{
    margin:90px auto;
    padding:60px 90px 45px;
    border-radius:1px
    }

#sign-content{
        width:calc(50% - 30px);
        margin:0 60px 0 0
        }

#sign-content a{
        text-decoration:underline
        }

#sign-content button{
        margin:15px 0 0;
        padding:0 20px;
        font:700 16px/45px "Compass Sans",Helvetica,sans-serif;
        color:#fff;
        box-shadow:inset 0 0 0 1px #fff;
        transition:.3s;
        cursor:pointer
        }

#sign-content button:before{
        content:"";
        display:inline-block;
        width:20px;
        height:20px;
        margin-right:15px;
        vertical-align:middle;
        background:url(../img/sign-video-play.svg) center/contain no-repeat
        }

#sign-content button:hover{
        background:rgba(255,255,255,.3)
        }

#sign-image{
        width:calc(50% - 30px)
        }

#sign-image img{
        -webkit-backface-visibility:hidden
        }

/*  7.1 SIGN VIDEO  */

#sign-video{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background:#000;
        opacity:0;
        pointer-events:none;
        transition:.6s;
        z-index:300
        }

#sign-video #video-source{
        position:absolute;
        max-width:100%;
        max-height:100%;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%)
        }

html.sign_video_show{
        overflow:hidden
        }

html.sign_video_show #sign-video{
            visibility:visible !important;
            opacity:1;
            pointer-events:auto
            }

/*  7.1 SIGN VIDEO - END  */

/*  7.2 MARKETING ANIMATIONS  */

#marketing-slides > div.active{
        visibility:visible
        }

#marketing-slides > div > *{
            opacity:0;
            pointer-events:none;
            transition:.6s
            }

#marketing-slides > div.active > *{
            opacity:1;
            pointer-events:auto;
            transition-delay:.3s
            }

#slide-video-production .video-main-thumbnail iframe{
            opacity:0
            }

#slide-video-production.active .video-main-thumbnail iframe{
            opacity:1;
            transition:.9s 1s
            }

/*  7.2 MARKETING ANIMATIONS - END  */

/*  7.0 MARKETING  */

/*  8.0 TECHNOLOGY  */

#section-technology{

    }

#technology-content{
        margin:90px auto
        }

.technology .technology-image{
        position:relative;
        width:400px
        }

.technology .technology-image-screen{
        position:absolute;
        width:77.3%;
        height:74.2%;
        left:7%;
        top:11%
        }

.technology .technology-image-screen:after{
            content:"";
            display:block;
            padding-top:;
            }

.technology .technology-text{
        display:inline-block;
        width:380px
        }

.technology:nth-of-type(1) .technology-text{
        margin-left:100px
        }

.technology:nth-of-type(2){
        margin-top:-200px
        }

.technology:nth-of-type(2) .technology-text{
        margin:0 100px 100px 0
        }

#technology-marketing-center .technology-image{
    position:relative
    }

#technology-marketing-center .technology-image > img{
        width:100%;
        max-width:1360px;
        margin:auto
        }

#technology-marketing-center .technology-image-screen{
        position:absolute;
        max-width:1093px;
        width:80.4%;
        height:69.1%;
        top:6.2%;
        left:50%;
        transform:translateX(-50%)
        }

#technology-marketing-center #marketing-center-content{
        width:90%;
        max-width:380px;
        margin:0 auto 90px;
        text-align:center
        }

#technology-crm{
    max-width:1200px;
    margin:90px auto;
    padding:120px 90px;
    border-radius:1px
    }

#crm-image{
        width:calc(50% - 45px)
        }

#crm-content{
        width:calc(50% - 45px);
        margin:0 0 0 90px
        }

#crm-content p:nth-of-type(1){
        margin:0 0 15px
        }

#crm-content p b{
        display:block;
        margin:0 0 10px;
        font-size:1.2em
        }

#crm-content h3{
        margin:0 0 15px
        }

#crm-content p a{
        text-decoration:underline
        }

#crm-data-pledge{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    opacity:0;
    transition:.6s;
    z-index:200
    }

#crm-data-pledge-overlay{
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.3)
        }

#crm-data-pledge-content{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-30%);
        padding:60px;
        background:#fff;
        box-shadow: 0 0 0 1px #cacaca,
                    2px 2px 8px 2px rgba(0,0,0,.1);
        opacity:0;
        transition:.6s;
        z-index:210
        }

#crm-data-pledge_close{
        top:10px;
        right:10px;
        transform:scale(.5,.5)
        }

#crm-data-pledge_close:before,
    #crm-data-pledge_close:after{
        height:3px;
        background:#ccc !important
        }

#crm-data-pledge h2{
        margin:0 0 45px;
        font-size:24px;
        text-align:center
        }

#crm-data-pledge h3{
        position:relative;
        padding:0 0 0 40px
        }

#crm-data-pledge h3:not(:first-of-type){
        margin:15px 0 0
        }

#crm-data-pledge h3:before{
        content:"01.";
        position:absolute;
        display:inline-block;
        width:30px;
        top:0;
        left:0
        }

#crm-data-pledge h3:nth-of-type(2):before{content:"02."}

#crm-data-pledge h3:nth-of-type(3):before{content:"03."}

#crm-data-pledge h3:nth-of-type(4):before{content:"04."}

html.crm_data_pledge_show #crm-data-pledge{
    pointer-events:auto;
    opacity:1
    }

html.crm_data_pledge_show #crm-data-pledge-content{
        transform:translate(-50%,-50%);
        opacity:1;
        transition:opacity .15s, transform .6s
        }

/*  8.1 TECHNOLOGY ANIMATIONS  */

.technology-image-screen img{
        opacity:0
        }

html.scrolled_technology .technology-image-screen img{
            -webkit-animation:fadein .9s both;
            animation:fadein .9s both
            }

.technology:nth-of-type(2) .technology-image-screen img{
            -webkit-animation-delay:1s;
            animation-delay:1s
            }

#technology-marketing-center .technology-image-screen img{
            -webkit-animation-delay:2s;
            animation-delay:2s
            }

/*  8.1 TECHNOLOGY ANIMATIONS - END  */

/*  8.0 TECHNOLOGY  */

/*  9.0 SUPPORT  */

#section-support{
    padding:.1px 0;
    background:#f2f2f2
    }

#support-header .header-left{
        width:480px
        }

#support-header .header-right{
        width:calc(100% - 570px)
        }

#support-header-right .metric{
        margin:0 40px 80px 0
        }

#support-header-right .metric:nth-of-type(2n){
        margin:0 0 80px
        }

#support-header-right .metric h3{
        position:relative;
        transform-origin:left top;
        margin:0;
        font:700 16px/1.5em "Compass Sans",Helvetica,sans-serif
        }

#support-header-right .metric h3:before{
        content:"";
        position:absolute;
        width:30px;
        height:1px;
        top:5px;
        left:-25px;
        transform:rotate(-90deg);
        background:#000
        }

#support-header-right .metric h3:after{
        content:"01.";
        position:absolute;
        top:0;
        left:-15px;
        transform:rotate(-90deg) translateX(40px);
        font:700 16px/1em "Compass Serif",Times New roman,serif;
        }

#support-header-right .metric:nth-of-type(2) h3:after{content:"02."}

#support-header-right .metric:nth-of-type(3) h3:after{content:"03."}

#support-header-right .metric:nth-of-type(4) h3:after{content:"04."}

#support-header-right .metric:nth-of-type(5) h3:after{content:"05."}

#support-header-right .metric:nth-of-type(6) h3:after{content:"06."}

#support-content{
    margin:80px auto 60px
    }

.team{
        width:calc(25% - 45px);
        margin:0 60px 60px 0
        }

.team:nth-of-type(4n){
        margin:0 0 60px
        }

.team .team-portrait{
        position:relative;
        background:#ccc
        }

.team .team-portrait:after{
        content:"";
        display:block;
        padding-top:100%
        }

.team h3{
        margin:18px 0 0;
        font:24px/1em "Compass Sans",Helvetica,sans-serif
        }

.team h3 .team-position{
        display:block;
        margin-top:5px;
        font-size:16px
        }

.team .team-company-logo{
        height:25px !important;
        margin-top:20px
        }

/*  9.1 SUPPORT ANIMATIONS  */

.team .team-portrait img{
        opacity:0
        }

html.scrolled_support .team .team-portrait img{
            -webkit-animation:fadein .6s .6s both;
            animation:fadein .6s .6s both
            }

/*  9.1 SUPPORT ANIMATIONS - END  */

/*  9.0 SUPPORT  */

/*  10.0 PRINCIPLES  */

#section-principles{
    padding:.1px
    }

#principles-header{
        margin:150px auto 210px
        }

#principles-header p{
        max-width:780px
        }

#principles-slider{
    margin:90px auto
    }

#principles-slider .principle-number{
        display:inline-block;
        vertical-align:top;
        width:180px;
        font:700 200px/1em 'Compass Sans',sans-serif
        }

#principles-slider .principle-content{
        display:inline-block;
        position:relative;
        width:calc(100% - 180px);
        max-width:720px;
        margin:65px 0 0
        }

#principles-slider .principle-content h3{
        margin:0 0 30px;
        font:100px/1.2em 'Compass Serif', serif;
        }

#principles-slider .principle-content ul li{
        display:list-item;
        list-style:disc inside
        }

#principles-slider .slider-controls{
    margin:60px 0 0
    }

#principles-slider .slider-controls,
#principles-slider .slider-progress{
    width:calc(100% - 300px);
    margin-left:180px
    }

/*  10.0 PRINCIPLES  */

/*  11.0 JOIN  */

#section-join{
    padding:90px 0 .1px
    }

#join-header{
        margin:0 auto 45px;
        text-align:center;
        }

#join-header img{
        display:block;
        width:100px;
        margin:0 auto 75px
        }

#join-form{
    position:relative
    }

#join-form input:last-of-type{
        margin:0
        }

#join-form input::-webkit-input-placeholder{
            color:#ccc
            }

#join-form input::-moz-placeholder{
            color:#ccc
            }

#join-form input:-ms-input-placeholder{
            color:#ccc
            }

#join-form input:-moz-placeholder{
            color:#ccc
            }

#join-form ul .width{
        position:relative;
        opacity:0;
        transition:.6s
        }

#join-form .slick-active .width{
            opacity:1
            }

#join-form .button{
        height:40px;
        margin:20px 0 0;
        padding:0 30px;
        font:16px/40px "Compass Sans",Helvetica,sans-serif;
        box-shadow:inset 0 0 0 2px #ccc;
        /*opacity:0;*/
        /*pointer-events:none;*/
        transition:.6s
        }

#join-form .button:hover{
            color:#000
            }

#join-form .button.active{
            opacity:1;
            pointer-events:auto
            }

#join-form ul{
        margin-bottom:-30px !important
        }

#join-form #join_submit{
        display:block;
        width:230px;
        margin:20px auto 0;
        height:50px;
        padding:0 90px;
        font-size:18px;
        line-height:50px
        }

#join-form #join-success{
        position:absolute;
        width:90%;
        max-width:500px;
        top:0;
        left:50%;
        transform:translateX(-50%);
        margin:50px 0 0;
        text-align:center;
        pointer-events:none;
        opacity:0;
        pointer-events:none;
        transition:.6s .9s
        }

#join-form.form_submit #join-success{
        opacity:1;
        pointer-events:auto
        }

#join-form.form_submit > ul{
            transform:translateX(-100%);
            opacity:0;
            transition:.9s
            }

#join-form.form_submit > .width{
            opacity:0;
            transition:.9s
            }

#join-form .slider-controls{
            width:105px;
            white-space:nowrap
            }

#join-form .slider-controls{
    margin-top:0
    }

#join-cta{
    margin:60px auto 90px;
    text-align:center
    }

#join-cta .arrow{
        margin-left:20px;
        vertical-align:2px
        }

#join-cta .arrow,
    #join-cta .arrow:before,
    #join-cta .arrow:after{
        background:#fff
        }

/*  11.0 JOIN  */

/*  12.0 FOOTER  */

#footer{
    font:16px/1em "Compass Sans",Helvetica,sans-serif
    }

#footer > *{
        display:inline-block;
        width:calc(33.33% - 2px);
        padding:30px;
        text-align:center
        }

#footer-center{
        border-left:1px solid #ccc;
        border-right:1px solid #ccc
        }

#footer-right a{
        display:inline-block;
        margin:0 0 0 20px;
        vertical-align:middle
        }

#footer-right a img{
        width:100%;
        max-width:20px;
        max-height:20px !important
        }

/*  12.0 FOOTER - END  */

/*  13.0 ANIMATIONS  */

@-webkit-keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

@keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

.css_fadein{
    opacity:1;
    -webkit-animation:fadein .6s both;
    animation:fadein .6s both
    }

@-webkit-keyframes fadeinUp{
    0%{
        opacity:0;
        transform:translateX(45px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes fadeinUp{
    0%{
        opacity:0;
        transform:translateY(45px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}

.css_fadeinup{
    opacity:1;
    pointer-events:auto;
    -webkit-animation:fadeinUp .6s both;
    animation:fadeinUp .6s both
    }

@-webkit-keyframes fadeoutUp{
    0%{
        transform:translateY(0)
    }
    100%{
        opacity:0;
        transform:translateY(-45px)
    }
}

@keyframes fadeoutUp{
    0%{
        transform:translateY(0)
    }
    100%{
        opacity:0;
        transform:translateY(-45px)
    }
}

.css_fadeoutup{
    -webkit-animation:fadeoutUp .6s both;
    animation:fadeoutUp .6s both
    }

@-webkit-keyframes fadeinDown{
    0%{
        opacity:0;
        transform:translateY(-45px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes fadeinDown{
    0%{
        opacity:0;
        transform:translateY(-45px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}

.css_fadeindown{
    -webkit-animation:fadeinDown .6s both;
    animation:fadeinDown .6s both
    }

@-webkit-keyframes fadeoutLeft{
    0%{
        opacity:1;
        transform:translateX(0)
    }
    100%{
        opacity:0;
        transform:translateX(-45px)
    }
}

@keyframes fadeoutLeft{
    0%{
        opacity:1;
        transform:translateX(0)
    }
    100%{
        opacity:0;
        transform:translateX(-45px)
    }
}

.css_fadeoutleft{
    -webkit-animation:fadeoutLeft .6s both;
    animation:fadeoutLeft .6s both
    }

@-webkit-keyframes fadeinLeft{
    0%{
        opacity:0;
        transform:translateX(-45px)
    }
    100%{
        opacity:1;
        transform:translateX(0)
    }
}

@keyframes fadeinLeft{
    0%{
        opacity:0;
        transform:translateX(-45px)
    }
    100%{
        opacity:1;
        transform:translateX(0)
    }
}

.css_fadeinleft{
    opacity:1;
    pointer-events:auto;
    -webkit-animation:fadeinLeft .6s both;
    animation:fadeinLeft .6s both
    }

@-webkit-keyframes fadeinRight{
    0%{
        opacity:0;
        transform:translateX(45px)
    }
    100%{
        opacity:1;
        transform:translateX(0)
    }
}

@keyframes fadeinRight{
    0%{
        opacity:0;
        transform:translateX(45px)
    }
    100%{
        opacity:1;
        transform:translateX(0)
    }
}

.css_fadeinright{
    -webkit-animation:fadeinRight .6s both;
    animation:fadeinRight .6s both
    }

@-webkit-keyframes fadeoutRight{
    0%{
        opacity:1;
        transform:translateX(0)
    }
    100%{
        opacity:0;
        transform:translateX(45px)
    }
}

@keyframes fadeoutRight{
    0%{
        opacity:1;
        transform:translateX(0)
    }
    100%{
        opacity:0;
        transform:translateX(45px)
    }
}

.css_fadeoutright{
    -webkit-animation:fadeoutRight .6s both;
    animation:fadeoutRight .6s both
    }

/*  13.0  ANIMATIONS - END  */

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

	#section-video .video-slide .slider-controls,
	#section-video .video-slide .slider-progress,
	#slide-video-production .slider-controls,
	#slide-video-production .slider-progress{
    	display:none
    	}

    #section-video .video-slide ul{
        max-width:1050px;
        margin-left:auto !important;
        margin-right:auto !important
        }

}

@media screen and (max-width:1166px){

	.video-slide .slick-track{
		margin-left:5%
		}

	#marketing-slides .slick-track{
		margin-left:5%
		}

}

@media screen and (max-width:1024px){

	/*  SECTION HEADER  */

	.section-header{
		margin-bottom:60px
		}

	.section-header .t-large br{
		display:none
		}

    .header-left,
    #support-header .header-left{
    	display:block;
        width:100%;
        margin-right:0
        }

	    .header-left p{
	        max-width:600px
	        }

    .header-right,
    #support-header .header-right{
    	display:block;
    	width:100%;
    	max-width:510px;
        margin-top:30px
        }

	/*  SECTION HEADER - END  */

	/*  SECTION SUPPORT  */

	#support-header .header-right{
		max-width:100%
		}

		#technology-header-right-metrics{
			padding:30px 0 0 15px
			}

	#support-content{
		margin:0 auto 60px
		}

    #support-content .team,
    #support-content .team:nth-of-type(4n){
        width:calc(33.33% - 40px);
        margin:0 60px 60px 0
        }

		#support-content .team:nth-of-type(3n){
			margin:0 0 60px
			}

	/*  SECTION SUPPORT - END  */

}

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

	h1,h2,h3,h4,h5,h6,.t-title{font-size:18px}
	.t-heading{font-size:60px}
	.t-large,
	.t-large-sans{font-size:32px}

	#header,
	#lightbox{
		display:none
		}

	.section-header br{
		display:none
		}

	.hover{display:none}

    .slider-controls.controls_white > *:hover .arrow,
    .slider-controls.controls_white > *:hover .arrow:before,
    .slider-controls.controls_white > *:hover .arrow:after{
        background-color:#fff
        }

	/*  HEADER JOIN  */

	#join-content{
		width:90%
		}

	#join-content h2{
		width:100%;
		margin:0 0 60px;
		padding:0
		}

	#join-select,
	#join-input{
		width:100%
		}

		#join-select hr{
			margin:50px 0
        	}

	/*  HEADER JOIN - END  */

	/*  SECTION COVER  */

	#cover-button .button{
		display:block;
		width:250px;
		float:none;
		margin:auto
		}

	/*  SECTION COVER - END  */

	/*  SECTION VIDEO  */

	#video-header #header-text{
		margin:30px 0 0
		}

	#video-header #header-text p{
		float:none;
		max-width:100%;
		margin:0
		}

	.video-main{
		width:100%
		}

	/*  SECTION VIDEO - END  */

	/*  SECTION PRESENCE  */

	#presence-map{
		flex-direction:column
		}

	#presence-map-container{
		width:100%;
		order:1
		}

	#presence-map-selector{
		width:90%;
		max-width:450px;
		height:300px;
		margin:30px 0 60px;
		order:2
		}

	/*  SECTION PRESENCE - END  */

	/*  SECTION AGENTS  */

	#agents-content{
		display:flex;
        display:-webkit-flex;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap;
		flex-direction:column
		}

	#agent-image{
		width:100%;
		float:none;
		margin:0;
		order:1
		}

	#agent-info{
		position:relative;
		width:90%;
		margin:-30px auto 60px;
		order:2
		}

		#agent-info .slider-controls{
			padding-left:0
			}

		#agent-info ul{
			pointer-events:none
			}

	/*  SECTION AGENTS - END  */

	/*  SECTION MARKETING  */

	#marketing-selectors [data-slide]{
		width:33.33%;
		padding-right:30px;
		margin:0 0 60px
		}

	#marketing-selectors{
		padding-left:20px
		}

	#marketing-selectors .width{
		margin:auto
		}

	.marketing-selector .marketing-title{
		font-size:20px
		}

    #marketing-slides img{
        max-width:600px;
        max-height:240px
    	}

	    #marketing-slides .slick-slide{
	        height:240px;
	        margin-right:20px
		    }

    #slide-agent-logos .slick-slide:nth-of-type(3n+1) img,
    #slide-listing-photography .slick-slide:nth-of-type(3n+1) img,
    #slide-agent-lifestyle-photography .slick-slide:nth-of-type(3n+1) img,
    #slide-agent-logos .slick-slide:nth-of-type(3n+3) img,
    #slide-listing-photography .slick-slide:nth-of-type(3n+3) img,
    #slide-agent-lifestyle-photography .slick-slide:nth-of-type(3n+3) img{margin-bottom:0}

	#slide-agent-logos .slick-slide{
		height:180px
		}

		#slide-agent-logos .slick-slide img{
			max-width:180px;
			max-height:180px
			}

    	#slide-agent-logos .slider-controls{
        	margin-top:50px
        	}

	#slide-listing-photography,
	#slide-agent-lifestyle-photography,
	#slide-social-media{
		padding-top:0
		}

	#marketing-sign{
		padding:60px
		}

		#sign-content,
		#sign-image{
			width:100%;
			text-align:center
			}

		#sign-content{
			order:1;
			margin:30px 0 0
			}

		#sign-image img{
			width:100%;
			max-width:360px;
			margin:auto
			}

	/*  SECTION MARKETING - END  */

	/*  SECTION TECHNOLOGY  */

	#technology-content{
		margin:0 auto 90px
		}

		.technology:nth-of-type(2){
			margin-top:-150px
			}

		.technology .technology-image{
			width:45%
			}

		.technology:nth-of-type(1) .technology-text{
			width:calc(55% - 30px);
			margin-left:30px
			}

		.technology:nth-of-type(2) .technology-text{
			width:calc(55% - 30px);
			margin:0 30px 60px 0
			}

	#technology-crm{
		padding:90px 60px
		}

		#crm-image,
		#crm-content{
			width:100%
			}

		#crm-image img{
			width:100%;
			max-width:450px;
			margin:auto
			}

		#crm-content{
			max-width:500px;
			margin:60px auto 0;
			text-align:center
			}

	/*  SECTION TECHNOLOGY - END  */

	/*  SECTION SUPPORT  */

    #support-content .team,
	#support-content .team:nth-of-type(3n),
    #support-content .team:nth-of-type(4n){
        width:calc(50% - 10px);
        margin:0 20px 40px 0
        }

		#support-content .team:nth-of-type(2n){
			margin:0 0 40px
			}

	/*  SECTION SUPPORT - END  */

	/*  SECTION PRINCIPLES  */

	#principles-header{
		margin:90px auto
		}

		#principles-slider .principle-number{
			width:100%;
			font-size:90px			
			}

		#principles-slider .principle-content{
			width:100%;
			margin-top:30px
			}

		#principles-slider .slider-controls,
		#principles-slider .slider-progress{
			width:100%;
			margin-left:0
			}

	/*  SECTION PRINCIPLES - END  */

	/*  FOOTER  */

	#footer-right{
		font-size:0;
		white-space:nowrap
		}

		#footer-right a:first-of-type{
			margin:0
			}

	/*  FOOTER - END  */

}

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

	#mobile-header,
	#mobile-menu{
		display:none
		}

}

@media screen and (max-width:600px){

	body{
		-webkit-overflow-scrolling:touch
		}

	.t-heading{font-size:45px}
	.t-large,
	.t-large-sans{font-size:24px}
	p,ol,ul,.t-p{font-size:14px}

	/*  MOBILE HEADER  */

	#mobile-header{
		position:fixed;
		width:100%;
		background:#fff;
    	border-bottom:1px solid rgba(0,0,0,.1);
	    -webkit-background-clip:padding-box;
    	background-clip:padding-box;
		transition:.3s;
		z-index:190
		}

		#mobile-header #mobile-header-logo{
			display:inline-block;
			flex:1;
			padding:20px
			}

		#mobile-header #mobile-header-logo img{
			width:150px
			}

		#mobile-header #mobile-header_toggle{
			display:inline-block;
			padding:20px;
			border-left:1px solid #f2f2f2;
			cursor:pointer
			}

		#mobile-header #mobile-header_toggle img{
			width:40px
			}

	#mobile-menu{
		position:fixed;
		width:100%;
		pointer-events:none;
		z-index:150
		}

		#mobile-menu ol{
			position:relative;
			width:90%;
			margin:auto;
			padding:0;
			list-style:none;
			padding-top:90px;
			opacity:0;
			transition:.3s;
			z-index:160
			}

		#mobile-menu ol li{
			margin-bottom:10px;
        	font:36px/1.2em "Compass Serif",Times New Roman,serif;
			transform:translateX(-30px);
			opacity:0;
			transition:.45s .3s
			}

		#mobile-menu ol li:before{
			content:"";
			display:inline-block;
			width:45px
			}

		#mobile-menu ol li:nth-of-type(1):before{content:"1"}
		#mobile-menu ol li:nth-of-type(2):before{content:"2"}
		#mobile-menu ol li:nth-of-type(3):before{content:"3"}
		#mobile-menu ol li:nth-of-type(4):before{content:"4"}
		#mobile-menu ol li:nth-of-type(5):before{content:"5"}
		#mobile-menu ol li:nth-of-type(6):before{content:"6"}
		#mobile-menu ol li:nth-of-type(7):before{content:"7"}
		#mobile-menu ol li:nth-of-type(8):before{content:"8"}
		#mobile-menu ol li:nth-of-type(9):before{content:"9"}

		#mobile-menu #mobile-menu-overlay{
			position:fixed;
			width:100%;
			height:0;
			top:0;
			left:0;
			background:#000;
			transition:.3s ease-in
			}

	html.mobile_menu{
		overflow:hidden
		}

		html.mobile_menu #mobile-menu #mobile-menu-overlay{
			height:100%
			}

		html.mobile_menu #mobile-menu{
			pointer-events:auto
			}

		html.mobile_menu #mobile-menu ol li{
			transform:translateX(0);
			opacity:1
			}

		html.mobile_menu #mobile-menu ol{
			opacity:1
			}

		html.mobile_menu #mobile-menu ol li:nth-of-type(1){transition-delay:.0s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(2){transition-delay:.05s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(3){transition-delay:.1s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(4){transition-delay:.15s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(5){transition-delay:.2s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(6){transition-delay:.25s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(7){transition-delay:.3s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(8){transition-delay:.35s}
		html.mobile_menu #mobile-menu ol li:nth-of-type(9){transition-delay:.4s}

	/*  MOBILE HEADER - END  */

	/*  HEADER JOIN  */

	#join-logo{
		width:150px
		}

	#join-close{
		width:30px;
		top:35px;
		right:5%
		}

	#join-content .t-heading{
		display:none
		}

		#join-content #join-select .select > *{
			opacity:1
			}

		#join-content #join-select .select img{
			width:15px
			}

		#join-content #join-select .select p{
			padding-right:75px
			}

	.field-group .field,
	.field-group .field:nth-of-type(2n){
		display:block;
    	width:100%;
    	margin:0 0 15px
        }

	/*  HEADER JOIN - END  */

	/*  SECTION HEADING  */

	#support-header{
		margin-bottom:0
		}

	#support-header-right .metric{
		width:calc(50% - 10px);
		margin:0 20px 60px 0
		}

		#support-header-right .metric:nth-of-type(2n){
			margin:0 0 60px
			}

		#support-header-right .metric .metric-heading{
			font-size:42px
			}

	/*  SECTION HEADING - END  */

	/*  SECTION COVER  */

	#cover-logo{
		display:none
		}

	#cover-content{
		margin:90px 0 0
		}

		#cover-content #cover-heading{
			height:72px		
			}

		#cover-content .v-line{
			height:calc(45vh - 200px)
			}

	/*  SECTION COVER - END  */

	/*  SECTION VIDEO  */

	.video-slide ul li{
		width:180px;
		margin-right:20px
		}

		.video-slide .video p{
			margin:5px 0 0
			}

	/*  SECTION VIDEO - END  */

	/*  SECTION AGENTS  */

	#agent-image .image{
		height:250px
		}

	#agent-info ul{
		text-align:center;
		background:#fff
		}

		#agent-info ul li{
			padding:30px 15px 5px
			}

		#agent-info h3{
			margin:0 0 30px
			}

		#agent-info span{
			font-size:14px
			}

		#agent-info .info{
			width:100%;
			margin:0 0 10px !important
			}

		#agent-info .info:last-of-type{
			margin:0
			}

		#agent-info .agent-location{
			margin-bottom:10px
			}

		#agent-info .info:before{
			display:none
			}

		#agent-info .info span{
			display:inline-block;
			}

		#agent-info .info span:after{
			content:": "
			}

		#agent-info .info p{
			display:inline-block;
			margin:0;
			font-size:14px
			}

		#agent-info .slider-controls{
			margin:0;
			text-align:center
			}

		#agent-info .slider-controls .slider-controls_next{
			margin-left:20px
			}

	/*  SECTION AGENTS - END  */

	/*  SECTION MARKETING  */

	#marketing-content{
		margin:0 auto 90px
		}

	#marketing-selectors .width{
		margin-top:0
		}

	#marketing-selectors [data-slide]{
		width:50%;
		margin:0 0 60px;
		padding-right:0
		}

	.marketing-selector{
		width:50%
		}

		.marketing-selector:after{
			padding-top:60%
			}

	#marketing-sign{
		width:100%;
		margin:60px 0 0;
		padding:60px 30px
		}

	/*  SECTION MARKETING - END  */

	/*  SECTION TECHNOLOGY  */

	.technology{
		margin:0 0 60px !important
		}

		.technology .technology-image{
			width:100%;
			margin:0 0 30px
			}

		.technology .technology-image > img{
			max-width:210px;
			margin:auto
			}

		.technology .technology-image-screen{
			max-width:160px;
			left:23.5%
			}

		.technology:nth-of-type(1) .technology-text,
		.technology:nth-of-type(2) .technology-text{
			width:100%;
			max-width:400px;
			margin:auto;
			text-align:center
			}

	#technology-crm{
		width:100%;
		padding:60px 30px;
		margin:60px 0 0
		}

		#crm-content p:nth-of-type(2){
			margin:30px 0 0
			}

	#crm-data-pledge-content{
		top:auto;
		bottom:5%;
		padding:30px;
        transform:translate(-50%,20%)
		}

		#crm-data-pledge_close{
			top:5px;
			right:5px
			}

		html.crm_data_pledge_show #crm-data-pledge-content{
        	transform:translate(-50%,0)
			}

	/*  SECTION TECHNOLOGY - END  */

	/*  SECTION SUPPORT  */

    #support-content .team,
	#support-content .team:nth-of-type(3n),
    #support-content .team:nth-of-type(4n){
        width:calc(50% - 10px);
        margin:0 20px 40px 0
        }

		#support-content .team:nth-of-type(2n){
			margin:0 0 40px
			}

	/*  SECTION SUPPORT - END  */

	/*  SECTION PRINCIPLES  */

	#principles-slider .principle-number{
		font-size:60pxe
		}

	#principles-slider .principle-content{
		margin-top:15px
		}

	#principles-slider .principle-content h3{
		font-size:45px
		}

	/*  SECTION PRINCIPLES - END  */

	/*  SECTION JOIN  */

	#join-form [data-slick-index="0"] .button{
		display:none
		}

	#join-form > .width{
		margin:60px auto 0
		}

	/*  SECTION JOIN - END  */

	/*  FOOTER  */

	#footer{
		padding:30px 0
		}

		#footer > *{
			width:100%;
			margin:0 0 45px;
			padding:0
			}

	    #footer-center{
	    	border-left:0;
	    	border-right:0
		    }

		#footer-left{
			margin:0;
			order:1
			}

		#footer-right{
			}

		#footer-right span{
			display:block;
			margin:0 0 10px;
			font-size:14px
			}

	/*  FOOTER - END  */

	/*  ANIMATIONS  */

	@-webkit-keyframes fadeoutUp{
	    0%{
	        transform:translateY(0)
	    }
	    100%{
	        opacity:0;
	        transform:translateY(-15px)
	    }
	}

	@keyframes fadeoutUp{
	    0%{
	        transform:translateY(0)
	    }
	    100%{
	        opacity:0;
	        transform:translateY(-15px)
	    }
	}

	@-webkit-keyframes fadeinDown{
	    0%{
	        opacity:0;
	        transform:translateY(-15px)
	    }
	    100%{
	        opacity:1;
	        transform:translateY(0)
	    }
	}

	@keyframes fadeinDown{
	    0%{
	        opacity:0;
	        transform:translateY(-15px)
	    }
	    100%{
	        opacity:1;
	        transform:translateY(0)
	    }
	}

	/*  ANIMATIONS - END  */

}

@media screen and (max-width:420px){

	/*  SECTION MARKETING  */

	.marketing-selector{
		width:100%
		}

	/*  SECTION MARKETING - END  */

	/*  FOOTER  */

	#join-cta .arrow{
		display:none
		}

	/*  FOOTER - END  */

}