.animated {
  animation-fill-mode: both;
}
.slideInDownFade {
  animation-name: slideInDownFade;
}

.animated.slideInDownFade {
  animation-timing-function: ease-out;
  animation-duration: 800ms;
}

.mainFade {
  animation-name: mainFade;
}
.animated.mainFade {
  transition-delay: 1500ms;
  animation-delay: 400ms;
  animation-timing-function: ease-out;
}







@keyframes sliderButton {
  from {
    transform: translate3d(0, 70%, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

}

@keyframes sliderHeader {
  from {
    transform: translate3d(0, -50%, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

}

@keyframes slideInDownFade {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

}

@keyframes mainFade {
  from {visibility: visible;opacity: 0;transform: scale(1.1) translate3d(0px, 10%, 0px);}
  to {
    opacity: 1;
    transform: scale(1.0) translate3d(0px, 0%, 0px);
  }
}