/* KEYFRAMES ANIMATIONS */

@keyframes slideOutLeft {
    0% { left: 30%; }
    100% { left: -130%; }
}

@keyframes slideInLeft {
    0% { left: 130%; }
    100% { left: 30%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* KEYFRAMES RESPONSIVE MEDIA QUERIES */

@media (min-width: 320px) {
    @keyframes slideOutLeft {
        0% { left: 0; }
        100% { left: -150%; }
    }

    @keyframes slideInLeft {
        0% { left: 130%; }
        100% { left: 0; }
    }
}

@media (min-width: 550px) {
    @keyframes slideOutLeft {
        0% { left: 0; }
        100% { left: -140%; }
    }

    @keyframes slideInLeft {
        0% { left: 130%; }
        100% { left: 0; }
    }
}

@media (min-width: 768px) {
    @keyframes slideOutLeft {
        0% { left: 5%; }
        100% { left: -140%; }
    }

    @keyframes slideInLeft {
        0% { left: 130%; }
        100% { left: 5%; }
    }
}

@media (min-width: 992px) {
    @keyframes slideOutLeft {
        0% { left: 10%; }
        100% { left: -130%; }
    }

    @keyframes slideInLeft {
        0% { left: 130%; }
        100% { left: 10%; }
    }
}

@media (min-width: 1200px) {
    @keyframes slideOutLeft {
        0% { left: 30%; }
        100% { left: -130%; }
    }

    @keyframes slideInLeft {
        0% { left: 130%; }
        100% { left: 30%; }
    }
}

/* ANIMATIONS */

.fadeIn {
    animation: fadeIn 0.5s;
}

.fadeOut {
    animation: fadeOut 0.5s;
}

.slideOutLeft {
    position: relative !important;
    animation: slideOutLeft 0.5s;
}

.slideInLeft {
    position: relative !important;
    animation: slideInLeft 0.5s;
}