@keyframes fadeIn {
   0% { opacity: 0; }
   20% { opacity: 0.2; }
   40% { opacity: 0.4; }
   60% { opacity: 0.6; }
   80% { opacity: 0.8; }
   100% { opacity: 1; }
 }

.reveal{
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: .5s all ease;
}
.reveal.active{
  transform: translateX(0);
  opacity: 1;
}
.reveal_top{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: .5s all ease;
}
.reveal_top.active{
  transform: translateY(0);
  opacity: 1;
}

.floating{
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(10px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}