/* 404 */
.page-404 {
    margin-bottom: 30px;
    text-align: center;
}

.page-404_text {
    max-width: 80%;
    margin: 0 auto;
}

.page-404_btn {
    max-width: 320px;
    margin: 20px auto 0;
}

.animation-img {
    margin-top: 30px;
    width: 450px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .animation-img {
        width: 400px;
    }
}

@media (max-width: 425px) {
    .animation-img {
        width: 100%;
    }
}

.blinkingIL {
    animation: blinkingLight 1100ms infinite;
}

@keyframes blinkingLight {
    0% {
        fill: rgb(247, 189, 97, 1)
    }

    49% {
        fill: rgb(252, 250, 131)
    }

    100% {
        fill: rgb(247, 189, 97, 1)
    }
}

.blinkingIR {
    animation: blinkingLight 1100ms infinite;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

@keyframes blinkingLight {
    0% {
        fill: rgb(247, 189, 97, 1)
    }

    49% {
        fill: rgb(252, 250, 131)
    }

    100% {
        fill: rgb(247, 189, 97, 1)
    }
}

.blinkingOL {
    animation: blinkingLight3 1100ms infinite;
}

@keyframes blinkingLight3 {
    0% {
        fill: rgb(237, 161, 27)
    }

    49% {
        fill: rgb(255, 210, 70)
    }

    100% {
        fill: rgb(237, 161, 27)
    }
}

.blinkingOR {
    animation: blinkingLight3 1100ms infinite;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

@keyframes blinkingLight3 {
    0% {
        fill: rgb(237, 161, 27)
    }

    49% {
        fill: rgb(255, 210, 70)
    }

    100% {
        fill: rgb(237, 161, 27)
    }
}



.blinking4 {
    animation: blinkingLight4 1.2s infinite;
}

@keyframes blinkingLight4 {
    0% {
        fill: rgb(158, 42, 42)
    }

    49% {
        fill: rgb(255, 72, 72)
    }

    100% {
        fill: rgb(158, 42, 42)
    }
}

.blinking5 {
    animation: blinkingLight5 1.2s infinite;
}

@keyframes blinkingLight5 {
    0% {
        fill: rgb(255, 72, 72)
    }

    49% {
        fill: rgb(158, 42, 42)
    }

    100% {
        fill: rgb(255, 72, 72)
    }
}


/* 404 sign */
.flash-white {
    animation: blinkingLight2 1.2s infinite;
}

@keyframes blinkingLight2 {
    0% {
        fill: rgb(255, 255, 255)
    }

    49% {
        fill: rgb(255, 255, 255, 0.5)
    }

    100% {
        fill: rgb(255, 255, 255)
    }
}

.shake {
    animation-name: shake;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-delay: 4.2s;
    -webkit-animation-delay: 4.2s;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-fill-mode: forwards;

}

@keyframes shake {
    0% {
        transform: translate(0px);
    }

    25% {
        transform: translate(1px, 0px);
    }

    50% {
        transform: translate(0px, 1px);
    }

    75% {
        transform: translate(1px, 0px);
    }

    100% {
        transform: translate(0px);
    }
}


.arm-drop {
    animation-name: armDrop;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
    animation-delay: 1000ms;
    -webkit-animation-delay: 1000ms;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: forwards;
    transform-origin: center left;

}

@keyframes armDrop {
    0% {
        transform: rotate(10deg) translate(0px, -10px);
    }

    25% {
        transform: rotate(20deg) translate(0px, -10px);
    }

    50% {
        transform: rotate(25deg) translate(0px, -10px);
    }

    70% {
        transform: rotate(30deg) translate(0px, -15px);
    }

    80% {
        transform: rotate(35deg) translate(-3px, -18px);
    }

    90% {
        transform: rotate(40deg) translate(-5px, -17px);
    }

    100% {
        transform: rotate(45deg) translate(-5px, -17px);
    }
}

.arm-dropLeft {
    animation-name: armDropLeft;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-delay: 1000ms;
    -webkit-animation-delay: 1000ms;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform-origin: center left;

}

@keyframes armDropLeft {
    0% {
        transform: rotate(10deg) translate(0px, -10px);
    }

    25% {
        transform: rotate(20deg) translate(0px, -10px);
    }

    50% {
        transform: rotate(25deg) translate(-2px, -10px);
    }

    70% {
        transform: rotate(50deg) translate(-5px, -15px);
    }

    80% {
        transform: rotate(60deg) translate(-10px, -18px);
    }

    90% {
        transform: rotate(75deg) translate(-15px, -25px);
    }

    100% {
        transform: rotate(85deg) translate(-40px, -30px);
    }
}


.cone-drop {
    animation-name: coneDrop;
    animation-duration: .9s;
    -webkit-animation-duration: .9s;
    animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
    -webkit-animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
    animation-fill-mode: forwards;


}

@keyframes coneDrop {
    0% {
        transform: translate(1px, 2px);
    }

    25% {
        transform: translate(0, 45px);
    }

    50% {
        transform: translate(0, 90px);
    }

    75% {
        transform: rotate(12deg) translate(120px, 115px);
    }

    100% {
        transform: translate(0, 168px);
    }
}

.headshake {
    animation-name: headShake;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: 4500ms;
    -webkit-animation-delay: 4500ms;
    animation-iteration-count: 4;
    -webkit-animation-iteration-count: 4;
    animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    animation-fill-mode: forwards;
}

@keyframes headShake {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(1px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0px);
    }
}

.headshakeNo {
    animation-name: headShakeNo;
    animation-duration: .8s;
    -webkit-animation-duration: .8s;
    animation-delay: 5.5s;
    -webkit-animation-delay: 5.5s;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    animation-fill-mode: forwards;
}

@keyframes headShakeNo {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(1px);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0px);
    }
}

.typing {
    animation-name: type;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    animation-fill-mode: forwards;
}

@keyframes type {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1px, 0);
    }

    50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(1px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.typingLeft {
    animation-name: type;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    animation-fill-mode: forwards;
}

.shake1 {
    animation-name: shake;
    animation-duration: .4s;
    -webkit-animation-duration: .4s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-fill-mode: forwards;

}