.js-animate {
   animation-duration: 800ms;
   -webkit-animation-duration: 800ms;
}

.js-animate.slide-up {
   animation-name: slide-up;
   -webkit-animation-name: slide-up;
   visibility: visible;
}

.js-animate.slide-right {
   animation-name: slide-right;
   -webkit-animation-name: slide-right;
   visibility: visible;
}

.js-animate.slide-left {
   animation-name: slide-left;
   -webkit-animation-name: slide-left;
   visibility: visible;
}

@media screen and ( min-width: 992px ) {
   .js-animate {
      visibility: hidden;
   }
}

@keyframes slide-up {
   0% {
      opacity: 0;
      transform: translateY(70%);
   }
   100% {
      opacity: 1;
      transform: translateY(0%);
   }
}

@-webkit-keyframes slide-up {
   0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
   }
}

@keyframes slide-right {
   0% {
      opacity: 0;
      transform: translateX(-70%);
   }
   100% {
      opacity: 1;
      transform: translateX(0%);
   }
}

@-webkit-keyframes slide-right {
   0% {
      opacity: 0;
      -webkit-transform: translateX(-70%);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
   }
}

@keyframes slide-left {
   0% {
      opacity: 0;
      transform: translateX(70%);
   }
   100% {
      opacity: 1;
      transform: translateX(0%);
   }
}

@-webkit-keyframes slide-left {
   0% {
      opacity: 0;
      -webkit-transform: translateX(70%);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
   }
}
