.lenta {
    animation-name: lenta;
    animation-timing-function: linear;
}

@keyframes lenta {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 10%;
    }
}

.obj_1 {
    animation-name: obj_1;
}

@keyframes obj_1 {
    0% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    5%,
    100% {
        transform: translateY(0%);
        -webkit--webkit-transform: translateY(0%);
    }
}

.obj_2 {
    animation-name: obj_2;
}

@keyframes obj_2 {

    0%,
    1% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    6%,
    100% {
        transform: translateY(0%);
        -webkit--webkit-transform: translateY(0%);
    }
}

.obj_3 {
    animation-name: obj_3;
}

@keyframes obj_3 {

    0%,
    2% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    7%,
    100% {
        transform: translateY(0%);
        -webkit--webkit-transform: translateY(0%);
    }
}

.obj_4 {
    animation-name: obj_4;
}

@keyframes obj_4 {

    0%,
    3% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    8%,
    100% {
        transform: translateY(0%);
        -webkit--webkit-transform: translateY(0%);
    }
}

.obj_5 {
    animation-name: obj_5;
}

@keyframes obj_5 {

    0%,
    4% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    9%,
    100% {
        transform: translateY(0%);
        -webkit--webkit-transform: translateY(0%);
    }
}

.text_1 {
    animation-name: text_1, shake, glitch;
    animation-timing-function: steps(1), ease, ease;
}

@keyframes text_1 {

    0%,
    7% {
        clip-path: inset(0 100% 0 0);
    }
    8% {
        clip-path: inset(0 93% 0 0);
    }
    9% {
        clip-path: inset(0 84% 0 0);
    }
    10% {
        clip-path: inset(0 75% 0 0);
    }
    11% {
        clip-path: inset(0 65% 0 0);
    }
    12% {
        clip-path: inset(0 56% 0 0);
    }
    13% {
        clip-path: inset(0 46% 0 0);
    }
    14% {
        clip-path: inset(0 46% 0 0);
    }
    15% {
        clip-path: inset(0 36% 0 0);
    }
    16% {
        clip-path: inset(0 27% 0 0);
    }
    17% {
        clip-path: inset(0 19% 0 0);
    }
    18% {
        clip-path: inset(0 10% 0 0);
    }
    19%, 100% {
        clip-path: inset(0 0% 0 0);
    }
}

@keyframes shake {
    0%, 23% {
       transform: translateX(0%) skewX(0deg)
    }
    25% {
        transform: translateX(-6%) skewX(20deg)
    }
    27%, 100% {
        transform: translateX(0%) skewX(0deg)
    }
}

@keyframes glitch {
    0%, 25% {
        opacity: 1;
        filter: blur(0);
    }
    26% {
        opacity: .5;
        filter: blur(1px);
    }
    28% {
        opacity: 1;
        filter: blur(0px);
    }
    30% {
        opacity: .5;
        filter: blur(1px);
    }
    32% {
        opacity: 1;
        filter: blur(0px);
    }
    34% {
        opacity: .5;
        filter: blur(1px);
    }
    36% {
        opacity: 1;
        filter: blur(0px);
    }
    38% {
        opacity: .5;
        filter: blur(1px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }
    42% {
        opacity: .5;
        filter: blur(1px);
    }
    44%, 100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.text_2 {
    animation-name: text_2;
}

@keyframes text_2 {
    0%, 19% {
        transform: translateX(100%) skewX(-90deg);
        opacity: 0;
        filter: blur(10px);
    }
    24% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(-15%);
    }
    26% {
        transform: translateX(0%) skewX(0deg);
    }
}

.btn_background,
.btn_text {
    animation-name: btn_secondAnim;
}

@keyframes btn_secondAnim {

    0%,
    13% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    20%,
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

.btn {
    animation: btn_anim 1s ease infinite;
}

@keyframes btn_anim {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

.logo {
    animation-name: logo;
}

@keyframes logo {

    0%,
    20% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }

    27%,
    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
    }
}

.flashbang {
    animation-name: flashbang;
}

@keyframes flashbang {

    0%,
    25% {
        opacity: 0;
        visibility: hidden;
    }

    30% {
        opacity: 1;
        visibility: visible;
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
    }

    50% {
        opacity: 1;
        visibility: visible;
    }

    55%,
    100% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }
}

@media (max-width: 1200px) {
    @keyframes lenta {
        0% {
            background-position: 0%;
        }

        100% {
            background-position: 50%;
        }
    }
}

@media (max-width: 800px) {
    @keyframes logo {
        0% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }

        7%, 100% {
            transform: translateX(0%);
            -webkit-transform: translateX(0%);
        }

    }

    @keyframes flashbang {

        0%,
        5% {
            opacity: 0;
            visibility: hidden;
        }

        10% {
            opacity: 1;
            visibility: visible;
            transform: translateX(-20%);
            -webkit-transform: translateX(-20%);
        }

        20% {
            opacity: 1;
            visibility: visible;
        }

        30%,
        100% {
            opacity: 0;
            visibility: hidden;
        }

        100% {
            transform: translateX(50%);
            -webkit-transform: translateX(50%);
        }
    }

    @keyframes obj_1 {
        0%, 44% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    
        50%,
        70% {
            transform: translateY(0%);
            -webkit--webkit-transform: translateY(0%);
        }

        75%, 100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }

    @keyframes obj_2 {

        0%,
        45% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    
        51%,
        70% {
            transform: translateY(0%);
            -webkit--webkit-transform: translateY(0%);
        }
        75%, 100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }

    @keyframes obj_3 {

        0%,
        46% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    
        52%,
        70% {
            transform: translateY(0%);
            -webkit--webkit-transform: translateY(0%);
        }
        75%, 100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }

    @keyframes obj_4 {

        0%,
        47% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    
        53%,
        70% {
            transform: translateY(0%);
            -webkit--webkit-transform: translateY(0%);
        }

        75%, 100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }

    @keyframes obj_5 {

        0%,
        48% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    
        54%,
        70% {
            transform: translateY(0%);
            -webkit--webkit-transform: translateY(0%);
        }

        75%, 100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }
    
    .text {
        animation-name: text;
    }

    @keyframes text {
        0%, 40% {
            transform: translateY(0%);
        }
        45%, 100% {
            transform: translateY(150%);
        }
    }
    
    @keyframes btn_secondAnim {

        0%,
        70% {
            transform: scale(0);
            -webkit-transform: scale(0);
        }

        75%,
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
    }

    .text_1 {
        animation-name: text_1;
        animation-timing-function: steps(1);
    }
}