.fadeIn {
    animation: 0.5s fadeIn forwards;
}

.fadeOut {
    animation: 0.5s fadeOut forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.slideIn {
    animation: 0.25s slideIn forwards;
}

.slideOut {
    animation: 0.25s slideOut forwards;
}

@keyframes slideIn {
    from {
        transform: translate(100vw, 0);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes slideOut {
    from {
        transform: translate(0px, 0px);
    }

    to {
        transform: translate(-100vw, 0);
    }
}

.slideInBack {
    animation: 0.25s slideInBack forwards;
}

.slideOutBack {
    animation: 0.25s slideOutBack forwards;
}

@keyframes slideInBack {
    from {
        transform: translate(-100vw, 0);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes slideOutBack {
    from {
        transform: translate(0px, 0px);
    }

    to {
        transform: translate(100vw, 0);
    }
}