@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

body, html {
    overflow-x: hidden;
    backface-visibility: hidden;
    /*font-family: 'NeueMachina';*/
	font-family: "Outfit", sans-serif;
}

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-web.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-web.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;
}

@font-face {
    font-family: "MonumentExtended Regular";
    src: url("../fonts/MonumentExtended-Regular.SFFAV6VO.woff2") format("woff2"),
      url("../fonts/MonumentExtended-Regular.WUUMIEFI.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "MonumentExtended UltraBold";
    src: url("../fonts/MonumentExtended-UltraBold.V3YJPPWI.woff2") format("woff2"),
      url("../fonts/MonumentExtended-UltraBold.LLZXKRMM.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

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: 4vw;
    text-transform: uppercase;
    padding-bottom: 40px;
    margin-bottom: 0;
    line-height: 1;
    font-weight: bold;
}

a, p {
	font-family: "Outfit", sans-serif;
    /*font-family: 'NeueMachina';*/
    font-weight: 400;
    color: #000;
}

a {
    color: #000;
}

.btn-primary {
    background: #dc4158 !important;
    border: 0 !important;
    color: #fff !important;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 30px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px !important;
}
.btn-primary:hover {
    background: #a83143 !important;
}

.close-project {
	z-index: 9999;
}

h4.sub-h {
    /*font-family: 'NeueMachina';*/
	font-family: "Outfit", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    /*font-weight: bold;*/
}

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

.slide-two {
    width: 100vw;
    height: 100vh;
    max-width: 100%;    
    padding: 0 4vw;
    margin-bottom: 10vw;
}

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

.slide-three {
    width: 100vw;
    height: 40vh;
    max-width: 100%;    
    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: #ff9a6f;    
}

.two {
    background-color: #38caff;
}

.three {
    background-color: #a8b2ff;
}

.four {
    /* background-color: #A8B4C7; */
    /* background-color: #E5E6EA; */
    background-color: #C1DAFF;
}

.five {
    background-color: #D5DAEB;
}

/**.five{background-color: #5835F5;}.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;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

#work a:hover .portfolio-img {
    transform: scale(1.05);
}

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

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

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

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

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

.img-six {
    background-image: url(../images/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;
    /* opacity: .8; */
}

.hide {
    visibility: hidden;
}

#footer-wrap {
    background: #fff;
}

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

#footer-wrap h2 {
	font-family: "Outfit", sans-serif;
    /*font-family: 'NeueMachina';*/
    line-height: 0.9;
}

#footer-wrap h2 strong {
    color: #dc4158;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.footer-links li {
    margin: 0 30px;
    width: calc(25% - 60px);
}
.footer-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 25px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transition: .6s cubic-bezier(0,.89,.41,1);
    position: relative;
    overflow: hidden;
    padding: 14px 0;
    width: 100%;
}
.footer-links li a:hover {
    background: #dc4158;
    padding: 14px;
    color: #fff;
    border-top: 1px solid #dc4158;
}

#footer-wrap p {
    margin: 0;
    padding: 0;
    font-size: 22px;
}

.footer-links li div p:last-child {
    font-size: 12px !important;
    padding-bottom: 4px;
    opacity: .6;
}

.footer-links li a:hover p {
    color: #fff !important;
}

#contact .container {
    max-width: 85%;
}

/* 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: translateY(100%);
        -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: 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 img {
    border-radius: 100%;
}

.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;    
    list-style: none;
    justify-content: end;
    margin: 0;
}
.navbar li {
    margin-left: 2vw;
}

.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: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.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: 24px;*/
}

#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: 8vw;
    line-height: 0.8;
    color: #000;
    text-transform: uppercase;
    font-family: "MonumentExtended UltraBold";
}

.s-03 span {
    color: #dc4158;
}

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

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

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

.s-04 {
    padding-left: 10vw;
}

.s-05 {
    padding-right: 10vw;
}

/* .has-bg {
    background: #dc4158;
    display: inline-block;
    padding: 0 15px 9px;
    color: #fff;
} */

