@keyframes rotation-loader {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spinTo1 {
  0% {
    -webkit-transform: rotate(-44deg);
    transform: rotate(-44deg);
  }
  to {
    transform: rotate(1080deg);
  }
}
@-webkit-keyframes spinTo2 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1396deg);
  }
}
@-webkit-keyframes spinTo3 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1351deg);
  }
}
@-webkit-keyframes spinTo4 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1305deg);
  }
}
@-webkit-keyframes spinTo5 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1261deg);
  }
}
@-webkit-keyframes spinTo6 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1217deg);
  }
}
@-webkit-keyframes spinTo7 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1531deg);
  }
}
@-webkit-keyframes spinTo8 {
  0% {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(1485deg);
  }
}
@-webkit-keyframes spinner-win {
  0%,
  to {
    transform: rotate(1080deg);
  }
  50% {
    transform: rotate(1085deg);
  }
}
@keyframes flip {
  0% {
    transform: perspective(800px) scale3d(0.85, 0.85, 0.85) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg) scaleY(-1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(800px) scale3d(0.85, 0.85, 0.85)
      translate3d(0, 0, 150px) scaleY(-1) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(800px) scale3d(0.85, 0.85, 0.85)
      translate3d(0, 0, 150px) scaleY(-1) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(800px) scale3d(0.8, 0.8, 0.8) translate3d(0, 0, 0)
      scaleY(-1) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(800px) scale3d(0.85, 0.85, 0.85) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg) scaleY(-1);
    animation-timing-function: ease-in;
  }
}
@-webkit-keyframes scaleFireEffect {
  0%,
  80%,
  to {
    transform: scale(0.5);
  }
  20%,
  60% {
    transform: scale(1);
  }
}
@-webkit-keyframes moveFireEffect1 {
  0%,
  80%,
  to {
    transform: scale(1) translate(80%, -35%);
  }
  20%,
  60% {
    transform: scale(1) translate(0, 0);
  }
}
@-webkit-keyframes rotateFireEffect1 {
  0%,
  80%,
  to {
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes moveFireEffect2 {
  0%,
  80%,
  to {
    transform: scaleX(-1) translate(80%, 15%);
  }
  20%,
  60% {
    transform: scaleX(-1) translate(0, 0);
  }
}
@-webkit-keyframes rotateFireEffect2 {
  0%,
  80%,
  to {
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(-180deg);
  }
}
@-webkit-keyframes pulseButton {
  0%,
  to {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
}
@-webkit-keyframes movePerson {
  0%,
  to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes showImages {
  0%,
  80%,
  to {
    transform: translateY(150%);
  }
  18%,
  22%,
  65% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-5%);
  }
  20% {
    transform: translateY(-2%);
  }
}
@-webkit-keyframes showBubbles {
  0%,
  65%,
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
  75% {
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  99% {
    opacity: 0;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveImages1 {
  0%,
  35%,
  to {
    transform: rotate(0deg);
  }
  55%,
  99% {
    transform: rotate(15deg);
  }
}
@-webkit-keyframes moveImages2 {
  0%,
  35%,
  to {
    transform: rotate(0deg);
  }
  55%,
  99% {
    transform: rotate(-15deg);
  }
}
@-webkit-keyframes moveFireEffect1Mobile {
  0%,
  80%,
  to {
    transform: scale(1) translate(65%, -45%);
  }
  20%,
  60% {
    transform: scale(1) translate(0, 0);
  }
}
@-webkit-keyframes moveFireEffect2Mobile {
  0%,
  80%,
  to {
    transform: scale(1) translate(-80%, 5%);
  }
  20%,
  60% {
    transform: scale(1) translate(0, 0);
  }
}
* {
  margin: 0;
  padding: 0;
}
*,
::after,
::before {
  box-sizing: border-box;
}
ol[role='list'],
ul[role='list'] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
a {
  text-decoration: none !important;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
canvas,
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}
button,
input,
select,
textarea {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  ::after,
  ::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}
body,
html {
  height: 100%;
  scroll-behavior: smooth;
}
.hidden {
  display: none !important;
}
.visible {
  display: flex !important;
}
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  background-size: cover;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: min(4.5px + 5.5 * (100vw - 375px)/1545, 10px);
  font-style: normal;
  font-size: 80%;
}
.bottom__section-button span {
  height: auto;
}
.bottom__section-button .button-loader {
  display: none;
}
.bottom__section-button.is--link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom__section-button.is--disabled {
  pointer-events: none;
}
.bottom__section-button.is--disabled span {
  opacity: 0.2;
}
.bottom__section-button.is--disabled .button-loader,
body {
  display: flex;
}
.button-loader {
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.button-loader span {
  width: 30px !important;
  height: 30px !important;
  border: 4px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-loader 1s linear infinite;
  opacity: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wheel__spinner_win_1 {
  animation: 3s spinTo1 ease-in-out forwards !important;
}
.wheel__spinner_win_2 {
  animation: 3s spinTo2 ease-in-out forwards;
}
.wheel__spinner_win_3 {
  animation: 3s spinTo3 ease-in-out forwards;
}
.wheel__spinner_win_4 {
  animation: 3s spinTo4 ease-in-out forwards;
}
.wheel__spinner_win_5 {
  animation: 3s spinTo5 ease-in-out forwards;
}
.wheel__spinner_win_6 {
  animation: 3s spinTo6 ease-in-out forwards;
}
.wheel__spinner_win_7 {
  animation: 3s spinTo7 ease-in-out forwards;
}
.wheel__spinner_win_8 {
  animation: 3s spinTo8 ease-in-out forwards;
}
.wheel__texts-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 1em !important;
  padding-left: 2em !important;
}
.wheel__texts-block p {
  transform: rotate(-7deg);
}
.wheel__texts-block p:only-child {
  transform: rotate(0deg);
}
.wheel__texts-block p + p {
  margin-top: 10px;
  transform: rotate(7deg);
}
.effects,
.effects__block {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.effects {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
}
.effects__block {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: fixed;
}
.wheel__texts-1,
.wheel__texts-2 {
  transform: rotate(-137deg);
  position: absolute;
  left: 11%;
  top: 23%;
}
.wheel__texts-2 {
  transform: rotate(-93deg);
  left: 32%;
  top: 14%;
}
.wheel__texts-3,
.wheel__texts-4 {
  transform: rotate(-45deg);
  position: absolute;
  left: 54%;
  top: 23%;
}
.wheel__texts-4 {
  transform: rotate(-2deg);
  left: 63%;
  top: 44%;
}
.wheel__texts-5,
.wheel__texts-6 {
  transform: rotate(43deg);
  position: absolute;
  left: 54%;
  top: 65%;
}
.wheel__texts-6 {
  transform: rotate(87deg);
  left: 33%;
  top: 74%;
}
.wheel__texts-7,
.wheel__texts-8 {
  transform: rotate(133deg);
  position: absolute;
  left: 11%;
  top: 66%;
}
.wheel__texts-8 {
  transform: rotate(177deg);
  left: 2%;
  top: 45%;
}
.win-animation-svg {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(45deg);
  opacity: 0;
  width: 100%;
}
.win-animation-svg.is--active {
  opacity: 1;
}
.is--win-spinner {
  animation: 2s spinner-win ease-in-out infinite !important;
}
body.is--winner .bottom__section {
  opacity: 0;
}
.body-wrapper {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 991px) {
  .body-wrapper {
    background-image: url(../images/page-bg-mobile.webp);
  }
}
#reels,
.reel > .icons {
  position: relative;
}
#slot.inverted .reel {
  transform: scaleY(-1);
}
#slot.inverted .reel > .icons > img {
  transform: scaleY(-1) scale(0.8);
}
#reels {
  display: flex;
  width: 79vw;
  height: 47.4vw;
  max-height: 520px;
  max-width: 870px;
  z-index: 1;
}
@media (max-width: 991px) {
  #reels {
    width: 88vw;
    height: 89vw;
    max-height: 89vw;
  }
}
#reels:before,
.background {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.background {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  top: 49%;
  height: 102%;
  z-index: 2;
  background-image: url(../images/frame.webp);
}
@media (max-width: 991px) {
  .background {
    background-image: url(../images/frame-mobile.webp);
    background-size: 100%;
  }
}
#reels:before {
  content: '';
  top: 50%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, #2e0800 0, #450c00 49.5%, #2e0800 97.5%);
}
#slot,
.reel {
  position: relative;
}
#slot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  max-width: unset;
  margin: -1em auto 4em;
}
.reel {
  overflow: hidden;
  width: 20%;
  height: 100%;
}
@media (max-width: 991px) {
  .reel {
    width: 33.333%;
  }
}
.reel > .icons > img {
  width: calc(100% + 6px);
  margin: -3px 0 0 -3px;
  height: auto;
  max-width: none;
  transform: translate3d(0, 0, 0) scale(0.9);
}
.icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.is--winner .reel .icons img:nth-child(2) {
  transform: scaleY(-1);
  animation: 2s flip ease-in-out infinite;
}
.is--modal-open #slot {
  transition: opacity 0.3s;
}
html {
  background: linear-gradient(
    180deg,
    #fad69a 0,
    #2b3d51 6.67%,
    #60c5c1 26.67%,
    #bd6a48 67.67%,
    #252235 100%
  );
  font-size: min(4.5px + 5.5 * (100vw - 375px)/1545, 10px);
}
@media (max-width: 1440px) {
  body {
    font-size: 70%;
  }
}
@media (max-width: 1023px) {
  body {
    font-size: 110%;
  }
}
@media (max-width: 420px) {
  body {
    font-size: 105%;
  }
}
img {
  width: 100%;
}
.body-wrapper {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../images/page-bg.webp);
}
@media (max-width: 767px) {
  .body-wrapper {
    background-position: top center;
    background-image: url(../images/page-bg-mobile.webp);
  }
}
.container {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0 16px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .container {
    display: block;
    flex: unset;
    height: 100%;
    padding: 7em 16px;
  }
}
@media (max-width: 1023px) and (max-height: 741px) {
  .container {
    padding: 3em 16px;
  }
}
.container-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.logo {
  position: relative;
  z-index: 6;
  display: block;
  width: 60em;
  margin: -3em auto 0;
}
@media (max-width: 768px) {
  .logo {
    font-size: 110%;
  }
}
@media (max-width: 1023px) {
  #slot {
    margin-top: 0;
  }
}
#slot .background {
  top: 50%;
  left: 50%;
  width: 104%;
  height: 107%;
}
@media (max-width: 1023px) {
  #slot .background {
    top: 50%;
    font-size: 83%;
    width: 90em;
    height: 87em;
  }
}
#slot #reels {
  position: relative;
  width: 151em;
  height: 91em;
  max-width: unset;
  max-height: unset;
  font-size: 80%;
}
@media (max-width: 1023px) {
  #slot #reels {
    top: 0;
    width: 72em;
    height: 74em;
    max-height: unset;
    font-size: 94%;
  }
}
#slot #reels::before {
  height: 100%;
  background: linear-gradient(180deg, #0039ff 0, #0df 49.5%, #0064ff 100%);
}
@media (max-width: 1023px) {
  #slot #reels::before {
    width: 105%;
  }
}
#slot #reels .reel .icons img {
  aspect-ratio: 1;
  transform: scaleY(-1) scale(0.75);
}
@media (max-width: 1023px) {
  #slot #reels .reel:nth-child(1) .icons img {
    margin-left: -2em;
  }
  #slot #reels .reel:nth-child(3) .icons img {
    margin-right: -5em;
  }
}
#slot .effect-fire {
  width: 60%;
  left: 20%;
  top: 5%;
}
@media (max-width: 1023px) {
  #slot .effect-fire {
    width: 90%;
    height: 90%;
    left: 5%;
    top: 0;
  }
}
.effect-fire {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: 6s scaleFireEffect ease-in-out infinite;
}
.effect-fire .is--1,
.effect-fire .is--1::before,
.effect-fire .is--2,
.effect-fire .is--2::before {
  position: absolute;
  width: 100em;
  height: 100em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.effect-fire .is--1::before,
.effect-fire .is--2::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../images/effect-firecircle.webp);
}
.effect-fire .is--1 {
  top: -13%;
  left: -80%;
  animation: 6s moveFireEffect1 ease-in-out infinite;
}
@media (max-width: 1023px) {
  .effect-fire .is--1 {
    top: unset;
    bottom: -100%;
    left: -35%;
    animation: 6s moveFireEffect1Mobile ease-in-out infinite;
  }
}
.effect-fire .is--1::before {
  animation: 6s rotateFireEffect1 ease-in-out infinite;
}
.effect-fire .is--2 {
  top: -13%;
  right: -80%;
  animation: 6s moveFireEffect2 ease-in-out infinite;
}
@media (max-width: 1023px) {
  .effect-fire .is--2 {
    top: -60%;
    right: -45%;
    animation: 6s moveFireEffect2Mobile ease-in-out infinite;
  }
}
.effect-fire .is--2::before {
  animation: 6s rotateFireEffect2 ease-in-out infinite;
}
.bottom__section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 8;
  width: 100%;
  min-width: 1px;
}
@media (max-width: 1023px) {
  .bottom__section {
    position: fixed;
    left: 0;
    bottom: 16em;
  }
}
.bottom__section-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12em;
  min-width: 30px;
  background-color: transparent;
  background-repeat: repeat-x;
  background-size: contain;
  background-position: center;
  background-image: url(../images/button_middle.webp);
  outline: 0;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 640px) {
  .bottom__section-button {
    font-size: 120%;
  }
}
.bottom__section-button:after,
.bottom__section-button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20em;
  background-size: contain;
  background-repeat: no-repeat;
}
.bottom__section-button:before {
  left: calc(-16em + 1px);
  background-position: right center;
  background-image: url(../images/button_left.webp);
}
.bottom__section-button:after {
  right: calc(-16em + 1px);
  background-position: left center;
  background-image: url(../images/button_right.webp);
}
.bottom__section-button span {
  position: relative;
  z-index: 3;
  padding: 0 5px;
  margin-left: -2em;
  margin-right: -2em;
  margin-bottom: 0.15em;
  font-size: 5em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 -3px 1px #2b027d,
    -2px -2px 1px #2b027d,
    -1px -2px 1px #2b027d,
    0 -2px 1px #2b027d,
    1px -2px 1px #2b027d,
    2px -2px 1px #2b027d,
    -2px -1px 1px #2b027d,
    -1px -1px 1px #2b027d,
    0 -1px 1px #2b027d,
    1px -1px 1px #2b027d,
    2px -1px 1px #2b027d,
    -3px 0 1px #2b027d,
    -2px 0 1px #2b027d,
    -1px 0 1px #2b027d,
    0 0 1px #2b027d,
    1px 0 1px #2b027d,
    2px 0 1px #2b027d,
    3px 0 1px #2b027d,
    -2px 1px 1px #2b027d,
    -1px 1px 1px #2b027d,
    0 1px 1px #2b027d,
    1px 1px 1px #2b027d,
    2px 1px 1px #2b027d,
    -2px 2px 1px #2b027d,
    -1px 2px 1px #2b027d,
    0 2px 1px #2b027d,
    1px 2px 1px #2b027d,
    2px 2px 1px #2b027d,
    0 3px 1px #2b027d;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1024px) {
  .bottom__section-button span {
    text-shadow:
      0 -2px 1px #2b027d,
      -1px -1px 1px #2b027d,
      0 -1px 1px #2b027d,
      1px -1px 1px #2b027d,
      -2px 0 1px #2b027d,
      -1px 0 1px #2b027d,
      0 0 1px #2b027d,
      1px 0 1px #2b027d,
      2px 0 1px #2b027d,
      -1px 1px 1px #2b027d,
      0 1px 1px #2b027d,
      1px 1px 1px #2b027d,
      0 2px 1px #2b027d;
    -webkit-font-smoothing: antialiased;
  }
}
.bottom__section-button.pulse {
  animation: 2s pulseButton ease-in-out infinite;
}
.bottom__section-button-next {
  display: none;
}
.bottom__section-button .button-loader span {
  padding: 0 !important;
}
.right__person {
  position: absolute;
  z-index: 5;
  right: max(0%, 50% - 37.5em - 90em);
  bottom: -80em;
  width: 75em;
  height: 225em;
  animation: movePerson 4s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .right__person {
    right: -10em;
    font-size: 90%;
  }
}
@media (max-width: 767px) {
  .right__person {
    z-index: 0;
    font-size: 70%;
  }
}
@media (max-width: 767px) and (max-height: 741px) {
  .right__person {
    font-size: 60%;
  }
}
.animation-images,
.animation-images::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.animation-images {
  bottom: 0;
  transform: translateY(100vh);
  animation: showImages 8s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .animation-images {
    font-size: 80%;
    height: 55%;
    left: 35em;
  }
}
@media (max-width: 767px) {
  .animation-images {
    font-size: 65%;
    height: 45%;
    left: 50em;
  }
}
.animation-images::before {
  content: '';
  display: block;
  top: -50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/bubles.webp);
  mix-blend-mode: lighten;
  animation: showBubbles 8s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .animation-images::before {
    left: -45em;
  }
}
@media (max-width: 767px) {
  .animation-images::before {
    left: -60em;
  }
}
.animation-images__item {
  position: absolute;
}
.animation-images__item img {
  font-size: 120%;
}
.animation-images__item:nth-child(odd) {
  animation: moveImages1 8s ease-in-out infinite;
}
.animation-images__item:nth-child(even) {
  animation: moveImages2 8s ease-in-out infinite;
}
.animation-images__item.is--1 {
  top: calc(50% - 53em);
  left: calc(50% - 90em);
}
.animation-images__item.is--1 img {
  width: 24.7em;
}
.animation-images__item.is--2 {
  top: calc(50% - 29em);
  left: calc(50% - 77em);
}
.animation-images__item.is--2 img {
  width: 28.8em;
}
.animation-images__item.is--3 {
  top: calc(50% - 3em);
  left: calc(50% - 113em);
}
.animation-images__item.is--3 img {
  width: 36.5em;
}
.animation-images__item.is--4 {
  top: calc(50% - 5em);
  left: calc(50% - 82em);
}
.animation-images__item.is--4 img {
  width: 16.1em;
}
.animation-images__item.is--5 {
  top: calc(50% - 34em);
  left: calc(50% - 115em);
}
.animation-images__item.is--5 img {
  width: 33.7em;
}
.animation-images__item.is--6 {
  top: calc(50% - 38em);
  right: calc(50% - 60em);
}
.animation-images__item.is--6 img {
  width: 14em;
}
.animation-images__item.is--7 {
  top: calc(50% - 52em);
  right: calc(50% - 93em);
}
.animation-images__item.is--7 img {
  width: 18.4em;
}
.animation-images__item.is--8 {
  top: calc(50% - 45em);
  left: calc(50% - 62em);
}
.animation-images__item.is--8 img {
  width: 17em;
}
.animation-images__item.is--9 {
  top: calc(50% + 35em);
  left: calc(50% - 48em);
}
.animation-images__item.is--9 img {
  width: 17.2em;
}
.animation-images__item.is--10 {
  top: calc(50% + 7em);
  left: calc(50% - 75em);
}
.animation-images__item.is--10 img {
  width: 31em;
}
.animation-images__item.is--11 {
  top: calc(50% - 44em);
  right: calc(50% - 114em);
}
.animation-images__item.is--11 img {
  width: 26.9em;
}
.animation-images__item.is--12 {
  top: calc(50% + 37em);
  left: calc(50% - 79em);
}
.animation-images__item.is--12 img {
  width: 11.6em;
}
.modal {
  position: absolute;
  z-index: 998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.75);
}
.modal__wrapper {
  position: relative;
  top: 10%;
}
@media (max-width: 768px) {
  .modal__wrapper {
    top: 5%;
  }
}
@media (max-width: 768px) and (max-height: 741px) {
  .modal__wrapper {
    top: 0;
  }
}
.modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  width: 100%;
  max-width: 100em;
  margin: 16em auto 6em;
}
.modal__content .effect-fire {
  top: calc(50% - 35em);
  left: calc(50% - 45em);
  width: 90em;
  height: 90em;
}
@media (max-width: 1023px) {
  .modal__content .effect-fire {
    font-size: 70%;
    left: 0;
    height: 200%;
    width: 100%;
    top: -40%;
  }
  .modal__content .effect-fire .is--1 {
    left: -20%;
  }
  .modal__content .effect-fire .is--2 {
    right: -25%;
  }
}
.modal__logo {
  position: relative;
  z-index: 6;
  display: block;
  width: 60em;
  margin: -3em auto 0;
}
@media (max-width: 768px) {
  .modal__logo {
    font-size: 110%;
  }
}
.modal__title {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  font-size: 5.2em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 -3px 1px #074762,
    -2px -2px 1px #074762,
    -1px -2px 1px #074762,
    0 -2px 1px #074762,
    1px -2px 1px #074762,
    2px -2px 1px #074762,
    -2px -1px 1px #074762,
    -1px -1px 1px #074762,
    0 -1px 1px #074762,
    1px -1px 1px #074762,
    2px -1px 1px #074762,
    -3px 0 1px #074762,
    -2px 0 1px #074762,
    -1px 0 1px #074762,
    0 0 1px #074762,
    1px 0 1px #074762,
    2px 0 1px #074762,
    3px 0 1px #074762,
    -2px 1px 1px #074762,
    -1px 1px 1px #074762,
    0 1px 1px #074762,
    1px 1px 1px #074762,
    2px 1px 1px #074762,
    -2px 2px 1px #074762,
    -1px 2px 1px #074762,
    0 2px 1px #074762,
    1px 2px 1px #074762,
    2px 2px 1px #074762,
    0 3px 1px #074762;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1024px) {
  .modal__title {
    text-shadow:
      0 -2px 1px #074762,
      -1px -1px 1px #074762,
      0 -1px 1px #074762,
      1px -1px 1px #074762,
      -2px 0 1px #074762,
      -1px 0 1px #074762,
      0 0 1px #074762,
      1px 0 1px #074762,
      2px 0 1px #074762,
      -1px 1px 1px #074762,
      0 1px 1px #074762,
      1px 1px 1px #074762,
      0 2px 1px #074762;
    -webkit-font-smoothing: antialiased;
  }
}
@media (max-width: 768px) {
  .modal__title {
    font-size: 4.2em;
  }
}
.modal__text {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  padding: 0 16px;
  font-size: 9.3em;
  text-align: center;
  text-transform: uppercase;
  color: #074762;
  text-shadow:
    0 -3px 1px #fff,
    -2px -2px 1px #fff,
    -1px -2px 1px #fff,
    0 -2px 1px #fff,
    1px -2px 1px #fff,
    2px -2px 1px #fff,
    -2px -1px 1px #fff,
    -1px -1px 1px #fff,
    0 -1px 1px #fff,
    1px -1px 1px #fff,
    2px -1px 1px #fff,
    -3px 0 1px #fff,
    -2px 0 1px #fff,
    -1px 0 1px #fff,
    0 0 1px #fff,
    1px 0 1px #fff,
    2px 0 1px #fff,
    3px 0 1px #fff,
    -2px 1px 1px #fff,
    -1px 1px 1px #fff,
    0 1px 1px #fff,
    1px 1px 1px #fff,
    2px 1px 1px #fff,
    -2px 2px 1px #fff,
    -1px 2px 1px #fff,
    0 2px 1px #fff,
    1px 2px 1px #fff,
    2px 2px 1px #fff,
    0 3px 1px #fff;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1024px) {
  .modal__text {
    text-shadow:
      0 -2px 1px #fff,
      -1px -1px 1px #fff,
      0 -1px 1px #fff,
      1px -1px 1px #fff,
      -2px 0 1px #fff,
      -1px 0 1px #fff,
      0 0 1px #fff,
      1px 0 1px #fff,
      2px 0 1px #fff,
      -1px 1px 1px #fff,
      0 1px 1px #fff,
      1px 1px 1px #fff,
      0 2px 1px #fff;
    -webkit-font-smoothing: antialiased;
  }
}
@media (max-width: 768px) {
  .modal__text {
    font-size: 7.3em;
  }
}
.modal.is--active {
  opacity: 1;
  visibility: visible;
}
.modal.is--active .bottom__section {
  position: relative;
  z-index: 6;
  opacity: 1;
  bottom: 0;
  margin-top: 0;
}
.modal.is--active .bottom__section-button {
  animation: 2s pulseButton ease-in-out infinite;
}
.is--modal-open #slot,
.is--modal-open .bottom__section,
.is--modal-open .logo,
.is--modal-open .wheel__around,
.is--modal-open .wheel__btn,
.is--modal-open .wheel__effect,
.is--modal-open .wheel__spinner {
  z-index: 0;
  opacity: 0;
}
.is--modal-open .left__person,
.is--modal-open .right__person {
  opacity: 1;
  z-index: 0;
}
.effects {
  z-index: 999 !important;
}
#bonus-inline {
  position: fixed;
}
@media (max-width: 768px) and (max-height: 741px) {
  #bonus-inline {
    position: absolute;
    left: -200%;
    min-width: 350px;
    transition: left 1s ease-out;
  }
  #bonus-inline img {
    transform: unset;
    top: -20px;
  }
}
#bonus-inline.is--active {
  background: linear-gradient(to left, #f4d434, #f83c01);
}
@media (max-width: 768px) and (max-height: 741px) {
  #bonus-inline.is--active {
    right: unset;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 5px;
    transition: left 1s ease-out;
  }
}
#bonus-inline.is--active p {
  background: linear-gradient(90deg, #f83c01, #f83c01);
  -webkit-background-clip: text;
}
#bonus-inline.is--active svg path {
  stroke: #f83c01;
}

footer {
  width: 100%;
  background-color: #000;
  padding: 4px 12px;
  z-index: -1;
}
footer > div {
  max-width: 960px;
  margin: 0 auto;
}
footer p,
footer .footer-links a {
  font-size: clamp(10px, 2.5vw, 12px);
  text-align: center;
  text-decoration: none;
  margin: 2px;
  padding: 0;
  color: #ddd;
}
footer .footer-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}