.awesome-banner_seo {
  background-image: url("../images/bg.jpg");
}

.awesome-banner_seo .awesome-banner__media-wrapper {
  display: flex;
}

.awesome-banner_seo .awesome-banner__media-el._0 {
  background-image: url("../images/0.png");
}

.awesome-banner_seo .awesome-banner__media-el._0-1 {
  background-image: url("../images/0-1.png");
  transform-origin: calc(326 * 100% / 972) calc(549 * 100% / 650);
}

.awesome-banner_seo .awesome-banner__media-el._1 {
  transform-origin: calc(580 * 100% / 972) calc(48 * 100% / 650);
}

.awesome-banner_seo .awesome-banner__media-el._1-1 {
  background-image: url("../images/1-1.png");
}

.awesome-banner_seo .awesome-banner__media-el._1-2 {
  background-image: url("../images/1-2.png");
  transform-origin: calc(408 * 100% / 972) calc(333 * 100% / 650);
}

.awesome-banner_seo .awesome-banner__media-el._1-3 {
  background-image: url("../images/1-3.png");
}

.awesome-banner_seo .awesome-banner__media-el._1-4 {
  background-image: url("../images/1-4.png");
}

.awesome-banner_seo .awesome-banner__media-el._2 {
  transform-origin: calc(597 * 100% / 972) calc(281 * 100% / 650);
}

.awesome-banner_seo .awesome-banner__media-el._2-1 {
  background-image: url("../images/2-1.png");
}

.awesome-banner_seo .awesome-banner__media-el._1-1,
.awesome-banner_seo .awesome-banner__media-el._2-1 {
  animation-duration: 3s;
  animation-name: awesome-banner_seo-fly;
}

.awesome-banner_seo .awesome-banner__media-el._1-1 {
  animation-delay: 0s;
}

.awesome-banner_seo .awesome-banner__media-el._2-1 {
  animation-delay: 1.25s;
}

@keyframes awesome-banner_seo-fly {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2%);
  }
}

.awesome-banner_seo .awesome-banner__media-el._1-2 {
  animation-name: awesome-banner_seo-1-2;
  animation-duration: 1.25s;
  animation-delay: 0s;
}

@keyframes awesome-banner_seo-1-2 {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.85);
  }
}

.awesome-banner_seo .awesome-banner__media-el._1-3,
.awesome-banner_seo .awesome-banner__media-el._1-4 {
  animation-name: awesome-banner_seo-1-3;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
}

.awesome-banner_seo .awesome-banner__media-el._1-4 {
  animation-delay: 1s;
}

@keyframes awesome-banner_seo-1-3 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.awesome-banner_seo .awesome-banner__media-el._0 {
  animation-name: awesome-banner_seo-0;
}

@keyframes awesome-banner_seo-0 {
  0% {
    opacity: 0;
  }

  5%,
  85% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

.awesome-banner_seo .awesome-banner__media-el._1 {
  animation-name: awesome-banner_seo-1;
}

@keyframes awesome-banner_seo-1 {
  0%,
  5% {
    opacity: 0;
    transform: translate(-30%, 65%) rotate(30deg);
  }

  25%,
  65% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }

  85%,
  100% {
    opacity: 0;
    transform: translate(30%, -90%) rotate(-10deg);
  }
}

.awesome-banner_seo .awesome-banner__media-el._0-1 {
  animation-name: awesome-banner_seo-0-1;
}

@keyframes awesome-banner_seo-0-1 {
  0%,
  10% {
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  }

  45%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

.awesome-banner_seo .awesome-banner__media-el._2 {
  animation-name: awesome-banner_seo-2;
}

@keyframes awesome-banner_seo-2 {
  0%,
  35% {
    opacity: 0;
    transform: scale(0);
  }

  40%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.awesome-banner_seo .awesome-banner__media-el._3 {
  animation-name: awesome-banner_seo-3;
}

@keyframes awesome-banner_seo-3 {
  0%,
  15% {
    opacity: 0;
    transform: translate(-50%, -37.5%);
  }

  20%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_seo .awesome-banner__media-el._4 {
  animation-name: awesome-banner_seo-4;
}

@keyframes awesome-banner_seo-4 {
  0%,
  20% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

  25%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_seo .awesome-banner__media-el._5 {
  animation-name: awesome-banner_seo-5;
}

@keyframes awesome-banner_seo-5 {
  0%,
  25% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

  30%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_seo .awesome-banner__media-el._6 {
  animation-name: awesome-banner_seo-6;
}

@keyframes awesome-banner_seo-6 {
  0%,
  30% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

  35%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .awesome-banner_seo .awesome-banner__media {
    transform: translateX(2%);
  }
}