/* Slide in from Left */
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
.slide-in-from-left {
    animation: slideInFromLeft 0.8s ease forwards;
}

/* Slide in from Right */
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.slide-in-from-right {
    animation: slideInFromRight 0.8s ease forwards;
}

/* Slide in from Top */
@keyframes slideInFromTop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
.slide-in-from-top {
    animation: slideInFromTop 0.8s ease forwards;
}

/* Slide in from Bottom */
@keyframes slideInFromBottom {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.slide-in-from-bottom {
    animation: slideInFromBottom 0.8s ease forwards;
}

/*----------------------------
HIDE CONTENT TO RIGHT
-----------------------------*/
.hide-content-to-right {
    animation: hideContentToRight 0.8s ease forwards;
}
@keyframes hideContentToRight {
    from { transform: translateX(0%); }
    to   { transform: translateX(200%); }
}

/*----------------------------
HIDE CONTENT TO LEFT
-----------------------------*/
.hide-content-to-left {
    animation: hideContentToLeft 0.8s ease forwards;
}
@keyframes hideContentToLeft {
    from { transform: translateX(0%); }
    to   { transform: translateX(-200%); }
}

/*----------------------------
HIDE CONTENT TO TOP
-----------------------------*/
.hide-content-to-top {
    animation: hideContentToTop 0.8s ease forwards;
}
@keyframes hideContentToTop {
    from { transform: translateY(0%); }
    to   { transform: translateY(-200%); }
}

/*----------------------------
HIDE CONTENT TO BOTTOM
-----------------------------*/
.hide-content-to-bottom {
    animation: hideContentToBottom 0.8s ease forwards;
}
@keyframes hideContentToBottom {
    from { transform: translateY(0%); }
    to   { transform: translateY(200%); }
}