/* slide in from the right */
@keyframes slideInRight {
    from    { transform: translate3d(100%, 0, 0); }
    to      { transform: translate3d(0, 0, 0); }
}

/* slide out from the left */
@keyframes slideOutLeft {
    to      { transform: translate3d(100%, 0, 0); }
}

/* sink back */
@keyframes sinkBack {
    from    { transform: translate3d(0, 0, 0); }
    to      { transform: translate3d(0, 0, -100px); }
}

/* pop forward */
@keyframes popForward {
    to      { transform: translate3d(0, 0, 0); }
}

@keyframes upFromBottom {
  0% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}

@keyframes downFromTop {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

/* Fade in and out */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade in and out background overlays */
@keyframes fadeOutWhiteOverlay {
  0% {
    background-color: rgba(255, 255, 255, 1);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes fadeInWhiteOverlay {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    background-color: rgba(255, 255, 255, 1);
  }
}



.fade-in {
  animation: fadeIn both 0.5s;
}

.fade-out {
  animation: fadeOut both 0.5s;
}
