.preloader {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-base-overlay);
}

.preloader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-base-overlay);
  background-blend-mode: color-dodge, normal;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) and (-webkit-touch-callout: none) {
  .preloader:before {
    mix-blend-mode: color-dodge;
  }
}

@keyframes bkg {
  0% {background-position: 0 top;}
  100% {background-position: -10240px top;}
}

@media (max-width: 1024px) {
  @keyframes bkg {
    0% {background-position: 0 top;}
    100% {background-position: -7680px top;}
  }
}

.preloader svg {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  color: var(--icon-default);
  animation: rotate3D 1.5s linear infinite;
}

.preloader.is-hide {
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease-in;
}

.preloader.is-none {
  display: none !important;
}

@keyframes rotate3D {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}