/*****************************************/
/* Animations */
/*****************************************/
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.fade-down {
  opacity: 0;
  transform: translateY(-50px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-left {
  opacity: 0;
  transform: translateX(20px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-right {
  opacity: 0;
  transform: translateX(-20px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up {
  opacity: 0;
  transform: translateY(20px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.inscreen { opacity: 1; }
.fade-down.inscreen,
.fade-left.inscreen,
.fade-right.inscreen,
.fade-up.inscreen {
  opacity: 1;
  transform: translateY(0); 
}
.pop-grow { transition: all 0.3s ease; }
.pop-grow.inscreen {
  animation-name: popGrowUp;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  animation-duration: 0.55s;
}
.pulsate {
  animation-name: pulsate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}
.spin-in {
  opacity:0;
}
.spin-in.inscreen {
  animation-name: spinIn;
  transform-origin: center;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.wobble.inscreen {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
  animation-duration: 0.6s;
}
.zoom-in {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.zoom-in.inscreen {
  opacity: 1;
  transform: scale(1);
}
.zoom-in-up {
  opacity: 0;
  transform: scale(0.5) translateY(50px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.zoom-in-up.inscreen {
  opacity: 1;
  transform: scale(1) translate(0);
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes leftRight {
  0% {
    transform: tranlateX(0);
  }
  100% {
    transform: translateX(350px);
  }
}
@keyframes moveFormGradient {
  0% {
    background-position: 2% 50%;
  }
  100% {
    background-position: 98% 50%;
  }
}
@keyframes pulsate {
  from {
    transform: scale3d(1, 1, 1);
  }

  1% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes spinIn {
  from {
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes upDown {
  0% {
    transform: tranlateY(0);
  }
  100% {
    transform: translateY(25px);
  }
}

@keyframes popGrow {
  from {
    transform: scale(1);
  }
  
  33% {
    transform: scale(1.2);
  }
  
  67% {
    transform: scale(1.175);
  }
  
  to {
    transform: scale(1.2);
  }
}

@keyframes popGrowUp {
  from {
    transform: scale(1) translateY(0);
  }
  
  33% {
    transform: scale(1.2) translateY(-2px);
  }
  
  67% {
    transform: scale(1.175) translateY(-1px);
  }
  
  to {
    transform: scale(1.2) translateY(-2px);
  }
}

@media (min-width: 768px) {
  .delay-1 { transition-delay: 200ms; }
  .delay-2 { transition-delay: 300ms; }
  .delay-3 { transition-delay: 400ms; }
  .delay-4 { transition-delay: 500ms; }
  .delay-5 { transition-delay: 600ms; }
  .delay-6 { transition-delay: 700ms; }
  .delay-7 { transition-delay: 800ms; }
  .delay-8 { transition-delay: 900ms; }
  .delay-9 { transition-delay: 1000ms; }
  .delay-10 { transition-delay: 1100ms; }
}