@keyframes FadeInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.FadeInUp {
    animation: FadeInUp .5s forwards;
}


@keyframes FadeInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.FadeInLeft {
    animation: FadeInLeft .5s forwards;
}


@keyframes FadeInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.FadeInRight {
    animation: FadeInRight .5s forwards;
}


@keyframes FadeInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.FadeInDown {
    animation: FadeInDown .5s forwards;
}


@keyframes FadeOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(50px);
        opacity: 0;
    }
}

.FadeOutUp {
    animation: FadeOutUp .5s forwards;
}


@keyframes FadeOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50px);
        opacity: 0;
    }
}

.FadeOutLeft {
    animation: FadeOutLeft .5s forwards;
}


@keyframes FadeOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(50px);
        opacity: 0;
    }
}

.FadeOutRight {
    animation: FadeOutRight .5s forwards;
}


@keyframes FadeOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

.FadeOutDown {
    animation: FadeOutDown .5s forwards;
}