body,
html {
    overflow-x: hidden;
    backface-visibility: hidden;
}

html {
    font-size: 16px;
}

a:active,
a:focus,
a:visited {
    outline: 0;
    border: none;
    -moz-outline-style: none;
}

@media screen and (min-width: 320px) {
    html {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}

@font-face {
    font-family: 'BasisGrotesque';
    src: url("../fonts/basis_grotesque_regular-webd41d.eot?") format("eot"), url("../fonts/basis_grotesque_regular-web.ttf") format("truetype"), url("../fonts/basis_grotesque_regular-web.woff") format("woff"), url("../fonts/basis_grotesque_regular-web.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'BasisGrotesque';
    src: url("../fonts/basis_grotesque_medium-webd41d.eot?") format("eot"), url("../fonts/basis_grotesque_medium-web.ttf") format("truetype"), url("../fonts/basis_grotesque_medium-web.woff") format("woff"), url("../fonts/basis_grotesque_medium-web.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMachina';
    src: url("../fonts/neuemachina_regular.woff") format("woff"), url("../fonts/neuemachina_regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'BasisGrotesque';
    font-weight: 400;
    color: #000;
}

h2 {
    font-size: 8vw;
    text-transform: uppercase;
}

h3 {
    font-size: 1.8vw;
    line-height: 1.5;
}

.project-desc h3 {
    padding-top: 0;
    font-size: 3.8vw;
    text-transform: uppercase;
    padding-bottom: 40px;
    margin-bottom: 0;
    line-height: 1.1;
}

a,
p {
    font-family: 'BasisGrotesque';
    font-weight: 400;
    color: #000;
}

a {
    color: #000;
}

h4.sub-h {
    font-family: 'NeueMachina';
    font-size: .8vw;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-weight: bold;
}

.slide-one {
    width: 100vw;
    height: 45vh;
    max-width: 100%;
    /* added */
    padding: 0 4vw;
}

.slide-two {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    /* added */
    padding: 0 4vw;
}

.slide-two .lowline {
    letter-spacing: -2px;
}

.slide-three {
    width: 100vw;
    height: 70vh;
    max-width: 100%;
    /* added */
    padding: 0 4vw;
}

.slide-three .right-text {
    float: right;
}

.slide-three h2 {
    padding-bottom: 1vw;
    font-size: 6.225vw;
}

.slide-three .arrow-down {
    vertical-align: sub;
}

#pinContainer {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.panel {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#pinMaster {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    transition: .1s;
    -webkit-transition: .1s;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.one {
    background-color: #ff4c24;
}

.two {
    background-color: #fecaff;
}

.three {
    background-color: #cbfff9;
}

.four {
    background-color: #fff332;
}

.five{background-color: #beff59;}

/**.six{background-color: #cdf1ed;}**/

.img-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.portfolio-img {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.img-one {
    background-image: url(../img/p-1.jpg);
}

.img-two {
    background-image: url(../img/p-2.jpg);
}

.img-three {
    background-image: url(../img/p-3.jpg);
}

.img-four {
    background-image: url(../img/p-4.jpg);
}

.img-five {
    background-image: url(../img/p-5.jpg);
}

.img-six {
    background-image: url(../img/p-2.jpg);
}

.panel img {
    position: relative;
    width: 100%;
}

#work h4.sub-h {
    padding-top: 7vw;
    margin-bottom: 1.5vw;
}

#work p {
    opacity: .8;
}

#work a {
    font-weight: 400;
    color: #000;
    cursor: zoom-in;
}

.hide {
    visibility: hidden;
}

#footer-wrap {
    background: #fff;
}

#footer-wrap h2,
#footer-wrap h4,
#footer-wrap a,
#footer-wrap p {
    color: #000;
}

/* Revealers */

.revealer {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1000;
    pointer-events: none;
}

.revealer--cornertopleft,
.revealer--cornertopright,
.revealer--cornerbottomleft,
.revealer--cornerbottomright {
    top: 50%;
    left: 50%;
}

.revealer--top,
.revealer--bottom {
    left: 0;
}

.revealer--right,
.revealer--left {
    top: 50%;
    left: 50%;
}

.revealer--top {
    bottom: 100%;
}

.revealer--bottom {
    top: 100%;
}

.revealer__layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ddd;
}

/* Revealer effects */

/* One layer effect (effect-1) */

.anim--effect-1 .page:first-child {
    background: #605BD4;
}

.anim--effect-1 .page:nth-child(2) {
    background: #FF6EAE;
}

