.slideDown {
 animation-name: slideDown;
 -webkit-animation-name: slideDown;
 
 animation-duration: .8s;
 -webkit-animation-duration: .8s;
 
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 
 visibility: visible !important;
}
 
@keyframes slideDown {
 0% {
 transform: translateY(-100%);
 }
 65%{
 transform: translateY(5%);
 }
 100% {
 transform: translateY(0%);
 }
}
 
@-webkit-keyframes slideDown {
 0% {
 -webkit-transform: translateY(-100%);
 }
 65%{
 -webkit-transform: translateY(5%);
 }
 100% {
 -webkit-transform: translateY(0%);
 }
}
 
.slideUp {
 animation-name: slideUp;
 -webkit-animation-name: slideUp;
 
 animation-duration: .8s;
 -webkit-animation-duration: .8s;
 
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 
 animation-fill-mode: both;
 -webkit-animation-fill-mode: both;
}
 
@keyframes slideUp {
 0% {
 transform: translateY(0%);
 }
 65%{
 transform: translateY(5%);
 }
 100% {
 transform: translateY(-150%);
 }
}
@-webkit-keyframes slideUp {
 0% {
 -webkit-transform: translateY(0%);
 }
 65%{
 -webkit-transform: translateY(5%);
 }
 100% {
 -webkit-transform: translateY(-150%);
 
 }
}