/*Add This Class(reveal) For Findind The Section*/
.reveal {
  /*position: relative;*/
  opacity: 0;
}
/*Active When Section Reached*/
.reveal.active {
  opacity: 1;
}

/*All Animations On Active With Keyframes*/

/*fadeInUp*/
@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.active.fadeInUp {
  animation: fadeInUp 1s ease-in;
}

/*fadeInLeft*/
@keyframes fadeInLeft {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.active.fadeInLeft {
  animation: fadeInLeft 1s ease-in;
}

/*fadeInRight*/
@keyframes fadeInRight {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.active.fadeInRight {
  animation: fadeInRight 1s ease-in;
}

/*fadeIn*/
@keyframes fadeIn {
  0% {
    transform: scale(0px);
    opacity: 0;
  }
  100% {
    transform: scale(1px);
    opacity: 1;
  }
}
.active.fadeIn {
  animation: fadeIn 1s ease-in;
}

/*bounceInDown*/
@keyframes bounceInDown {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  60% {
    transform: translateY(5px);
  }
  80% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.active.bounceInDown {
  animation: bounceInDown 1s ease-in;
}

/*fadeInDown*/
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.active.fadeInDown {
  animation: fadeInDown 1s ease-in;
}