@charset "UTF-8";
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0)
    }
}

@-webkit-keyframes animIn {
    0% {
        transform: translateX(0%);
        -moz-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%)
    }
    to {
        transform: translateX(-96.7%);
        -moz-transform: translateX(-96.7%);
        -webkit-transform: translateX(-96.7%);
        -o-transform: translateX(-96.7%);
        -ms-transform: translateX(-96.7%)
    }
}

@keyframes animIn {
    0% {
        transform: translateX(0%);
        -moz-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%)
    }
    to {
        transform: translateX(-96.7%);
        -moz-transform: translateX(-96.7%);
        -webkit-transform: translateX(-96.7%);
        -o-transform: translateX(-96.7%);
        -ms-transform: translateX(-96.7%)
    }
}

@-webkit-keyframes animOut {
    0% {
        transform: translateX(-96.7%);
        -moz-transform: translateX(-96.7%);
        -webkit-transform: translateX(-96.7%);
        -o-transform: translateX(-96.7%);
        -ms-transform: translateX(-96.7%)
    }
    to {
        transform: translateX(0%);
        -moz-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%)
    }
}

@keyframes animOut {
    0% {
        transform: translateX(-96.7%);
        -moz-transform: translateX(-96.7%);
        -webkit-transform: translateX(-96.7%);
        -o-transform: translateX(-96.7%);
        -ms-transform: translateX(-96.7%)
    }
    to {
        transform: translateX(0%);
        -moz-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -o-transform: translateX(0%);
        -ms-transform: translateX(0%)
    }
}


@-webkit-keyframes titleAnim {
    0% {
        transform: translate(0%, -50%) scale(1, 1);
        -moz-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform: translate(0%, -50%) scale(1, 1);
        -o-transform: translate(0%, -50%) scale(1, 1);
        -ms-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
    to {
        transform: translate(0%, -43%) scale(0.95, 1.05);
        -moz-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform: translate(0%, -43%) scale(0.95, 1.05);
        -o-transform: translate(0%, -43%) scale(0.95, 1.05);
        -ms-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@keyframes titleAnim {
    0% {
        transform: translate(0%, -50%) scale(1, 1);
        -moz-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform: translate(0%, -50%) scale(1, 1);
        -o-transform: translate(0%, -50%) scale(1, 1);
        -ms-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
    to {
        transform: translate(0%, -43%) scale(0.95, 1.05);
        -moz-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform: translate(0%, -43%) scale(0.95, 1.05);
        -o-transform: translate(0%, -43%) scale(0.95, 1.05);
        -ms-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@-webkit-keyframes bgAnim {
    0%,
    6.25% {
        background-color: #252020
    }
    12.5%,
    18.75% {
        background-color: #D3708F
    }
    25%,
    31.25% {
        background-color: #E0C9C4
    }
    37.5%,
    43.75% {
        background-color: #9091D6
    }
    50%,
    56.25% {
        background-color: #A7DCEB
    }
    62.5%,
    68.75% {
        background-color: #F08282
    }
    75%,
    81.25% {
        background-color: #FFCC9F
    }
    87.5%,
    93.75% {
        background-color: #FDF790
    }
}

@keyframes bgAnim {
    0%,
    6.25% {
        background-color: #252020
    }
    12.5%,
    18.75% {
        background-color: #D3708F
    }
    25%,
    31.25% {
        background-color: #E0C9C4
    }
    37.5%,
    43.75% {
        background-color: #9091D6
    }
    50%,
    56.25% {
        background-color: #A7DCEB
    }
    62.5%,
    68.75% {
        background-color: #F08282
    }
    75%,
    81.25% {
        background-color: #FFCC9F
    }
    87.5%,
    93.75% {
        background-color: #FDF790
    }
}
.storyverse {
    background-color: #333231;
    color: #E6E6E6
}

.storyverse .live-link a {
    color: #E6E6E6
}

.storyverse .live-link a:after {
    background: url("../img/projects/storyverse/img-arrow.svg") no-repeat;
    background-size: 70% 70%;
    background-position: center center
}

.storyverse .live-link a span {
    background-color: #E6E6E6;
    opacity: .25
}

.storyverse .project-heading .scroll-line span {
    background-color: #E6E6E6
}

.storyverse .slidenav:before {
    background-color: #333231
}

.storyverse .link-mask i {
    color: #E6E6E6;
    font-style: normal
}

.storyverse .live-link a:before {
    background-color: #E6E6E6
}

.storyverse .text-link {
    color: #E6E6E6
}

.storyverse .text-link:before {
    background-color: #E6E6E6
}

.storyverse .logo {
    background-color: #cdcdcd
}

.storyverse .contact-icon {
    background-color: #cdcdcd
}

.storyverse h1 span,
.storyverse h2 span,
.storyverse h3 span,
.storyverse h4 span {
    color: #E6E6E6;
    font-style: normal
}

.storyverse .mc-chicken span {
    background-color: #E6E6E6
}

.storyverse .mc-chicken.opened span {
    background-color: #fff
}

.storyverse .shape-morph {
    top: 65%;
    z-index: 1;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    right: -15%;
    width: 84%
}

.storyverse .shape-morph svg {
    fill: #E6E6E6;
    opacity: .1
}

.storyverse #story .chapter-icon {
    width: 25%
}

.storyverse #story .img-first {
    top: 0%;
    left: 0%
}

.storyverse #ux {
    position: relative;
    background-color: #fff;
    color: #333231;
    overflow: hidden
}

.storyverse #ux .chapter-icon {
    position: absolute;
    top: -75%;
    left: 90%;
    width: 25%
}

.storyverse #ux .img-slider-wrap {
    width: 110%;
    margin-left: -5%;
    margin-top: -1em;
    overflow: hidden;
    background: url("../img/projects/storyverse/ux-skew.svg");
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat
}

.storyverse #ux .img-slider {
    transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    animation: imgSlider 2s infinite ease-in-out;
    -moz-animation: imgSlider 2s infinite ease-in-out;
    -webkit-animation: imgSlider 2s infinite ease-in-out;
    -o-animation: imgSlider 2s infinite ease-in-out;
    background: url("../img/projects/storyverse/ux-slide-1.png") no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    width: 100%
}

