//
// Animations
// --------------------------------------------------

@include keyframes(showUp) {
    0% {
        @include transform(translate(0, 15%));

        opacity : 0;
    }
    100% {
        @include transform(translate(0, 0%));

        opacity : 1;
    }
}

@include keyframes(showUpTitle) {
    0% {
        @include transform(translate(0, 15%));

        //opacity : 0;
    }
    100% {
        @include transform(translate(0, 0%));

        //opacity : 1;
    }
}

@include keyframes(showDown) {
    0% {
        @include transform(translateY(-15%));

        opacity : 0;
    }
    100% {
        @include transform(translateY(0));

        opacity : 1;
    }
}

@include keyframes(hideDown) {
    0% {
        @include transform(translateY(0));

        opacity : 1;
    }
    100% {
        @include transform(translateY(15%));

        opacity : 0;
    }
}

@include keyframes(hideUp) {
    0% {
        @include transform(translateY(0));

        opacity : 1;
    }
    100% {
        @include transform(translateY(-15%));

        opacity : 0;
    }
}

@include keyframes(showLeft) {
    0% {
        @include transform(translateX(-15%));

        opacity : 0;
    }
    100% {
        @include transform(translateX(0));

        opacity : 1;
    }
}

@include keyframes(showRight) {
    0% {
        @include transform(translateX(15%));

        opacity : 0;
    }
    100% {
        @include transform(translateX(0));

        opacity : 1;
    }
}

@include keyframes(backgroundPosition) {
    0% {
        opacity : 0;
        background-position : -600px center;
    }
    100% {
        opacity : 1;
        background-position : 0 center;
    }
}

@include keyframes(loader) {
    0% {
        @include rotate(0deg);
    }

    25% {
        @include rotate(180deg);
    }

    50% {
        @include rotate(180deg);
    }

    75% {
        @include rotate(360deg);
    }

    100% {
        @include rotate(360deg);
    }
}

@include keyframes(loader-inner) {
    0% {
        height : 0%;
    }

    25% {
        height : 0%;
    }

    50% {
        height : 100%;
    }

    75% {
        height : 100%;
    }

    100% {
        height : 0%;
    }
}