@font-face {

    font-family: 'Hurme';

    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff2') format('woff2'),

        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}

.content {

    z-index: 2;

    position: absolute;

    background: red;

    top: 100%;

}

$blue: #07101d;

$yellow: #ffdc25;

$globalPadding: 40px;

.dynamicCursor {

    // transform-origin: 270px 0;

}

* {

    box-sizing: border-box;

}

body {

    background: $blue;

    background-size: cover !important;

    font-family: 'Hurme';

    font-weight: 500;

    user-select: none;

    margin: 0;

    padding: $globalPadding;

    height: 100vh;

    iframe {

        opacity: 0;

        animation: fadeInVid 1s 1s forwards;

    }

    .portfolio {

        .slider_note {

            width: 100%;

            position: absolute;

            color: black;

            left: 0;

            top: 640px;

            z-index: 2;

            text-align: center;

        }

        .slideClone {

            width: 700px;

            height: 450px;

            margin: 0 auto;

            top: 160px;

            display: none;

            position: fixed;

            left: 0;

            transition: all .5s;

            right: 0;

            .overlay,

            .cats,

            .title {

                opacity: 1 !important;

            }

            .button {

                display: none;

            }

            .title {

                font-weight: 800;

                color: $yellow;

                position: relative;

                z-index: 10;

                font-size: 22px;

                transform-style: preserve-3d;

                left: 0;

            }

            .f {

                position: relative;

                top: 0;

                transition: all .7s .0s cubic-bezier(0.79, -0.01, 0, 0.99);

            }

            .image {

                position: relative;

                margin-top: 10px;

                padding: 94px 94px;

                height: 380px;

                transform-style: preserve-3d;

                img {

                    position: absolute;

                    left: 0;

                    z-index: -1;

                    top: 0;

                    transition: all .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

                    height: 100%;

                }

                .overlay {

                    position: absolute;

                    top: 0;

                    left: 0;

                    width: 100%;

                    height:  100%;

                    background: rgba(11, 18, 27, 0.6);

                    z-index: -1;

                    opacity: 0;

                    transition:  opacity .1s, transform .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

                }

                .cats {

                    color: $yellow;

                    font-weight: 700;

                    font-size: 12px;

                    transform-style: preserve-3d;

                    opacity: 0;

                    left: 0;position: relative;

                    transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

                }

                .title {

                    font-weight: 800;

                    color: white;

                    width: 350px;

                    font-size: 28px;

                    margin-top: 10px;

                    line-height: 35px;

                    transform-style: preserve-3d;

                    position: relative;

                    transition: all 0.6s .2s;

                    margin: 22px 0 16px 0;

                    opacity: 0;

                }

                .button {

                    color: $blue;

                    font-size: 14px;

                    cursor: pointer;

                    margin-top: 14px;

                    background: $yellow;

                    float: left;

                    padding: 12px 20px;

                    transform-style: preserve-3d;

                    position: relative;

                    transition: all .6s .3s;

                    opacity: 0;

                }

            }

        }

        &_home {

            &__work {

                background: transparent;

                padding: 40px;

                position: fixed;

                width: 100%;

                z-index: 3;

                position: fixed;

                height: 100%;

                pointer-events: none;

                opacity: 0;

                top: 0;

                z-index: 4;

                left: 0;

                clip-path: polygon(calc(50% - 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% - 353px) 225px);

                transition: opacity .5s .67s, -webkit-clip-path .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);

                &.expand {

                    clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);

                    pointer-events: all;

                    opacity: 1;

                    transition: opacity .1s, -webkit-clip-path .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

                    .scroll {

                        opacity: 1;

                        transition: all 0.8s 0.5s;

                    }

                    .slideClone {

                        img {

                            transition: all .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

                            transform: scale(2.9)

                        }

                        .overlay {

                            transition:  opacity .1s, transform .8s .23s cubic-bezier(0.79, -0.01, 0, 0.99);

                            transform: scale(2.9)

                        }

                        .title.f {

                            position: relative;

                            top: 72px;

                            left: 0;

                            transition: all .8s .4s cubic-bezier(0.79, -0.01, 0, 0.99);

                        }

                        .cats, .title {

                            left: -93px;

                            position: relative;

                        }

                        .cats {

                            transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

                        }

                        .title {

                            transition: all .8s .19s cubic-bezier(0.79, -0.01, 0, 0.99);

                        }

                    }

                }

            }

            &__slider{

                position: relative;

                transform: translateX(-800px);

                perspective: 900px;

                perspective-origin: 50% 200px;

                & .slider {

                    &_inner {

                        transform: translateY(120px);

                        position: absolute;

                        left: 0;

                        right: 0;

                        width: 30000px;

                        transition: all 0.8s cubic-bezier(0, 0.6, 0.25, 1);

                        transform-style: preserve-3d;

                        pointer-events: none;

                        &.in {

                            pointer-events: all;

                            .slider_inner__slide {

                                animation: sliderIn 1.1s .65s cubic-bezier(0.79,-0.01, 0, 0.99) forwards;

                            }

                        }

                        &__slide {

                            width: 700px;

                            height: 750px;

                            float: left;

                            margin-right: 60px;

                            transition: all .5s;

                            transform-style: preserve-3d;

                            transform: scale(0);

                            .title {

                                font-weight: 800;

                                color: #060608;

                                position: relative;

                                font-size: 22px;

                                transform-style: preserve-3d;

                            }

                            &:nth-of-type(2){

                                .image {

                                    .overlay,

                                    .cats,

                                    .title,

                                    .button {

                                        opacity: 1;

                                    }

                                }

                            }

                            .image {

                                position: relative;

                                margin-top: 10px;

                                padding: 94px 94px;

                                height: 380px;

                                transform-style: preserve-3d;

                                img {

                                    position: absolute;

                                    left: 0;

                                    z-index: -1;

                                    top: 0;

                                    height: 100%;

                                }

                                .overlay {

                                    position: absolute;

                                    top: 0;

                                    left: 0;

                                    width: 100%;

                                    height:  100%;

                                    background: rgba(11, 18, 27, 0.7);

                                    z-index: -1;

                                    opacity: 0;

                                    transition: opacity .1s, transform .8s .7s cubic-bezier(0.79, -0.01, 0, 0.99);

                                }

                                .cats {

                                    color: $yellow;

                                    font-weight: 700;

                                    font-size: 12px;

                                    left: 0;

                                    transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);

                                    transform-style: preserve-3d;

                                    opacity: 0;

                                }

                                .title {

                                    font-weight: 800;

                                    color: white;

                                    width: 350px;

                                    font-size: 28px;

                                    margin-top: 10px;

                                    line-height: 35px;

                                    transform-style: preserve-3d;

                                    position: relative;

                                    transition: all 0.6s .2s;

                                    margin: 22px 0 16px 0;

                                    opacity: 0;

                                }

                                .button {

                                    color: $blue;

                                    font-size: 14px;

                                    cursor: pointer;

                                    margin-top: 14px;

                                    background: $yellow;

                                    float: left;

                                    padding: 12px 40px 14px 20px;

                                    transform-style: preserve-3d;

                                    position: relative;

                                    transition: all .6s .3s;

                                    opacity: 0;

                                    img {

                                        width: 14px;

                                        height: auto;

                                        position: absolute;

                                        right: 17px;

                                        left: auto;

                                        top: 16px;

                                    }

                                }

                            }

                        }

                    }

                }

            }

            &__header {

                float: right;

                width: 100%;

                &.work {

                    position: relative;

                    z-index: 1;

                    ul li {

                        color: #fff;

                        &.active {

                            border-bottom: 2px solid $yellow;

                            color: $yellow;

                        }

                    }

                }

                ul {

                    padding: 0;

                    margin: 0;

                    li {

                        display: inline;

                        margin-right: 10px;

                        &.active {

                            font-size: 20px;

                            border-bottom: 2px solid $blue;

                        }

                        &:hover {

                            border-bottom: 2px solid $blue;

                        }

                    }

                }

                .nav {

                    position: absolute;

                    left: 0;

                    right: 0;

                    margin: auto;

                    width: 400px;

                    padding: 0;

                }

                & .logoMain {

                    float: left;

                    position: relative;

                    top: -3px;

                    width: 280px;

                    img {

                        width: 100% !important;

                        animation: none !important;

                        opacity: 1 !important;

                    }

                }

                & .number {

                    color: white;

                    -webkit-animation: fade 1s 2.3s forwards;

                    animation: fade 1s 2.3s forwards;

                    opacity: 0;

                    float: right;

                    position: relative;

                    margin-right: 80px;

                    top: 5px;

                    &.black {

                        color: $blue;

                        animation: none;

                        opacity: 1;

                    }

                    &.white {

                        color: #fff;

                        animation: none;

                        opacity: 1;

                    }

                }

                & .hamburger {

                    float: right;

                    position: absolute;

                    right: $globalPadding;

                    top: 45px;

                    animation: fade 1s 2.3s forwards;

                    opacity: 0;

                    height: 20px;

                    width: 30px;

                    &.black {

                        opacity: 1 !important;

                        .hamburger_part {

                            background: $blue;

                        }

                    }

                    &.white {

                        opacity: 1 !important;

                        right: 0;

                        top: 5px;

                        .hamburger_part {

                            background: $yellow;

                        }

                    }

                    &_part {

                        $hamburgerPartHeight: 2px;

                        width: 30px;

                        height: $hamburgerPartHeight;

                        position: absolute;

                        background: $yellow;

                        right:0;

                        @for $i from 1 through 3 {

                            &:nth-of-type(#{$i}) {

                                top: ($hamburgerPartHeight + 2) * 2 * ($i - 1);

                            }

                        }

                        &:last-child {

                            width: 20px;

                        }

                    }

                }

            }

            &__title {

                position: absolute;

                bottom: $globalPadding * 2;

                left: $globalPadding * 2;

                max-width: 460px;

                .logo {

                    margin-bottom: 30px;

                    img.first {

                        margin-right: 0px;

                        position: relative;

                        top: 3px;

                        width: 135px;

                        opacity: 0;

                        -webkit-animation: fade 1s 1s forwards;

                        animation: fade 1s 1s forwards;

                        &.out {

                            animation: fadeOut .4s .6s forwards;

                            opacity: 1;

                        }

                    }

                    img.second {

                        width: 140px;

                        animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

                        clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);

                    }

                }

                hr {

                    width: 80px;

                    background: $yellow;

                    height: 2px;

                    border: none;

                    position: absolute;

                    left: 0;

                    width: 0;

                    top: 77px;

                    animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

                    &.out {

                        animation: hrOut .4s .4s forwards;

                        width: 70px;

                    }

                }

                .trigger {

                    opacity: 0;

                    animation: fade 1s 2.5s forwards;

                    &.out {

                        animation: fadeOut .4s 0s forwards;

                    }

                }

                h1 {

                    color: white;

                    margin-top: 60px;

                    line-height: 30px;

                    font-weight: normal;

                    font-size: 18px;

                    opacity: 0;

                    margin-bottom: 30px;

                    animation: fade 1s 1.9s forwards;

                    &.out {

                        animation: fadeOut .4s .2s forwards;

                        opacity: 1;

                    }

                    span {

                        color: $yellow;

                    }

                }

                & .page {

                    &_portfolio {

                        background: $yellow;

                        padding: $globalPadding;

                        position: fixed;

                        width: 100%;

                        z-index: 3;

                        position: fixed;

                        height: 100%;

                        opacity: 0;

                        top: 0;

                        left: 0;

                        clip-path: polygon(226px calc(100% - 262px), 359px calc(100% - 262px), 359px calc(100% - 309px), 226px calc(100% - 309px));

                        transition: opacity .6s 0.2s , clip-path 1s .6s cubic-bezier(0.79,-0.01, 0, 0.99);

                    }

                }

            }

        }

    }

}

@keyframes sliderIn {

    from { transform: scale(0);}

    to{ transform: scale(1);}

}

@keyframes fade {

    from {opacity: 0}

    to {opacity: 1}

}

@keyframes fadeOut {

    from {opacity: 1}

    to {opacity: 0}

}

@keyframes fadeInVid {

    from {opacity: 0}

    to {opacity: 0.1}

}

@keyframes hr {

    from {width: 0;}

    to {width: 70px;}

}

@keyframes hrOut {

    from {width: 70px;}

    to {width: 0px;}

}

@keyframes spark {

    from {clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);}

    to {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}

}

.scroll {

    position: absolute;

    left: calc(50% - 348px);

    top: 458px;

    transition: all 0.8s 0s;

    opacity: 0;

}

.back {

    position: absolute;

    height: 100vh;

    img {

        animation: none !important;

        opacity: 1 !important;

        transform: rotate(90deg);

        bottom: 73px !important;

        position: absolute;

    }

}