.btn-ill {
    border: 1px solid #000;
    height: 50px;
    box-sizing: border-box;
    padding: 18px 30px 16px;
    font-size: 11px;
    margin: 30px 10px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    background: transparent;
    color: #000;
    border-radius: 0;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

    .btn-ill:hover {
        background-color: #30B9C1;
        border: 1px solid transparent;
    }

    .btn-ill.btn-pink:hover {
        background-color: #dd467d;
        color: #fff;
    }

    .btn-ill.btn-violet:hover {
        background-color: #945ea7;
        color: #fff;
    }

    .btn-ill.btn-bluegreen:hover {
        background-color: #30B9C1;
    }

    .btn-ill.btn-orange:hover {
        background-color: #e27b4f;
    }

    .btn-ill.btn-yellow:hover {
        background-color: #fcb830;
    }

    .btn-ill.btn-lightgreen:hover {
        background-color: #7dbb52;
    }

.icon-illustration {
    width: 60px;
    height: 60px;
    position: relative;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    background-image: url(ico-sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

    .icon-illustration:before {
        content: "";
        width: 55px;
        height: 55px;
        display: block;
    }

    .icon-illustration.icon-leaf {
        background-position: -490px 0;
    }

        .icon-illustration.icon-leaf:hover, .icon-illustration.icon-leaf.active {
            background-position: -552px 0;
        }

    .icon-illustration.icon-key {
        background-position: -115px 0;
    }

        .icon-illustration.icon-key:hover, .icon-illustration.icon-key.active {
            background-position: -172px 0;
        }

    .icon-illustration.icon-medal {
        background-position: -620px 0;
    }

        .icon-illustration.icon-medal:hover, .icon-illustration.icon-medal.active {
            background-position: -678px 0;
        }

    .icon-illustration.icon-stopwatch {
        background-position: -367px 0;
    }

        .icon-illustration.icon-stopwatch:hover, .icon-illustration.icon-stopwatch.active {
            background-position: -428px 0;
        }

    .icon-illustration.icon-megafon {
        background-position: 8px 0;
    }

        .icon-illustration.icon-megafon:hover, .icon-illustration.icon-megafon.active {
            background-position: -53px 0;
        }

    .icon-illustration.icon-map {
        background-position: -245px 0;
    }

        .icon-illustration.icon-map:hover, .icon-illustration.icon-map.active {
            background-position: -304px 0;
        }

.container {
    width: 1150px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.narrow-column {
    width: 30%;
    float: left;
}

.wide-column {
    width: 54%;
    float: left;
}

.early-access-box {
    position: relative;
    text-align: center;
    padding-top: 20px;
    max-width: 950px;
    margin: auto;
}

    .early-access-box h4 {
        margin-top: 5px;
        color: #fff;
    }

    .early-access-box .cake-btn {
        z-index: 999;
    }

        .early-access-box .cake-btn > a {
            text-decoration: none;
            position: relative;
            width: 100%;
            height: 100%;
            display: block;
        }

        .early-access-box .cake-btn .btn-ill {
            width: 135px;
            height: 40px;
            padding-top: 13px;
        }

    .early-access-box .narrow-column .text-container {
        padding-top: 150px;
    }

    .early-access-box .wide-column {
        width: 40%;
    }

        .early-access-box .wide-column .text-container {
            width: 238px;
        }

    .early-access-box .illustation {
        position: relative;
        width: 100%;
        max-width: 607px;
        padding-bottom: 100%;
        margin: 20px 0 40px;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }

        .early-access-box .illustation img {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
        }

        .early-access-box .illustation .lines-img {
            position: absolute;
            width: 109.8%;
            top: -4.8%;
            left: -4.8%;
            max-width: 667px;
            max-height: 667px;
        }

        .early-access-box .illustation .line {
            position: absolute;
            top: 0;
            left: 50%;
            transform-origin: 50% 100%;
            margin-left: -5px;
            width: 10px;
            height: 50%;
        }

            .early-access-box .illustation .line > .circle {
                width: 10px;
                height: 10px;
                display: block;
                border-radius: 50%;
                background-color: #EEE;
                margin-top: -24px;
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                -webkit-transition: all .5s linear;
                -moz-transition: all .5s linear;
                transition: all .5s linear;
            }

            .early-access-box .illustation .line.first-line {
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            .early-access-box .illustation .line.second-line {
                -webkit-transform: rotate(60deg);
                -moz-transform: rotate(60deg);
                -ms-transform: rotate(60deg);
                -o-transform: rotate(60deg);
                transform: rotate(60deg);
                margin-top: -2px;
            }

            .early-access-box .illustation .line.third-line {
                -webkit-transform: rotate(120deg);
                -moz-transform: rotate(120deg);
                -ms-transform: rotate(120deg);
                -o-transform: rotate(120deg);
                transform: rotate(120deg);
            }

            .early-access-box .illustation .line.fourth-line {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .early-access-box .illustation .line.fifth-line {
                -webkit-transform: rotate(240deg);
                -moz-transform: rotate(240deg);
                -ms-transform: rotate(240deg);
                -o-transform: rotate(240deg);
                transform: rotate(240deg);
                margin-top: -2px;
            }

            .early-access-box .illustation .line.sixth-line {
                -webkit-transform: rotate(300deg);
                -moz-transform: rotate(300deg);
                -ms-transform: rotate(300deg);
                -o-transform: rotate(300deg);
                transform: rotate(300deg);
                margin-top: -1px;
            }

        .early-access-box .illustation.first .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
        }

        .early-access-box .illustation.first .first-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.first #firstLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

        .early-access-box .illustation.second .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        .early-access-box .illustation.second .second-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.second #secondLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

        .early-access-box .illustation.third .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            transform: rotate(60deg);
            top: -1px;
        }

        .early-access-box .illustation.third .third-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.third #thirdLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

        .early-access-box .illustation.fourth .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -o-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        .early-access-box .illustation.fourth .fourth-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.fourth #fourthLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

        .early-access-box .illustation.fifth .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .early-access-box .illustation.fifth .fifth-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.fifth #fifthLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

        .early-access-box .illustation.sixth .foreground {
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            -webkit-transform: rotate(240deg);
            -moz-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            -o-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        .early-access-box .illustation.sixth .sixth-line .circle {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .early-access-box .illustation.sixth #sixthLine {
            -webkit-transition: opacity 1s linear;
            -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
            opacity: 0;
        }

    .early-access-box .text-container {
        margin: 0 auto;
        width: 100%;
        padding: 0;
        min-height: 120px;
        position: relative;
    }

        .early-access-box .text-container .illustration-txt {
            font-size: 12px;
            line-height: 180%;
            color: #FFF;
            position: absolute;
            right: 10px;
            width: 265px;
            top: 0;
            padding: 10px;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all .8s;
            transition: all .8s;
            text-align: right;
        }

            .early-access-box .text-container .illustration-txt.active {
                visibility: visible;
                opacity: 1;
                top: 100px;
            }

            .early-access-box .text-container .illustration-txt a {
                color: #fff;
            }

.wide-column .text-container .illustration-txt {
    right: -230px !important;
    top: 0 !important;
}

    .wide-column .text-container .illustration-txt.active {
        right: 180px !important;
    }

.wide-column .text-container:last-child .illustration-txt {
    right: 60px !important;
}

    .wide-column .text-container:last-child .illustration-txt.active {
        right: -200px !important;
    }

.early-access-box .text-container h4 {
    font-size: 18px;
}

@media (max-width: 1200px) {
    .container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .early-access-box .narrow-column, .early-access-box .wide-column {
        width: 100%;
    }

        .early-access-box .narrow-column .text-container, .early-access-box .wide-column .text-container {
            width: 50%;
            float: left;
            padding: 0 5%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    .illustation {
        display: none;
    }

    .early-access-box .text-container .illustration-txt, .wide-column .text-container .illustration-txt.active, .wide-column .text-container:last-child .illustration-txt, .wide-column .text-container:last-child .illustration-txt.active {
        position: relative;
        right: auto !important;
        opacity: 1;
        text-align: center;
        visibility: visible;
        top: auto !important;
        margin: auto;
        margin-bottom: 20px;
    }

    .early-access canvas {
        display: none;
    }

    #section1 {
        background: #7EB549 !important;
    }
}

@media (max-width: 700px) {
    .early-access-box .narrow-column, .early-access-box .wide-column {
        width: 100%;
    }

        .early-access-box .narrow-column .text-container, .early-access-box .wide-column .text-container {
            width: 100%;
        }
}

.early-access {
    height: 750px;
}

#section1 {
    overflow: hidden;
    position: relative;
    background: #7EB549;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -ms-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

    #section1.first {
        background: #7EB549;
    }

    #section1.second {
        background: #B91D01;
    }

    #section1.third {
        background: #76558C;
    }

    #section1.fourth {
        background: #FFD500;
    }

    #section1.fifth {
        background: #30B2C0;
    }

    #section1.sixth {
        background: #CA6AA4;
    }

    #section1:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #404952;
        background: -moz-linear-gradient(top,rgba(64,73,82,0) 0%,rgba(16,19,24,1) 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(64,73,82,0)),color-stop(100%,rgba(16,19,24,1)));
        background: -webkit-linear-gradient(top,rgba(64,73,82,0) 0%,rgba(16,19,24,1) 100%);
        background: -o-linear-gradient(top,rgba(64,73,82,0) 0%,rgba(16,19,24,1) 100%);
        background: -ms-linear-gradient(top,rgba(64,73,82,0) 0%,rgba(16,19,24,1) 100%);
        background: linear-gradient(top,rgba(64,73,82,0) 0%,rgba(16,19,24,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404952',endColorstr='#101318',GradientType=0);
    }

.early-access canvas {
    position: fixed;
}

.none {
    display: none;
}

.table, .cf:after, .cf:before, .main:after, .main:before {
    display: table;
}

.cell {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

.table {
    width: 100%;
    height: 100%;
}

.nav-list {
    padding: 0;
    position: relative;
}

    .nav-list:before {
        content: "";
        position: absolute;
        top: 1.7em;
        right: 8px;
        bottom: 1.7em;
        width: 1px;
        background: #fff;
        background: rgba(255,255,255,0.5);
    }

    .nav-list li {
        list-style: none;
    }

        .nav-list li a {
            color: #fff;
        }

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.rel, *, :after, :before {
    position: relative;
}

.abs {
    position: absolute;
}

.cf {
    *zoom: 1;
}

    .cf:after, .cf:before {
        content: "";
    }

    .cf:after {
        clear: both;
    }

.list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

html.mac button, html.mac input, html.mac {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-osx-font-smoothing: antialiased;
}

::-moz-selection {
    background: #292929;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #292929;
    color: #fff;
    text-shadow: none;
}

*, :after, :before {
    outline: none;
}

.home-project {
    width: 100%;
    position: relative;
}

@media (min-width: 1025px) {
    .home-project {
        height: 100%;
        overflow: hidden;
    }
}

html.is-locked {
    overflow: hidden;
    height: 100%;
}

.home-project {
    counter-reset: projects;
    font-size: 17px;
    color: #fff;
    background: #292929;
}

.is-locked .home-project {
    overflow: hidden;
    height: 100%;
}

@media (min-width: 768px) {
    .home-project {
        font-size: 17px;
    }
}

@media (min-width: 1025px) {
    .home-project {
        font-size: 17px;
        background-image: none;
    }
}

@media (min-width: 1200px) {
    .home-project {
        font-size: 19px;
    }
}

@media (min-width: 1400px) {
    .home-project {
        font-size: 20px;
    }
}

@media (max-width: 1025px) {
    .home-project {
        background: #292929 !important;
        height: auto !important;
    }
}

.main {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em;
}

@media (min-width: 768px) and (max-width: 1025px) {
    .main {
        *zoom: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .main:after, .main:before {
            content: "";
        }

        .main:after {
            clear: both;
        }
}

@media (min-width: 1025px) {
    .main {
        padding: 0;
    }
}

.canvas {
    display: none;
    z-index: -1;
    position: absolute;
}

@media (min-width: 1025px) {
    .canvas {
        display: block;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
    }
}

.project-btn {
    display: inline-block;
    padding: .5em 1em;
    font-weight: 700;
    border: 2px solid;
    cursor: pointer;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: #fff;
    will-change: border,color;
}

.btn {
    margin-top: 0;
    /*width: 100%;*/
    box-shadow: 0 0 0 3px;
}

.is-loaded .project-btn {
    -webkit-transition: all 1s cubic-bezier(1,0,0,1);
    transition: all 1s cubic-bezier(1,0,0,1);
}

.project-btn:hover {
    color: #fff;
    -webkit-transition: all .6s cubic-bezier(0.19,1,0.22,1);
    transition: all .6s cubic-bezier(0.19,1,0.22,1);
}

    .project-btn:hover .btn-bg {
        opacity: 1;
        -webkit-transform: translateY(-50%) scale(1.1);
        -ms-transform: translateY(-50%) scale(1.1);
        transform: translateY(-50%) scale(1.1);
    }

.no-csstransforms3d .project-btn:hover .btn-bg {
    -webkit-transform: translate(0,-50%) scale(1.1);
    -ms-transform: translate(0,-50%) scale(1.1);
    transform: translate(0,-50%) scale(1.1);
}

.project-btn:hover .btn-bg:first-of-type {
    -webkit-transition: opacity .4s 0 cubic-bezier(0.19,1,0.22,1),-webkit-transform .4s 0 cubic-bezier(0.19,1,0.22,1);
    transition: opacity .4s 0 cubic-bezier(0.19,1,0.22,1),transform .4s 0 cubic-bezier(0.19,1,0.22,1);
}

.project-btn:hover .btn-bg:last-of-type {
    -webkit-transition: opacity .5s .1s cubic-bezier(0.19,1,0.22,1),-webkit-transform .5s .1s cubic-bezier(0.19,1,0.22,1);
    transition: opacity .5s .1s cubic-bezier(0.19,1,0.22,1),transform .5s .1s cubic-bezier(0.19,1,0.22,1);
}

.project-btn:active .btn-bg:last-of-type {
    opacity: .8;
    -webkit-transition: opacity .1s cubic-bezier(0.19,1,0.22,1),-webkit-transform .1s cubic-bezier(0.19,1,0.22,1);
    transition: opacity .1s cubic-bezier(0.19,1,0.22,1),transform .1s cubic-bezier(0.19,1,0.22,1);
}

.project-btn.white {
    color: rgba(255,255,255,0.8);
}

.project-btn.black {
    color: rgba(0,0,0,0.6);
}

    .project-btn.black:last-of-type {
        background: #fff;
    }

.btn-bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    padding-top: calc(100% + 2.66em);
    -webkit-border-radius: 100px;
    border-radius: 100px;
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    will-change: transform,opacity;
}

.no-csstransforms3d .btn-bg {
    -webkit-transform: translate(0,-50%) scale(0);
    -ms-transform: translate(0,-50%) scale(0);
    transform: translate(0,-50%) scale(0);
}

.btn-bg:first-of-type {
    z-index: -2;
    background: currentColor;
    -webkit-transition: opacity .3s 0 cubic-bezier(0.19,1,0.22,1),-webkit-transform .4s .05s cubic-bezier(0.19,1,0.22,1);
    transition: opacity .3s 0 cubic-bezier(0.19,1,0.22,1),transform .4s .05s cubic-bezier(0.19,1,0.22,1);
}

.btn-bg:last-of-type {
    z-index: -1;
    background: #292929;
    -webkit-transition: opacity .4s .1s cubic-bezier(0.19,1,0.22,1),-webkit-transform .4s 0 cubic-bezier(0.19,1,0.22,1);
    transition: opacity .4s .1s cubic-bezier(0.19,1,0.22,1),transform .4s 0 cubic-bezier(0.19,1,0.22,1);
}

.btn-placeholder {
    opacity: 0;
}

.btn-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: .5em 1.33em;
    text-align: center;
}

.i {
    display: inline-block;
}

.i-down {
    width: 3.4em;
    height: 3.4em;
    margin-left: -1.7em;
    background: #292929;
    color: #fff;
    border: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
}

    .i-down.btn {
        padding: 0;
        -webkit-transition: -webkit-transform .3s cubic-bezier(0.19,1,0.22,1);
        transition: transform .3s cubic-bezier(0.19,1,0.22,1);
    }

    .i-down .btn-bg {
        height: 100%;
        padding-top: 0;
    }

    .i-down:hover svg {
        -webkit-transform: scale(0.95,1.1);
        -ms-transform: scale(0.95,1.1);
        transform: scale(0.95,1.1);
    }

    .i-down:active {
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        transform: translateY(2px);
    }

.no-csstransforms3d .i-down:active {
    -webkit-transform: translate(0,2px);
    -ms-transform: translate(0,2px);
    transform: translate(0,2px);
}

.i-down:active svg {
    -webkit-transform: scale(0.9,1.3);
    -ms-transform: scale(0.9,1.3);
    transform: scale(0.9,1.3);
}

.i-down svg {
    z-index: 3;
    display: inline-block;
    vertical-align: middle;
    fill: #fff;
    width: 1em;
    height: .625em;
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.19,1,0.22,1);
    transition: transform .3s cubic-bezier(0.19,1,0.22,1);
}