.anim--effect-1 .revealer--animate .revealer__layer {
    -webkit-animation: anim-effect-1 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
    animation: anim-effect-1 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@-webkit-keyframes anim-effect-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

/* Two layer effect (effect-2) */

.anim--effect-2 .page:first-child {
    background: #9cdab1;
}

.anim--effect-2 .page:nth-child(2) {
    background: #F9C969;
}

.anim--effect-2 .revealer--animate .revealer__layer {
    -webkit-animation: anim-effect-2-1 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    animation: anim-effect-2-1 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.anim--effect-2 .revealer--animate .revealer__layer:nth-child(2) {
    -webkit-animation-name: anim-effect-2-2;
    animation-name: anim-effect-2-2;
}

@-webkit-keyframes anim-effect-2-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    30%,
    70% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-2-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    30%,
    70% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-2-2 {
    0%,
    14.5% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    37.5%,
    62.5% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
    85.5%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-2-2 {
    0%,
    14.5% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    37.5%,
    62.5% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
    85.5%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

/* Three layer effect (effect-3) */

.anim--effect-3 .page:nth-child(2) {
    background: #ECF3A3;
}

.anim--effect-3 .revealer--animate .revealer__layer {
    -webkit-animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
    animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}

.anim--effect-3 .revealer--animate .revealer__layer:nth-child(2) {
    -webkit-animation-name: anim-effect-3-2;
    animation-name: anim-effect-3-2;
}

.anim--effect-3 .revealer--animate .revealer__layer:nth-child(3) {
    -webkit-animation-name: anim-effect-3-3;
    animation-name: anim-effect-3-3;
}

@-webkit-keyframes anim-effect-3-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    25%,
    75% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-3-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    25%,
    75% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-3-2 {
    0%,
    12.5% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    37.5%,
    62.5% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    87.5%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-3-2 {
    0%,
    12.5% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    37.5%,
    62.5% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    87.5%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-3-3 {
    0%,
    25% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    75%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-3-3 {
    0%,
    25% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    75%,
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

/* Forth effect */

.anim--effect-4 .page:first-child {
    background: #28282D;
}

.anim--effect-4 .page:nth-child(2) {
    background: #F15C5C;
}

.anim--effect-4 .page--animate-top .quote {
    -webkit-animation: moveQuoteTop 1.5s forwards;
    animation: moveQuoteTop 1.5s forwards;
}

@-webkit-keyframes moveQuoteTop {
    0%,
    65% {
        -webkit-transform: translate3d(0, -75px, 0);
        transform: translate3d(0, -75px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteTop {
    0%,
    65% {
        -webkit-transform: translate3d(0, -75px, 0);
        transform: translate3d(0, -75px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-bottom .quote {
    -webkit-animation: moveQuoteBottom 1.5s forwards;
    animation: moveQuoteBottom 1.5s forwards;
}

@-webkit-keyframes moveQuoteBottom {
    0%,
    65% {
        -webkit-transform: translate3d(0, 75px, 0);
        transform: translate3d(0, 75px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteBottom {
    0%,
    65% {
        -webkit-transform: translate3d(0, 75px, 0);
        transform: translate3d(0, 75px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-left .quote {
    -webkit-animation: moveQuoteLeft 1.5s forwards;
    animation: moveQuoteLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-75px, 0, 0);
        transform: translate3d(-75px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-75px, 0, 0);
        transform: translate3d(-75px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-right .quote {
    -webkit-animation: moveQuoteRight 1.5s forwards;
    animation: moveQuoteRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteRight {
    0%,
    65% {
        -webkit-transform: translate3d(75px, 0, 0);
        transform: translate3d(75px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteRight {
    0%,
    65% {
        -webkit-transform: translate3d(75px, 0, 0);
        transform: translate3d(75px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-cornertopright .quote {
    -webkit-animation: moveQuoteCornerTopRight 1.5s forwards;
    animation: moveQuoteCornerTopRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerTopRight {
    0%,
    65% {
        -webkit-transform: translate3d(50px, -50px, 0);
        transform: translate3d(50px, -50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteCornerTopRight {
    0%,
    65% {
        -webkit-transform: translate3d(50px, -50px, 0);
        transform: translate3d(50px, -50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-cornertopleft .quote {
    -webkit-animation: moveQuoteCornerTopLeft 1.5s forwards;
    animation: moveQuoteCornerTopLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerTopLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-50px, -50px, 0);
        transform: translate3d(-50px, -50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteCornerTopLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-50px, -50px, 0);
        transform: translate3d(-50px, -50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-cornerbottomright .quote {
    -webkit-animation: moveQuoteCornerBottomRight 1.5s forwards;
    animation: moveQuoteCornerBottomRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerBottomRight {
    0%,
    65% {
        -webkit-transform: translate3d(50px, 50px, 0);
        transform: translate3d(50px, 50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteCornerBottomRight {
    0%,
    65% {
        -webkit-transform: translate3d(50px, 50px, 0);
        transform: translate3d(50px, 50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .page--animate-cornerbottomleft .quote {
    -webkit-animation: moveQuoteCornerBottomLeft 1.5s forwards;
    animation: moveQuoteCornerBottomLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerBottomLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-50px, 50px, 0);
        transform: translate3d(-50px, 50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes moveQuoteCornerBottomLeft {
    0%,
    65% {
        -webkit-transform: translate3d(-50px, 50px, 0);
        transform: translate3d(-50px, 50px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.anim--effect-4 .revealer--animate .revealer__layer {
    -webkit-animation: anim-effect-4-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
    animation: anim-effect-4-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}

.anim--effect-4 .revealer--animate .revealer__layer:nth-child(2) {
    -webkit-animation-name: anim-effect-4-2;
    animation-name: anim-effect-4-2;
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
    animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
}

.anim--effect-4 .revealer--animate .revealer__layer:nth-child(3) {
    -webkit-animation-name: anim-effect-4-3;
    animation-name: anim-effect-4-3;
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
}

@-webkit-keyframes anim-effect-4-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-4-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-4-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    45%,
    55% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
        animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-4-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    45%,
    55% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
        animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-4-3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    45%,
    55% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
        animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-4-3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    45%,
    55% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
        animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

.animate-line {
    opacity: 0;
    -webkit-animation: pulse 0s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    -moz-animation: pulse 0s ease-in 1 normal forwards;
    -o-animation: pulse 0s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    animation: pulse 0s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
}

@keyframes pulse {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate-now {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

.reveal-line {
    width: 0px;
    height: 1px;
    display: inline-block;
    background: #000;
    margin-bottom: 6px;
    -webkit-animation: yas 1s ease forwards;
    -moz-animation: yas 1s ease forwards;
    -o-animation: yas 1s ease forwards;
    animation: yas 1s ease forwards;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@keyframes yas {
    0% {
        width: 0;
    }
    100% {
        width: 75px;
    }
}

.animate-reveal {
    opacity: 0;
    -webkit-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    -moz-animation: reveal 1s ease-in 1 normal forwards;
    -o-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.animate-first {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.animate-second {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
    -o-animation-delay: 500ms;
    animation-delay: 500ms;
}

.animate-third {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes reveal {
    0% {
        opacity: 0;
        -webkit-transform: skewY(10deg) translateY(100%);
        -moz-transform: skewY(10deg) translateY(100%);
        -o-transform: skewY(10deg) translateY(100%);
        transform: skewY(10deg) translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: skewY(0deg) translateY(0);
        -moz-transform: skewY(0deg) translateY(0);
        -o-transform: skewY(0deg) translateY(0);
        transform: skewY(0deg) translateY(0);
    }
}

@-moz-keyframes reveal {
    0% {
        opacity: 0;
        -webkit-transform: skewY(10deg) translateY(100%);
        -moz-transform: skewY(10deg) translateY(100%);
        -o-transform: skewY(10deg) translateY(100%);
        transform: skewY(10deg) translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: skewY(0deg) translateY(0);
        -moz-transform: skewY(0deg) translateY(0);
        -o-transform: skewY(0deg) translateY(0);
        transform: skewY(0deg) translateY(0);
    }
}

@-o-keyframes reveal {
    0% {
        opacity: 0;
        -webkit-transform: skewY(10deg) translateY(100%);
        -moz-transform: skewY(10deg) translateY(100%);
        -o-transform: skewY(10deg) translateY(100%);
        transform: skewY(10deg) translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: skewY(0deg) translateY(0);
        -moz-transform: skewY(0deg) translateY(0);
        -o-transform: skewY(0deg) translateY(0);
        transform: skewY(0deg) translateY(0);
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        -webkit-transform: skewY(10deg) translateY(100%);
        -moz-transform: skewY(10deg) translateY(100%);
        -o-transform: skewY(10deg) translateY(100%);
        transform: skewY(10deg) translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: skewY(0deg) translateY(0);
        -moz-transform: skewY(0deg) translateY(0);
        -o-transform: skewY(0deg) translateY(0);
        transform: skewY(0deg) translateY(0);
    }
}

.dot {
    height: 32px;
    width: 32px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    float: left;
    margin-right: 14px;
}

.dot {
    background-image: -webkit-linear-gradient(270deg, #fff, #000);
    background-image: -moz-linear-gradient(270deg, #fff, #000);
    background-image: -o-linear-gradient(270deg, #fff, #000);
    background-image: -ms-linear-gradient(270deg, #fff, #000);
    background-image: linear-gradient(180deg, #fff, #000);
}

#profile .dot {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 0;
    margin: 0;
    opacity: .4;
    position: absolute;
    mix-blend-mode: difference;
}

#profile .dot {
    background-image: -webkit-linear-gradient(270deg, #fff, #000);
    background-image: -moz-linear-gradient(270deg, #fff, #000);
    background-image: -o-linear-gradient(270deg, #fff, #000);
    background-image: -ms-linear-gradient(270deg, #fff, #000);
    background-image: linear-gradient(180deg, #fff, #000);
}

.wrapper {
    max-width: 1500px;
    margin: 0 auto;
}

.lg-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 200px;
}

.header {
    padding: 0 4vw;
    padding-top: 1vw;
    -webkit-transition: all .3s !important;
    /* For Safari 3.0 to 6.0 */
    transition: all .3s !important;
    /* For modern browsers */
}

.logo {
    height: 80px;
    display: flex;
    align-items: center;
}

.logo p {
    margin: 0;
    margin-left: -10px;
}

.logo a {
    color: #000;
    -webkit-transition: all .3s !important;
    /* For Safari 3.0 to 6.0 */
    transition: all .3s !important;
    /* For modern browsers */
}

.dark {
    color: #fff;
    -webkit-transition: all .3s;
    /* For Safari 3.0 to 6.0 */
    transition: all .3s;
    /* For modern browsers */
}

.dark a {
    color: #fff !important;
    -webkit-transition: all .3s;
    /* For Safari 3.0 to 6.0 */
    transition: all .3s;
    /* For modern browsers */
}

.header a:hover {
    text-decoration: none;
    color: #000;
}

.navbar {
    padding: 0;
    padding-left: 4vw;
    list-style: none;
}

.navbar a,
.navbar a>span {
    position: relative;
    color: inherit;
    text-decoration: none;
    line-height: 24px;
    color: #000;
    -webkit-transition: all .3s !important;
    /* For Safari 3.0 to 6.0 */
    transition: all .3s !important;
    /* For modern browsers */
    font-size: 1.1vw;
}

.navbar a:before,
.navbar a>span:before,
.navbar a:after,
.navbar a>span:after {
    content: '';
    position: absolute;
    transition: transform 0.5s ease;
}

.navbar .link {
    padding-top: 10px;
}

.navbar .link:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
    transform: scaleX(0);
}

.navbar .link:hover:before {
    transform: scaleX(1);
}

.navbar a:hover {
    color: #000;
}

.dark a:hover {
    color: #fff;
}

.dark .navbar .link:before {
    background: #fff !important;
}

#work a,
#work a>span {
    position: relative;
    color: inherit;
    text-decoration: none;
    line-height: 24px;
    color: #000;
    font-size: 1.2vw;
}

#work a:before,
#work a>span:before,
#work a:after,
#work a>span:after {
    content: '';
    position: absolute;
    transition: transform 0.5s ease;
}

#work .link:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: scaleX(0);
}

#work .link:hover:before {
    transform: scaleX(1);
}

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

#footer-wrap a:before,
#footer-wrap a>span:before,
#footer-wrap a:after,
#footer-wrap a>span:after {
    content: '';
    position: absolute;
    transition: transform 0.5s ease;
}

#footer-wrap .link:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: scaleX(0);
}

#footer-wrap .link:hover:before {
    transform: scaleX(1);
}

.start {
    height: 100vh;
    min-height: 1100px;
}

.start h1 {
    padding-top: 0px;
}

.start .lowline {
    letter-spacing: -2px;
}

.reveal {
    overflow: hidden;
    display: block;
}

.reveal:last-child {
    padding-bottom: 20px;
}

.s-01,
.s-02,
.s-03 {
    display: block;
    font-size: 16vw;
    line-height: 1;
    color: #000;
    text-transform: uppercase;
}

.s-01 {
    text-align: right;
}

.s-02 {
    text-align: left;
}

.s-03 {
    text-align: right;
}

.date {
    display: block;
    overflow: hidden;
    vertical-align: top;
    text-align: left;
    line-height: 3em;
    text-transform: none;
    font-family: 'NeueMachina';
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-left: 9vh;
    padding-bottom: 1vh;
}

.bottom-desc {
    margin-bottom: 1rem;
}

@media screen and (min-width: 1500px) {
    .s-01,
    .s-02,
    .s-03 {
        font-size: 17vw;
    }
}

#portfolio-headline {
    height: 100vh;
}

.portfolio {
    height: 100vh;
}

.project-item {}

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

#profile {
    z-index: 2;
}

#profile h2 {
    font-size: 18vw;
    padding: 0 4vw;
}

.scene {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
}

.scene--active {
    position: fixed;
    height: 100vh;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.scene--ended {
    position: absolute;
    bottom: 0;
    top: auto;
}

.new-class img {
    visibility: visible !important;
}

.fader {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.skew-item {
    transition: transform 0.25s;
    will-change: transform;
}

.skew-item-2 {
    transition: transform 0.25s;
    will-change: transform;
}

.portfolio-item {
    transition: transform 0.4s;
    will-change: transform;
}

.project-desc {
    padding-left: 4vw;
    padding-right: 4vw;
}

.project-desc .copy {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 2vw;
}

.project-desc .did p {
    font-family: 'NeueMachina';
    display: block;
    margin-bottom: 0;
}

.project-desc p {
    margin-bottom: 1vw;
    font-size: 1.2vw;
}

.about {
    background: #000;
    padding: 15vw 0;
    color: #fff;
}

.about-intro {
    padding-bottom: 120px;
}

.about .sub-h {
    color: #fff;
}

.about h2 {
    padding-top: 8px;
    font-size: 5vw;
    z-index: 1;
    line-height: 1.1;
    color: #fff;
}

.about h3 {
    margin-bottom: 0;
    font-weight: 400;
    color: #fff;
    font-size: 2vw;
    padding-top: 6vw;
}

.about h3::first-line {
    text-indent: 25%;
}

.about p {
    padding-top: 2.5vw;
    margin-bottom: 0;
    color: #B2B2B2;
    font-size: 2vw;
}

.about a {
    color: #fff;
}

.about .symbol {
    color: #fff;
    padding-right: 7px;
}

.about img {
    width: 100%;
}

.about .clients {
    padding-top: 11vw;
}

.about .logo-wrapper {
    padding-top: .7vw;
}

.about .clients h4.sub-h {
    padding-bottom: 15px;
}

.about .clients .client-logo {
    padding: .5vw;
}

.about .timeline {
    padding-top: 10vw;
}

.about .timeline ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    padding-top: 2vw;
}

.about .timeline li {
    padding-top: .5rem;
    padding-bottom: 1.5rem;
}

.about .timeline li:last-child {
    padding-bottom: 0;
}

.about .timeline li p {
    opacity: 1;
    padding: 0;
    margin: 0;
    font-size: 2vw;
    color: #fff;
}

.align-right {
    text-align: right;
}

.about .time-date {
    font-size: 2vw;
    opacity: .3;
    float: right;
}

.about .collage-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.about .collage-grid .image_1 {
    grid-column: 1 / span 6;
    grid-row: 1 / span 6;
}

.about .collage-grid .image_2 {
    grid-column: 6 / span 6;
    grid-row: 6 / span 6;
}

.about .collage-grid .image_3 {
    grid-column: 2 / span 7;
    grid-row: 5 / span 6;
}

.overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.box {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.radius {
    border-radius: 8px;
}

.profile-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    width: 100%;
    height: 100%;
}

.case-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    width: 100%;
    height: 100%;
}

.content {
    z-index: 2;
    margin-bottom: 100vh;
    position: relative;
    background: #fff;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    height: 100vh;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}

.footer {
    padding: 0;
}

.footer-intro {
    padding-bottom: 4vw;
}

.footer h2 {
    font-size: 4vw;
    z-index: 1;
}

.footer .menu ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 0;
}

.footer .line {
    width: auto;
    height: 100px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    float: left;
}

.footer .menu li {
    display: inline-block;
    padding: 0 2.5rem;
}

.footer .menu li a {
    padding: 0;
    margin: 0;
    font-size: 2.7vw;
    text-decoration: none;
}

.footer .menu li a:hover {
    color: #000;
    text-decoration: none;
}

.footer-bottom {
    padding-bottom: .3vw;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer-bottom .arrow-up li {
    text-align: center;
    font-size: 3vw;
    display: inline-block;
    padding: 0 2.5rem;
}

.footer-bottom .arrow-up .link:before {
    background: none !important;
}

.footer-bottom .arrow-up {
    list-style: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 0;
}

.footer-bottom .bottom-left {
    float: left;
    padding-left: 4vw;
}

.footer-bottom .bottom-left p {
    width: auto;
    height: 80px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    float: left;
}

.footer-bottom .bottom-right {
    float: right;
    padding-right: 4vw;
}

.next-card {}

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

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

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

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

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

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

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

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

.circle-text {
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -105px;
}

.circle-text svg {
    width: 240px;
    height: 240px;
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.arrow-link-container {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
}

.arrow-link-container .contact-area {
    margin: 0 auto;
    z-index: 999;
    float: inherit;
    font-size: 5vw;
    top: 35%;
}

.arrow-link-container .contact-area:hover a {
    text-decoration: none;
}

#dribbble {
    width: 800px;
    height: 600px;
    background-image: url(https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9fc1670a-7b68-490e-8e4c-7355d3dc72bd/bg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45CUZUDWGN%2F20200131%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200131T154145Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGoaCXVzLXdlc3QtMiJHMEUCIAvgmyGO9pRcspMn6I%2F8CXRxLGBdxOwztYHUjshe894QAiEA9072DgNvARo4FW%2B%2BIqnmNEj3%2BimMGIhh4o9d%2FuzqXq0qtAMIExAAGgwyNzQ1NjcxNDkzNzAiDA%2FrAK0Wa6c2pRQT7CqRAzkh1IuthJva349wrIkSSqAocCupBBdpCmYuY7ht1ddsQZdXbOWIdOv%2BTdzy3VDh5CvenaA%2FFSmmuqNISh4jYy5KwcUapzN9UUD4%2FCl6qXxdYLs1AWG33wIfhW4Guq1FL%2F2MLdIRL8yUa91VV4o6XOkEw5XIvWSD9L%2FkrLYmkWxjSmmCAPztSKPFk6kfyLsFImAsmQkEe1%2BduT%2FE5kQK%2Bv%2FBcwW93PauUWKKZCzpG3WLeltouH2TOY6rZTTInNDXsj4vDh%2BSXJCdQXCI%2BMM93Q8MkClyRIhN5vnfLNSN9j5jqLa0FGBdxFf%2Bm9%2ByOLeEQ9HRlL95RVgTj%2FfhxfYTsXgxLdL3QO7cTQsZTWhM1i4zVmotMlgFtU1QJk0%2BpE%2FNmBygYe%2BqHXhvKWcGUzjDX6KECWJ1OR9gFbHzR95yuM0PUnRO%2Fd9LMYER84O5B2AZlcvJL%2FzbnqWoVQkovrBbNLHQ7mUy9XD%2FWV4GT7cIC9TtxLq%2FhsQIY%2FVb4oTyyCWgng%2F1P0SO4HjqgDqDVSqrwqd8MIbvz%2FEFOusB6BE6AkA8kUxOWNb06bgsED2hWg44Hi64cwhnaAobOEWAJKKYkFCB2eS99FqJ4iyC6miqsRUIyWyroaf3YLMTfN3oeFthIBsTMozeYZRg9NXleQen09Qd5z90LTUaWW2vBryzDYSjkGqYM80E6tVqSE7b0WjVMXQ47RF0N%2BAFZXQ8xWwouQOhC2OSosINwqNlf70%2FhgfK5RnOoqthTqhrCcRyRz0dhojRcNwHdQXUgE9E%2FKh%2F21%2Bj1Db8M9dE9DdToBPu%2B64LIdPjqP%2F7MvnowWXBQi3rmbUnObSVl5wfvvBeMwN82VIbZsq%2Byw%3D%3D&X-Amz-Signature=2575a1c6e3e9a9f6b9f0c2cc4d9bbd503ab2600aec23a6b27f9a812fb79d8c7a&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22bg.jpg%22);
    display: flex;
    align-items: center;
    justify-content: center;
}

#dribbble #frame {
    background-image: url(https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2bd63768-c54a-438f-a5e6-41cd322ea4f4/mesh.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45P6MMQG6C%2F20200131%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200131T154140Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGsaCXVzLXdlc3QtMiJIMEYCIQDl%2FvLeITciMpfpZ36h6Wf2lRn4FhvDMERZDaABIvzNjAIhAP01%2BGw18MVJd3gruJ3V6N3YFHBmlP%2FWOG5PrDOwb5y%2BKrQDCBMQABoMMjc0NTY3MTQ5MzcwIgwC5EAQvvVg2NiKC2IqkQPMY00E6bEa%2FdlSNH7jq%2FgAOudRiWMH6EshG%2FrkttpJT71c01dgLih5E2ldjEY25SS6XpNFbJP5dE6C4ed%2Fm4OJAKm0f1YiUwggmIGj8AUvfyUpHXzyGQ%2Fsdt8VZ4Sp56WeuKsypVBEcdQ7P711oiqitojSIjPHVc%2B%2B90fd5b3CrzDeGlvjLo298Lg670DOWNz%2BeLBs93URMPOA%2F41arUcXGStNEY%2Be0ugPhmenNlR1dLs9baW%2F3xRM2lEZmobYbg2LH2vBAaHTY83ryyS86B1lum49IREAUV4YzH1mkUqPyLQi58CzuSD3%2BCqIATKHNH5tl1MFn5GUQ1g%2BELtK%2FPat2u0brRm%2F5WCpECotRWx6ZlNnfJ9NFwd1MMJFKnz1MDesu4NBApxQ0QMNRm16QUEifIhFxtNYYMIImbXomtdWL%2FgXSLP15QUdm44fzNR5j7SCg6%2Fg1ZL0HZZxCQD%2B89mqxX%2BttZg6TmUZZHl43B2pcSSkFa2eIdtffoB15LchlJSuTGds%2FVd9LvBqgHxMTeL5AzDK%2F8%2FxBTrqAQVeF1ZsAzZ9uIaiKPDapZ%2B9mGW5AEFgEqwNtnEtvJcVdGesIujAJYcRpkXyvcqNtrjVcGv9RozozmWgdsHXVeCn%2BSWGptEUynOVz54V40%2FuyRIJ2d7T5QTN8049c7Mcrm%2BqsRuKNR1ktq0ScFEIVlEYt%2FYKAJO6wsBjm5VhhGVvZgM6Mu2GLUivi8Vy9jzCY0MdRExkSrbrQRheRicK36ylFZWqxB96%2BklBRX0K0akzs%2BEfREblunVibttSoSDfsDPDLuAUCShM4Ptnsyp9fQS%2Bm3FdGXA4OytcmImS%2B2rZ9EUXfDr1iCSWNQ%3D%3D&X-Amz-Signature=2fd525c110382b909a3b5f2def114216536dd6b299751ca71f1db4ba17bd741d&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22mesh.png%22);
    width: 717px;
    height: 476px;
    background-repeat: repeat;
    background-size: 10px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#dribbble .hero {
    width: 270px;
    position: relative;
    z-index: 3;
}

#dribbble .inner {
    display: flex;
    margin: 0 auto;
    width: 85%;
}

#dribbble .r {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: -10px;
    z-index: 4;
}

#dribbble .r p {
    font-size: 11px;
    opacity: 0.5;
    max-width: 240px;
    line-height: 2.4;
    margin-bottom: 30px;
}

#dribbble .r .outlined {
    font-size: 27px;
    margin: 0;
    color: rgba(255, 255, 255, 0);
    font-weight: bold;
    -webkit-text-stroke: 1px #F86AA6;
}

#dribbble .r h1 {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    margin-top: 3px;
    margin-bottom: 15px;
}

#dribbble .r a {
    color: #F86AA6;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

#dribbble .r a .circle {
    width: 14px;
    height: 14px;
    border: 1px solid #F86AA6;
    border-radius: 50%;
    margin-right: 14px;
    background-image: linear-gradient(to right, rgba(248, 106, 166, 0.6), rgba(248, 106, 166, 0.1));
}

.cool-text {
    position: absolute;
    right: 28px;
    bottom: 23px;
    opacity: 0.6;
    margin: 0;
    letter-spacing: 6px;
    animation: is-off 2s linear infinite;
}

.numb {
    position: absolute;
    top: 23px;
    right: 28px;
}

.numb .n {
    font-size: 27px;
    margin: 0;
    color: rgba(255, 255, 255, 0);
    font-weight: bold;
    -webkit-text-stroke: 1px #fff;
    opacity: 0.3;
}

.numb .stripe {
    width: 50px;
    height: 3px;
    background-image: linear-gradient(to right, rgba(252, 163, 210, 0.2), #FCA3D2);
    opacity: 0.6;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -5px;
}

.circles {
    position: absolute;
    width: 220px;
    left: -15px;
    top: -30px;
}

@keyframes is-off {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.6;
    }
    56% {
        opacity: 0;
    }
    57% {
        opacity: 0.6;
    }
    58% {
        opacity: 0.6;
    }
    71% {
        transform: scaleY(1) skewX(0deg);
    }
    72% {
        transform: scaleY(3) skewX(-60deg);
    }
    73% {
        transform: scaleY(1) skewX(0deg);
    }
    80% {
        opacity: 0.6;
    }
    81% {
        opacity: 0;
    }
    82% {
        opacity: 0.6;
    }
    85% {
        opacity: 0.6;
    }
    91% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        color: #fff;
    }
    92% {
        transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
        color: green;
    }
    93% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        color: #fff;
    }
}

#magic-cursor {
    pointer-events: none;
    z-index: 99;
}

.text-hover {
    cursor: pointer !important;
    color: #000;
}

#ball {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    border: 2px solid #000;
    opacity: .3;
    border-radius: 50%;
    margin-right: 14px;
    z-index: 1051;
    filter: invert(1);
    mix-blend-mode: difference;
}

.project-desc .contact-area {
    width: 100px;
}

.contact-area {
    width: 80px;
    height: 80px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    float: left;
    border-radius: 50%;
}

#ball.bl {
    transform: scale(1.1) translate(-9px, -9px);
    opacity: 0.3;
}

footer .contact-area {
    width: auto;
    height: 100px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    float: left;
    z-index: 10;
    border-radius: 50%;
}

footer .bottom-right .contact-area {
    height: 80px;
}

@media screen and (max-width: 1565px) {
    .date {
        font-size: 15px;
    }
    .navbar a,
    .navbar a>span {
        font-size: 19px;
    }
}

@media screen and (max-width: 768px) {
    .project-info {
        padding-top: 1.5rem !important;
    }
    .project-content h3 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .project-content h4 {
        font-size: 20px;
    }
    .modal-body .offset {
        margin-top: 0 !important;
    }
    .project-content .arrow-down {
        font-size: 30px;
    }
    .close-modal {
        font-size: 30px !important;
        padding: 3vw !important;
        padding-bottom: 150px !important;
    }
    #full-width {
        height: 260px !important;
        margin: 0 !important;
    }
    #full-width.drinkspiration-full {
        background-size: 220% !important;
    }
    .modal-body .cta-last a {
        font-size: 20px !important;
    }
    .modal-body .cta-last h4 {
        margin-bottom: 10px !important;
    }
    .modal-body .cta-last ul li {
        width: 100% !important;
    }
    .modal-body .contact-area {
        height: 40px !important;
    }
    #pinContainer {
        overflow: initial;
        height: auto;
    }
    .panel {
        position: relative;
        overflow: initial;
        height: 670px;
    }
    .panel .h-100 {
        height: 670px;
    }
    .panel .overlay {
        display: none;
    }
    .footer-bottom .bottom-left p {
        font-size: 17px;
    }
    .footer-bottom .bottom-right a {
        font-size: 17px;
    }
    .arrow-link-container .contact-area {
        font-size: 40px !important;
        top: 19% !important;
    }
    .content {
        margin-bottom: 600px;
    }
    .header .contact-area {
        width: auto;
    }
    .logo {
        height: 64px;
    }
    .navbar {
        padding: 0;
        justify-content: normal;
        padding-top: 20px;
        float: right;
    }
    .navbar .link {
        padding: 0;
        padding-left: 10px;
    }
    .navbar a,
    .navbar a>span {
        font-size: 17px;
    }
    .reveal-line {
        margin-bottom: 3px;
    }
    .slide-one {
        height: 0vh;
    }
    .slide-two .h-100 {
        height: 100% !important;
    }
    .slide-three {
        height: auto;
    }
    .slide-three .h-100 {
        height: 100% !important;
    }
    @keyframes yas {
        0% {
            width: 0;
        }
        100% {
            width: 50px;
        }
    }
    .navbar .contact-area {
        height: auto;
    }
    .start {
        height: 660px;
        min-height: 660px;
    }
    .start .h-100 {
        height: 100% !important;
    }
    .slide-two {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        /* added */
    }
    .slide-two .h-100 {}
    #portfolio-headline {
        height: 600px;
    }
    .ball {
        display: none;
    }
    #magic-cursor {
        display: none;
    }
    .img-wrapper {
        height: 30vh;
    }
    .portfolio-img {
        height: 30vh;
    }
    .project-desc {
        padding-left: 0;
        padding-right: 0;
    }
    .project-desc h3 {
        font-size: 38px;
        padding-bottom: 30px;
    }
    .project-desc .copy {}
    .project-desc p {
        font-size: 17px;
    }
    #work h4.sub-h {
        padding-top: 40px;
        padding-bottom: 15px;
    }
    #work a,
    #work a>span {
        font-size: 17px;
    }
    .mobile-display {
        display: none;
    }
    .h-100 {
        height: 0 !important;
    }
    h2 {
        font-size: 38px;
    }
    .date {
        font-size: 11px;
        padding-left: 0;
    }
    .radius {
        border-radius: 0;
    }
    .circle-text {
        top: -40px;
        margin-right: -40px;
    }
    .circle-text svg {
        width: 120px;
        height: 120px;
    }
    .about {
        padding: 120px 0;
    }
    .about h3 {
        font-size: 22px;
        padding-top: 50px;
    }
    .about p {
        padding-top: 30px;
        font-size: 17px;
        line-height: 1.7;
    }
    .about .symbol {
        vertical-align: initial;
    }
    .about .clients {
        padding-top: 80px;
    }
    h4.sub-h {
        font-size: 11px;
        margin-bottom: 15px;
    }
    .about .clients h4.sub-h {
        padding-bottom: 0;
    }
    .about .logo-wrapper {
        padding: 25px 0;
    }
    .about .timeline {
        padding-top: 80px;
    }
    .about .timeline li p {
        font-size: 17px;
    }
    .about .time-date {
        font-size: 17px;
    }
    footer {
        height: 600px;
    }
    footer .h-100 {
        height: 100% !important;
    }
    footer .contact-area {
        height: auto;
    }
    .footer .menu li {
        padding: .4rem 1.5rem;
    }
    .footer .menu li a {
        font-size: 17px;
    }
    .footer-bottom .arrow-up li {
        font-size: 36px;
    }
    .bottom-left {
        font-size: 13px;
    }
    .bottom-right {
        font-size: 13px;
    }
}

/** Modal **/

.modal {}

.modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.modal-content {
    border: 0;
    border-radius: 0;
}

.modal-header {
    border: 0;
    border-radius: 0;
}

.modal-body {
    padding: 0;
}

.modal-body img {
    padding: 0;
    width: 100%;
    padding: 60px;
}

.modal-body .container-fluid {
    padding: 1rem;
}

.close-modal {
    font-size: 3.8vw;
    padding: 1vw 2vw;
    color: #fff;
    display: block;
    padding-bottom: 20vw;
}

.close-modal:hover {
    cursor: zoom-out;
}

.project-content {
    padding: 1rem;
    padding-top: 3rem;
    display: flex;
    padding-bottom: 5vw;
}

.project-info {
    padding-top: 3rem;
    display: flex;
}

.project-content h2 {
    font-size: 3.8vw;
    line-height: 1;
}

.project-content h3 {
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0;
}

.project-content h4.sub {
    opacity: .6;
    line-height: 1.2;
}

.project-content h4 {
    line-height: 1.2;
}

.project-content p {
    font-size: 2vw;
    line-height: 1.2;
    margin: 0;
}

#project-header {
    padding: 1rem;
    display: flex;
    height: 60vh;
}

#project-header.runday {
    background: url('../img/p-1.jpg') top center no-repeat;
    background-size: cover;
}

#project-header.drinkspiration {
    background: url('../img/p-2.jpg') center center no-repeat;
    background-size: cover;
}

#project-header.kry {
    background: url('../img/p-3.jpg') center center no-repeat;
    background-size: cover;
}

#project-header.wrapp {
    background: url('../img/p-5.jpg') center center no-repeat;
    background-size: cover;
}

.project-headline {
    display: flex;
    padding: 0;
}

.project-content .top {
    align-self: flex-start;
    padding: 0;
}

.project-content .bottom {
    align-self: flex-end;
    padding: 0;
}

#project-header h2 {
    font-size: 3.8vw;
    line-height: 1;
}

#project-header .bottom {
    align-self: flex-end;
}

.color-section {
    background: #E24E2F;
    width: 100%;
    display: inline-block;
}

.project-modal p {
    line-height: 1.2;
}

.modal-body .section {
    width: 100%;
    display: inline-block;
}

.modal-body .offset {
    margin-top: -50%;
}

.modal-body .cta-last {
    padding-top: 6rem;
}

.modal-body .cta-last h4 {
    margin-bottom: 0;
}

.modal-body .cta-last a {
    font-size: 1.5rem;
}

.modal-body .cta-last a:hover {
    text-decoration: none;
    color: #000;
}

.modal-body .cta-last ul {
    list-style: none;
}

.modal-body .cta-last ul li {
    display: inline-block;
    vertical-align: top;
    float: left;
    width: 50%;
    list-style: none;
}

.modal-body .contact-area {
    float: left;
    width: auto;
}

.modal-body .img-container {
    display: block;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}

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

.modal-body video {
    max-width: 100% !important;
}

.half-width-img {
    background: red;
}

#full-width {
    background: #fff;
    width: 100%;
    height: 900px;
    display: inline-block;
    position: relative;
    margin: 5vw 0;
}

#full-width.drinkspiration-full {
    background: url('../projects/img/drinkspiration-fullwidth.jpg') center center no-repeat;
    background-size: cover;
}

#full-width.kry-full {
    background: url('../projects/img/kry-fullwidth.jpg') center center no-repeat #F0FBFA;
    background-size: contain;
}

#full-width.kry-full-2 {
    background: url('../projects/img/kry-fullwidth-2.jpg') center center no-repeat #F0FBFA;
    background-size: contain;
}

#wrapp.wrapp-full {
    background: url('../projects/img/wrapp-fullwidth.jpg') center center no-repeat #37383C;
    background-size: contain;
}

#wrapp #full-width {
    background: #fff;
    width: 100%;
    height: 1300px;
    display: inline-block;
    position: relative;
    margin: 5vw 0;
    background: url('../projects/img/wrapp-fullwidth.jpg') center center no-repeat #37383C;
    background-size: contain;
}

#full-video {
    background: #ECEDEF;
    width: 100%;
    display: inline-block;
    position: relative;
    margin: 5vw 0;
    padding: 5vw 0;
}

@media screen and (max-width: 991px) {
    .project-info {
        display: inline-block;
    }
}