.visible {
    visibility: hidden;
}

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;

    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes slideRight {
    0% {
        transform: translate(5%, 2%);
        opacity: 0.1;
    }
    100% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(5%, 2%);
        -webkit-opacity: 0.1;
    }
    100% {
        -webkit-transform: translateX(0%, 0%);
        -webkit-opacity: 1;
    }
}

.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;

    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translate(-5%, -2%);
        opacity: 0.1;
    }
    100% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(-5%, -2%);
        -webkit-opacity: 0.1;
    }
    100% {
        -webkit-transform: translateX(0%, 0%);
        -webkit-opacity: 1;
    }
}

.h-100 {
    height: 100%;
}