@keyframes vp-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vp-fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes scaleout {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes scaleoutCentered {
    0% {
        transform: scale(0);
    }

    100% {
        // Since opacity is 0 at 100% we need to add the extra .1 so that it appears 100% in size.
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-2000px);
        opacity: 0;
    }

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

.slideInLeft {
    animation-name: slideInLeft;
}

@keyframes move-background-horizontal {
    0% {
        background-position: 100% 0;
    }

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

@keyframes loading-spinner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}