@font-face {/*Textos*/
    font-family: "MaisonNeue-Book";
    src: url(../fonts/montserrat/montserrat-extrabold.ttf) format('truetype');
    /*src: url(../fonts/MaisonNeue-Book.woff) format("woff");*/
}

@font-face {/*Standing Bird*/
    font-family: "DrukWide-Medium";
    /*src: url(../fonts/Didact_Gothic/DidactGothic-Regular.ttf) format('truetype');*/
    src: url(../fonts/Montserrat/Montserrat-Thin.ttf) format('truetype');
    /*src: url(../fonts/DrukWide-Medium.woff) format("woff");*/
}

@font-face {/*Anchors*/
    font-family: "MaisonNeueExtendedMedium";
    src: url(../fonts/Kanit/Kanit-Thin.ttf) format('truetype');
    /*src: url(../fonts/MaisonNeueExtendedMedium.woff) format("woff");*/
}

@font-face {/*Services*/
    font-family: "MaisonNeue-Mono";
    src: url(../fonts/Rajdhani/Rajdhani-Bold.ttf) format('truetype');
    /*src: url(../fonts/MaisonNeue-Mono.woff) format("woff");*/
}

body {
    background: #0A0A0A;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
}

pre {
    display: none;
}

#inspiration {
    background: #0b2633;
    color: #fff;
}

.SBlogo {
    margin-top: 8em;
    margin-left: 0em;
    font-family: 'DrukWide-Medium';
    /*font-size: 0.8em;*/
}
    .SBlogo h3 {
        color: #fff;
        font-size: 1.7em;
    }
    .SBlogo img {
        height: 5em;
        margin-top: -1em;
        margin-left: 1.2em;
    }

    .row .SBlogo {
        margin-top: 2em;
    }

.colorChange {
    background-color: #fff !important;
}

.textChange {
    color: #fff !important;
    transition: color .4s ease;
}

h1, h2, h3, h4, h5 {
    font-family: 'DrukWide-Medium';
    font-weight: 300;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0A0A0A;
}

h1 {
    font-size: 15em;
    letter-spacing: -.3rem;
    line-height: 1em;
}

p {
    font-family: 'MaisonNeue-Book';
    font-weight: 300;
    font-size: 1.7em;
    margin: 0;
    line-height: 1.6em;
}

a {
    font-family: 'MaisonNeueExtendedMedium';
    font-weight: 300;
    font-size: 1.7em;
    margin: 0;
    line-height: 1.6em;
    text-decoration: none;
    color: #0A0A0A;
}

    a, a > span {
        position: relative;
        color: inherit;
        text-decoration: none;
        line-height: 24px;
    }

        a:before, a:after {
            content: '';
            position: absolute;
            transition: transform .5s ease;
        }

a {
    display: inline-block;
    padding-top: 0;
    padding-bottom: 5px;
    overflow: hidden;
}

    a:before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #0A0A0A;
        transform: translateX(-130%);
    }

    a:hover:before {
        transform: translateX(0);
    }

ul {
    padding: 0;
}

    ul li {
        font-family: 'MaisonNeue-Mono';
        list-style: none;
        padding: 0;
    }

.align-top {
    align-self: flex-start;
}

