/* ----- LOADER ----- */

    .hpst {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    
        width: 200px;
        height: 200px;
    }
    .home-pic-st1 {
        z-index: 4050;
    }
    .home-pic-bl1 {
        z-index: 4040;
    }
    .home-pic-st2 {
        z-index: 4030;
    }
    .home-pic-bl2 {
        z-index: 4020;
    }
    .home-pic-st3 {
        z-index: 4010;
    }
    .hover-blocker {
        background: none;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        z-index: 5000;
    }
    .home-pic-bl1 {
        -webkit-animation: pb-animation1 1.7s cubic-bezier(.52,.27,.53,.0) forwards;
    }
    .home-pic-bl2 {
        -webkit-animation: pb-animation2 2.8s cubic-bezier(.52,.27,.53,.2) forwards;
    }    
    header {
        -webkit-animation: header-drop 2s ease forwards;
    }
    @media screen and (min-width: 800px) {
            
        header {
            -webkit-animation: header-drop 4s ease forwards;
        }

    }
    .preloader-curtain {
        -webkit-animation: curtain-slider 4.35s linear forwards;
        background: #1B1B22;
    }
    .home-construction {
        -webkit-animation: construction-hider 20s ease forwards;
    }
    @media screen and (min-width: 800px) {
        .home-pic {
            -webkit-animation: bowl-mover 3.5s cubic-bezier(.27,.01,.41,1) forwards;
        }
        .ast {
            -webkit-animation: ast-rise 1s cubic-bezier(.27,.01,.41,1) forwards;
        }
    }
    .bowlback {
        -webkit-animation: bowlback-mover 2s cubic-bezier(.27,.01,.41,1) forwards;
    }
    .home-box {
        -webkit-animation: box-fade-in 1s ease forwards;
    }
    .parallax::after {
        -webkit-animation: bg-fade-in 4.2s ease forwards;
    }
    .hover-blocker {
        -webkit-animation: hover-block 4s linear forwards;
        animation-delay: 0s;
    }
    .al1 {
        animation-delay: 3.22s;
    }
    .al2 {
        animation-delay: 3.20s;
    }
    .al3 {
        animation-delay: 3.18s;
    }
    .al4 {
        animation-delay: 3.16s;
    }
    .al5 {
        animation-delay: 3.14s;
    }
    .al6 {
        animation-delay: 3.12s;
    }
    .al7 {
        animation-delay: 3.08s;
    }
    .al8 {
        animation-delay: 3.02s;
    }
    .al9 {
        animation-delay: 2.95s;
    }
    @keyframes pb-animation1 {
        0% { height: 200px; left: 50%; }
        10% { height: 200px; left: 50%; }
        96% { height: 8px; left: 50%; }
        99% { height: 0px; left: 50%; }
        100% { height: 0px; left: 600%; }
    }
    @keyframes pb-animation2 {
        0% { height: 200px; top: 50%; left: 50%; }
        40% { height: 200px; top: 20%; left: 50%; }
        90% { height: 8px; top: -10%; left: 50%; }
        99% { height: 0px; top: -30%; left: 50%; }
        100% { height: 0px; top: -30%; left: 600%; }
    }
    
    @keyframes header-drop {
        0% { top: -70px; }
        70% { top: -70px; }
        100% { top: 0px; }
    }
    
    @keyframes construction-hider {
        0% { opacity: 0; }
        52% { opacity: 0; }
        58% { opacity: 1; }
        94% { opacity: 1; }
        100% { opacity: 0; }
    }
    @keyframes bowl-mover {
        0% { left: calc(50% - 100px); width: 200px; height: 200px; }
        70% { left: calc(50% - 100px); width: 200px; height: 200px; }
        76% { left: calc(50% - 100px); width: 200px; height: 200px; }
        84% { left: calc(50% + 240px); width: 200px; height: 200px; }
        100% { left: calc(50% - 340px); width: 200px; height: 200px; }
    }
    @keyframes bowlback-mover {
        0% { left: 400%; }
        100% { left: 400%; }
    }
    @media screen and (min-width: 800px) {
        @keyframes bowlback-mover {
            0% { left: 0; }
            99% { left: 0; }
            100% { left: 400%; }
        }
    }
    @keyframes ast-rise {
        0% { top: 11%; opacity: 0; }
        1% { top: 11%; opacity: 1; }
        100% { top: 0%; opacity: 1;}
    }
    /*
    @keyframes curtain-slider {
        0% { left: 97.5%; }
        90% { left: 97.5%; }
        100% { left: 105%; }
    }
    */
    @keyframes box-fade-in {
        0% { opacity: 0; }
        30% { opacity: 0; }
        100% { opacity: 1; }
    }
    @keyframes bg-fade-in {
        0% { opacity: 0; transform: translateZ(-4px) scale(1.7); }
        80% { opacity: 0; transform: translateZ(-4px) scale(1.7); }
        100% { opacity: 0.7; transform: translateZ(-4px) scale(2); }
    }
    @keyframes hover-block {
        0% { height: 600px; width: 900px; left: 50%; }
        99% { height: 600px; width: 900px; left: 50%; }
        100% { height: 0px; width: 0px; left: 200%; }
    }