@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slidein {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes disappear {
  from {
    height: auto;
    margin: inherit;
  }
  to {
    height: 0;
    margin: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes shine {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
    background-position: 100% 0;
  }
}
.hide {
  opacity: 0;
}
.appear {
  animation: 700ms ease-out 0s 1 appear;
}
.slideInFromBottom {
  animation: 700ms ease-out 0s 1 slideInFromBottom;
}
.slideInFull {
  animation: slidein 350ms ease-out forwards;
}
.fadeInFirst {
  animation: appear 350ms ease-in forwards;
}
.fadeInSecond {
  animation: appear 350ms ease-in 150ms forwards;
}
.fadeInThird {
  animation: appear 350ms ease-in 250ms forwards;
}
.slideInRight {
  animation: slideInRight 350ms ease-out forwards;
}