:root {
    --animate-duration-custom: 1s;
    --animate-delay-custom: 1s;
    --animate-repeat-custom: 1;
}

.animate__animated {
    -webkit-animation-duration: var(--animate-duration-custom);
    animation-duration: var(--animate-duration-custom);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes slideInUpCustom {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

@keyframes slideInUpCustom {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

.animate__slideInUpCustom {
    -webkit-animation-name: slideInUpCustom;
    animation-name: slideInUpCustom;
    animation-duration: 0.5s
}

/* */

@-webkit-keyframes slideOutDownCustom {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDownCustom {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.animate__slideOutDownCustom {
    -webkit-animation-name: slideOutDownCustom;
    animation-name: slideOutDownCustom;
    animation-duration: 0.5s
}

/* */

@-webkit-keyframes flipInXCustom {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInXCustom {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.animate__flipInXCustom {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInXCustom;
    animation-name: flipInXCustom;
}

@-webkit-keyframes flipOutXCustom {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutXCustom {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.animate__flipOutXCustom {
    -webkit-animation-duration: calc(1s * 0.5);
    animation-duration: calc(1s * 0.5);
    -webkit-animation-duration: calc(var(--animate-duration-custom) * 0.5);
    animation-duration: calc(var(--animate-duration-custom) * 0.5);
    -webkit-animation-name: flipOutXCustom;
    animation-name: flipOutXCustom;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}