﻿.ScaleX_base {
    opacity: 0.0;
    transform: scaleX(0.01);
    transition: transform 1s;
}

.ScaleX {
    opacity: 1.0;
    transform: scaleX(1.0);
}

.ScaleY_base {
    opacity: 0;
    transform: scaleY(0.01);
    transition: transform 1s;
}

.ScaleY {
    opacity: 1.0;
    transform: scaleY(1.0);
}

.FadeIn_base {
    opacity: 0.0;
    transition: opacity 1s;
}

.FadeIn {
    opacity: 1.0;
}

.SlideInLeft_base {
    opacity: 0
}

.SlideInLeft {
    opacity: 1.0;
    animation: slideInLeft 1.5s forwards ease-out;
}

.SlideInRight_base {
    opacity: 0
}

.SlideInRight {
    opacity: 1.0;
    animation: slideInRight 1.5s forwards ease-out;
}

@keyframes slideOutLeft {
    0% {
        opacity: 1.0;
        transform: translateX(0%);
    }

    25% {
        opacity: 1.0;
        transform: translateX(10%);
    }

    100% {
        opacity: 1.0;
        transform: translateX(-120%);
    }

    100% {
        opacity: 0;
        transform: translateX(0%);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-120%);
    }

    75% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(120%);
    }

    75% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0%);
    }
}
