/*

        animation: slideUp .8s ease forwards .5s;
*/
.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}
.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp;
}
.expand {
    -webkit-animation-name: expand;
    animation-name: expand;
}

@keyframes slideIn {
   from {
        visibility: hidden;
        transform: translateX(500px) scale(.2);
    }
    50% {

    }
    to {
        visibility: visible;
        transform: translateX(0px) scale(1);
    }
}

@keyframes slideUp {
   from {
        visibility: hidden;
        transform: translateY(300px);
    }

    to {
        visibility: visible;
        transform: translateY(0px);
    }
}

@keyframes expand {
    from {
        visibility: hidden;
        transform: translateX(1400px);
    }

    to {
        visibility: visible;
        transform: translateX(0px);
    }
}