.date {
    display: block;
    overflow: hidden;
    vertical-align: top;
    text-align: left;
    line-height: 3em;
    text-transform: none;
    /*font-family: 'NeueMachina';*/
	font-family: "Outfit", sans-serif;
    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: 8vw;
    }
}

#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';*/
	font-family: "Outfit", sans-serif;
    display: block;
    margin-bottom: 0;
}

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

.about {
    background: #000;
    padding: 10vw 0;
    color: #fff;
    position: relative;
}

.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: 1.8vw;
    padding-top: 6vw;
    /*font-family: 'NeueMachina';*/
	font-family: "Outfit", sans-serif;
}

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

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

.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: 1.5vw;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about .timeline li p:last-child {
    opacity: .3;
    font-size: 1vw;
}

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

.about .time-date {
    font-size: 1vw;
    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;
    background: #000;
    width: 100%;
    height: 100%;
}

.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: 6vw;
}

.footer h2 {
    font-size: 5.5vw;
    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: -250px;
}

.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 #dc4158;
    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 {    
    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 {        
        padding: 5vw !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: 700px;
    }

    .header .contact-area {
        width: auto;
    }

    .logo {
        height: 64px;
    }

    .navbar {
        padding: 0;
        justify-content: normal;
        padding-top: 15px;
        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: 700px;
    }

    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;
    min-height: 100vh;
}

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

.modal-body {
    padding: 0;
    overflow: hidden;
}

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

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

.close-modal {
    font-size: 18px;
    padding: 2vw;
    color: #fff;
    display: block;    
    font-weight: 400;
    align-items: center;
    display: flex;
    background: #dc4158;
}
.close-modal img {
    margin-right: 15px;
    width: 40px;    
}

.close-modal:hover {
    cursor: pointer;
}

.project-content {        
    display: flex;
    padding-bottom: 50px;
    padding-top: 50px;
}

.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('../images/p-1.jpg') top center no-repeat;
    background-size: cover;
}

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

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

#project-header.wrapp {
    background: url('../images/p-4.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.docsee {
    background: #364153;
    color: #fff;
}
.project-modal.docsee h3 {
    color: #fff !important;
} */

.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;
    }
}

.strokes, .animated-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%
}

.strokes div, .animated-bg div {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #e5e5e5;
}

.about .strokes div {
    background: #1c1c1c;
}

.strokes div:nth-child(4),
.strokes div:nth-child(5) {
	-webkit-transform: translateX(-1px);
	transform: translateX(-1px)
}

.strokes div:nth-child(1) {
	left: 16.6666666667%
}

.strokes div:nth-child(2) {
	left: 33.3333333333%
}

.strokes div:nth-child(3) {
	left: 50%
}

.strokes div:nth-child(4) {
	left: 66.6666666667%
}

.strokes div:nth-child(5) {
	left: 83.3333333333%
}

.animated-bg div {
    background: #f8f8f8;
    width: 16.6666666667%;
    z-index: -2;
    opacity: 0;    
}

.animated-bg div:first-child {
    animation: 3s infinite alternate show1;
}

.animated-bg div:nth-child(2) {
    left: 33.3333333333%;
    animation: 6s infinite alternate show2;
}

.animated-bg div:nth-child(3) {
    left: 66.6666666667%;
    animation: 9s infinite alternate show1;
}

@keyframes show1 {
    0% {
      opacity: 0;
    }

    50% {
        opacity: 1;
    }    

    100% {
        opacity: 0;
    }
}

