/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: rgba(0, 0, 0, 0)
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none;
    max-width: 100%;
    height: auto
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

.lang-switch {
    position: absolute;
    font-family: Roboto, sans-serif;
    font-style: normal;
    top: 3rem;
    right: 4rem;
    width: 5.6rem;
    height: 3.8rem;
    z-index: 14;
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.lang-switch.is-active .lang-switch__toggle {
    border-radius: .8rem .8rem 0px 0px
}

.lang-switch.is-active .lang-switch__toggle i {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.lang-switch.is-active .lang-switch__list {
    opacity: 1;
    pointer-events: auto
}

.lang-switch p {
    font-size: 1.1rem;
    line-height: 1;
    position: relative;
    text-transform: none;
    margin-right: .45rem;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    display: none
}

.lang-switch .lang-switch__toggle {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    height: 3.6rem;
    cursor: pointer;
    position: relative;
    z-index: 3;
    border-radius: .8rem;
    padding: 0 3rem 0 1rem;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: border-radius ease-in-out .3s;
    transition: border-radius ease-in-out .3s;
    background-color: #00a0eb
}
.lang-switch .lang-switch__toggle:hover {
    opacity: 0.95;
}

.lang-switch .lang-switch__toggle .lang-switch__current {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.lang-switch .lang-switch__toggle .lang-switch__current span {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700
}

.lang-switch .lang-switch__toggle .lang-switch__current .lang-switch__flag {
    margin: 0 .5rem 0 0
}

.lang-switch i {
    display: inline-block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: .5rem;
    background: url(../img/lang-arr.svg) 0 0 no-repeat;
    background-size: contain;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}

.flag--ru {
    opacity: 0
}

.lang-switch__flag {
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background-size: 1.6rem 32rem;
    margin: 0 .5rem 0 .7rem;
    position: relative;
    display: none
}

.lang-switch__flag img {
    border-radius: 1rem
}

.lang-switch__list {
    position: absolute;
    list-style-type: none;
    left: 0;
    width: 100%;
	background: #3a69ac;
    border-radius: 0px 0px .8rem .8rem;
    overflow: hidden;
    cursor: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}

.lang-switch__list li {
    position: relative;
    height: 3.2rem;
    cursor: pointer;
    padding: .2rem 0 0 .2rem;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-align: center
}

.lang-switch__list li .lang-switch__flag {
    padding-top: .3rem
}

.lang-switch__list li span {
    display: inline-block;
    font-size: 1.4rem;
    padding: .5rem 0 0 0;
    color: #fff
}

.lang-switch__list li.lang-switch__item--current, .lang-switch__list li:hover {
	background: #2d4d99;
}

@media (max-width: 1024px) {
    .lang-switch {
        right: 4rem
    }

    .lang-switch .lang-switch__list {
        left: auto;
        right: 0
    }
}

@media (max-width: 600px) {
    .lang-switch {
        font-size: 1.3rem;
        right: 1.5rem;
        top: 3rem
    }

    .lang-switch i {
        right: .5rem
    }

    .lang-switch .lang-switch__toggle {
        padding-left: .5rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .lang-switch .lang-switch__toggle p {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-grow: 0
    }

    .lang-switch p {
        display: none
    }

    .lang-switch .lang-switch__toggle .lang-switch__current .lang-switch__flag {
        display: none
    }

    .lang-switch .lang-switch__toggle .lang-switch__current span {
        font-size: 1.6rem
    }
}

html.en .en {
    display: inline-block !important
}

html .en {
    display: none !important
}

html.pl .pl {
    display: inline-block !important
}

html .pl {
    display: none !important
}

html.lt .lt {
    display: inline-block !important
}

html .lt {
    display: none !important
}

html.lang--hu .lang--hu {
    display: inline-block !important
}

html .lang--hu {
    display: none !important
}

html.de .de {
    display: inline-block !important
}

html .de {
    display: none !important
}

html.lang--ro .lang--ro {
    display: inline-block !important
}

html .lang--ro {
    display: none !important
}

html.lv .lv {
    display: inline-block !important
}

html .lv {
    display: none !important
}

html.lang--gr .lang--gr {
    display: inline-block !important
}

html .lang--gr {
    display: none !important
}

html.fr .fr {
    display: inline-block !important
}

html .fr {
    display: none !important
}

html.it .it {
    display: inline-block !important
}

html .it {
    display: none !important
}

html.nl .nl {
    display: inline-block !important
}

html .nl {
    display: none !important
}

html.lang--es .lang--es {
    display: inline-block !important
}

html .lang--es {
    display: none !important
}

html.lang--ee .lang--ee {
    display: inline-block !important
}

html .lang--ee {
    display: none !important
}

html.lang--sk .lang--sk {
    display: inline-block !important
}

html .lang--sk {
    display: none !important
}

/* === Added new languages === */

/* Показывать активный язык */
html.ja .ja {
    display: inline-block !important;
}
html.sv .sv {
    display: inline-block !important;
}
html.ar .ar {
    display: inline-block !important;
}
html.cs .cs {
    display: inline-block !important;
}
html.pt .pt {
    display: inline-block !important;
}
html.fi .fi {
    display: inline-block !important;
}
html.no .no {
    display: inline-block !important;
}

/* Скрывать все остальные (для этих языков) */
html .ja {
    display: none !important;
}
html .sv {
    display: none !important;
}
html .ar {
    display: none !important;
}
html .cs {
    display: none !important;
}
html .pt {
    display: none !important;
}
html .fi {
    display: none !important;
}
html .no {
    display: none !important;
}


* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none
}

img {
    width: 100%;
    height: auto;
    display: block
}

body, html {
    min-height: 100%
}

html {
	background: #0b1a29;
    line-height: 1.15;
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: .5208333333vw
}

html.is-hidden {
    display: block
}

html.is-hidden .overlay__blur-layer {
    background: rgba(0, 0, 0, 0);
    position: relative;
    -webkit-filter: none;
    filter: none
}

html.is-hidden .app__preloader {
    display: none
}

html.lang--hu .modal__step--two .modal__bonus > span {
    font-size: 3.8rem
}

html.en .hero {
    max-width: 90rem
}

html.lang--tr .wheel__action > span {
    font-size: 1.6rem
}

@media (max-width: 600px) {
    html.pl .hero__line {
        font-size: 4rem
    }
}

html.pl .wheel__controls > span {
    font-size: 2.8rem
}

html.pl .wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 2.4rem;
    line-height: 1.2
}

@media (max-width: 600px) {
    html.lt .hero__line {
        font-size: 4rem
    }
}

html.lt .wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-a div, html.lt .wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 2.2rem;
    line-height: 1.2
}

@media (max-width: 600px) {
    html.de .hero__line {
        font-size: 3.6rem
    }

    html.de .hero__line:after {
        -webkit-text-stroke: .2rem #f2c381
    }
}

html.de .wheel .wheel__wedge-label--1 .wheel__prize div {
    font-size: 1.7rem
}

html.de .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2.2rem
}

