.fadeInDown {
  opacity: 0;

  &.animate {
    animation-name: fadeInUp;
    animation-duration: 2s;
    opacity: 1;
  }
}

.fadeInRight {
  opacity: 0;

  &.animate {
    animation-name: fadeInRight;
    animation-duration: 2s;
    opacity: 1;
  }
}

.fadeInLeft {
  opacity: 0;

  &.animate {
    animation-name: fadeInLeft;
    animation-duration: 2s;
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0,100%,0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%,0,0);
  }

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

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

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