@keyframes changeImg {
    from {
        left:-50%;
        opacity:1
    }
    100% 
    {
        left:60%;
        opacity:0
    }
}

@keyframes rotateAngle {
	0% {
		transform: translateY(0px)
	}
	
	50% {
		transform: translateY(-2px)
        
	}
	100% {
		transform: translateY(0px)
	}

}

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

@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-40px) rotate(-6deg);
            transform: translateX(-40px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(120px);
            transform: translateY(120px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes finger {
	0% {
		transform:rotate(-25deg) translateX(0)
	}
	100% {
		transform:rotate(-20deg) translateX(10px)
	}
}

@keyframes finger02 {
	0% {
		transform:rotate(-35deg) translateX(0) scaleX(-1)
	}
	100% {
		transform:rotate(-30deg) translateX(10px) scaleX(-1)
	}
}

@keyframes finger03 {
	0% {
		transform:rotate(35deg) translateX(0)
	}
	100% {
		transform:rotate(30deg) translateX(10px)
	}
}

@keyframes rotate-e {
	0% {
		transform:rotate(-1deg)
	}
	100% {
		transform:rotate(0deg)
	}
}

@keyframes pop{
  from {
     transform:scale(1)
  }

  to {
     transform:scale(0.95)
  }
}

@keyframes learn-more{
  from {
     translate: 0 -2px;
  }

  to {
     translate: 0 0px;
  }
}

@keyframes animatedBackground {
0% {
    background-position:0 0;
}

100% {
    background-position: 0 100%;
  }
}

@keyframes slide-in-elliptic-bottom-fwd {
  0% {
    transform: translateY(10dvh) rotateX(30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }

  20% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% -1400px;
    opacity: 1;
  }

  100% {
   
    transform-origin: 50% -1400px;
    opacity: 1;
  }
}

@keyframes float {
  0% {
    transform: var(--base-transform) translateY(0);
  }
  50% {
    transform: var(--base-transform) translateY(var(--float-distance));
  }
  100% {
    transform: var(--base-transform) translateY(0);
  }
}

@keyframes swing-in-bottom-fwd {
  0% {
    -webkit-transform: rotateX(150deg);
            transform: rotateX(150deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 1;
  }
}

@keyframes flip-in-diag-1-tr {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, -80deg);
            transform: rotate3d(1, -1, 0, 180deg) translate(0, -50px);
	  animation-timing-function: ease-in;
    opacity: 0;
  }

	30% {
    -webkit-transform: rotate3d(1, 1, 0, -80deg);
            transform: rotate3d(1, 1, 0, 180deg) translate(0px, -50px) scale(0.5);
	  animation-timing-function: ease-out;
    opacity: 0;
  }
  70% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg) translate(0px, 0px) scale(1);
    opacity: 1;
  }
}

@keyframes flip-in-diag-2-tl {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, -80deg);
            transform: rotate3d(1, 1, 0, -180deg) translate(0, 50px);
	  animation-timing-function: ease-in;
    opacity: 0;
  }

	30% {
    -webkit-transform: rotate3d(1, 1, 0, -80deg);
            transform: rotate3d(1, 1, 1, -180deg) translate(0px, 50px) scale(0.5);
	  animation-timing-function: ease-out;
    opacity: 0;
  }
  70% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg) translate(0px, 0px) scale(1);
    opacity: 1;
  }
}