.align-bottom {
    align-self: flex-end;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1337;
    background:;
    width: 100%;
    padding: 0 0;
    padding-top: 40px;
    mix-blend-mode: difference;
    transition: padding 700ms;
}

    header h2 {
        font-size: 1em;
        font-family: 'MaisonNeue-Book';
        color: #fff;
        padding-left: 18px;
        mix-blend-mode: difference;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.align-top {
    padding-top: 20px;
}

.full-opacity {
    opacity: 1 !important;
}

.nav {
    margin-top: 5px;
    z-index: 9999;
    transition: opacity ease-in-out .3s;
    float: left;
}

    .nav li {
        list-style: none;
        float: left;
        padding: 0 14px;
        color: #fff;
    }

        .nav li:first-child {
            padding-left: 18px;
        }

    .nav a {
        color: #fff;
        font-size: 1.5em;
    }

header h2 a {
    padding-bottom: 3px;
}

.nav a:before {
    background: #fff;
}

.oblique-line {
    position: absolute;
    font-size: 1.3em;
    padding-left: 15px;
}

.float-center {
    position: sticky;
}

.main-content {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.light-bg {
    background-color: #fff;
    transition: background-color 1.5s ease;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.padding-0 {
    padding: 0;
}

footer {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 530px;
    background: #0A0A0A;
    padding-top: 80px;
    color: #fff;
}

    footer h4 {
        font-family: 'DrukWide-Medium';
        font-weight: 300;
        font-size: 2.5em;
        margin: 0;
        padding-left: 15px;
        padding-top: 15px;
    }

    footer h5 {
        letter-spacing: 0;
        font-size: .9em;
        font-family: 'DrukWide-Medium';
        padding-bottom: 15px;
        color: #fff;
    }

    footer .footer-list {
        padding-bottom: 40px;
    }

    footer p {
        font-size: 1.5em;
    }

    footer a {
        border-bottom: 1px solid #fff;
        padding-bottom: 0;
        font-size: 1.5em;
        transition: all ease-in-out .3s;
        line-height: 1.4em;
    }

        footer a:hover {
            border-bottom: 1px solid #0A0A0A;
        }

    footer ul {
        margin: 0;
    }

    footer li {
        padding-bottom: 3px;
    }

    footer .footer-block {
        padding-bottom: 20px;
        align-content: flex-start;
    }

    footer .last {
        padding-top: 30px;
    }

        footer .last p {
            font-size: 1.3em;
            opacity: .2;
            font-family: 'MaisonNeueExtendedMedium';
        }

        footer .last .throwback a {
            margin-left: 15px;
            border-bottom: none;
            opacity: .2;
            font-size: 1.3em;
        }

            footer .last .throwback a:hover {
                opacity: 1;
            }

.full-height {
    height: 100%;
}

.arrow-down {
    margin: 0 auto;
    height: 120px;
    width: 100px;
    bottom: 22px;
    padding-left: 35px;
    position: absolute;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .arrow-down:hover #arrow-circle {
        opacity: 1;
    }

    .arrow-down #arrow-circle {
        opacity: .3;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        transition: opacity ease-in-out .3s;
    }

#arrow-line {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.change-bg {
    position: absolute;
    height: 100vh;
    min-height: 880px;
    background-color: #0A0A0A;
    transition: background-color .4s ease;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.cover-lg {
    position: relative;
    height: 90vh;
    width: 100%;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .cover-lg h1 {
        color: #fff;
        transition: color .4s ease;
    }

        .cover-lg h1.hero {
            font-family: 'DrukWide-Medium';
            letter-spacing: normal;
            font-size: 9em;
            line-height: 1.1em;
            color: #fff;
            text-transform: uppercase;
            transition: color .4s ease;
            padding-top: 25px;
            padding-left: 4px;
            justify-content: flex-start;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            cursor: default;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

#messenger, #messenger2, #messenger3 {
    font-family: 'DrukWide-Medium';
    white-space: nowrap;
    float: left;
    display: inline-block;
    text-align: left;
}

.cover-lg h1.hero b {
    font-weight: 300;
}

.cover-lg .right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

    .cover-lg .right p {
        font-size: 1.7em;
        padding-right: 15px;
    }

    .cover-lg .right .opacity {
        opacity: .5;
        font-size: 1.1em;
        font-family: 'MaisonNeue-Book';
    }

@keyframes animate {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.projects {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    height: 2600px;
}

    .projects .sub-h {
        color: #0A0A0A;
        font-size: 1.4em;
        margin: 0;
        font-family: 'Sporting-Grotesque-Regular';
        text-transform: uppercase;
    }

.project-item {
    margin-bottom: 160px;
}

    .project-item h3 {
        font-family:;
        font-weight: 300;
        font-size: 2.3em;
        letter-spacing: -.08rem;
    }

    .project-item img {
        width: 100%;
    }

.project-desc {
    padding-top: 40px;
}

.proposition-lg h3 {
    font-size: 12em;
    text-align: center;
}

#left, #right {
    margin: 30px 0;
    backface-visibility: visible !important;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

#floater {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.portfolio-container .role {
    float: right;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 20px;
    font-size: 1em;
    font-family: 'MaisonNeue-Book';
}

.portfolio-container .desc {
    padding: 20px 0 100px 0;
}

    .portfolio-container .desc h3 {
        font-size: 2.8em;
        letter-spacing: -2px;
        line-height: 1.3em;
    }

    .portfolio-container .desc a {
        line-height: normal;
    }

.p-image:hover ~ .desc a:before {
    transform: translateX(0);
}

.arrow-link {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.p-image {
    overflow: hidden;
}

    .p-image canvas {
        transition: transform .5s ease;
    }

    .p-image:hover canvas {
        transform: scale(1.3);
    }

.arrow-link-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: .4em;
    overflow: hidden;
}

.arrow-link-svg {
    flex-shrink: 0;
    margin-top: .1em;
    -webkit-transform: translateX(-13px);
    transform: translateX(-13px);
    transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    transition: transform .4s cubic-bezier(.4,0,.2,1),-webkit-transform .4s cubic-bezier(.4,0,.2,1);
}

.desc a:hover .arrow-link-svg {
    -webkit-transform: none;
    transform: none;
}

.p-image:hover ~ .desc a .arrow-link-svg {
    -webkit-transform: none;
    transform: none;
}

.portfolio-container svg [data-stroke="1"] {
    stroke: #161616;
}

.portfolio-container img {
    width: 100%;
    display: block;
    margin: 30px 0;
    vertical-align: top;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.item-1 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-1:hover {
        cursor: pointer;
    }

.item-2 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-2:hover {
        cursor: pointer;
    }

.item-3 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-3:hover {
        cursor: pointer;
    }

.item-4 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-4:hover {
        cursor: pointer;
    }

.item-5 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-5:hover {
        cursor: pointer;
    }

.item-6 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-6:hover {
        cursor: pointer;
    }

.item-7 {
    height: 50vh;
    margin: 10px auto;
    position: relative;
}

    .item-7:hover {
        cursor: pointer;
    }

.how-to {
    background: #0A0A0A;
    color: #fff;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .how-to p {
        font-size: 1.7em;
        padding-right: 15px;
        padding-bottom: 60px;
    }

    .how-to h4 {
        text-transform: uppercase;
        letter-spacing: 2px;
        padding-bottom: 20px;
        font-size: 1em;
        font-family: 'MaisonNeue-Book';
        color: #fff;
    }

    .how-to .offering-list {
        margin-right: 15px;
        padding-bottom: 60px;
    }

        .how-to .offering-list ul {
            margin: 0;
        }

        .how-to .offering-list li {
            border-bottom: 1px solid #3B3B3B;
            padding: 10px 0;
            font-size: 1.6em;
        }

            .how-to .offering-list li:first-child {
                padding-top: 0;
            }

            .how-to .offering-list li:last-child {
                border-bottom: none;
            }

.banderoll {
    padding: 180px 0;
    position: relative;
    height: 600px;
    width: 100%;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.tickerwrapper {
    position: relative;
    top: 0;
    left: 0%;
    width: 99.9%;
    height: 150px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

ul.list {
    position: relative;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Sporting-Grotesque-Regular';
    font-weight: 200;
    letter-spacing: -2px;
    color: #fff;
    font-size: 7em;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.tickerwrapper {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .tickerwrapper .second {
        display: none;
    }

    .tickerwrapper .third {
        display: none;
    }

ul.list.cloned {
    position: absolute;
    top: 0;
    left: 0;
}

ul.list li {
    float: left;
    padding-left: 150px;
    font-family: 'Sporting-Grotesque-Regular';
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    text-transform: uppercase;
    font-weight: 200;
}

.about {
    background: #fff;
    color: #0A0A0A;
    padding-top: 130px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

    .about h3 {
        font-size: 5em;
        padding-left: 15px;
        padding-top: 30px;
        line-height: 1.1em;
        letter-spacing: -2px;
    }

    .about p {
        padding-top: 100px;
        padding-left: 15px;
        padding-bottom: 30px;
    }

.slider-section {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.slick-track {
    display: flex;
}

    .slick-track .slick-slide {
        display: flex;
        height: auto;
    }

.slider, .slick-list, .slick-track {
    height: 100%;
}

.slider-section {
    color: #fff;
}

.padding-0 {
    transition: background .25s ease-in-out;
}

.slider-wrapper {
    padding: 45px 15px;
    transition: background .25s ease-in-out;
    height: 80vh;
    padding-right: 0;
}

.link-box li a {
    cursor: default;
    z-index: 1;
}

    .link-box li a:hover + .date {
        display: inline-block;
    }

.slider-wrapper .date {
    font-family: 'MaisonNeue-Mono';
    vertical-align: top;
    margin-left: 0;
    height: 30px;
    display: none;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 3;
}

    .slider-wrapper .date .container {
        display: block;
        padding-left: 10px;
        margin-left: 0;
        letter-spacing: 0;
        -webkit-animation: moving .5s ease-in-out;
        animation: moving .5s ease-in-out;
    }

@keyframes moving {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.link-box {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 30px 0;
}

    .link-box ul {
        padding-left: 35px;
    }

    .link-box li a {
        font-family: 'DrukWide-Medium';
        font-size: 3.5em;
        line-height: normal;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

        .link-box li a:before {
            height: 5px;
            background: #FFF;
        }

    .link-box a.active:before {
        height: 5px !important;
        background: #FFF;
        display: inline-block !important;
        transform: translateX(0%);
    }

.slider-id-1 {
    background-image: url(../img/kry-case.jpg);
    background-size: cover;
    background-position: center center;
}

.slider-id-2 {
    background-image: url(../img/drinkspiration-case.jpg);
    background-size: cover;
    background-position: center center;
}

.slider-id-3 {
    background-image: url(../img/tranquil-case.jpg);
    background-size: cover;
    background-position: center center;
}

.slider-id-4 {
    background-image: url(../img/absolutcom-case.jpg);
    background-size: cover;
    background-position: center center;
}

.slider-id-5 {
    background-image: url(../img/trackster-case.jpg);
    background-size: cover;
    background-position: center center;
}

.slider-id-6 {
    background-image: url(../img/wrapp-case.jpg);
    background-size: cover;
    background-position: center center;
}

.rotate-headline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotate-header {
    width: 100%;
    height: 100%;
    flex: 0 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .rotate-header h4 {
        font-size: 1.2em;
        transform: rotate(-90deg);
        white-space: nowrap;
        position: absolute;
        color: #fff;
        text-transform: uppercase;
    }

.height-100 {
    height: 100%;
}

.our-services {
    background: #0b2633;
    padding: 130px;
}

    .our-services .sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 20px;
    }

    .our-services h3 {
        color: #fff;
        padding-bottom: 10px;
        font-size: 1.7em;
    }

    .our-services h4 {
        color: #fff;
        padding-top: 35px;
        padding-bottom: 5px;
        font-size: .9em;
    }

    .our-services .lore-list-first {
        margin-top: 0;
    }

        .our-services .lore-list-first h4 {
            padding-top: 0;
        }

    .our-services p {
        color: #fff;
        font-size: 1.7em;
    }

    .our-services ul li {
        color: #fff;
        font-size: 1.3em;
    }

    .our-services li {
        padding-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #555;
    }

        .our-services li:last-child {
            border-bottom: none;
        }

    .our-services a {
        padding-top: 8px;
        color: #fff;
        font-family: 'MaisonNeue-Book';
        border-bottom: 1px solid #fff;
        transition: all ease-in-out .3s;
        line-height: .8em;
    }

        .our-services a:hover {
            border-bottom: 1px solid #0A0A0A;
        }

.collage {
    height: 80vh;
    background: #eee;
    color: #016E53;
    display: flex;
    width: 100%;
    transform: translate3d(0,0,0);
    overflow: hidden;
}

    .collage .huge-text {
        color: #016E53;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        height: 100%;
    }

    .collage .text-col {
        display: inline-block;
        align-self: flex-end;
        padding-bottom: 45px;
        color: #0A0A0A;
        z-index: 2;
    }

    .collage h2 {
        color: #0A0A0A;
        font-size: 9em;
        z-index: 2;
        text-transform: none;
        user-select: none;
    }

.slideshow > div {
    z-index: 1;
    height: 3378px;
    width: 930px;
    background: url(../img/office-collage.jpg);
    position: absolute;
    top: 0;
    left: 100px;
    z-index: -1;
    touch-action: none;
    transform: translate3d(0,0,0);
    pointer-events: none;
}

.slideshow .move-1 {
    animation: moveSlideshow 24s linear infinite;
    touch-action: none;
    pointer-events: none;
}

@keyframes moveSlideshow {
    0% {
        transform: translateY(28.6666%);
    }

    100% {
        transform: translateY(-100.6666%);
    }
}

.clients {
    padding: 130px 0;
    padding-bottom: 85px;
}

    .clients h3 {
        font-size: 2.4em;
        text-align: center;
    }

    .clients .logo img {
        width: 100%;
    }

.big-headline.fade-in-copy .words-wrap {
    display: inline-block;
    perspective: 300px;
}

.big-headline.fade-in-copy b {
    opacity: 0;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

    .big-headline.fade-in-copy b.is-visible {
        position: relative;
        opacity: 1;
        animation: fade-in-copy-in 1.2s ease-in-out;
    }

    .big-headline.fade-in-copy b.is-hidden {
        animation: fade-in-copy-out .4s ease-in-out;
    }

@keyframes fade-in-copy-in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    60% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-copy-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@media (min-width:0) {
    body {
        margin-bottom: 0;
    }

    p {
        font-size: 1.2em;
        line-height: 1.4em;
    }

    a {
        font-size: 1.2em;
    }

    .clients {
        background: #fff;
    }

    .arrow-up {
        height: 19px;
        width: 20px;
        background-image: url(../img/arrow-up.svg);
        display: inline-block;
        background-size: 60%;
        background-position: bottom center;
        background-repeat: no-repeat;
    }

    .slick-slider {
        touch-action: auto;
        -ms-touch-action: auto;
    }

    .cover-lg .right .opacity {
        opacity: .5;
        font-size: 1.1em;
        line-height: 1.3em;
    }

    .projects .sub-h {
        display: none;
    }

    .cover-lg {
        height: 82vh;
    }

        .cover-lg .col-lg-1 {
            display: none;
        }

        .cover-lg h1.hero {
            font-size: 2.5em;
            padding-top: 12px;
            padding-left: 0;
        }

        .cover-lg .right p {
            font-family: 'DrukWide-Medium';
            font-size: 1.2em;
            padding-right: 0;
        }

    .portfolio-container .role {
        font-size: .9em;
        float: none;
        display: inline-block;
        padding-bottom: 7px;
    }

    .about {
        padding-top: 80px;
    }

    .about-column {
        padding-bottom: 70px;
    }

    .how-to h4 {
        font-size: .9em;
    }

    .how-to .offering-list li {
        font-size: 1.2em;
    }

    .nav {
        display: none;
    }

        .nav a {
            font-size: 1.3em;
        }

        .nav li:last-child {
            padding-right: 0;
        }

    .main-content .right {
        padding: 15px 15px;
    }

    .arrow-down {
        padding-left: 0;
        top: 150px;
        width: min-content;
        left: -4px;
    }

    .projects {
        height: auto;
        padding-bottom: 20px;
    }

    .float-center {
        position: relative;
    }

    .about-column {
        padding-left: 0;
    }

    #right {
        margin: 0;
    }

    #left {
        margin-bottom: 0;
    }

    .our-services {
        padding: 45px 15px;
        padding-bottom: 30px;
    }

        .our-services h3 {
            font-size: 1.2em;
        }

        .our-services p {
            font-size: 1.2em;
        }

        .our-services .lore-list-first h4 {
            padding-top: 40px;
        }

        .our-services h4 {
            font-size: .9em;
            padding-top: 20px;
        }

        .our-services ul li {
            font-size: 1em;
        }

    .collage {
        height: 80vh;
    }

        .collage h2 {
            font-size: 3.5em;
        }

        .collage .text-col {
            padding-bottom: 15px;
        }

    .slideshow > div {
        z-index: 1;
        opacity: 1;
        height: 25928px;
        width: 930px;
        background: url(../img/office-collage.jpg);
        background-repeat: repeat-y;
        background-size: 40%;
        opacity: .15;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate3d(0,0,0);
    }

    .slideshow .move-1 {
        animation: moveSlideshow 178s linear infinite;
    }

    @keyframes moveSlideshow {
        0% {
            transform: translateY(5.6666%);
        }

        100% {
            transform: translateY(-100.6666%);
        }
    }

    .clients {
        padding: 30px 0;
        padding-top: 45px;
    }

        .clients h3 {
            font-size: 1.8em;
            padding-bottom: 10px;
        }

        .clients p {
            padding-bottom: 18px;
            text-align: center;
        }

        .clients .logo img {
            width: 80%;
            text-align: center;
            margin: 0 auto;
            display: block;
        }

    footer {
        padding-top: 45px;
    }

        footer .footer-list {
            padding-top: 45px;
            padding-bottom: 0;
        }

        footer .phone {
            font-family: 'MaisonNeueExtendedMedium';
        }

    .contact-content p {
        padding-top: 20px;
    }

    .hide-r {
        display: none;
    }

    .show-r {
        display: block;
    }

    .portfolio-container .desc h3 {
        font-size: 1.5em;
        letter-spacing: -1px;
        line-height: 1.3em;
    }

    .about p {
        padding-left: 0;
        font-size: 1.2em;
        padding-top: 20px;
    }

    .slick-slide {
        margin: 0 15px;
    }

    .banderoll {
        height: 200px;
        padding: 100px 0;
    }

    .tickerwrapper {
        height: 50px;
    }

    ul.list {
        font-size: 2.5em;
    }

    .how-to p {
        font-size: 1.2em;
    }

    .about h3 {
        font-size: 2.6em;
        padding-top: 60px;
        padding-left: 0;
    }

    .visible {
        position: relative;
    }

    footer {
        height: auto;
        z-index: 1;
        position: relative;
    }

        footer h4 {
            font-size: 2em;
            line-height: 1.2em;
            padding-left: 0;
            padding-top: 0;
            color: #fff;
        }

        footer p {
            font-size: 1.1em;
        }

        footer a {
            font-size: 1.1em;
            margin-bottom: 3px;
        }

        footer .footer-block {
            padding-bottom: 45px;
            padding-left: 0;
        }

        footer .last {
            padding-top: 0;
        }

            footer .last .throwback a {
                margin-left: 0;
                font-size: 1em;
            }

            footer .last p {
                font-size: 1em;
            }

    a[href^="tel"] {
        color: inherit;
        text-decoration: none;
        font-size: inherit;
    }

    .slider {
        padding: 45px 0;
        height: auto;
    }

    .slick-track .slick-slide {
        height: 400px;
    }

    .slick-dots {
        bottom: auto;
    }

        .slick-dots li button:before {
            background: #fff;
            content: '';
            height: 5px;
        }

        .slick-dots li.slick-active button:before {
            opacity: 1;
        }

    .link-box {
        display: none;
    }

    .height-100 {
        display: none;
    }

    .rotate-headline {
        display: none;
    }

    .slider-wrapper {
        padding: 0;
        height: auto;
    }

    .project-name {
        display: block;
        width: 100%;
        height: min-content;
        font-size: 1.2em;
        font-family: 'DrukWide-Medium';
        padding-bottom: 15px;
    }

        .project-name .sub {
            font-family: 'MaisonNeue-Mono';
            font-size: .9em;
            padding-top: 3px;
            display: block;
        }

    .slider-id-1, .slider-id-2, .slider-id-3, .slider-id-4, .slider-id-5, .slider-id-6 {
        background-position-y: 60px;
        background-repeat: no-repeat;
    }

    .col-empty {
        display: none !important;
    }
}

@media (min-width:768px) {
    body {
        margin-bottom: 0;
    }

    .color-id-1 a {
        text-shadow: 4px 2px 0 #92B4B3,-4px 2px 0 #92B4B3,3px 2px 0 #92B4B3,-4px 2px 0 #92B4B3;
        color: #0b2633;
    }

    .color-id-2 a {
        text-shadow: 4px 2px 0 #EA97A4,-4px 2px 0 #EA97A4,3px 2px 0 #EA97A4,-4px 2px 0 #EA97A4;
        color: #0c1375;
    }

    .color-id-3 a {
        text-shadow: 4px 2px 0 #CBB3A0,-4px 2px 0 #CBB3A0,3px 2px 0 #CBB3A0,-4px 2px 0 #CBB3A0;
        color: #630808;
    }

    .color-id-4 a {
        text-shadow: 4px 2px 0 #656363,-4px 2px 0 #656363,3px 2px 0 #656363,-4px 2px 0 #656363;
        color: #0b051f;
    }

    .color-id-5 a {
        text-shadow: 4px 2px 0 #EBA281,-4px 2px 0 #EBA281,3px 2px 0 #EBA281,4px 2px 0 #EBA281;
        color: #2005b3;
    }

    .color-id-6 a {
        text-shadow: 4px 2px 0 #B1A79A,-4px 2px 0 #B1A79A,3px 2px 0 #B1A79A,4px 2px 0 #B1A79A;
        color: #ffef35;
    }

    p {
        font-size: 1.4em;
        line-height: 1.4em;
    }

    a {
        font-size: 1.4em;
    }

    .cover-lg .right .opacity {
        opacity: .5;
        font-size: 1.2em;
    }

    .projects .sub-h {
        display: none;
    }

    .cover-lg {
        height: 82vh;
    }

        .cover-lg .col-lg-1 {
            display: none;
        }

        .cover-lg h1.hero {
            font-size: 4.5em;
            padding-top: 30px;
        }

        .cover-lg .right p {
            font-family: 'DrukWide-Medium';
            font-size: 1.3em;
            padding-right: 0;
        }

    .contact-content p {
        font-size: 1.4em;
    }

    .portfolio-container .role {
        font-size: .9em;
        float: none;
        display: inline-block;
        padding-bottom: 7px;
    }

    .about {
        padding-top: 80px;
    }

    .about-column {
        padding-bottom: 70px;
    }

    .how-to h4 {
        font-size: .9em;
    }

    .how-to .offering-list li {
        font-size: 1.2em;
    }

    .nav {
        display: none;
    }

        .nav a {
            font-size: 1.3em;
        }

        .nav li:last-child {
            padding-right: 0;
        }

    .main-content .right {
        padding: 30px 15px;
    }

    .arrow-down {
        margin: 0 auto;
        height: 120px;
        width: 100px;
        bottom: 0;
        padding-left: 35px;
        position: absolute;
        -webkit-appearance: none;
        background: none;
        border: 0;
        cursor: pointer;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        top: auto;
    }

    .projects {
        height: auto;
        padding-bottom: 20px;
    }

    .float-center {
        position: relative;
    }

    .about-column {
        padding-left: 0;
    }

    #right {
        margin: 0;
    }

    #left {
        margin-bottom: 0;
    }

    .our-services {
        padding: 45px 15px;
        padding-bottom: 30px;
    }

        .our-services h3 {
            font-size: 1.4em;
        }

        .our-services p {
            font-size: 1.4em;
            padding-bottom: 40px;
        }

        .our-services .lore-list-first h4 {
            padding-top: 0;
        }

        .our-services h4 {
            font-size: .9em;
            padding-top: 20px;
        }

        .our-services ul li {
            font-size: 1em;
        }

    .collage h2 {
        font-size: 4.5em;
    }

    .collage .text-col {
        padding-bottom: 30px;
    }

    .slideshow > div {
        z-index: 1;
        opacity: 1;
        height: 25928px;
        width: 930px;
        background: url(../img/office-collage.jpg);
        background-repeat: repeat-y;
        background-size: 35%;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 35px;
        transform: translate3d(0,0,0);
    }

    .slideshow .move-1 {
        animation: moveSlideshow 178s linear infinite;
    }

    @keyframes moveSlideshow {
        0% {
            transform: translateY(5.6666%);
        }

        100% {
            transform: translateY(-100.6666%);
        }
    }

    .clients {
        padding: 30px 0;
        padding-top: 45px;
    }

        .clients h3 {
            font-size: 1.8em;
            padding-bottom: 10px;
        }

        .clients p {
            text-align: center;
            padding-bottom: 15px;
        }

        .clients .logo img {
            width: 80%;
            text-align: center;
            margin: 0 auto;
            display: block;
        }

    footer {
        padding-top: 45px;
    }

        footer .footer-list {
            padding-top: 45px;
            padding-bottom: 0;
        }

        footer .phone {
            font-family: 'MaisonNeueExtendedMedium';
        }

    .contact-content p {
        padding-top: 20px;
    }

    .hide-r {
        display: none;
    }

    .show-r {
        display: block;
    }

    .portfolio-container .desc h3 {
        font-size: 1.5em;
        letter-spacing: -1px;
        line-height: 1.3em;
    }

    .about p {
        padding-left: 0;
        font-size: 1.2em;
        padding-top: 20px;
    }

    .slick-slide {
        margin: 0 15px;
    }

    .banderoll {
        height: 200px;
        padding: 100px 0;
    }

    .tickerwrapper {
        height: 50px;
    }

    ul.list {
        font-size: 2.5em;
    }

    .how-to p {
        font-size: 1.2em;
    }

    .about h3 {
        font-size: 2.6em;
        padding-top: 60px;
        padding-left: 0;
    }

    .visible {
        position: relative;
    }

    footer {
        height: auto;
        z-index: 1;
        position: relative;
    }

        footer h4 {
            font-size: 2em;
            line-height: 1.2em;
            padding-left: 0;
            padding-top: 0;
            color: #fff;
        }

        footer p {
            font-size: 1.1em;
        }

        footer a {
            font-size: 1.1em;
            margin-bottom: 3px;
        }

        footer .footer-block {
            padding-bottom: 45px;
            padding-left: 0;
        }

        footer .last {
            padding-top: 0;
        }

            footer .last .throwback a {
                margin-left: 0;
                font-size: 1em;
            }

            footer .last p {
                font-size: 1em;
            }

    a[href^="tel"] {
        color: inherit;
        text-decoration: none;
        font-size: inherit;
    }

    .slider {
        padding: 45px 0;
        height: auto;
    }

    .slick-track .slick-slide {
        height: 700px;
    }

    .slick-dots {
        bottom: auto;
    }

        .slick-dots li button:before {
            background: #fff;
            content: '';
            height: 5px;
        }

        .slick-dots li.slick-active button:before {
            opacity: 1;
        }

    .link-box {
        display: none;
    }

    .height-100 {
        display: none;
    }

    .rotate-headline {
        display: none;
    }

    .slider-wrapper {
        padding: 0;
        height: auto;
    }

    .project-name {
        display: block;
        width: 100%;
        height: min-content;
        font-size: 1.4em;
        font-family: 'DrukWide-Medium';
        padding-bottom: 15px;
    }

        .project-name .sub {
            font-family: 'MaisonNeue-Mono';
            font-size: .8em;
            padding-top: 3px;
            display: block;
        }

    .slider-id-1, .slider-id-2, .slider-id-3, .slider-id-4, .slider-id-5, .slider-id-6 {
        background-position-y: 70px;
        background-repeat: no-repeat;
    }

    .col-empty {
        display: inline-block !important;
    }
}

@media (min-width:992px) {
    body {
        margin-bottom: 0;
    }

    p {
        font-size: 1.4em;
        line-height: 1.5em;
    }

    a {
        font-size: 1.4em;
    }

    .projects .sub-h {
        display: inline-block;
    }

    .cover-lg {
        height: 95vh;
        min-height: 880px;
    }

        .cover-lg h1.hero {
            font-size: 5em;
            padding-top: 15px;
            padding-left: 15px;
        }

        .cover-lg .right p {
            font-size: 1.3em;
        }

    .arrow-down {
        margin: 0 auto;
        height: 120px;
        width: 100px;
        bottom: 18px;
        padding-left: 35px;
        position: absolute;
        -webkit-appearance: none;
        background: none;
        border: 0;
        cursor: pointer;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        top: auto;
    }

        .arrow-down a {
            padding-bottom: 0;
        }

    .nav li:first-child {
        padding-left: 0;
    }

    .portfolio-container .role {
        font-size: .9em;
        float: none;
        display: inline-block;
        padding-bottom: 7px;
    }

    .about {
        padding-top: 80px;
    }

    .about-column {
        padding-bottom: 70px;
    }

    .how-to h4 {
        font-size: .9em;
    }

    .how-to .offering-list li {
        font-size: 1.2em;
    }

    .nav {
        display: inline-block;
    }

        .nav a {
            font-size: 1.05em;
        }

        .nav li:last-child {
            padding-right: 0;
        }

        .nav li {
            padding: 0 8px;
        }

    .oblique-line {
        display: none;
    }

    .main-content .right {
        padding: 45px 0;
        padding-left: 15px;
    }

    .arrow-down {
        display: block;
    }

    .projects {
        height: auto;
        padding-bottom: 20px;
    }

    .float-center {
        position: relative;
    }

    #right {
        margin: 30px 0;
    }

    #left {
        margin-bottom: 0;
    }

    .portfolio-container .desc {
        padding: 10px 0 40px 0;
    }

    footer .footer-list {
        padding-top: 40px;
        padding-bottom: 0;
    }

    .hide-r {
        display: none;
    }

    .show-r {
        display: block;
    }

    .portfolio-container .desc h3 {
        font-size: 1.5em;
        letter-spacing: -1px;
        line-height: 1.3em;
    }

    .about p {
        padding-left: 0;
        font-size: 1.4em;
        padding-top: 20px;
    }

    .slick-slide {
        margin: 0 15px;
        margin-left: 0;
    }

    .banderoll {
        height: 300px;
        padding: 100px 0;
    }

    .tickerwrapper {
        height: 80px;
    }

    ul.list {
        font-size: 4em;
    }

    .how-to p {
        font-size: 1.4em;
    }

    .about h3 {
        font-size: 4em;
        padding-top: 60px;
        padding-left: 0;
    }

    .about-column {
        padding-left: 15px;
    }

    .visible {
        position: relative;
    }

    footer {
        height: auto;
        z-index: 1;
        position: relative;
        padding-top: 75px;
    }

        footer h4 {
            font-size: 3em;
            line-height: 1.2em;
            padding-left: 0;
            padding-top: 0;
        }

    .contact-content p {
        font-size: 1.4em;
    }

    footer p {
        font-size: 1em;
    }

    footer a {
        font-size: 1em;
    }

    footer .footer-block {
        padding-bottom: 75px;
        padding-left: 15px;
    }

        footer .footer-block .footer-list:first-of-type {
            padding-top: 8px;
        }

    footer .last .throwback a {
        margin-left: 0;
        font-size: 1em;
    }

    footer .last p {
        font-size: 1em;
    }

    a[href^="tel"] {
        color: inherit;
        text-decoration: none;
        font-size: inherit;
    }

    .link-box {
        display: flex;
    }

    .height-100 {
        height: 100%;
        display: block;
    }

    .rotate-headline {
        display: flex;
    }

    .project-name {
        display: none;
    }

    .slick-slider {
        overflow: hidden;
        width: 100%;
    }

        .slick-slider div.slick-active {
            -webkit-animation: myMove 1s ease-in-out;
            -moz-animation: myMove 1s ease-in-out;
            -o-animation: myMove 1s ease-in-out;
            -ms-animation: myMove 1s ease-in-out;
            animation: myMove 1s ease-in-out;
        }

    @keyframes myMove {
        from {
            transform: scale(1.1);
        }

        to {
            transform: scale(1);
        }
    }

    .col-empty {
        display: flex !important;
    }

    .slideshow > div {
        z-index: 1;
        opacity: 1;
        height: 25928px;
        width: 930px;
        background: url(../img/office-collage.jpg);
        background-repeat: repeat-y;
        background-size: 65%;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 30px;
        transform: translate3d(0,0,0);
    }

    .slideshow .move-1 {
        animation: moveSlideshow 178s linear infinite;
    }

    @keyframes moveSlideshow {
        0% {
            transform: translateY(5.6666%);
        }

        100% {
            transform: translateY(-100.6666%);
        }
    }

    .slider-section {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        overflow: hidden;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

    .slick-track {
        display: flex;
    }

        .slick-track .slick-slide {
            display: flex;
            height: auto;
        }

    .slider, .slick-list, .slick-track {
        height: 100%;
    }

    .slick-list {
        height: 100%;
    }

    .slider-section {
        color: #fff;
    }

    .padding-0 {
        transition: background .25s ease-in-out;
    }

    .slider-wrapper {
        padding: 45px 15px;
        transition: background .25s ease-in-out;
        height: 95vh;
        padding-right: 0;
        min-height: 880px;
    }

    .link-box li a:hover + .date {
        display: inline-block;
    }

    .project-name .sub {
        display: none;
    }

    .slider-wrapper .date {
        font-family: 'MaisonNeue-Mono';
        font-size: .9em;
        padding-top: 8px;
        vertical-align: middle;
        margin-left: 10px;
        height: 30px;
        display: none;
        overflow: hidden;
        position: absolute;
        width: 100%;
        text-transform: uppercase;
        z-index: 3;
    }

        .slider-wrapper .date .container {
            display: block;
            padding-left: 10px;
            margin-left: 0;
            -webkit-animation: moving .5s ease-in-out;
            animation: moving .5s ease-in-out;
        }

    .slider {
        padding: 0;
    }

    @keyframes moving {
        0% {
            transform: translateY(40px);
            opacity: 0;
        }

        60% {
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .link-box {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 30px 0;
    }

        .link-box ul {
            padding-left: 35px;
        }

        .link-box li a {
            font-family: 'DrukWide-Medium';
            font-size: 2em;
            line-height: normal;
            line-height: 1.3em;
        }

            .link-box li a:before {
                height: 5px;
                background: #FFF;
            }

    .slider-id-1 {
        background-image: url(../img/kry-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-2 {
        background-image: url(../img/drinkspiration-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-3 {
        background-image: url(../img/tranquil-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-4 {
        background-image: url(../img/absolutcom-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-5 {
        background-image: url(../img/trackster-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-6 {
        background-image: url(../img/wrapp-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .rotate-headline {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rotate-header {
        width: 100%;
        height: 100%;
        flex: 0 0;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .rotate-header h4 {
            font-size: 1em;
            transform: rotate(-90deg);
            white-space: nowrap;
            position: absolute;
            color: #fff;
            text-transform: uppercase;
        }

    .height-100 {
        height: 100%;
    }

    .our-services {
        padding: 75px 15px;
        padding-bottom: 60px;
    }

    .collage {
        height: 95vh;
        min-height: 880px;
    }

        .collage .text-col {
            padding-bottom: 45px;
        }

    .clients {
        padding: 60px 0;
        padding-top: 75px;
        background: #fff;
    }

        .clients h3 {
            font-size: 2.2em;
            padding-bottom: 15px;
        }

        .clients p {
            text-align: center;
            padding-bottom: 30px;
        }

    .cover-lg {
        background: #0A0A0A;
    }

    #start {
        z-index: 1;
        position: relative;
        margin-bottom: 0;
    }

    footer {
        position: relative;
        bottom: 0;
        z-index: 1;
    }
}

@media (min-width:1040px) {
    .nav li {
        padding: 0 12px;
    }
}

@media (min-width:1200px) {
    body {
    }

    .color-id-1 a {
        text-shadow: 6px 3px 0 #92B4B3,-6px 3px 0 #92B4B3,4px 3px 0 #92B4B3,-6px 3px 0 #92B4B3;
        color: #0b2633;
    }

    .color-id-2 a {
        text-shadow: 6px 3px 0 #EA97A4,-6px 3px 0 #EA97A4,4px 3px 0 #EA97A4,-6px 3px 0 #EA97A4;
        color: #0c1375;
    }

    .color-id-3 a {
        text-shadow: 6px 3px 0 #CBB3A0,-6px 3px 0 #CBB3A0,4px 3px 0 #CBB3A0,-6px 3px 0 #CBB3A0;
        color: #630808;
    }

    .color-id-4 a {
        text-shadow: 6px 3px 0 #656363,-6px 3px 0 #656363,4px 3px 0 #656363,-6px 3px 0 #656363;
        color: #0b051f;
    }

    .color-id-5 a {
        text-shadow: 6px 3px 0 #EBA281,-6px 3px 0 #EBA281,4px 3px 0 #EBA281,6px 3px 0 #EBA281;
        color: #2005b3;
    }

    .color-id-6 a {
        text-shadow: 6px 3px 0 #B1A79A,-6px 3px 0 #B1A79A,4px 3px 0 #B1A79A,6px 3px 0 #B1A79A;
        color: #ffef35;
    }

    p {
        font-size: 1.5em;
        line-height: 1.5em;
    }

    a {
        font-size: 1.5em;
    }

    .nav {
        float: left;
    }

    .clients {
        background: #fff;
    }

        .clients img.logo {
            display: inline-block;
            width: 100%;
            padding: 0 40px;
        }

    .cover-lg {
        height: 95vh;
        min-height: 700px;
    }

        .cover-lg h1.hero {
            font-size: 7em;
            padding-top: 15px;
            padding-left: 10px;
        }

        .cover-lg .right p {
            font-size: 1.3em;
            padding-left: 0;
        }

    .nav a {
        font-size: 1.17em;
    }

    .oblique-line {
        display: inline-block;
        position: absolute;
        font-size: 1.4em;
        padding-left: 10px;
    }

    .nav li {
        padding: 0 15px;
    }

    .lang {
        color: #ccc;
        font-family: 'DrukWide-Medium';
    }

    .langACT {
        font-weight: bold;
        /*   border: solid;
    border-width: thin;
    border-color: #fff; */
        color: #fff;
        margin-right: 15px;
    }

    .langDES {
        font-family: DrukWide-Medium;
        font-size: 0.9em;
    }

    .cover-lg .right .opacity {
        line-height: 1.4em;
    }

    .arrow-down {
        display: inline-block;
    }

    .float-center {
        position: sticky;
    }

    #left, #right {
        margin: 30px 0;
    }

    .portfolio-container .desc {
        padding: 20px 0 100px 0;
    }

        .portfolio-container .desc h3 {
            font-size: 2.2em;
            letter-spacing: -1px;
            line-height: 1.3em;
        }

    .about, .slider-container {
        padding-top: 0;
        height: 1500px;
    }

        .about p {
            padding-top: 30px;
            font-size: 1.7em;
        }

    .slick-slide {
        margin: 0;
    }

    .slider {
        height: 100%;
    }

    .banderoll {
        height: 100%;
        position: absolute;
        padding-top: 0;
    }

    .tickerwrapper {
        transform: translate(0,100%) rotate(-90deg);
        transform-origin: 0 0;
        position: absolute;
        height: 100%;
        width: 100%;
        will-change: transform;
    }

    .portfolio-container .role {
        letter-spacing: 2px;
        padding-bottom: 15px;
        font-size: 1em;
        font-family: 'MaisonNeue-Book';
    }

    .how-to .offering-list li {
        font-size: 1.6em;
    }

    .how-to h4 {
        font-size: 1.3em;
    }

    ul.list li {
        padding-top: 35px;
    }

    ul.list {
        font-size: 4em;
    }

    .tickerwrapper .second {
        display: inline-block;
    }

    .tickerwrapper .third {
        display: inline-block;
    }

    .how-to p {
        font-size: 1.7em;
        padding-top: 130px;
        padding-bottom: 100px;
    }

    .about-column {
        padding: 130px 0;
        padding-left: 15px;
        bottom: 0;
        position: absolute;
    }

        .about-column a {
            margin-left: 0;
            padding-top: 15px;
            font-size: 1.7em;
            padding-bottom: 0;
        }

    .about h3 {
        padding-top: 0;
        font-size: 5em;
    }

    footer {
        padding: 130px;
        padding-bottom: 45px;
    }

    .contact-content p {
        font-size: 1.5em;
    }

    footer h4 {
        font-size: 3em;
        line-height: 1.2em;
        padding-left: 15px;
        padding-top: 0;
    }

    footer p {
        font-size: 1.3em;
    }

    footer a {
        font-size: 1.3em;
    }

    footer .footer-block {
        padding-bottom: 0;
        padding-left: 0;
    }

    footer .last .throwback a {
        margin-left: 15px;
        font-size: 1.3em;
    }

    footer .last {
        padding-top: 110px;
    }

        footer .last p {
            font-size: 1.3em;
        }

    .no-padding {
        padding-bottom: 0 !important;
    }

    .how-to .offering-list:last-child {
        padding-bottom: 130px;
    }

    .slick-track {
        overflow: hidden;
    }

    .hide-r {
        display: block;
    }

    .show-r {
        display: none;
    }

    footer .footer-list {
        padding-top: 70px;
    }

    .contact-content p {
        padding-left: 15px;
        padding-top: 40px;
    }

    .height-100 {
        height: 100%;
    }

    .slider-section {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        overflow: hidden;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

    .slick-track {
        display: flex;
    }

        .slick-track .slick-slide {
            display: flex;
            height: auto;
        }

    .slider, .slick-list, .slick-track {
        height: 100%;
    }

    .slider-section {
        color: #fff;
    }

    .padding-0 {
        transition: background .25s ease-in-out;
    }

    .slider-wrapper {
        padding: 45px 15px;
        transition: background .25s ease-in-out;
        height: 95vh;
        padding-right: 0;
        min-height: 760px;
    }

    .link-box li a:hover + .date {
        display: inline-block;
    }

    .slider-wrapper .date {
        font-family: 'MaisonNeue-Mono';
        font-size: 1em;
        padding-top: 12px;
        vertical-align: middle;
        margin-left: 15px;
        height: 40px;
        display: none;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 3;
    }

        .slider-wrapper .date .container {
            display: block;
            padding-left: 10px;
            margin-left: 0;
            -webkit-animation: moving .5s ease-in-out;
            animation: moving .5s ease-in-out;
        }

    @keyframes moving {
        0% {
            transform: translateY(40px);
            opacity: 0;
        }

        60% {
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .link-box {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 30px 0;
    }

        .link-box ul {
            padding-left: 50px;
        }

        .link-box li a {
            font-family: 'DrukWide-Medium';
            font-size: 3em;
            line-height: normal;
            line-height: 1.2em;
        }

            .link-box li a:before {
                height: 5px;
                background: #FFF;
            }

    .slider-id-1 {
        background-image: url(../img/kry-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-2 {
        background-image: url(../img/drinkspiration-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-3 {
        background-image: url(../img/tranquil-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-4 {
        background-image: url(../img/absolutcom-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-5 {
        background-image: url(../img/trackster-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .slider-id-6 {
        background-image: url(../img/wrapp-case.jpg);
        background-size: cover;
        background-position: center center;
    }

    .rotate-headline {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rotate-header {
        width: 100%;
        height: 100%;
        flex: 0 0;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .rotate-header h4 {
            font-size: 1em;
            transform: rotate(-90deg);
            white-space: nowrap;
            position: absolute;
            color: #fff;
            text-transform: uppercase;
        }

    .height-100 {
        height: 100%;
    }

    .our-services {
        background: #0b2633;
        padding: 130px;
    }

        .our-services .sticky {
            position: sticky;
            position: -webkit-sticky;
            top: 20px;
        }

        .our-services h3 {
            color: #fff;
            padding-bottom: 10px;
            font-size: 1.7em;
        }

        .our-services h4 {
            color: #fff;
            padding-top: 35px;
            padding-bottom: 5px;
            font-size: .9em;
        }

        .our-services .lore-list-first {
            margin-top: 0;
        }

            .our-services .lore-list-first h4 {
                padding-top: 0;
            }

        .our-services p {
            color: #fff;
            font-size: 1.5em;
        }

        .our-services ul li {
            color: #fff;
            font-size: 1.1em;
        }

        .our-services li {
            padding-top: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #262626;
        }

            .our-services li:last-child {
                border-bottom: none;
            }

    .collage {
        height: 95vh;
        min-height: 880px;
        background: #eee;
        color: #016E53;
        display: flex;
        width: 100%;
        transform: translate3d(0,0,0);
        overflow: hidden;
    }

        .collage .huge-text {
            color: #016E53;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            width: 100%;
            height: 100%;
        }

        .collage .text-col {
            display: inline-block;
            align-self: flex-end;
            padding-bottom: 45px;
            color: #0A0A0A;
            z-index: 2;
        }

        .collage h2 {
            color: #0A0A0A;
            font-size: 7em;
            z-index: 2;
        }

    .slideshow > div {
        z-index: 1;
        opacity: 1;
        height: 25928px;
        width: 930px;
        background: url(../img/office-collage.jpg);
        background-repeat: repeat-y;
        background-size: 70%;
        position: absolute;
        top: 0;
        left: 100px;
        transform: translate3d(0,0,0);
    }

    .slideshow .move-1 {
        animation: moveSlideshow 148s linear infinite;
    }

    @keyframes moveSlideshow {
        0% {
            transform: translateY(5.6666%);
        }

        100% {
            transform: translateY(-100.6666%);
        }
    }

    .clients {
        padding: 130px 0;
        padding-bottom: 107px;
    }

        .clients h3 {
            font-size: 2.4em;
            text-align: center;
        }

        .clients p {
            text-align: center;
            padding-bottom: 75px;
        }

        .clients .logo img {
            width: 95%;
        }

    .arrow-up {
        background-size: 100%;
    }

    .cover-lg {
        background: #0A0A0A;
    }

    #start {
        z-index: 1336;
        position: relative;
        margin-bottom: 820px;
    }

    footer {
        position: fixed;
        bottom: 0;
        z-index: 1;
    }

    .lore-list-first, .lore-list {
        padding-left: 20px;
    }

    .padding-p {
        padding-left: 40px;
    }

    .big-headline.fade-in-copy .words-wrap {
        display: inline-block;
        perspective: 300px;
    }

    .big-headline.fade-in-copy b {
        opacity: 0;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
    }

        .big-headline.fade-in-copy b.is-visible {
            position: relative;
            opacity: 1;
            animation: fade-in-copy-in 1.2s ease-in-out;
        }

        .big-headline.fade-in-copy b.is-hidden {
            animation: fade-in-copy-out .4s ease-in-out;
        }

    @keyframes fade-in-copy-in {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }

        60% {
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-copy-out {
        0% {
            opacity: 1;
            transform: translateY(0);
        }

        80% {
            opacity: 0;
            transform: translateY(-30px);
        }

        100% {
            opacity: 0;
            transform: translateY(-30px);
        }
    }
}

@media (min-width:1700px) {
    .color-id-1 a {
        text-shadow: 2px 0 0 #92B4B3,-2px 0 0 #92B4B3,0 1px 0 #92B4B3,0 -2px 0 #92B4B3,6px 6px #92B4B3,-4px -4px 0 #92B4B3,4px -4px 0 #92B4B3,-6px 8px 0 #92B4B3;
        color: #0b2633;
    }

    .color-id-2 a {
        text-shadow: 2px 0 0 #EA97A4,-2px 0 0 #EA97A4,0 1px 0 #EA97A4,0 -2px 0 #EA97A4,6px 6px #EA97A4,-4px -4px 0 #EA97A4,4px -4px 0 #EA97A4,-6px 8px 0 #EA97A4;
        color: #0c1375;
    }

    .color-id-3 a {
        text-shadow: 2px 0 0 #CBB3A0,-2px 0 0 #CBB3A0,0 1px 0 #CBB3A0,0 -2px 0 #CBB3A0,6px 6px #CBB3A0,-4px -4px 0 #CBB3A0,4px -4px 0 #CBB3A0,-6px 8px 0 #CBB3A0;
        color: #630808;
    }

    .color-id-4 a {
        text-shadow: 2px 0 0 #656363,-2px 0 0 #656363,0 1px 0 #656363,0 -2px 0 #656363,6px 6px #656363,-4px -4px 0 #656363,4px -4px 0 #656363,-6px 8px 0 #656363;
        color: #0b051f;
    }

    .color-id-5 a {
        text-shadow: 2px 0 0 #EBA281,-2px 0 0 #EBA281,0 1px 0 #EBA281,0 -2px 0 #EBA281,6px 6px #EBA281,-4px -4px 0 #EBA281,4px -4px 0 #EBA281,-6px 8px 0 #EBA281;
        color: #2005b3;
    }

    .color-id-6 a {
        text-shadow: 2px 0 0 #B1A79A,-2px 0 0 #B1A79A,0 1px 0 #B1A79A,0 -2px 0 #B1A79A,6px 6px #B1A79A,-4px -4px 0 #B1A79A,4px -4px 0 #B1A79A,-6px 8px 0 #B1A79A;
        color: #ffef35;
    }

    p {
        font-size: 1.7em;
        line-height: 1.5em;
    }

    a {
        font-size: 1.7em;
    }

    .nav a {
        font-size: 1.5em;
    }

    .cover-lg h1.hero {
        font-size: 7em;
        padding-top: 15px;
        padding-left: 15px;
    }

    .cover-lg .right p {
        font-size: 1.7em;
        padding: 0;
    }

    .how-to p {
        font-size: 2em;
        padding-top: 130px;
        padding-bottom: 100px;
    }

    footer h4 {
        line-height: 1.2em;
        font-size: 3em;
    }

    .contact-content p {
        font-size: 1.7em;
    }

    .about p {
        padding-top: 30px;
        font-size: 2em;
    }

    .about-column a {
        margin-left: 0;
        padding-top: 15px;
        font-size: 2em;
    }

    .portfolio-container .role {
        float: right;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding-bottom: 20px;
        font-size: 1em;
        font-family: 'MaisonNeue-Book';
    }

    .portfolio-container .desc h3 {
        font-size: 2.3em;
        letter-spacing: -1px;
        line-height: 1.3em;
    }

    .collage h2 {
        font-size: 10em;
    }

    .link-box li a {
        font-size: 4.4em;
    }

    .our-services p {
        color: #fff;
        font-size: 1.7em;
    }

    .slideshow > div {
        background-size: 110%;
    }

    .link-box ul {
        padding-left: 80px;
    }

    footer p {
        font-size: 1.5em;
    }

    footer a {
        font-size: 1.3em;
    }

    footer .phone {
        font-size: 1.3em;
    }

    .slider-wrapper {
        min-height: 880px;
    }

    .our-services {
        padding: 130px;
        padding-top: 160px;
        padding-bottom: 160px;
    }

        .our-services ul li {
            font-size: 1.3em;
        }

    .clients {
        padding: 180px 0;
        padding-bottom: 160px;
    }

    .rotate-header h4 {
        font-size: 1.1em;
    }

    .slider-wrapper .date {
        padding-top: 16px;
    }
}

@media (min-width:1385px) {
    .nav a {
        font-size: 1.3em;
    }

    .oblique-line {
        display: inline-block;
        position: absolute;
        font-size: 1.45em;
        padding-left: 15px;
    }

    .nav li {
        padding: 0 20px;
    }
}

@media (min-width:1585px) {
    .nav a {
        font-size: 1.4em;
    }

    .oblique-line {
        display: inline-block;
        position: absolute;
        font-size: 1.45em;
        padding-left: 15px;
    }

    .nav li {
        padding: 0 20px;
    }
}

@media (min-width:1700px) {
    .cover-lg h1.hero {
        font-size: 8em;
        padding-top: 30px;
        padding-left: 40px;
    }
}

@media (min-width:1200px) and (min-height:1200px) {
    .projects {
        height: 2810px;
    }
}

@media (min-width:1400px) and (min-height:1200px) {
    .projects {
        height: 2810px;
    }
}

@media (min-width:1600px) and (min-height:1200px) {
    .projects {
        height: 2780px;
    }
}

@media (min-width:1200px) and (min-height:1330px) {
    .projects {
        height: 2930px;
    }
}

@media (min-width:1200px) and (min-height:1380px) {
    .projects {
        height: 3030px;
    }
}

@media (max-height:820px) {
    #start {
        margin-bottom: 0 !important;
    }

    footer {
        position: relative !important;
    }
}

#projects {
    transition: color 1.25s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.slider-section {
    transition: color 1.25s ease-in-out;
}

.color-id-1 {
    transition: box-shadow 2s ease-in;
}

    .color-id-1 .rotate-header h4 {
        color: #0b2633;
    }

    .color-id-1 .date {
        color: #0b2633;
    }

    .color-id-1 a.active:before {
        height: 5px;
        z-index: -1;
        background: #0b2633;
    }

    .color-id-1 li a:before {
        height: 5px;
        z-index: -1;
        background: #0b2633;
    }

    .color-id-1 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #0b2633;
    }

.color-id-2 {
    transition: box-shadow 2s ease-in;
}

    .color-id-2 .rotate-header h4 {
        color: #0c1375;
    }

    .color-id-2 .date {
        color: #0c1375;
    }

    .color-id-2 a.active:before {
        height: 5px;
        z-index: -1;
        background: #0c1375;
    }

    .color-id-2 li a:before {
        height: 5px;
        z-index: -1;
        background: #0c1375;
    }

    .color-id-2 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #0c1375;
    }

.color-id-3 {
    transition: box-shadow 2s ease-in;
}

    .color-id-3 .rotate-header h4 {
        color: #630808;
    }

    .color-id-3 .date {
        color: #630808;
    }

    .color-id-3 a.active:before {
        height: 5px;
        z-index: -1;
        background: #630808;
    }

    .color-id-3 li a:before {
        height: 5px;
        z-index: -1;
        background: #630808;
    }

    .color-id-3 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #630808;
    }

.color-id-4 {
    transition: box-shadow 2s ease-in;
}

    .color-id-4 .rotate-header h4 {
        color: #0b051f;
    }

    .color-id-4 .date {
        color: #0b051f;
    }

    .color-id-4 a.active:before {
        height: 5px;
        z-index: -1;
        background: #0b051f;
    }

    .color-id-4 li a:before {
        height: 5px;
        z-index: -1;
        background: #0b051f;
    }

    .color-id-4 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #0b051f;
    }

.color-id-5 {
    transition: box-shadow 2s ease-in;
}

    .color-id-5 .rotate-header h4 {
        color: #2005b3;
    }

    .color-id-5 .date {
        color: #2005b3;
    }

    .color-id-5 a.active:before {
        height: 5px;
        z-index: -1;
        background: #2005b3;
    }

    .color-id-5 li a:before {
        height: 5px;
        z-index: -1;
        background: #2005b3;
    }

    .color-id-5 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #2005b3;
    }

.color-id-6 {
    transition: box-shadow 2s ease-in;
}

    .color-id-6 .rotate-header h4 {
        color: #ffef35;
    }

    .color-id-6 .date {
        color: #ffef35;
    }

    .color-id-6 a.active:before {
        height: 5px;
        z-index: -1;
        background: #ffef35;
    }

    .color-id-6 li a:before {
        height: 5px;
        z-index: -1;
        background: #ffef35;
    }

    .color-id-6 a:hover:before {
        height: 5px;
        z-index: -1;
        background: #ffef35;
    }

.link-box li .active ~ .date {
    display: inline-block;
}