@keyframes slide-in {
  0% {
            transform: translateY(10px);
            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 rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


@keyframes rotate-in {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@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-rotate {
  animation: rotate 20s infinite linear both;
}


.anim-rotate-in {
  animation: rotate-in 1s cubic-bezier(0.18, 1.37, 0.51, 0.94) both;
}


.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.8s cubic-bezier(0.16, 1.48, 0.35, 1.06) both;
}



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

.anim-slide-in-up{
  animation: slide-in 0.3s cubic-bezier(0, 0, 0.14, 1) both;
}

.anim-slide-in-up-pop{
  animation: slide-in 0.3s cubic-bezier(0.49, 1.77, 0.82, 0.82)  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: 100ms;}
.anim-delay-2{animation-delay: 200ms;}
.anim-delay-3{animation-delay: 300ms;}
.anim-delay-4{animation-delay: 400ms;}
.anim-delay-5{animation-delay: 500ms;}
.anim-delay-6{animation-delay: 600ms;}
.anim-delay-7{animation-delay: 700ms;}
.anim-delay-8{animation-delay: 800ms;}

.anim-duration-1{animation-duration: 50ms;}
.anim-duration-2{animation-duration: 100ms;}
.anim-duration-3{animation-duration: 200ms;}
.anim-duration-4{animation-duration: 300ms;}
.anim-duration-5{animation-duration: 500ms;}
.anim-duration-6{animation-duration: 750ms;}
.anim-duration-7{animation-duration: 1000ms;}
.anim-duration-8{animation-duration: 1500ms;}

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