.slide {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    width: 100%;
}

.slide.show {
    display: block;
    opacity: 1;
}
/* Only animations – NO color or font-size here */
.slide-in-right {
    animation: slideInRight 1s ease-out;
    position: relative;
}

.slide-in-left {
    animation: slideInLeft 1s ease-out;
    position: relative;
}

@keyframes slideInRight {
    from {
        left: 100vw;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        left: -100vw;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}