.spa-preloader {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity 1500ms cubic-bezier(0.3, 0.12, 0.12, 0.88);
  user-select: none;
  width: 100%;
  z-index: 2000;
}

.spa-preloader.sound-on {
  cursor: default;
}

.spa-preloader__bg {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.spa-preloader__button,
.spa-preloader__button-text,
.spa-preloader__text {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transform: translate3d(-50%, -50%, 0);
}

.spa-preloader__text {
  animation-duration: 9s;
  animation-name: rotate-anim;
  background: url(/f/media/preloader/loader_ring.png) no-repeat 50%;
  background-size: contain;
  height: 31rem;
  width: 31rem;
  z-index: 20;
}

.spa-preloader__percent {
  color: #fff;
  font-size: 2.6rem;
  line-height: 1.1;
  margin-top: 16.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

html[lang="en"] .spa-preloader__text {
  background-image: url(/f/media/preloader/loader_ring_en.png);
}

.spa-preloader__button-wrapper {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 300ms ease;
  transform: scale(1);
  visibility: hidden;
  z-index: 10;
}

.scene-ready .spa-preloader__button-wrapper {
  opacity: 1;
  visibility: visible;
}

.spa-preloader.sound-on .spa-preloader__button-wrapper {
  opacity: 0;
  transform: scale(0.75);
}

.spa-preloader__button {
  animation-name: rotate-anim;
  background: url(/f/media/preloader/loader_button.png) no-repeat 50%;
  background-size: contain;
  border-radius: 100%;
  height: 18rem;
  width: 18rem;
  z-index: 10;
}

.spa-preloader__button-text {
  color: #fff;
  font-size: 2.6rem;
  height: 18rem;
  line-height: 1.1;
  padding: 1.5em 0.8em 0;
  text-align: center;
  width: 18rem;
  z-index: 15;
}


.spa-preloader.active {
  opacity: 1;
}


@keyframes rotate-anim {
  0% { transform: rotate(0deg) translate3d(-50%, -50%, 0) }
  100% { transform: rotate(360deg) translate3d(-50%, -50%, 0) }
}