/*animate on scroll code*/
.animate-on-scroll {
  animation-play-state: paused;
}

.animate-on-scroll.in-view {
  animation-play-state: running;
}

/*disable animations in builder*/
.et-vb-app-ancestor .fade-up,
.et-vb-app-ancestor .fade-down,
.et-vb-app-ancestor .fade-left,
.et-vb-app-ancestor .fade-right {
  opacity: 1!important;
  transform: none !important;
}
.et-vb-app-ancestor .bounce-in-up, .et-vb-app-ancestor .bounce-in-down {opacity:1!important;top:0!important;}


/*FADE*/
/* Base styles for all fade animations */

.fade-up,
.fade-down,
.fade-left,
.fade-right {
  opacity: 0;               /* start hidden on live site */
  transform: translateY(20px);
}

/* Fade Up */
.fade-up {
  animation: fadeUp 0.8s ease-out 0.5s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Down */
.fade-down {
  animation: fadeDown 0.8s ease-out 0.5s forwards;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Left */
.fade-left {
  animation: fadeLeft 0.8s ease-out 0.5s forwards;
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade Right */
.fade-right {
  animation: fadeRight 0.8s ease-out 0.5s forwards;
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/*END FADE*/

/*BOUNCE*/

/*base styles*/

.bounce-in-down, .bounce-in-up {
    opacity:0;
    animation-timing-function: ease;
}

/*bounce in */

.bounce-in-up {
	animation: bounceInUp 1s forwards;
}

@keyframes bounceInUp {
  from {
    opacity: 0;
	top:100px;
  }

  50% {
    opacity: 1;
	top:0px;
  }

	75% {
	opacity: 1;
	top:30px;
  }

  to {
	opacity: 1;
	top:0;
  }
}

.bounce-in-down {
	animation: bounceInDown 1s forwards;
}

@keyframes bounceInDown {
  from {
    opacity: 0;
	bottom:100px;
  }

  50% {
    opacity: 1;
	bottom:0px;
  }

	75% {
	opacity: 1;
	bottom:30px;
  }

  to {
	opacity: 1;
	bottom:0;
  }
}