html.lang--ee .wheel .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 1.6rem
}

html.lang--sk .wheel .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 2.4rem;
    line-height: 1.2
}

@media (max-width: 600px) {
    html.lv .hero__line {
        font-size: 4rem
    }

    html.lv .hero__line:after {
        -webkit-text-stroke: .2rem #f2c381
    }
}

html.lv .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2.4rem;
    line-height: 1.2
}

@media (max-width: 600px) {
    html.lang--gr .hero__line {
        font-size: 3.6rem
    }

    html.lang--gr .hero__line:after {
        -webkit-text-stroke: .2rem #f2c381
    }
}

html.lang--gr .wheel .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 1.4rem
}

html.lang--gr #modal__pane--step1 .modal__bonus > span {
    font-size: 5.5rem
}

html.lang--es .wheel .wheel__wedge-label--4 .wheel__prize--tier-a div {
    font-size: 2.6rem
}

html.lang--es .wheel .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-size: 1.8rem
}

@media (max-width: 600px) {
    html.fr .hero__line {
        font-size: 4.2rem;
        line-height: 1.3
    }

    html.fr .hero__line:after {
        -webkit-text-stroke: .2rem #f2c381
    }
}

html.fr .wheel__controls > span {
    font-size: 2rem
}

html.fr .modal__subtitle > span {
    font-size: 3.6rem
}

html.it .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2.4rem
}

html.it .hero__line {
    letter-spacing: .44rem
}

html.nl .wheel__rotor .wheel__wedge-label--4 .wheel__prize span {
    font-size: 3rem;
    line-height: 1.2
}

html.lang--hu #wheel__prize-slice .wheel__prize div .value__sum {
    font-size: 2.4rem
}

html.lang--ro #wheel__prize-slice .wheel__prize div .value__sum {
    font-size: 1.8rem
}

