/* Entry Animation Classes */

.FadeIn-Effect{
    animation: fadeInAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;

    }
    100% {
        opacity: 1;
     }
}

.FadeInUp-Effect{
    animation: fadeUpAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeUpAnimation {
    0% {
        opacity: 0;
        transform: translateY(10%);

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

.FadeInDown-Effect{
    animation: fadeDownAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeDownAnimation {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
     }
}

.FadeInLeft-Effect{
    animation: fadeLeftAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeLeftAnimation {
    0% {
        opacity: 0;
        transform: translateX(-10%);

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

.FadeInRight-Effect{
    animation: fadeRightAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeRightAnimation {
    0% {
        opacity: 0;
        transform: translateX(10%);

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

.transition-ease{
    transition: ease-in-out all 0.2s
}

/* Exit Animation Classes */

.FadeOut-Effect{
    animation: fadeOutAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;

    }
    100% {
        opacity: 0;
     }
}

.FadeOutUp-Effect{
    animation: fadeOutUpAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutUpAnimation {
    0% {
        opacity: 1;
        transform: translateY(0%);

    }
    100% {
        opacity: 0;
        transform: translateY(-10%);
     }
}

.FadeOutDown-Effect{
    animation: fadeOutDownAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutDownAnimation {
    0% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 0;
        transform: translateY(10%);
     }
}

.FadeOutLeft-Effect{
    animation: fadeOutLeftAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutLeftAnimation {
    0% {
        opacity: 1;
        transform: translateX(0%);

    }
    100% {
        opacity: 0;
        transform: translateX(-10%);
     }
}

.FadeOutRight-Effect{
    animation: fadeOutRightAnimation ease 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutRightAnimation {
    0% {
        opacity: 1;
        transform: translateX(0%);

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