.fixed-logo {
    position: fixed;
    bottom: 8px;
    left: 0px;
    width: 147px;
    z-index: 9999;
    pointer-events: none;
}

.fixed-logo svg {
  width: 100%;
  height: 100%;
}

.square {
  stroke-dasharray: 650;
  stroke-dashoffset: -650;
  transform-origin: 50% 50%;
  animation: draw-square 2s infinite;
}

@keyframes draw-square {
  from {
    stroke-dashoffset: -650;
    transform: rotate(0deg);
  }
  to {
    stroke-dashoffset: 0;
    transform: rotate(720deg);
  }
}

.hexagon {
  stroke-dasharray: 425;
  stroke-dashoffset: -425;
  transform-origin: 50% 50%;
  animation: draw-hexagon 2s infinite;
}

@keyframes draw-hexagon {
  from {
    stroke-dashoffset: -425;
    transform: rotate(0deg);
  }
  to {
    stroke-dashoffset: 0;
    transform: rotate(360deg);
  }
}

.fade-image {
  opacity: 0;
  animation: fade 6s infinite;
  animation-timing-function: ease-in-out;
}

.fade-image:nth-of-type(1) {
  animation-delay: 0s;
}

.fade-image:nth-of-type(2) {
  animation-delay: 3s;
}

@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  10%, 45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
}

@media (max-width: 480px) {
.fixed-logo {
    position: fixed;
    bottom: 8px;
    left: -24px;
    width: 103px;
    z-index: 9999;
    pointer-events: none;
}
}