.nav-project {
    display: none;
    counter-reset: nav;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3em;
    height: 100%;
    margin-right: -13px;
    font-size: 1rem;
}

@media (min-width: 1025px) {
    .nav-project {
        display: block;
    }
}

.nav-project-list:before {
    content: "";
    position: absolute;
    top: 1.7em;
    right: 8px;
    bottom: 1.7em;
    width: 1px;
    background: #fff;
    background: rgba(255,255,255,0.5);
}

.nav-item {
    counter-increment: nav;
}

.nav-link {
    display: block;
    padding: 1em 1.75em 1em 1em;
    line-height: 1em;
    font-weight: 900;
}

    .nav-link:hover .nav-label {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .nav-link:active .dot {
        -webkit-transform: scale(0.8) !important;
        -ms-transform: scale(0.8) !important;
        transform: scale(0.8) !important;
        -webkit-transition: -webkit-transform .2s cubic-bezier(0.19,1,0.22,1);
        transition: transform .2s cubic-bezier(0.19,1,0.22,1);
    }

.nav-label {
    display: inline-block;
    zoom: 1;
    *display: inline;
    text-shadow: 0 0 3px #000;
    opacity: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transition: all .6s cubic-bezier(0.19,1,0.22,1);
    transition: all .6s cubic-bezier(0.19,1,0.22,1);
}

    .nav-label:before {
        content: counter(nav) '. ';
    }

.dot, .dot-clone {
    display: block;
    width: 17px;
    background: #fff;
    -webkit-border-radius: 9px;
    border-radius: 20px;
    box-shadow: 0 0 20px #666;
}

.dot {
    position: absolute;
    top: 50%;
    right: 0;
    height: 17px;
    margin-top: -9px;
    will-change: transform;
    -webkit-transform: scale(0.65);
    -ms-transform: scale(0.65);
    transform: scale(0.65);
}

.dot-clone {
    z-index: 1;
    position: absolute;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: bottom,top;
}

.nav-next {
    z-index: 99;
    position: absolute;
    left: 50%;
    display: none;
}

    .nav-next .btn-bg {
        height: 100%;
        margin: 0;
    }

        .nav-next .btn-bg:first-of-type {
            z-index: 1;
        }

        .nav-next .btn-bg:last-of-type {
            z-index: 2;
        }

@media (min-width: 1025px) {
    .nav-next {
        display: block;
        bottom: 3em;
    }
}

@media (min-width: 1200px) and (min-height: 900px) {
    .nav-next {
        bottom: 5em;
    }
}

@media (min-width: 1400px) and (min-height: 900px) {
    .nav-next {
        bottom: 5em;
    }
}

@media (min-width: 1600px) and (min-height: 1100px) {
    .nav-next {
        bottom: 7em;
    }
}

.project-pro {
    counter-increment: projects;
    padding: 1em;
    text-align: center;
}

    .project-pro + .project-pro {
        margin-top: 2em;
    }

    .project-pro, .project-pro .left, .project-pro .right {
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

        .project-pro, .project-pro .left {
            left: 0;
        }

            .project-pro, .project-pro .right {
                right: 0;
            }

@media (min-width: 480px) {
    .project-pro {
        padding: 2em;
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    .project-pro {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        float: left;
        width: 49.9%;
        margin: 0;
    }

        .project-pro + .project-pro {
            margin-top: 0;
        }

        .project-pro:nth-child(2n+1) {
            clear: left;
        }
}

@media (min-width: 1025px) {
    .project-pro {
        position: absolute;
        padding: 0;
    }

        .project-pro.is-active {
            z-index: 1;
        }

    .project.is-active .project-content {
        z-index: 1;
    }

    .project.is-active .project-fig {
        -webkit-transform: scaleX(1.15) scaleY(1.15) translateZ(0);
        transform: scaleX(1.15) scaleY(1.15) translateZ(0);
        -webkit-transition: -webkit-transform 25s ease-in-out;
        transition: transform 25s ease-in-out;
    }

    .no-csstransforms3d .project-pro.is-active .project-fig {
        -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
        transform: scale(1.15);
    }

    .no-csstransitions .project-pro.is-active .project-fig {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .project-pro + .project-pro {
        margin-top: 0;
    }

    .project-pro .right {
        padding: 0 5em;
    }
}

.project-mask, .project-overlay, .project-content {
    width: 100%;
}

@media (min-width: 1025px) {
    .project-mask, .project-overlay, .project-content {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
}

@media (max-width: 1025px) {
    .project-mask, .project-mask .left, .project-overlay, .project-overlay .left, .project-content, .project-content .left {
        -webkit-transform: translate(0) !important;
        -ms-transform: translate(0) !important;
        transform: translate(0) !important;
    }
}

@media (min-width: 1025px) {
    .project-mask, .project-overlay {
        right: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .no-csstransforms3d .project-mask, .no-csstransforms3d .project-overlay {
        -webkit-transform: translate(0,-100%);
        -ms-transform: translate(0,-100%);
        transform: translate(0,-100%);
    }

    .no-csstransforms .project-mask, .no-csstransforms .project-overlay {
        top: -100%;
    }
}

.project-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
}

    .project-overlay .project-img {
        opacity: 0;
    }

    .project-overlay .project-fig {
        background-blend-mode: multiply;
        opacity: .8;
    }

@media (min-width: 480px) {
    .project-overlay {
        top: .5em;
        right: .5em;
        left: .5em;
    }
}

@media (min-width: 1025px) {
    .project-overlay {
        top: 0;
        left: auto;
        right: 0;
        width: 50%;
    }

        .project-overlay .project-fig {
            background-blend-mode: overlay;
            opacity: 1;
        }
}

.project-mask .lazy {
    opacity: 0;
}

    .project-mask .lazy.is-loaded {
        opacity: 1;
    }

.project-fig {
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.77,0,0.175,1),opacity 1s cubic-bezier(0.77,0,0.175,1);
    transition: transform 1s cubic-bezier(0.77,0,0.175,1),opacity 1s cubic-bezier(0.77,0,0.175,1);
}

.overlay .project-fig {
    background-blend-mode: multiply;
}

@media (min-width: 1025px) {
    .project-fig {
        height: 100%;
        padding-top: 0;
    }
}

.project-img {
    display: none;
    width: 100%;
    height: auto;
}

@media (min-width: 1025px) {
    .project-img {
        opacity: 0 !important;
    }
}

@media (min-width: 1025px) {
    .project-content {
        right: 50%;
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }

    .no-csstransforms3d .project-content {
        -webkit-transform: translate(0,100%);
        -ms-transform: translate(0,100%);
        transform: translate(0,100%);
    }

    .no-csstransforms .project-content {
        top: 100%;
    }
}

@media (max-width: 1025px) {
    .project-content .project-btn {
        color: #fff !important;
    }

    .project-content .btn-bg:last-child {
        background: #292929 !important;
    }
}

.project-surtitle {
    display: none;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: .75em;
}

@media (min-width: 1025px) {
    .project-surtitle {
        display: block;
    }
}

.project-title {
    margin: -.25em 0 .4em;
    font-size: 1.8em;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: 1px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    color: #fff;
}

@media (min-width: 768px) {
    .project-title {
        font-size: 1.6em;
    }
}

@media (min-width: 1025px) {
    .project-title {
        margin: .2em 0 .4em;
    }

        .project-title span {
            opacity: 0;
            -webkit-transform: translateZ(-1em) rotateX(90deg);
            transform: translateZ(-1em) rotateX(90deg);
            -webkit-transform-origin: top center;
            -ms-transform-origin: top center;
            transform-origin: top center;
            -webkit-transition: all 1s cubic-bezier(0.19,1,0.22,1);
            transition: all 1s cubic-bezier(0.19,1,0.22,1);
        }

    .is-active .project-title span {
        opacity: 1;
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0) -webkit-transition-delay : .525 s;
        transition-delay: .525s;
    }
}

@media (min-width: 1200px) and (min-height: 900px) {
    .project-title {
        font-size: 1.6em;
    }
}

@media (min-width: 1400px) and (min-height: 1000px) {
    .project-title {
        font-size: 2em;
    }
}

@media (max-width: 1025px) {
    .project-title {
        padding-top: 35px;
        color: #fff !important;
    }

    .btn {
        color: #fff !important;
    }
}

.project-text {
    margin: 0 -1em 2em;
    font-size: .875em;
}

    .project-text p {
        margin: 0 auto;
    }

        .project-text p + p {
            margin-top: 1.2em;
        }

@media (min-width: 480px) {
    .project-text {
        max-width: 30em;
        margin: 0 auto 2em;
    }
}

@media (min-width: 1025px) {
    .project-text {
        margin: 0 auto 1em;
    }
}

@media (min-width: 1200px) {
    .project-text {
        margin: 0 auto 2em;
    }
}

@media (min-width: 1400px) {
    .project-text {
        margin: 0 auto 3em;
    }
}

@media (max-width: 1025px) {
    .project-text {
        color: #fff !important;
    }
}

.hand-help {
    width: 50px;
    height: 86px;
    z-index: 999;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    margin: auto;
    overflow: hidden;
}

.animGodownHome {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 86px;
    cursor: pointer;
    background: transparent url(../../images/anim-seta-down.png) no-repeat 0 0;
    background-size: auto 86px;
}

    .animGodownHome.animLoop {
        -webkit-animation: arrow-anim 4s steps(60,end) infinite;
        -ms-animation: arrow-anim 4s steps(60,end) infinite;
        animation: arrow-anim 4s steps(60,end) infinite;
    }

@-webkit-keyframes arrow-anim {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -3000px;
    }
}

@-ms-keyframes arrow-anim {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -3000px;
    }
}

@keyframes arrow-anim {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -3000px;
    }
}