@charset "utf-8";

/* ===============
animate.css
=============== */
/* fadeInDown */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* fadeInUp */
.fadeInUpTrigger {
    opacity: 0;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* fadeInTrigger */
.fadeInTrigger {
    opacity: 0;
}

/* animate__delay-03s */
.animate__delay-03s {
    animation-delay: .3s;
}

/* animate__delay-06s */
.animate__delay-06s {
    animation-delay: .6s;
}

/* animate__delay-09s */
.animate__delay-09s {
    animation-delay: .9s;
}

/* animate__delay-12s */
.animate__delay-12s {
    animation-delay: 1.2s;
}

/* animate__slow */
.animate__changeTime {
    animation-duration: calc(var(--animate-duration) * 1.5);
}

/* ===============
original
=============== */
/* swing */
.swing {
    animation-name: swing;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
    animation-direction: alternate;
}

@keyframes swing {
    0% {
        transform: translateY(-2px) rotate(6deg);
    }

    10% {
        transform: translate(0) rotate(0deg);
    }

    20% {
        transform: translate(0) rotate(-6deg);
    }

    30% {
        transform: translateY(-2px) rotate(0deg);
    }

    40% {
        transform: translateY(-2px) rotate(6deg);
    }

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

    60% {
        transform: translateY(2px) rotate(0deg);
    }

    70% {
        transform: translate(0) rotate(6deg);
    }

    80% {
        transform: translate(2px) rotate(-2deg);
    }

    90% {
        transform: translate(0) rotate(0deg);
    }

    100% {
        transform: translateY(-2px) rotate(6deg);
    }
}

/* swing-sometimes */
.swing-sometimes {
    animation: swing-sometimes;
    animation-duration: 16000ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
    animation-direction: alternate;
}

@keyframes swing-sometimes {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    21% {
        transform: translate(0, 0) rotate(0deg);
    }

    22% {
        transform: translate(0, 0) rotate(-2deg);
    }

    23% {
        transform: translate(0, -1px) rotate(0deg);
    }

    24% {
        transform: translate(0, -1px) rotate(2deg);
    }

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

    26% {
        transform: translate(0, 1px) rotate(0deg);
    }

    27% {
        transform: translate(0, 0) rotate(2deg);
    }

    28% {
        transform: translate(0, 0) rotate(0deg);
    }

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

/* rollIn-left */
.rollIn-left {
    transition: 1.4s;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
}

.rollIn-left.rollIn-left__animated {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
}

/* rollIn-right */
.rollIn-right {
    transition: 1.4s;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
}

.rollIn-right.rollIn-right__animated {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    opacity: 1;
}

/* rotate-left */
.rotate-left {
    animation-name: rotate-left;
    animation-duration: 3.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(5, end);
}

@keyframes rotate-left {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

/* rotate-right */
.rotate-right {
    animation-name: rotate-right;
    animation-duration: 3.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(5, end);
    animation-direction: reverse;
}

@keyframes rotate-right {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}