/*
 * Animation Keyframes
 */
@charset "utf-8";

/* Spin */
@keyframes spin {

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

    100% {
        transform: rotate(360deg);
    }

}

/* Fade out */
@keyframes fadeOut {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }

}

/* Fade in */
@keyframes fadeIn {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }

}

/* Slide in from right */
@keyframes slideInFromRight { /* Requires position: relative to be set on the element */

    0% {
        right: -100%;
    }

    100% {
        right: 0%;
    }

}

/* Slide out to bottom */
@keyframes slideOutToBottom { /* Read comment above */

    0% {
        bottom: 0%;
    }

    100% {
        bottom: -100%;
    }

}