/* animations */

 @keyframes slideIn {
    0% { transform: translateX(-1000%); }
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slideIn {
    0% { transform: translateX(-1000%); }
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slideOut {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slideOut {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
    
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}