/* START ANIMATION */
@keyframes up-and-down {

  0%,
  100% {
    top: 0;
  }

  50% {
    top: -40px;
  }
}

@keyframes bouncing {

  0%,
  10%,
  20%,
  50%,
  80%,
  100% {
    bottom: 30px;
  }

  40%,
  60% {
    bottom: 10px;
  }
}

@keyframes left-move {
  50% {
    left: 0;
    width: 12px;
    height: 12px;
  }

  100% {
    left: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
}

@keyframes right-move {
  50% {
    right: 0;
    width: 12px;
    height: 12px;
  }

  100% {
    right: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
}

@keyframes moving-arrow {
  100% {
    transform: translateX(10px);
  }
}

@keyframes flashing {

  0%,
  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    width: 200%;
    height: 200%;
  }
}

/* END ANIMATION */