html.lang--es #wheel__prize-slice .wheel__prize div .value__sum {
    font-size: 1.8rem
}

html.lang--ro .wheel .wheel__wedge-label--1 .wheel__prize div {
    font-size: 1.4rem
}

html.lang--ro .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2rem;
    line-height: 3rem
}

html.lang--hu .hero__line {
    font-size: 4.5rem;
    line-height: 1.4
}

html.lang--hu .hero__line:after {
    -webkit-text-stroke: .2rem #f2c381
}

@media (max-width: 600px) {
    html.lang--hu .hero__line {
        font-size: 3.6rem
    }

    html.lang--hu .hero__line:after {
        -webkit-text-stroke: .2rem #f2c381
    }
}

html.lang--hu .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2rem;
    line-height: 3rem
}

html.fr .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 2.7rem
}

html.nl .wheel .wheel__wedge-label--4 .wheel__prize div {
    font-size: 3rem
}

html.fr .wheel__action > span, html.lang--hu .wheel__action > span, html.lang--ro .wheel__action > span {
    font-size: 1.6rem
}

html.lang--gr .wheel__action > span {
    font-size: 1.4rem
}

html.lv #modal__pane--step2 .offer__title > span {
    font-size: 2.6rem
}

.hero {
    max-width: 105rem;
    width: 100%;
    margin: 0 auto
}

.hero br {
    display: none
}

.badge--fs {
    display: block
}

.fs-gradient {
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #f3d7a2), to(#ae7726));
    background: linear-gradient(180deg, #f3d7a2 28.44%, #ae7726 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.fs-gradient br {
    display: none
}

.fs-gradient::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    content: attr(data-text);
    width: 100%;
    height: 100%;
    -webkit-text-stroke: .4rem #f2c381
}

.modal__step--two .modal__bonus > span {
    font-size: 5rem;
    line-height: 5.2rem
}

.modal__step--two .modal__inner {
    min-height: 64.9rem;
    width: 54.1rem
}

.modal__step--two .modal__bonus > span {
    display: inline-block
}

.modal__actions {
    margin-top: -1rem
}

.fx__feature {
    position: absolute;
    width: 36.8em;
    height: 21.7em;
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1
}

.fx__modal {
    position: absolute;
    width: 60em;
    height: 62.3em;
    margin: auto;
    top: 8rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: 0
}

.fx__background {
    width: 100%;
    height: 100%
}

