@keyframes slide-in {
  0% {
            transform: translateY(10%);
            opacity:0;
  }
  100% {
            transform: translateY(0px);
            opacity:1;
  }
}

@keyframes slide-down {
  0% {
            transform: translateY(-10px);
            opacity:0;
  }
  100% {
            transform: translateY(0px);
            opacity:1;
  }
}

@keyframes slide-left {
  0% {
            transform: translateX(10%);
            opacity:0;
  }
  100% {
            transform: translateX(0px);
            opacity:1;
  }
}

@keyframes scale-in-out-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulsate-fwd {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulsate-sm-fwd {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes level-align-center {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(70px);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tada {
  0% {
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  transform: scale3d(1.5, 1.5, 1.5) 
  }
} 


@keyframes slide-in-out-center {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  20% {
    transform: translateX(0px);
    opacity: 1;
  }
  30% {
    transform: translateX(5px);
  }
  80% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(20px);
    opacity: 0;
  }
}

.anim-tada {
  animation: tada 1s linear both;
}

.anim-scale-in-out{
  animation: scale-in-out-center 2s cubic-bezier(0.46, -0.71, 0.49, 1.53) both;
}

.anim-scale-in{
  animation: scale-in-center 0.3s cubic-bezier(0.46, -0.71, 0.49, 1.53) both;
}

.anim-fade-in{
  animation: fade-in 0.3s linear both;
}

.anim-slide-in-up{
  animation: slide-in 0.5s cubic-bezier(0, 0.71, 0.26, 1) both;
}
.anim-slide-in-down{
  animation: slide-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.anim-slide-in-left{
  animation: slide-left 0.5s cubic-bezier(0, 0.71, 0.26, 1) both;
}
.anim-slide-out-left{
  animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.anim-delay-1{animation-delay: 200ms;}
.anim-delay-2{animation-delay: 400ms;}
.anim-delay-3{animation-delay: 600ms;}
.anim-delay-4{animation-delay: 800ms;}
.anim-delay-5{animation-delay: 1000ms;}
.anim-delay-6{animation-delay: 1200ms;}
.anim-delay-7{animation-delay: 1400ms;}
.anim-delay-8{animation-delay: 1600ms;}

.anim-ease-bounce{animation-timing-function: cubic-bezier(0.18, 1.83, 0.53, 0.88);}