.preloader {
  background: #22282c;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 99999999999;
}

.preloader.hide {
  -webkit-animation: hide-preloader 0.15s 1 ease-in-out;
          animation: hide-preloader 0.15s 1 ease-in-out;
}

@-webkit-keyframes hide-preloader {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes hide-preloader {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.preloader svg {
  transform: rotate(45deg) scale(1);
}

.preloader .stroke-still {
  stroke: #232323;
}

.preloader .stroke-animation {
  -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
          animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
  0% {
    stroke-dasharray: 0, 200;
  }

  45% {
    stroke-dashoffset: 0;
    stroke-dasharray: 200, 200;
  }

  90% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200, 200;
  }

  100% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200, 200;
  }
}

@keyframes stroke-spacing {
  0% {
    stroke-dasharray: 0, 200;
  }

  45% {
    stroke-dashoffset: 0;
    stroke-dasharray: 200, 200;
  }

  90% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200, 200;
  }

  100% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200, 200;
  }
}

@-webkit-keyframes stroke-color {
  0% {
    stroke: rgba(209, 103, 103, 0.5);
  }

  24% {
    stroke: #d16767;
  }

  25% {
    stroke: rgba(69, 161, 100, 0.51);
  }

  49% {
    stroke: #45a164;
  }

  50% {
    stroke: rgba(71, 153, 235, 0.5);
  }

  74% {
    stroke: #4799eb;
  }

  75% {
    stroke: rgba(233, 30, 99, 0.5);
  }

  99% {
    stroke: #e91e63;
  }
}

@keyframes stroke-color {
  0% {
    stroke: rgba(209, 103, 103, 0.5);
  }

  24% {
    stroke: #d16767;
  }

  25% {
    stroke: rgba(69, 161, 100, 0.51);
  }

  49% {
    stroke: #45a164;
  }

  50% {
    stroke: rgba(71, 153, 235, 0.5);
  }

  74% {
    stroke: #4799eb;
  }

  75% {
    stroke: rgba(233, 30, 99, 0.5);
  }

  99% {
    stroke: #e91e63;
  }
}