.st0 {
  fill: none;
  stroke: #c2c1be;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #43a1b1;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #43a1b1;
}

.st3 {
  fill: #c2c1be;
}

.st4 {
  fill: #798081;
}

.st5 {
  fill: #df6531;
}
@keyframes animate-circle {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

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

@keyframes drawLine {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

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

@keyframes logo {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }

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

.pulse-circle-delay1 {
  animation-delay: 0.3s;
}

.pulse-circle-delay2 {
  animation-delay: 0.6s;
}

.pulse-circle-delay3 {
  animation-delay: 0.9s;
}

.animated-line {
  opacity: 0;
  animation: drawLine 8s ease-in-out infinite;
}

.line-delay1 {
  animation-delay: 1s;
}

.line-delay2 {
  animation-delay: 1s;
}

.line-delay3 {
  animation-delay: 1.5s;
}

.line-delay4 {
  animation-delay: 1.5s;
}

.line-delay5 {
  animation-delay: 1.2s;
}

.line-delay6 {
  animation-delay: 1.2s;
}

.fade-node {
  opacity: 0;
  animation: animate-circle 8s ease-in-out infinite;
}

.node-delay1 {
  animation-delay: 0.2s;
}

.node-delay2 {
  animation-delay: 0.3s;
}

.node-delay3 {
  animation-delay: 0.4s;
}

.node-delay4 {
  animation-delay: 0.5s;
}

.node-delay5 {
  animation-delay: 0.6s;
}

.node-delay6 {
  animation-delay: 0.7s;
}

.node-delay7 {
  animation-delay: 0.8s;
}

.st4 {
  opacity: 0;
  animation: logo 0.8s ease forwards;
  animation-delay: 0.2s;
}

.st5 {
  opacity: 0;
  animation: logo 0.6s ease forwards;
  animation-delay: 0.3s;
}

@media screen and (max-width: 1024px) {
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
}