body {font-family:'proxima-nova';font-size:16px;color:#000}
html, body { height: 100%; width: 100%; margin: 0; }
.nav {position:fixed;left:0;right:0;top:0;transition:background-color .7s, transform .7s, box-shadow .7s}
.nav0 {font-weight:600;text-transform:uppercase;color:#000;padding-top:15px;float:right;transition:color .7s;letter-spacing:1px}
.nav-logo {transition:padding-bottom .7s;display:block;padding:32px 19px}
.nav-logo > IMG {width:231px;transition:opacity .7s;display:block}
.nav-logo > .white {position:absolute;display:none}
.nav0 > LI > A {position:relative}
.nav0 > LI > A:after {content:'';position:absolute;height:2px;left:20px;right:20px;bottom:17px;transition:background-color .7s, transform .7s;transform:scale(0.01)}
.nav0 > LI > A:hover:after,
.nav0 > LI.active > A:after {background-color:#000;transform:scale(1)}

.home .nav0 {color:#fff}
.home .nav-logo .white {opacity:1;display:block}
.home .nav-logo .black {opacity:0}
.home .nav0 > LI > A:hover:after,
.home .nav0 > LI.active > A:after {background-color:#fff}

@media screen and (min-width: 751px) {
    .scrolling .nav {background-color:#fff;transform:translateY(-10px);box-shadow:rgba(0,0,0,0.2) 0 0 8px}
    .scrolling .nav0 {color:#000}
    .scrolling .nav-logo {padding-bottom:10px}
    .scrolling .nav-logo .white {opacity:0}
    .scrolling .nav-logo .black {opacity:1}
    .scrolling .nav0 > LI.active > A:after {background-color:#000}
}

.video-wrapper {height:100vh;width:100vw;margin:0;position:relative;overflow:hidden;background-position:center center;background-size:cover;background-color:#000}
.video-wrapper video {min-height:100%;min-width:100%;left:50%;top:50%;position:absolute;transform:translateX(-50%) translateY(-50%) scale(1.001);width:auto;height:auto;max-width:none;opacity: 0.5}
.video .img {height:100vh;width:100vw;background-position:center center;background-size:cover}
.video .payoff {position:absolute;top:50%;left:10%;right:10%;text-align:center;transform:translateY(-50%)}
.video H2 {animation: fromBottom .5s ease-out .5s 1 alternate both;font-family:"Lust", serif;font-size:60px;color:#fff;line-height:1.1em}
.video P {color:#fff;max-width:700px;margin:auto}
.video P:first-of-type {animation: fromBottom .5s ease-out .75s 1 alternate both;font-size:1.2em;margin-top:1em}
.video .play {animation: fromBottom .5s ease-out 1s 1 alternate both;display:block;position:absolute;left:50%;width:100px;text-transform:uppercase;color:#fff;font-weight:600;text-align:center;margin-left:-50px;letter-spacing:1px}
.video .play:before {content:'';border:2px solid #fff;border-radius:50%;width:60px;height:60px;display:block;margin:10px 20px;transition:background-color .25s}
.video .play:after {content:'';position:absolute;border:14px solid transparent;border-left:30px solid #fff;top:26px;left:37px;transition:border-color .25s}
.video .play:hover:before {background-color:#fff}
.video .play:hover:after {border-left-color:#000}
.video .down {display:block;position:absolute;left:50%;bottom:0;width:0;height:0;border:36px solid transparent;border-top-color:#fff;transition:all .25s;transform:translateX(-50%) scale(0.9);cursor:pointer}
.video .down:before {content:'MORE';position:absolute;color:#fff;font-weight:600;letter-spacing:1px;transform:translateX(-50%);bottom:36px;opacity:0;transition:all .25s}
.video .down:hover:before {opacity:1}
.video .down:hover {transform:translateX(-50%) translateY(10px) scale(1)}

.addAnimationFromBottom { animation: fromBottom .5s ease-out .5s 1 alternate both }

A {color:#BE0D41}

@keyframes fromRight {
    from {transform:translateX(100px);opacity:0}
    to {transform:translateX(0);opacity:1}
}
@keyframes fromBottom {
    from {transform:translateY(50px);opacity:0}
    to {transform:translateX(0);opacity:1}
}
@keyframes fromLeft {
    from {transform:translateX(-100px);opacity:0}
    to {transform:translateX(0);opacity:1}
}

SECTION {z-index:3;clear:both;position:relative;background-color:#efeeee}
SECTION.h2,
SECTION.h2 ~ SECTION {background-color:#EAECE7}
SECTION.h2 ~ SECTION.h2,
SECTION.h2 ~ SECTION.h2 ~ SECTION {background-color:#F0EDE9}
SECTION.h2 ~ SECTION.h2 ~ SECTION.h2,
SECTION.h2 ~ SECTION.h2 ~ SECTION.h2 ~ SECTION {background-color:#E3E9E8}

SECTION.graph H2,
SECTION.h2 H2 {text-align:center;font-weight:bold;font-size:40px;letter-spacing:4px;padding:150px 100px 50px;line-height:1.2em}
/* SECTION.quote + SECTION.imagefull {padding-top:50px} */
SECTION.h2 + SECTION.quote {padding-top:50px}
SECTION.imagefull + SECTION.quote {padding-top:50px}

SECTION.graph {padding:0 20px 100px}

.icons {position:relative}
.icons .flex > DIV {flex: 1 1 auto;text-align:center;width:25%;height:25%;background-color:#202020;border:solid rgba(255,255,255,0.1);border-width:2px 1px;position:relative}
.icons .flex > DIV:before {content:'';float:left;padding-top:100%}
.icons .img {position:absolute;height:20%;width:20%;background-size:contain;background-repeat:no-repeat;background-position:center center;bottom:55%;left:40%;transform:translateY(50%);transition:all .4s;opacity:0.2}
.icons .img.active {opacity:1;transform:none}
.icons LABEL {position:absolute;top:55%;left:0;right:0;transform:translateY(50%);transition:all .4s;opacity:0.3}
.icons LABEL.active {opacity:1;transform:none}
.icons LABEL > SPAN {display:inline-block;color:#9B9B9B;max-width:180px}
.icons .left {width:50%;float:left;position:relative}
.icons .right {width:50%;float:right}
.icons:after {content:'';display:block;clear:both}
.icons .left .flex > DIV {flex: 1 0 auto;width:50%;height:50%;border-width:1px 1px}
.icons-image .flex {flex-wrap: wrap}
.icons .right {position:absolute;top:0;left:50%;right:0;bottom:0;background-size:cover;background-position:center center}

SECTION.quote {padding:100px 50px;position:relative}
SECTION.quote > DIV {max-width:1140px;margin:auto;position:relative}
SECTION.quote > DIV > ARTICLE {background-color:#fff;max-width:1140px;padding:80px 35% 80px 100px;margin-right:22%}
SECTION.quote-right > DIV > ARTICLE {padding-right:100px;padding-left:35%;margin-right:0;margin-left:22%}
SECTION.quote H2 {font-weight:bold;font-size:30px;letter-spacing:3px;line-height:1.2em}
SECTION.quote ARTICLE P {margin:0.5em 0}
SECTION.quote p.quote {font-family:'Lust',serif;font-size:30px;margin:1em 0;line-height:1.3em}
SECTION.quote p.quote:before {content:'“';position:absolute;margin-left:-17px}
SECTION.quote p.quote:after {content:'”'}
SECTION.quote p.quote-from {font-size:0.9em;color:#999;font-weight:bold}
SECTION.quote .slider-mini {position:absolute;top:80px;bottom:80px;left:50%;right:0;box-shadow:rgba(0,0,0,0.5) 0 6px 30px}
SECTION.quote-right .slider-mini {left:0;right:50%}
SECTION.quote-right .slider-mini .prev {right:auto;left:-10px !important}
SECTION.quote-right .slider-mini .next {right:auto;left:45px}

SECTION.work {background-color:#A7AE9E !important;padding-bottom:150px;position:relative;overflow:hidden;z-index:0}
SECTION.work H2 {font-weight:bold;font-size:40px;letter-spacing:4px;text-transform:uppercase;margin-left:57%;padding:150px 0 50px}
SECTION.work DIV.workitem {margin-left:57%;letter-spacing:2px;line-height:1.5em;padding-bottom:100px}
SECTION.work H3 {font-weight:bold;font-size:24px;padding:100px 0 25px;transition:transform .7s, opacity .7s;transform-origin:left center;transform:scale(0.8);opacity:0.4}
SECTION.work UL {transition:transform .7s, opacity .7s;transform-origin:left top;opacity:0;transform:translateX(50px)}
SECTION.work LI {padding-left:13px}
SECTION.work LI:before {content:'•';position:absolute;margin:1px 0 0 -12px;font-size:14px}
SECTION.work .icon {position:absolute;background-color:#232323;border:6px solid #fff;border-radius:50%;width:106px;height:106px;margin:60px 0 0 -53px;left:50%;transition:box-shadow .7s, transform .7s;z-index:2}
SECTION.work .icon > SPAN {background-position:center center;background-size:contain;background-repeat:no-repeat;display:block;width:60%;height:60%;margin:20%}
SECTION.work .sticky {position:-webkit-sticky;position:sticky;top:50px;background:red;height:10px}
SECTION.work .img {position:fixed;opacity:0.01;top:74px;right:50%;left:0;bottom:0;background-position:center center;background-size:cover;transition:all 1s;z-index:1}
SECTION.work DIV.workitem.active .img {opacity:1}
SECTION.work DIV.workitem.active .icon {box-shadow:rgba(0,0,0,0.5) 0 6px 30px;transform:scale(1.2)}
SECTION.work DIV.workitem.active UL {opacity:1;transform:translateX(0)}
SECTION.work DIV.workitem UL UL {margin-bottom:20px;margin-left:10px}
SECTION.work DIV.workitem.active H3 {transform:scale(1);opacity:1}

SECTION.certifications {text-align:center;padding:50px}
SECTION.certifications .items {max-width:1140px;margin:auto;flex-wrap:wrap}
SECTION.certifications .item {position:relative;display:block;width:31%;flex:1 0 auto;background-color:#fff;margin:1%;padding:50px;color:#000;transition:all .4s}
SECTION.certifications .item:hover {box-shadow:rgba(0,0,0,0.3) 0 6px 30px;transform:scale(1.03)}
SECTION.certifications.showrooms .item:hover {box-shadow:rgba(0,0,0,0.2) 0 3px 10px;transform:scale(1)}
SECTION.certifications.showrooms .img {transition:all .4s}
SECTION.certifications.showrooms .img:hover {transform:scale(1.05)}
SECTION.certifications .item .img {position:relative;padding-bottom:70%;background:center center no-repeat;background-size:contain}
SECTION.certifications H3 {font-weight:bold;font-size:30px;letter-spacing:3px;text-transform:uppercase;padding-bottom:50px}
SECTION.certifications H4 {font-weight:600;margin-top:10px}

DIV.slider-mini > DIV {background-size:cover;background-position:center center}
DIV.slider-mini .dots {display:none}
DIV.slider .next,
DIV.slider .prev {position:absolute;bottom:-80px;height:50px;width:50px;border-radius:50px;z-index:10;right:50px;cursor:pointer}
DIV.slider .next {right:-5px}
DIV.slider .next>SPAN,
DIV.slider .prev>SPAN {position:absolute;border-top:1px solid #979797;border-right:1px solid #979797;width:30px;height:30px;transition:border .25s}
DIV.slider .next>SPAN {transform:rotate(45deg);top:13px;left:9px}
DIV.slider .prev>SPAN {transform:rotate(-135deg);top:13px;left:17px}
DIV.slider .next:hover>SPAN,
DIV.slider .prev:hover>SPAN {border-color:#000}

SECTION.slider-section {overflow:hidden;position:relative}
DIV.slider-big .dots {letter-spacing:2px;font-weight:600;text-transform:uppercase;z-index:1;position:absolute;text-align:center;display:block;left:0;right:0;z-index:10}
DIV.slider-big .dots > SPAN {margin:0 10px;cursor:pointer;display:inline-block}
DIV.slider-big .dots > SPAN.activeslide {border-bottom:1px solid #000}
DIV.slider-big {padding-bottom:35%;margin:auto;max-width:1140px}
DIV.slider-big .img {position:absolute;top:70px;bottom:200px;left:10px;right:10px;background-position:center center;background-size:cover;transform:scale(0.85);transition:all .4s}
DIV.slider-big .text {position:absolute;bottom:10px;height:140px;left:10px;right:10px;text-align:center;opacity:0;transition:all .4s}
DIV.slider-big .activeslide .img {box-shadow:rgba(0,0,0,0.5) 0 6px 30px;transform:scale(1)}
DIV.slider-big .activeslide .text {opacity:1}
DIV.slider-big H3 {font-weight:bold;font-size:30px;letter-spacing:3px;margin-bottom:10px}
DIV.slider-big .next,
DIV.slider-big .prev {bottom:80px}
DIV.slider-big .prev {left:0}

SECTION.imagefull {padding:50px 50px 150px;position:relative;text-align:center}
SECTION.imagefull > DIV {max-width:1140px;margin:auto;position:relative;background-position:center center;background-size:cover;padding:5%}
SECTION.imagefull-textleft-big > DIV,
SECTION.imagefull-textright-big > DIV {padding:0;text-align:left}
SECTION.imagefull > DIV > ARTICLE {background-color:rgba(0,0,0,0.8);max-width:50%;color:#aaa;padding:10%}
SECTION.imagefull-textleft-big > DIV > ARTICLE,
SECTION.imagefull-textright-big > DIV > ARTICLE {padding:8%}
SECTION.imagefull-textcenter > DIV > ARTICLE {margin-left:20%;background-color:rgba(255,255,255,0.8);color:#000;max-width:60%}
SECTION.imagefull-textright > DIV > ARTICLE {margin-left:50%}
SECTION.imagefull-textright-big > DIV > ARTICLE {margin-left:50%}
SECTION.imagefull H3 {font-weight:bold;font-size:30px;letter-spacing:3px;line-height:1.2em}
SECTION.imagefull ARTICLE P {margin:1em 0}
SECTION.imagefull-right .slider-mini {left:0;right:50%}
SECTION.imagefull .button1, SECTION.imagefull .button2 {margin-top:1em}
SECTION.imagefull .button1 {border-color:#aaa;color:#aaa}
SECTION.imagefull .button2 {color:#aaa}
SECTION.imagefull .button2:after {background-color:#aaa}
SECTION.imagefull .button1:hover, SECTION.imagefull .button2:hover {background-color:#aaa;color:#000}
SECTION.imagefull-textcenter .button1 {border-color:#000;color:#000}
SECTION.imagefull-textcenter .button2 {color:#000}
SECTION.imagefull-textcenter .button2:after {background-color:#000}
SECTION.imagefull-textcenter .button1:hover, SECTION.imagefull .button2:hover {background-color:#000;color:#fff}

SECTION.images-half {width:50%;float:left;position:relative;padding:50px 25px 0 25px;z-index:10}
SECTION.images-half ~ SECTION.images-half {clear:none}
SECTION.images-half > DIV {max-width:545px;width:100%;float:right}
SECTION.images-half ~ SECTION.images-half > DIV {float:none}
SECTION.images-half > DIV > DIV {padding-bottom:100%;background-color:#fff;box-shadow:rgba(0,0,0,0.2) 0 6px 20px;position:relative}
SECTION.images-half H2 {text-align:center;font-weight:bold;font-size:30px;letter-spacing:3px;position:absolute;left:0;right:0;top:100px}
SECTION.images-half .slider-mini {position:absolute;top:200px;bottom:100px;left:100px;right:100px}
SECTION.images-half .slider-mini .prev {right:auto;left:-70px;top:40%}
SECTION.images-half .slider-mini .next {right:-70px;top:40%}

.button1,
.button2 {font-weight:400;letter-spacing:1.5px;color:#000;display:inline-block;padding:10px 20px;border:1px solid #000;text-decoration:none;position:relative;font-weight:600;transition:all .25s}
.button2 {border-color:transparent}
.button2:after {content:'';position:absolute;left:20px;right:21px;height:1px;background-color:#000;bottom:5px}
.button1:hover, .button2:hover {background-color:#000;color:#fff}

.goverlay {background: rgba(0,0,0,.7)}
.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {background-image:none;background-color:#000;border:2px solid #fff;border-radius:50%;opacity:1;width:50px;height:50px;transition:all .25s}
.glightbox-clean .gprev:before,
.glightbox-clean .gprev:after,
.glightbox-clean .gnext:before,
.glightbox-clean .gnext:after,
.glightbox-clean .gclose:before,
.glightbox-clean .gclose:after {content:'';width:60%;left:20%;height:2px;background-color:#fff;position:absolute;display:block;transform:rotate(45deg);top:50%;margin-top:-1px;transition:all .25s}
.glightbox-clean .gprev:before,
.glightbox-clean .gnext:before,
.glightbox-clean .gclose:before {transform:rotate(-45deg)}
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover {background-color:#fff}
.glightbox-clean .gprev:hover:before,
.glightbox-clean .gprev:hover:after,
.glightbox-clean .gnext:hover:before,
.glightbox-clean .gnext:hover:after,
.glightbox-clean .gclose:hover:before,
.glightbox-clean .gclose:hover:after {background-color:#000}
.glightbox-clean .gprev:before,
.glightbox-clean .gprev:after {width:40%;transform-origin:0 50%;left:30%}
.glightbox-clean .gnext:before,
.glightbox-clean .gnext:after {width:40%;transform-origin:100% 50%;left:30%}
.glightbox-clean .gprev:after,
.glightbox-clean .gnext:before {margin-top:-2px}
.glightbox-clean .gprev.disabled,
.glightbox-clean .gnext.disabled {opacity:0.15;pointer-events:none}

@media screen and (max-width: 1150px) {
    .nav LI A {padding:10px}
    .nav0 > LI > A:after {left:10px;right:10px}
    .nav-logo {padding:22px 15px}
}

@media screen and (max-width: 950px) {
    SECTION.work DIV.workitem ,
    SECTION.work H2 {margin-left:50%;padding-left:80px}
    SECTION.quote H2 {font-size:24px}
    SECTION.quote p.quote {font-size:24px}
    SECTION.quote p.quote:before {margin-left:-13px}
    SECTION.quote {padding:40px 25px}
    SECTION.quote > DIV > ARTICLE {padding:40px 25% 40px 25px}
    SECTION.quote-right > DIV > ARTICLE {padding:40px 25px 40px 22%}
    SECTION.quote .slider-mini {left:55%}
    SECTION.quote-right .slider-mini {left:0;right:60%}
    SECTION.graph H2, SECTION.h2 H2 {padding:40px}
    DIV.content > SECTION.h2:first-child {padding-top:100px}
    SECTION.imagefull {padding:25px}
    SECTION.imagefull > DIV > ARTICLE {padding:5%}
    SECTION.imagefull H3 {font-size:24px;letter-spacing:2px}
    SECTION.images-half H2 {font-size:24px;top:40px}
    SECTION.images-half {padding:25px}
    SECTION.images-half .slider-mini {top:100px;bottom:25px;left:25px;right:25px}
    SECTION.images-half .slider-mini .next {right:-26px}
    SECTION.images-half .slider-mini .prev {left:-32px}
}

@media screen and (max-width: 750px) {
    BODY {font-size:15px}
    .home .nav-logo .white {display:none}
    .home .nav-logo .black {opacity:1}
    .nav-logo {padding:11px 15px}
    .video H2 {font-size:42px}
    .video .payoff {transform:none;top:5%;left:5%;right:5%}
    .video-wrapper {height:calc(100vh - 50px)}
    .video P:first-of-type {font-size:1em;line-height:1.4em}
    .video .down {bottom:-20px}
    .nav LI A {color:#000;padding:10px 20px}
    .nav-container {top:50px;width:260px;transform:translateX(260px)}
    .nav0 {float:left}
    .nav0 > LI > A:after {display:none}
    SECTION.quote p.quote,
    SECTION.quote H2 {font-size:20px;letter-spacing:2px}
    SECTION.quote {padding:20px}
    SECTION.quote p.quote:before {margin-left:-10px}
    SECTION.quote > DIV > ARTICLE {padding:15px;margin-right:0;margin-bottom:115vw}
    SECTION.quote-right > DIV > ARTICLE {margin-left:0}
    SECTION.quote .slider-mini {left:15px;right:15px;bottom:auto;top:120%;height:0;padding-bottom:66.666%}
    DIV.slider .next, DIV.slider .prev {bottom:-55px}
    .button1, .button2 {padding:9px}
    SECTION.work .img {top:50px;right:65%}
    SECTION.work DIV.workitem, SECTION.work H2 {margin-left:35%;padding-left:15px;font-size:24px;letter-spacing:2px;padding-right:10px}
    SECTION.work H3,
    SECTION.work H2 {padding-top:50px}
    SECTION.work H3 {font-size:20px;letter-spacing:2px}
    SECTION.work DIV.workitem {font-size:16px}
    SECTION.work DIV.workitem UL {line-height:1.3em}
    SECTION.work DIV.workitem UL UL {font-size:14px;line-height:1.3em;margin-left:5px}
    SECTION.work .icon {left:auto;right:72.5%;width:20vw;height:20vw;border-width:1vw}
    SECTION.imagefull {padding:30px 15px}
    SECTION.imagefull-textright > DIV > ARTICLE {margin-left:0}
    SECTION.imagefull-textcenter > DIV > ARTICLE {margin-left:0}
    SECTION.imagefull > DIV > ARTICLE {max-width:none}
    SECTION.graph H2, SECTION.h2 H2 {padding:45px 15px 15px;font-size:30px;letter-spacing:3px}
    .icons .left {width:100%;float:none}
    .icons .right {position:relative}
    SECTION.h2 + SECTION.quote {padding-top:15px}
    DIV.slider-big {padding-bottom:120%;margin-bottom:60px}
    DIV.slider-big > DIV {top:60px}
    .home DIV.slider-big > DIV {top:10px}
    .home DIV.slider-big {margin-bottom:10px}
    DIV.slider-big H3 {line-height:1.1em;font-size:20px;letter-spacing:2px;margin:0 -20%}
    SECTION.certifications {padding:15px}
    SECTION.certifications H3 {padding-bottom:15px;font-size:20px;letter-spacing:2px}
    .home SECTION.certifications .item {padding:10px;width:40%}
    SECTION.certifications .item {padding:10px;width:90%}
    SECTION.certifications H4 {line-height:1.1em}
    DIV.content > SECTION.h2:first-child {padding-top:0}
}
@media screen and (max-width: 550px) {
    .icons .flex {flex-wrap: wrap;}
    .icons .flex > DIV {width:50%;height:50%;flex: 1 0 auto;border-width:1px}
}
@media screen and (max-width: 400px) {
    .video H2 {font-size:37px}
}
@media screen and (max-width: 350px) {
    .video H2 {font-size:32px}
    .video P:first-of-type {line-height:1.2em}
}