.ui__dot {
    position: absolute;
    width: 4em !important;
    height: 4em !important;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.wheel .wheel__prize div {
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 4.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 5.4rem;
    text-transform: uppercase;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #f3d7a2), to(#ae7726));
    background: linear-gradient(180deg, #f3d7a2 28.44%, #ae7726 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}
.wheel__wedge-label.wheel__wedge-label--3 .wheel__prize.wheel__prize--tier-a div {
    font-size: 6.8rem;
}

.app__preloader {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 16;
    background: rgba(0, 0, 0, .7)
}

.app__preloader > img {
    width: 5em;
    height: 5em
}

a {
    text-decoration: underline
}

a:hover {
    text-decoration: none
}

.overlay__blur-layer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    min-height: 100%;
    z-index: 5
}

.page {
    position: relative;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

.app {
    position: relative;
    overflow: hidden;
    background-size: 192em auto;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 108rem
}

.decor__root {
    position: absolute;
    left: 81%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 19em;
    width: 18.6em;
    z-index: 8;
    pointer-events: none
}

.fx__snow {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -1em;
    width: 192em;
    z-index: 8;
    pointer-events: none
}

.media__img--front {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 7;
    width: 192em;
    pointer-events: none
}

.page__bg--secondary .character--girl {
    left: 14rem;
    width: 71.6rem
}

.page__bg--secondary .character--man {
    right: 16rem;
    width: 72.5rem
}

.media__img--main {
    position: absolute;
    left: 50%;
    top: 15rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 129.6rem;
    z-index: 3;
    pointer-events: none
}

@media (max-width: 600px) {
    .media__img--main {
        display: none
    }
}

.page__bg--secondary .media__img--main {
    display: none
}

@media (max-width: 600px) {
    .page__bg--secondary .page__main {
        min-height: auto
    }
}

.page__main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.page__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    position: relative
}

.site-header {
    width: 24rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto 4rem;
    padding: 3rem 0 0;
    position: relative;
    z-index: 13
}

.brand__logo {
    width: 20rem;
    display: block
}
.brand__logo:hover {
    opacity: 0.9;
}

.character--girl {
    position: absolute;
    left: 22rem;
    bottom: 5rem;
    width: 73.6rem;
    z-index: 7;
    pointer-events: none;
    -webkit-animation: girl-scale 5s ease-in-out .5s infinite;
    animation: girl-scale 5s ease-in-out .5s infinite
}

.character--man {
    position: absolute;
    right: 20rem;
    bottom: 12rem;
    width: 72.5rem;
    z-index: 7;
    pointer-events: none;
    -webkit-animation: man-scale 5s ease-in-out .5s infinite;
    animation: man-scale 5s ease-in-out .5s infinite
}

.hero {
    text-align: center
}

.hero__line {
    position: relative;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 6.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: 7rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #08bdf9), to(#00a0eb));
    background: linear-gradient(180deg, #08bdf9 28.44%, #00a0eb 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.hero__line::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    content: attr(data-text);
    width: 100%;
    height: 100%;
    -webkit-text-stroke: .4rem #00a0eb
}

.site-footer {
    position: absolute;
    left: 50%;
    top: 102rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
    text-align: center
}

.wheel {
    width: 68.87em;
    height: 68.87em;
    background-image: url(../img/wheel-layer-1.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 6rem auto 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.wheel__flame {
    width: 120%;
    height: 120%;
    background-image: url(../img/fire.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: -18%;
    left: 61%;
    -webkit-transform: scale(1.2) translateX(-50%);
    -ms-transform: scale(1.2) translateX(-50%);
    transform: scale(1.2) translateX(-50%);
    z-index: -1;
    pointer-events: none
}

.wheel__pointer {
    width: 15.4em;
    height: 10.4em;
    background-image: url(../img/wheel-arrow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: -3.4em;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 4;
    pointer-events: none
}

.wheel--win {
    width: 18.7em;
    height: 23.05em;
    background-image: url(../img/wheel-win.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 9.6em;
    left: 50.5%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 3;
    pointer-events: none
}

.wheel__action {
    width: 15.2em;
    height: 15.2em;
    position: absolute;
    z-index: 5;
    left: 27em;
    top: 26.8em;
    border: none;
    outline: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #00164f;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    background: none;
    background-image: url(../img/wheel-btn.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-animation: btn-pulse 3s ease infinite forwards;
    animation: btn-pulse 3s ease infinite forwards;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.wheel__action::before {
    background-image: url(../img/wheel-btn.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center
}

.wheel__action > span {
    font-family: "Inter", sans-serif;
    color: #fff;
    font-variant-numeric: lining-nums proportional-nums;
    text-shadow: 0px .4rem .7rem rgba(0, 0, 0, .26);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase
}

@media (hover: hover) {
    .wheel__action:hover {
        -webkit-animation: none;
        animation: none
    }
}

.wheel__action.is-disabled {
    pointer-events: none;
    -webkit-filter: unset;
    filter: unset;
    -webkit-animation: unset;
    animation: unset
}

.wheel__wedge-label--2 .wheel__prize .wheel__prize-text {
    font-size: 1.4rem
}

@-webkit-keyframes wheel-btn-pulse {
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-box-shadow: -0.1rem 1rem 0px 0px rgba(103, 104, 214, .6);
        box-shadow: -0.1rem 1rem 0px 0px rgba(103, 104, 214, .6)
    }
}

@keyframes wheel-btn-pulse {
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-box-shadow: -0.1rem 1rem 0px 0px rgba(103, 104, 214, .6);
        box-shadow: -0.1rem 1rem 0px 0px rgba(103, 104, 214, .6)
    }
}

@-webkit-keyframes btn-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes btn-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bounce {
    0% {
        top: -4%
    }
    50% {
        top: -7%
    }
    100% {
        top: -4%
    }
}

@keyframes bounce {
    0% {
        top: -4%
    }
    50% {
        top: -7%
    }
    100% {
        top: -4%
    }
}

.wheel__rotor--anim {
    -webkit-animation: 2s spinner ease-in-out infinite;
    animation: 2s spinner ease-in-out infinite
}

.wheel__rotor--anim-a1 {
    -webkit-animation: 3.5s spinTo1 ease-in-out forwards;
    animation: 3.5s spinTo1 ease-in-out forwards
}

.wheel__rotor--anim-a2 {
    -webkit-animation: 2s spinner2 ease-in-out infinite;
    animation: 2s spinner2 ease-in-out infinite
}

.wheel__rotor--anim-final {
    -webkit-animation: 3.5s spinTo2 ease-in-out forwards;
    animation: 3.5s spinTo2 ease-in-out forwards
}

@-webkit-keyframes spinTo1 {
    0% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    70% {
        -webkit-transform: rotate(1053deg);
        transform: rotate(1053deg)
    }
    80% {
        -webkit-transform: rotate(1045deg);
        transform: rotate(1045deg)
    }
    100% {
        -webkit-transform: rotate(1049deg);
        transform: rotate(1049deg)
    }
}

@keyframes spinTo1 {
    0% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    70% {
        -webkit-transform: rotate(1053deg);
        transform: rotate(1053deg)
    }
    80% {
        -webkit-transform: rotate(1045deg);
        transform: rotate(1045deg)
    }
    100% {
        -webkit-transform: rotate(1049deg);
        transform: rotate(1049deg)
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg)
    }
    50% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    100% {
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg)
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg)
    }
    50% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    100% {
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg)
    }
}

@-webkit-keyframes spinner2 {
    0% {
        -webkit-transform: rotate(715deg);
        transform: rotate(715deg)
    }
    50% {
        -webkit-transform: rotate(725deg);
        transform: rotate(725deg)
    }
    100% {
        -webkit-transform: rotate(715deg);
        transform: rotate(715deg)
    }
}

@keyframes spinner2 {
    0% {
        -webkit-transform: rotate(715deg);
        transform: rotate(715deg)
    }
    50% {
        -webkit-transform: rotate(725deg);
        transform: rotate(725deg)
    }
    100% {
        -webkit-transform: rotate(715deg);
        transform: rotate(715deg)
    }
}

@-webkit-keyframes spinTo2 {
    0% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg)
    }
    70% {
        -webkit-transform: rotate(1129deg);
        transform: rotate(1129deg)
    }
    80% {
        -webkit-transform: rotate(1121deg);
        transform: rotate(1121deg)
    }
    100% {
        -webkit-transform: rotate(1125deg);
        transform: rotate(1125deg)
    }
}

@keyframes spinTo2 {
    0% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg)
    }
    70% {
        -webkit-transform: rotate(1129deg);
        transform: rotate(1129deg)
    }
    80% {
        -webkit-transform: rotate(1121deg);
        transform: rotate(1121deg)
    }
    100% {
        -webkit-transform: rotate(1125deg);
        transform: rotate(1125deg)
    }
}

.wheel__rotor {
    width: 83%;
    height: 83%;
    position: relative;
    z-index: 3;
    background-image: url(../img/spinner.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.wheel__rotor .wheel__wedge-label {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 6em 0
}

.wheel__rotor .wheel__prize {
    max-width: 13em;
    margin: 0 auto;
    width: 100%;
    text-align: center
}

.wheel__rotor .wheel__wedge-label--1 .wheel__prize--tier-b, .wheel__rotor .wheel__wedge-label--2 .wheel__prize--tier-b, .wheel__rotor .wheel__wedge-label--3 .wheel__prize--tier-b {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.wheel__rotor .wheel__wedge-label--4 {
    padding: 9em 0
}

.wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-a, .wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-b {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    max-width: 18em
}

.wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-a div, .wheel__rotor .wheel__wedge-label--4 .wheel__prize--tier-b div {
    font-family: "Inter", sans-serif;
    font-size: 3.2rem;
    line-height: 3.7rem;
    background: unset;
	color: #a6d0e4;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset
}

.wheel__rotor .wheel__prize-text {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase;
    width: 100%;
    color: #fff
}

.modal__bubble--left {
    position: absolute;
    width: 15.1rem;
    left: -8rem;
    top: 22rem;
    pointer-events: none
}

.modal__bubble--right {
    position: absolute;
    width: 11.9rem;
    right: -1rem;
    top: -3rem;
    pointer-events: none
}

.modal__coin--1 {
    pointer-events: none;
    position: absolute;
    width: 2rem;
    right: 2rem;
    top: 21rem
}

.modal__coin--2 {
    pointer-events: none;
    position: absolute;
    width: 4.3rem;
    left: -8rem;
    top: 3rem
}

.modal__coin--3 {
    pointer-events: none;
    position: absolute;
    width: 11.1rem;
    right: -9rem;
    top: 11rem
}

.modal__coin--4 {
    pointer-events: none;
    position: absolute;
    width: 9.4rem;
    right: -7rem;
    top: 62rem
}

.modal__coin--5 {
    pointer-events: none;
    position: absolute;
    width: 10.3rem;
    left: 12rem;
    top: 55rem
}

.modal__coin--6 {
    pointer-events: none;
    position: absolute;
    width: 6.8rem;
    left: -16rem;
    top: 41rem
}

.modal__coin--7 {
    pointer-events: none;
    position: absolute;
    width: 5.7rem;
    right: -11rem;
    top: 36rem
}

.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(14, 0, 10, .65);
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding-top: 12.5rem
}

.modal--open {
    opacity: 1;
    pointer-events: all
}

.modal__pane {
    width: 100%;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden
}

.modal__pane--open {
    opacity: 1;
    pointer-events: all;
    height: auto;
    overflow: initial
}

.modal__inner {
    margin: 0 auto;
    min-height: 62.9rem;
    width: 52.1rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.modal__body {
    padding: 1.5rem 2rem 2rem;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1
}

.modal .text--gradient-purple {
    font-size: 3.2rem
}

.modal__heading {
    margin: 0 0 25px 0;
}
.modal__heading > span {
    color: #06baf8;
    text-align: center;
    font-size: 4.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem;
    text-transform: uppercase;
}

.offer__title > span {
    color: #fff;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 3.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem;
    text-transform: uppercase
}
.offer__asset {
    position: relative;
    leading-trim: both;
    text-edge: cap;
    font-style: normal;
    text-transform: uppercase;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #f3d7a2), to(#ae7726));
    background: linear-gradient(180deg, #f3d7a2 28.44%, #ae7726 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

.modal .prizes__coins {
    width: 60%
}

.modal__bonus {
    position: relative;
    z-index: 1;
    margin: 1rem auto;
    text-align: center
}

.modal__bonus > span {
    position: relative;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 6rem;
    font-style: normal;
    font-weight: 800;
    line-height: 6rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #f3d7a2), to(#ae7726));
    background: linear-gradient(180deg, #f3d7a2 28.44%, #ae7726 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.modal__bonus > span::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    content: attr(data-text);
    width: 100%;
    height: 100%;
    -webkit-text-stroke: .3rem #f2c381
}

.modal__text {
    color: #fff;
    text-align: center;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 1rem 0 .8rem
}

.modal__total {
    text-align: center;
    position: relative;
    z-index: 3;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: .3rem #fff;
    text-stroke: .3rem #fff;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 6rem;
    font-weight: 500;
    text-transform: uppercase
}

.offer__title {
    margin: 0 0 50px 0;
}
.modal__action {
    width: 38.1rem;
    padding: 15px 0;
    background: url(../img/popup-btn.png) 50% 50% / contain no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-decoration: unset;
    position: relative;
    z-index: 5;
    background: linear-gradient(180deg, #1fe88a 0%, #1ac173 100%);
    border-radius: 4px;
}
.modal__action:hover {
    box-shadow: inset 0 0 7px #1fe88a, 0 0 7px #1fe88a;
}



.modal__action span {
    color: #08121c;
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    font-family: "Inter", sans-serif;
	font-size: 2.4rem;
    font-style: normal;
    font-weight: 600;
    position: relative;
    z-index: 5;
}

@media (hover: hover) {
    .modal__action:hover {
        -webkit-animation: none;
        animation: none
    }

    .modal__action:hover:before {
        opacity: 1
    }
}

.modal .terms {
    margin-top: 1.4rem
}

.modal .terms a {
    color: #fff;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase;
    text-decoration: none
}

@media (hover: hover) {
    .modal .terms a:hover {
        text-decoration: underline
    }
}

.controls__bar {
    position: absolute;
    z-index: 14;
    width: 100%;
    max-width: 170rem;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.game {
    position: relative;
    z-index: 3
}

.game__wrap {
    max-width: 130rem;
    margin: 0 auto;
    width: 100%;
    position: relative
}

.scratch__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 75%;
    margin: 2rem auto 4rem
}

.scratch {
    margin: 2rem;
    width: 37.4rem;
    height: 21.4rem;
    cursor: pointer;
    position: relative;
    border-radius: 1rem
}

.scratch:after {
    content: "";
    display: block;
    width: 37.5rem;
    height: 21.8rem;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-image: url(../img/scratch-border.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center
}

.scratch.scratch__wrap--a1:before {
    -webkit-animation: none;
    animation: none
}

.scratch.scratch__wrap--a1 .scratch__bonus {
    -webkit-animation: opacity .7s ease-in-out forwards;
    animation: opacity .7s ease-in-out forwards;
    display: block
}

.scratch.scratch__wrap--a1 .scratch__text {
    -webkit-animation: opacity 1.05s ease-in-out forwards;
    animation: opacity 1.05s ease-in-out forwards;
    display: block
}

.scratch.scratch__wrap--a1 .scratch__text .scratch__bonus {
    display: block
}

.scratch.scratch__wrap--a1.is-used .scratch__bonus {
    display: block
}

.scratch.scratch__wrap--a1.is-used:before {
    -webkit-animation: none;
    animation: none
}

.scratch.is-used {
    cursor: auto;
    pointer-events: none
}

.scratch.is-used:before {
    -webkit-animation: none;
    animation: none
}

.scratch.is-used .scratch--used {
    display: block;
    opacity: 1;
    z-index: 4
}

.scratch.is-used .media__anim {
    opacity: 0
}

.scratch.is-used .scratch__text {
    opacity: 1;
    display: block;
    z-index: 5
}

.scratch.is-used .scratch__bonus--legacy {
    display: block
}

.scratch:before {
    content: "";
    display: block;
    width: 90%;
    height: 90%;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, #d59852 0%, #9b8e15 100%);
    -webkit-filter: blur(3rem);
    filter: blur(3rem);
    opacity: 0;
    transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease;
    -webkit-animation: light-show 1s linear infinite;
    animation: light-show 1s linear infinite
}

.scratch--used {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    overflow: hidden;
    background-image: url(../img/scratch-used.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 3
}

.scratch__text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
    width: 100%;
    display: none
}

.scratch__text > div {
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.44%, #f3daa6), to(#976822));
    background: linear-gradient(180deg, #f3daa6 28.44%, #976822 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    font-size: 5.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase
}

.scratch__text > div::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    content: attr(data-text);
    width: 100%;
    height: 100%;
    -webkit-text-stroke: .3rem #f2c381
}

.scratch__action {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3
}

.lang-switch__item--current-hu .scratch__text div {
    font-size: 4.2rem
}

@-webkit-keyframes opacity {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes opacity {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes light-show {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes light-show {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.media__anim {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 3rem;
    overflow: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 5% 100%);
    background: radial-gradient(274.83% 166.02% at 102.76% 130.52%, #ba01fd 0%, #48018f 35.55%, #460189 50.44%, #450188 63.3%, #50058c 67.93%, #5f0795 71.42%, #6b099d 73.2%, #bf17d2 85.09%);
    z-index: 3
}

.media__anim > canvas {
    width: 100%;
    height: 100%
}

.page__shadow {
    display: none
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 7;
    pointer-events: none;
    top: 0;
    max-width: 192rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#game__stage {
    z-index: 2
}

.is-webp .modal__inner {
    background-color: #081521;
    border: 1px solid rgb(9 172 244 / 35%);
    border-radius: 2px;
}

.is-webp .app {
    background-image: url(../img/webp/main-bg.webp)
}

@media (max-width: 600px) {
    .is-webp .app {
        background-image: url(../img/webp/main-bg-1-mobile.webp)
    }
}

.is-no-webp .app {
    background-image: url(../img/to-webp/main-bg.jpg)
}

@media (max-width: 600px) {
    .is-no-webp .app {
        background-image: url(../img/to-webp/main-bg-1-mobile.jpg)
    }
}

@media (max-width: 1040px) {
    html {
        font-size: .6944444444vw
    }

    .character--girl {
        left: -9rem;
        bottom: 2rem
    }

    .character--man {
        right: -6rem;
        bottom: 13rem
    }

    .page__bg--secondary .character--girl {
        left: -9rem
    }

    .page__bg--secondary .character--man {
        right: -6rem
    }

    .decor__root {
        left: 94%;
        bottom: 15em
    }

    .fx__snow {
        width: 100%;
        left: 0;
        -webkit-transform: unset;
        -ms-transform: unset;
        transform: unset
    }

    .app {
        min-height: 109rem
    }
}

@media (max-width: 600px) {
    html {
        font-size: 1.6666666667vw
    }

    html.lang--tr .hero__line {
        font-size: 3rem
    }

    html.lang--gr .hero {
        font-size: 2.8rem
    }

    html.lang--hu .hero, html.fr .hero {
        font-size: 3rem
    }

    html.lang--ro .hero {
        font-size: 3.3rem
    }

    .game {
        width: 100%
    }

    .hero {
        max-width: 100%
    }

    .modal {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 0
    }

    .decor__root {
        left: 89%;
        bottom: 2em;
        width: 11.6em
    }

    .app {
        position: relative
    }

    .app::after {
        position: absolute;
        background: url("../img/front-mob.webp") 50% 50%/60rem auto no-repeat;
        content: "";
        width: 100%;
        height: 108rem;
        left: 0;
        top: 0;
        z-index: 2;
        pointer-events: none
    }

    .page__bg--secondary .page {
        z-index: 3
    }

    .page__shadow {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        pointer-events: none
    }

    .brand__logo {
        width: 100%
    }

    .fx__snow {
        bottom: -1px;
        left: 0;
        width: 100%;
        z-index: 9
    }

    .app:before {
        bottom: -2px
    }

    .page__bg--secondary .character--man {
        width: 61.5rem;
        right: -15rem;
        bottom: -5rem;
        z-index: 2
    }

    .page__bg--secondary .character--girl {
        width: 57rem;
        left: -14rem;
        bottom: -9rem;
        z-index: 3
    }

    .app:before {
        display: none
    }

    .character--man {
        width: 61.5rem;
        right: -15rem;
        bottom: -5rem
    }

    .character--girl {
        width: 57rem;
        left: -14rem;
        bottom: -9rem;
        z-index: 8
    }

    .scratch {
        width: 35.4rem;
        height: 19.4rem
    }

    .scratch:after {
        width: 35.5rem;
        height: 19.8rem
    }

    .media__img--front, .scene__fish-band--a, .page__bg--secondary .scene__fish-band--b, .character--fisherman {
        display: none
    }

    .page__container {
        padding: 0 2rem
    }

    .app {
        background-size: 71rem auto;
        background-position: top center
    }

    .page__main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative
    }

    .app {
        min-height: 112rem
    }

    .page__bg--secondary .site-footer {
        top: 118rem
    }

    .wheel {
        margin-top: -2rem;
        -webkit-transform: scale(0.7) translateX(-9rem);
        -ms-transform: scale(0.7) translateX(-9rem);
        transform: scale(0.7) translateX(-9rem)
    }

    .site-header {
        padding-bottom: 1rem
    }

    .hero__line {
        display: inline-block;
        font-size: 5rem;
        line-height: 5.8rem
    }

    .hero__line br {
        display: none
    }

    .color--yellow {
        margin-top: -0.3rem
    }

    .wheel__state--spinning {
        margin-left: 1.2rem;
        margin-top: 0
    }

    .wheel__action {
        top: 26.8em
    }

    .site-footer {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 111rem;
        width: 100%
    }

    .scratch__list {
        margin-top: 4rem
    }

    .scratch {
        margin: 0;
        margin-bottom: 3.5rem
    }
}

@-webkit-keyframes blick {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes blick {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@-webkit-keyframes man-scale {
    0% {
        -webkit-transform: translateY(0rem) scale(1);
        transform: translateY(0rem) scale(1)
    }
    50% {
        -webkit-transform: translateY(1rem) scale(0.97);
        transform: translateY(1rem) scale(0.97)
    }
    100% {
        -webkit-transform: translateY(0rem) scale(1);
        transform: translateY(0rem) scale(1)
    }
}

@keyframes man-scale {
    0% {
        -webkit-transform: translateY(0rem) scale(1);
        transform: translateY(0rem) scale(1)
    }
    50% {
        -webkit-transform: translateY(1rem) scale(0.97);
        transform: translateY(1rem) scale(0.97)
    }
    100% {
        -webkit-transform: translateY(0rem) scale(1);
        transform: translateY(0rem) scale(1)
    }
}

@-webkit-keyframes girl-scale {
    0% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    20% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    22% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    45% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    47% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    70% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    72% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    100% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
}

@keyframes girl-scale {
    0% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    20% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    22% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    45% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    47% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
    70% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    72% {
        -webkit-transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96);
        transform: rotate3d(0, 1, 1, -1.611deg) scale(0.96)
    }
    100% {
        -webkit-transform: rotate3d(0, 1, 1, 0) scale(1);
        transform: rotate3d(0, 1, 1, 0) scale(1)
    }
}