/**
* Animations
* Not for editing
*/

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

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

.bounceIn {
    animation-name: bounceIn;
    animation-duration: 600ms;
    animation-iteration-count: 1;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 600ms;
    animation-iteration-count: 1;
}

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

    15% {
        transform: translateX(-5%) rotate(-5deg);
    }

    30% {
        transform: translateX(10%) rotate(3deg);
    }

    45% {
        transform: translateX(-5%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

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

.wobble {
    animation-name: wobble;
    animation-duration: 400ms;
    animation-iteration-count: 1;
}

/**
 * Loading bar
 * @usage Add class .loader to Element
 */
@keyframes loading-bar {
    100% { background-position: -56% 0; }
}