.storyverse #ux .img-slider:before {
    z-index: 999;
    content: "";
    display: block;
    padding-top: 75%
}
.storyverse #design {
    position: relative;
    background-color: #fff;
    color: #333231
}

.storyverse #design .chapter-icon {
    position: absolute;
    top: -30%;
    left: 50%
}

.storyverse #design .wrapped-img {
    width: 40%;
    left: 60%;
    top: 0
}

.storyverse .carousel-wrap {
    margin-top: -40vh
}

.storyverse .carousel-wrap .lSAction>a {
    background-color: #E6E6E6
}

.storyverse .carousel-wrap .lSAction>a:before {
    background-color: #333231
}

.storyverse .carousel-wrap .lSAction>a:after {
    background-color: #333231
}

.storyverse .next-project a {
    color: #E6E6E6
}

.storyverse .next-project .shape-morph-bottom svg {
    fill: #262525;
    opacity: 1
}

.storyverse .next-project h2 span {
    color: #E6E6E6!important
}

.storyverse #development {
    background-color: #333231;
    color: #E6E6E6
}

.storyverse #development .box p {
    opacity: .6
}
.shape-morph {
    width: 140%;
    height: auto;
    transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    position: absolute;
    top: 40%;
    right: -40%;
    z-index: -1
}

.shape-morph .scene {
    position: relative;
    width: 100%;
    height: auto
}

.shape-morph svg {
    fill: none
}

.team .shape-morph {
    width: 100%;
    height: 100%;
    top: -10%;
    left: 20%;
    z-index: -1
}

.team .shape-morph svg {
    fill: #D6372E
}

.studio .shape-morph .scene {
    fill: none
}

.funzone .shape-morph {
    width: 80%;
    height: auto;
    top: 40%;
    left: 60%
}

#culture .shape-morph {
    width: 70%;
    height: auto;
    top: 40%;
    right: 30%;
    z-index: -1;
    mix-blend-mode: normal
}

#approach {}

#approach .svg-shape {
    top: 25vh;
    right: 10%;
    width: 20%
}

#studio-intro {
    height: 100%;
    padding: 5vh 0;
    position: relative;
    line-height: 1.9em
}

#studio-intro p {
    font-size: 1.1em
}
.main-heading {
    margin-top: 2em;
    position: relative
}

.main-heading.studio {
    margin-top: 0
    
}

.main-heading.studio .scroll-line {
    left: 18%;
    bottom: 10%
}

.main-heading.studio .shape-morph {
    top: 50vh;
    left: 5%;
    width: 130%
}

.main-heading.studio h1 {
    margin-top: 15vh
}

.main-heading h1 span {
    display: inline-block;
    line-height: .85em
}

.main-heading span:first-child {
    display: inline;
    margin-right: -0.225em;
    padding: 0
}

.main-heading h1 {
    font-size: 6em
}

.main-heading p {
    margin: 2em 0 0
}

.grid-wrap {
    width: 76%;
    margin: 0 auto;
    padding: 0 12%
}

.svg-shape {
    position: absolute
}