.effect-eating {
  * {
    position: absolute;
  }
  .popcorn-1 {
    height: 14px;
    rotate: -20deg;
    left: 33%;
    bottom: 65%;
    bottom: 40%;  animation: effect-popcorn-animation-left 3s 1.5s ease-in-out infinite;
  }
  .popcorn-2 {
    height: 11px;
    rotate: -9deg;
    left: 23%;
    bottom: 53%;
    bottom: 40%;  animation: effect-popcorn-animation-left 3s 0.8s ease-in-out infinite;
  }
  .popcorn-3 {
    height: 11px;
    rotate: 30deg;
    left: 93%;
    bottom: 32%;  animation: effect-popcorn-animation-right 3s 1.5s ease-in-out infinite;
 
  }
  .popcorn-4 {
    height: 15px;
    rotate: 28deg;
    left: 49%;
    bottom: 72%; bottom: 59%;  animation: effect-popcorn-animation-top 3s 1s ease-in-out infinite;
 
  }
  .popcorn-5 {
    height: 13px;
    rotate: 19deg;
    left: 67%;
    bottom: 72%; bottom: 59%;  animation: effect-popcorn-animation-top 3s 0.8s ease-in-out infinite;
 
  }
  .popcorn-6 {
    height: 13px;
    rotate: -20deg;
    left: 14%;
    bottom: 22%;
    bottom: 40%;  animation: effect-popcorn-animation-left 3s 1.5s ease-in-out infinite;
  }
  .popcorn-7 {
    height: 13px;
    rotate: -20deg;
    left: 93%;
    bottom: 15%;  animation: effect-popcorn-animation-right 3s 2s ease-in-out infinite;
 
  }
  .popcorn-8 {
    height: 14px;
    rotate: 10deg;
    left: 82%;
    bottom: 59%;  animation: effect-popcorn-animation-right 3s 0.5s ease-in-out infinite;
 
  }
  .popcorn-9 {
    height: 10px;
    rotate: 14deg;
    left: 19%;
    bottom: 40%;  animation: effect-popcorn-animation-left 3s 1s ease-in-out infinite;
  }
  .popcorn-10 {
    height: 12px;
    rotate: 25deg;
    left: 87%;
    bottom: 46%;
    animation: effect-popcorn-animation-right 3s 2s ease-in-out infinite;
  }
}
@keyframes effect-popcorn-animation-right {
   0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 43%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: 200deg;
  }

  50% {
    left: 36%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: 400deg;
  }

  65% {
    left: 20%;
    bottom: 45%;
    scale: 0.7;
    rotate: 500deg;
  }

  75% {
    left: 15%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: 600deg;
  }

  100% {
    left: 10%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: 720deg;
  }
}@keyframes effect-popcorn-animation-left {
  0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 57%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: -200deg;
  }

  50% {
    left: 64%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: -400deg;
  }

  65% {
    left: 75%;
    bottom: 45%;
    scale: 0.7;
    rotate: -500deg;
  }

  75% {
    left: 80%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: -600deg;
  }

  100% {
    left: 85%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: -720deg;
  }
}


@keyframes effect-popcorn-animation-top {
   0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 50%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: 180deg;
  }

  50% {
    left: 50%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: 360deg;
  }

  65% {
    left: 50%;
    bottom: 45%;
    scale: 0.7;
    rotate: 480deg;
  }

  75% {
    left: 50%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: 600deg;
  }

  100% {
    left: 50%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: 720deg;
  }

}