@keyframes show2 {
    0% {
      opacity: 0;
    }
  
    25% {
      opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes show2 {
    0% {
      opacity: 0;
    }
  
    25% {
      opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media only screen and (max-width:767px) {
	.strokes div:nth-child(1) {
		left: 33.3333333333%
	}
	.strokes div:nth-child(2) {
		left: 66.6666666667%
	}
	.strokes div:nth-child(3) {
		left: 100%
	}
	.strokes div:nth-child(4) {
		left: 133.3333333333%
	}
	.strokes div:nth-child(5) {
		left: 166.6666666667%
	}
    .animated-bg div {
        width: 33.3333333333%;
    }
}

.skills-wrapper {
    display: block;
    width: 100%;
    margin-top: 10vw;
}

.skills {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;    
}
.skills li {
    margin: 0 15px;
    color: #fff;
}
.skills li span {
    padding: 15px 30px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: block;
    font-size: 1.5vw;
}

@media only screen and (max-width:1550px) {
    .about .timeline li p, .about h3 {
        font-size: 24px;
    }
    .about .time-date, .skills li span {
        font-size: 22px;
    }
    .about .timeline li p:last-child {
        font-size: 16px;
    }
    .footer h2 {
        font-size: 5.5vw;
    }
    #contact .container {
        max-width: 100%;
    }
}

@media only screen and (max-width:1199px) {
    .s-01, .s-02, .s-03 {
        font-size: 11vw;
    }
    .circle-text {
        display: none;
    }
    .footer-links li {
        width: calc(50% - 60px);
        margin-bottom: 30px;
    }
}

@media only screen and (max-width:991px) {
    .navbar a, .navbar a > span {
        font-size: 15px;
    }
    .panel {
        position: relative;
    }
    .panel .overlay {
        display: none;
    }
    #pinContainer {
        overflow: initial;
        height: auto;
    }
    .portfolio-img, .img-wrapper {
        height: 500px;
    }
    .project-desc h3 {
        font-size: 5vw;
    }
    .sm-order-1 {
        order: 1;
    }
    .sm-order-2 {
        order: 2;
    }
    .about {
        padding: 0 0 60px;
    }
}

@media only screen and (max-width:767px) {
    .navbar li:not(:last-child) {
        display: none;
    }
    .s-01, .s-02, .s-03 {
        line-height: 1;
    }
    h1.pb-5 {
        padding: 0 !important;
    }
    .section-1 {
        padding-bottom: 0 !important;
    }
    .project-desc h3 {
        font-size: 38px;
    }
    .about .timeline li p {
        flex-wrap: wrap;
    }
    .about .timeline li p span {
        display: block;
        width: 100%;
    }
    .about .timeline li p:last-child {
        margin-top: 3px;
    }    
    .about p {
        font-size: 20px;
    }
    .footer h2 {
        font-size: 8vw;
    }
    .footer-links li {
        width: 100%;
    }
    #footer-wrap p {
        font-size: 20px;
    }
    #footer-wrap h2 {
        line-height: 1.1;
    }
    .about .timeline li p {
        font-size: 22px;
    }
    .about .time-date {
        font-size: 20px;
    }
    .project-content {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.astra-project, .xloop-project, .eshifa-project, .royal-store-project {
    background: #000;
    min-height: 100vh;
    padding: 6vh 0 0;
    color: #6D6D6D;
    font-size: 18px;
}
.project-detail .container {
    max-width: 1280px;
}
.project-detail .all-projects {
    font-size: 14px;    
    color: #808080;
    display: flex;
    cursor: pointer;
    align-items: center;
}
.project-detail .all-projects:hover {
    color: #fff;
}
.project-detail .all-projects img {
    width: 23px;
    opacity: 0.5;
    margin: 0 10px 0 0 !important;
}
.project-detail .all-projects:hover img {
    opacity: 1;
}
.project-detail h2 {
    color: #E2E2E2;
    font-size: 5vw;
    font-weight: bold;
    text-transform: none;
}
.project-detail h3 {
    color: #E2E2E2;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
    position: relative;
    padding-left: 65px;
    margin-bottom: 1rem;
}
.project-detail h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 50px;
    height: 1px;
    background: #E2E2E2;
}
.project-detail p {
    color: #6D6D6D;
    padding-left: 65px;
    line-height: 1.7;
}
.project-detail ul {
    list-style-type: none;
    padding: 0;
    margin: 30px 0 0 65px;
    display: flex;
    flex-wrap: wrap;
}
.project-detail ul li {
    margin: 10px 0 0;
    padding: 0;
    width: 33.33%;
}
.project-detail .has-bg-box-left::before, .project-detail .has-bg-box-right::before {
    content: "";
    width: 110vw;
    height: 334px;
    position: absolute;
    top: 200px;
    background: linear-gradient(270deg, #FE344A 0%, #F35816 100%);
    left: -100%;
    z-index: 0;
}
.project-detail .has-bg-box-right::before {
    top: auto;
    bottom: 0;
    left: auto;
    right: -100%;
}
.project-detail .has-bg-box-right {
    padding: 0 0 150px;
}
.project-detail .has-bg-box-right ul, .project-detail .has-bg-box-right ul li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
}
.slider-arrows {
    position: absolute;
    left: 0;
    bottom: 57px;
}
.slider-arrows span {
    width: 80px;
    height: 80px;
    display: inline-block;
    cursor: pointer;
    background: url(../../projects/img/astra/slider-arrow-left.svg) no-repeat center center;
}
.slider-arrows span:last-child {
    margin-left: 15px;
    background: url(../../projects/img/astra/slider-arrow-right.svg) no-repeat center center;
}
.astra-project .brand-guidelines {
    background: #252525;
    padding: 10vh 0;
    margin-top: 10vh;
}
.xloop-project {
    background: #121133 url(../../projects/img/xloop/xloop-1.svg) no-repeat right top;
    background-attachment: fixed;
    color: #868697;
}
.xloop-project p {
    color: #868697;
}
.xloop-project .all-projects {
    color: #868697;
}
.xloop-project .has-bg-box-left::before, .xloop-project .has-bg-box-right::before {
    background: #04A1D8;
    top: 25%;
}
.xloop-project .has-bg-box-right {
    padding-top: 140px;
    margin-top: 140px;
}
.xloop-project .has-bg-box-right::before {
    top: 0;
    width: 150%;
    height: 51%;
	opacity: 0.5;
}
.xloop-project .brand-guidelines {
    background: url(../../projects/img/xloop/xloop-5.png) no-repeat center top;
    background-size: 100%;
    padding: 7% 0 4%;
}
.xloop-project .brand-guidelines .container {
    background: #F2FAFD;
    padding: 0;
}
.xloop-project .brand-guidelines .top-section {
    padding: 70px;
    color: #54647A;
}
.xloop-project .brand-guidelines .top-section h3 {
    color: #1B194A;
}
.xloop-project .brand-guidelines .top-section h3::before{
    background: #1B194A;
}
.eshifa-project {
    background: #fff;
    color: rgba(0, 0, 0, 0.5);
}
.project-detail.eshifa-project .all-projects:hover {
    color: #000;
}
.eshifa-project h2 {
    color: #DC4158;
}
.project-detail.eshifa-project h3 {
    color: #000;
}
.project-detail.eshifa-project h3::before {
    background: #000;
}
.project-detail.alissa-project .has-bg-box-left::before, .project-detail.alissa-project .has-bg-box-right::before {
    background: #EC1B2E;
}
.royal-store-project {
    background: #0A1B2D;
    color: #848D96;
}
.royal-store-project p {
    color: #848D96;
}
.royal-store-project .all-projects {
    color: #848D96;
}

.wa-chat-box-poweredby {
    display: none !important;
}
.wa-chat-box-content-send-btn {
    margin-bottom: 13px !important;
}
#wa-widget-send-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
}
#wa-widget-send-button svg {
    width: 30px !important;
    height: 30px !important;
}
.wa-chat-box {
    margin-bottom: 64px !important;
}
.wa-chat-box-content-send-btn {
    padding: 12px 0 !important;
    text-decoration: none !important;
}
.wa-chat-box-content-send-btn-text {
    text-decoration: none !important;
}
@media screen and (max-width: 1199px) {
    .project-detail h2 {
        font-size: 10vw;
    }
}
@media screen and (max-width: 991px) {
    .project-detail ul li {
        width: 100%;
    }
    .project-detail .has-bg-box-left::before, .project-detail .has-bg-box-right::before {
        display: none;
    }
    .project-detail .has-bg-box-right {
        padding: 0;
    }
}
@media screen and (max-width: 768px) {
    .project-detail h2 {
        font-size: 14vw;
    }
    .justify-content-center .pl-5 {
        padding-left: 15px !important
    }
    .justify-content-center .ml-5 {
        margin-left: 0 !important;
    }
}