.fade-in {
  animation: fadein 0.5s ease-in-out;
}

/*Fade Up*/
[data-inviewport=fade-up] {
  transition: 0.5s;
  transform: translateY(70px);
  opacity: 0;
}

[data-inviewport=fade-up].is-inViewport {
  transform: translateY(0);
  opacity: 1;
}


/*Bounce In*/
[data-inviewport=bounceIn] {
  transition: 0.5s;
  opacity: 0;
}

[data-inviewport=bounceIn].is-inViewport {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  opacity: 1;
}


/*Flip*/
[data-inviewport=flip] {
  transition: 0.5s;
  opacity: 0;
}

[data-inviewport=flip].is-inViewport {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation: flipInY 2s ease;
          animation: flipInY 2s ease;
          opacity: 1;
}