.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1.5s;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInScale {
  animation-name: fadeInScale;
  animation-duration: 1s;
  animation-delay: .3s;
}
@keyframes fadeInScale {
  0% {
  opacity: 0;
  transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1.5s;
  animation-delay: 1.2s;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.ticketrotate {
  animation-name: ticketrotate;
  animation-duration: 2s;
  animation-delay: .5s;
}
@keyframes ticketrotate {
  0% {
    opacity: 0;
    transform: rotate(22deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: none;
  }
}

@media ( min-width : 768px ){
  .ticketrotate {
    animation-duration: 2s;
    animation-delay: 1.2s;
  }
}

.turn {
  animation-name: turn;
  animation-duration: 2s;
  animation-delay: .15s;
}
@keyframes turn {
  0% {
    opacity: 0;
    transform: scale(1,1)
  }
  50% {
    opacity: 1;
    transform: scale(-1,1)
  }
  100% {
    transform: scale(1,1)
  }
}