@charset "UTF-8";
.animate-sale h4 span {
	display: inline-block;
	color: #000000;	
}

.animate-sale h4 span:nth-of-type(2) {
  animation-delay: .05s;
}
.animate-sale h4 span:nth-of-type(3) {
  animation-delay: .1s;
}
.animate-sale h4 span:nth-of-type(4) {
  animation-delay: .15s;
}
.animate-sale h4 span:nth-of-type(5) {
  animation-delay: .2s;
}
.animate-sale h4 span:nth-of-type(6) {
  animation-delay: .25s;
}
.animate-sale h4 span:nth-of-type(7) {
  animation-delay: .3s;
}
.animate-sale h4 span:nth-of-type(8) {
  animation-delay: .35s;
}
.animate-sale h4 span:nth-of-type(9) {
  animation-delay: .4s;
}
.animate-sale h4 span:nth-of-type(10) {
  animation-delay: .45s;
}
.animate-sale h4 span:nth-of-type(11) {
  animation-delay: .5s;
}
.animate-sale h4 span:nth-of-type(12) {
  animation-delay: .55s;
}
.animate-sale h4 span:nth-of-type(13) {
  animation-delay: .6s;
}
.animate-sale h4 span:nth-of-type(14) {
  animation-delay: .65s;
}
.animate-sale h4 span:nth-of-type(15) {
  animation-delay: .7s;
}
.animate-sale h4 span:nth-of-type(16) {
  animation-delay: .75s;
}
.animate-sale h4 span:nth-of-type(17) {
  animation-delay: .8s;
}
.animate-sale h4 span:nth-of-type(18) {
  animation-delay: .85s;
}
.animate-sale h4 span:nth-of-type(19) {
  animation-delay: .9s;
}
.animate-sale h4 span:nth-of-type(20) {
  animation-delay: .95s;
}
.animate-sale h4 span:nth-of-type(21) {
  animation-delay: .9s;
}
.animate-sale h4 span:nth-of-type(22) {
  animation-delay: .95s;    
  
}


/* Animation One */
.one h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale .4s forwards;
}

@keyframes revolveScale {
  60% {
    transform: translate(20px, 20px) rotate(30deg) scale(.3);
  }

  100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1;
  }
}


/* Animation Two */
.two h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(200px, -100px) scale(2);
  animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
  60% {
    transform: translate(0, 20px) rotate(-180deg) scale(.5);
  }

  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}


/* Animation Three */
.three h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1);
		color: #000000;
  }

  80% {
    transform: translate(20px, 0) scale(1);
		color: #000000;
  }

  99% {
    transform: translate(0) scale(1.2);
		color: #000000;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
		color: #000000;
  }
}


/* Animation Four */
.four h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: revolveDrop .3s forwards;
}

@keyframes revolveDrop {	
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  60% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}


/* Animation Five */
.five h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: dropVanish .5s forwards;
}

@keyframes dropVanish {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  50% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}


/* Animation Six */
.six h4 span {
  color: #000000;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister .5s forwards;
}

@keyframes twister {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}


/* Animation Seven */
.seven h4 span {
  color: #000000;
  opacity: 0;
  transform: translate(-150px, 0) scale(.3);
  animation: leftRight .5s forwards;
}

@keyframes leftRight {
  40% {
    transform: translate(50px, 0) scale(.7);
    opacity: 1;
		color: #000000;
  }

  60% {
		color: #000000;
  }

  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}