@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(.85, .85, .85) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg) scaleY(-1);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(800px) scale3d(.85, .85, .85) translate3d(0, 0, 150px) scaleY(-1) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(800px) scale3d(.85, .85, .85) translate3d(0, 0, 150px) scaleY(-1) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(800px) scale3d(.8, .8, .8) translate3d(0, 0, 0) scaleY(-1) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(800px) scale3d(.85, .85, .85) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scaleY(-1);
        animation-timing-function: ease-in
    }
}

@keyframes logo {
    50% {
        transform: scale(1.1)
    }
}

@-webkit-keyframes bubblesAnimationY {
    0% {
        transform: translate(-50%, 100%)
    }

    to {
        transform: translate(-50%, -400%)
    }
}

@-webkit-keyframes scaleButton {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }
}

@keyframes headShake {

    0%,
    50% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }
}

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

    to {
        opacity: 0
    }
}

@-webkit-keyframes personLeftAnimation {
    0% {
        transform: rotate(3deg) translateY(20px)
    }

    to {
        transform: rotate(-3deg) translateY(-20px)
    }
}

@-webkit-keyframes personRightAnimation {
    0% {
        transform: translateX(30px) rotate3d(0, 0, 0, 6deg)
    }

    to {
        transform: translateX(-30px) rotate3d(2, 0, 2, -6deg)
    }
}

@-webkit-keyframes leavesAnimation {
    0% {
        transform: rotate(3deg)
    }

    to {
        transform: rotate(-3deg)
    }
}

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

    to {
        opacity: 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: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition: none
    }
}

body {
    height: 100%;
    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;
    font-size: 16px;
    font-style: normal;
    overflow: hidden
}

body,
html {
    scroll-behavior: smooth
}

.hidden {
    display: none !important
}

.visible {
    display: flex !important
}

.bottom__section-button {
    min-width: 50px;
    align-items: center
}

.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: .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;
    z-index: 997;
    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 {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

@media (max-width:991px) {
    .body-wrapper {
        background-image: url(../img/page-bg-mobile.webp)
    }
}

.reel>.icons {
    position: relative
}

#slot.inverted .reel {
    transform: scaleY(-1)
}

#slot.inverted .reel>.icons>img {
    transform: scaleY(-1) scale(.8)
}

#reels {
    display: flex;
    width: 79vw;
    height: 47.4vw;
    max-height: 520px;
    max-width: 870px
}

@media (max-width:991px) {
    #reels {
        width: 88vw;
        height: 89vw;
        max-height: 89vw
    }
}

#reels:before,
.background {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%)
}

.background {
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    background-image: url(../img/frame.webp)
}

@media (max-width:991px) {
    .background {
        background-image: url(../img/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%);
    background: linear-gradient(180deg, #0039ff 0, #0df 49.5%, #0064ff 100%);
    width: 102%
}

#slot,
.reel {
    position: relative
}

#slot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex-direction: column
}

.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(.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 {
    opacity: 0;
    transition: opacity .3s
}

.logo {
    max-width: 472px;
    width: 100%;
    animation: logo 6s infinite both alternate ease-in-out;
    display: block;
    position: relative;
    z-index: 5;
    margin: 15px auto
}

@media (max-width:767px) {
    .logo {
        max-width: 300px;
        margin-top: 10px;
        margin-bottom: 10px
    }
}

.body-wrapper {
    background-image: url(../img/page-bg.webp)
}

@media (max-width:991px) {
    .body-wrapper {
        background-image: url(../img/page-bg-mobile.webp)
    }
}

@media (min-width:991px) and (max-height:840px) {
    .body-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100vw;
        height: 100vh
    }

    .body-inner {
        transform: scale(.85)
    }
}

.left__person,
.right__person {
    width: 90em;
    height: 115em;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    font-size: 50%
}

@media (max-width:1599px) {

    .left__person,
    .right__person {
        width: 75em;
        height: 95em
    }
}

@media (max-width:991px) {

    .left__person,
    .right__person {
        width: 60em;
        height: 80em;
        font-size: 40%
    }
}

@media (max-width:767px) {

    .left__person,
    .right__person {
        width: 40em
    }
}

.left__person img,
.right__person img {
    position: absolute
}

.left__person {
    left: 0;
    bottom: 0;
    animation: personLeftAnimation 2.5s infinite both alternate ease-in-out
}

@media (max-width:1599px) {
    .left__person {
        left: -18em;
        bottom: -8em
    }
}

@media (min-width:991px) and (max-height:840px) {
    .left__person {
        left: -50em
    }
}

@media (max-width:991px) {
    .left__person {
        left: -18em;
        bottom: -8em
    }
}

@media (max-width:767px) {
    .left__person {
        left: -14em;
        bottom: -40em
    }
}

.left__person-2 {
    animation: fade 2.5s infinite both alternate linear
}

.right__person {
    right: -10em;
    bottom: -18em;
    animation: personRightAnimation 2.5s infinite both alternate ease-in-out
}

@media (max-width:1599px) {
    .right__person {
        right: -30em;
        bottom: -20em
    }
}

@media (min-width:991px) and (max-height:840px) {
    .right__person {
        right: -65em
    }
}

@media (max-width:991px) {
    .right__person {
        right: -25em;
        bottom: -20em
    }
}

@media (max-width:767px) {
    .right__person {
        right: -21em;
        bottom: -40em
    }
}

.right__person-2 {
    animation: fade 2.5s infinite both alternate linear
}

.bubbles {
    position: absolute;
    width: 100%;
    max-width: 80%;
    left: 50%;
    transform: translate(-50%, 100%);
    animation: bubblesAnimationY 5s infinite linear 3s
}

.bubbles img {
    opacity: .4
}

.bottom__section {
    position: relative;
    z-index: 8;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40px
}

@media (max-width:767px) {
    .bottom__section {
        margin-top: 40px
    }
}

.bottom__section-title {
    margin-bottom: 0;
    font-size: 70px;
    text-align: center;
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffee59;
    background: -webkit-linear-gradient(#ff0e00, #ffeb00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0
}

@media (max-width:767px) {
    .bottom__section-title {
        font-size: 30px;
        margin-bottom: 10px
    }
}

.bottom__section-title.win__show {
    opacity: 1;
    animation: 1.5s zoomInDown both
}

.bottom__section-button {
    background: url(../img/button_middle.webp) repeat-x center center;
    background-size: contain;
    padding: 0;
    height: 90px;
    display: flex;
    justify-content: center;
    font-size: 50px;
    color: #fff;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 4px 0 #0078b7;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #0078b7;
    white-space: nowrap;
    position: relative;
    z-index: 10
}

.bottom__section-button span {
    position: relative;
    z-index: 3;
    margin-left: -100px;
    margin-right: -100px
}

.bottom__section-button:after,
.bottom__section-button:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 171px;
    background-size: contain;
    background-repeat: no-repeat
}

.bottom__section-button:before {
    left: -155px;
    background-image: url(../img/button_left.webp)
}

.bottom__section-button:after {
    right: -160px;
    background-image: url(../img/button_right.webp)
}

.bottom__section-button:focus {
    animation: .5s scaleButton ease-in-out forwards
}

.bottom__section-button.pulse {
    animation: .5s scaleButton ease-in-out infinite
}

.bottom__section-button-next,
.bottom__section-button.is--win-button {
    display: none
}

.bottom__section-button.is--win-button.visible {
    animation: 1s tada ease-in-out infinite
}

html {
    font-size: 10px;
    background: #250005;
    overflow: hidden;
    height: 100%
}

.modal,
img {
    width: 100%
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: scale(0)
}

@media (max-width:767px) {
    .modal {
        justify-content: flex-start;
        margin-top: 50%
    }
}

.modal__container {
    max-width: 1340px;
    width: 100%;
    background-image: url(../img/modal-background.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    flex-direction: column;
    position: relative;
    z-index: 2
}

@media (max-width:991px) {
    .modal__container {
        padding: 0
    }
}

@media (max-width:767px) {
    .modal__container {
        background-image: url(../img/modal-background-mobile.webp);
        margin-top: -10%
    }
}

.modal__logo {
    width: 100%;
    max-width: 1100px
}

@media (max-width:991px) {
    .modal__logo {
        max-width: 80%;
        margin-top: 20px
    }
}

@media (max-width:767px) {
    .modal__logo {
        margin-top: 40px
    }
}

.modal__text {
    margin-top: -50px;
    color: #fff;
    text-align: center;
    font-size: 44px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    background: linear-gradient(0deg, #ffeb00 64.62%, #ff0e00 88.18%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-stroke: 6px transparent;
    padding: 2px;
    text-shadow: 0 2.025px 0 #560a00
}

@media (max-width:991px) {
    .modal__text {
        font-size: 26px;
        max-width: 70%;
        margin-top: -10px
    }
}

.modal__title {
    text-align: center;
    font-size: 80px;
    color: #fff;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    background: var(--Linear, linear-gradient(184deg, #FF0E00 36.75%, #FFEB00 84.09%));
    background-size: 100% 100%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text !important
}

@media (max-width:991px) {
    .modal__title {
        font-size: 40px;
        margin-bottom: 10px
    }
}

.modal.is--active {
    transform: scale(1);
    transition: all .3s ease-in-out
}

.is--modal-open .bottom__section {
    opacity: 0
}

.is--modal-open .wheel {
    opacity: 0;
    animation: hide .5s ease-in-out
}

@media (max-width:991px) and (min-height:840px) {
    .is--modal-open .right__person {
        z-index: 999;
        width: 65em;
        position: fixed;
        right: 7%;
        top: 50%
    }
}

@media (max-width:767px) {
    .is--modal-open .right__person {
        bottom: -40em;
        right: -21em;
        width: 40em;
        top: auto
    }
    
    .bottom__section-button {
        font-size: 30px;
    }
}

.leaves-left {
    left: -12em
}

.leaves-left,
.leaves-right {
    position: absolute;
    width: 91em;
    height: 85em;
    top: -10em;
    pointer-events: none;
    z-index: 1;
    font-size: 40%
}

@media (max-width:991px) {

    .leaves-left,
    .leaves-right {
        font-size: 35%
    }
}

.leaves-left img,
.leaves-right img {
    position: absolute;
    max-width: 474px;
    width: 54em
}

.leaves-left .leaves-1,
.leaves-right .leaves-1 {
    top: 22em;
    z-index: 4;
    animation: leavesAnimation 2.5s infinite both alternate ease-in-out
}

.leaves-left .leaves-2,
.leaves-right .leaves-2 {
    top: -3em;
    left: -3em;
    z-index: 3;
    animation: leavesAnimation 2.5s infinite both alternate-reverse ease-in-out
}

.leaves-left .leaves-3,
.leaves-right .leaves-3 {
    left: 8em;
    top: -4em;
    z-index: 2;
    animation: leavesAnimation 2.5s infinite both alternate ease-in-out
}

.leaves-left .leaves-4,
.leaves-right .leaves-4 {
    left: 23em;
    top: 3em;
    z-index: 1;
    animation: leavesAnimation 2.5s infinite both alternate-reverse ease-in-out
}

.leaves-left .corals-green,
.leaves-right .corals-green {
    width: 29em;
    left: 3.5em;
    top: 58em;
    z-index: 2;
    animation: leavesAnimation 2s infinite both alternate ease-in-out
}

.leaves-left .corals-pink,
.leaves-right .corals-pink {
    width: 45em;
    left: 2em;
    top: 59em;
    z-index: 1;
    animation: leavesAnimation 2s infinite both alternate-reverse ease-in-out
}

@media (max-width:991px) {
    .leaves-left {
        transform: scale(.7);
        top: -17em;
        left: 12em
    }
}

@media (max-width:767px) {
    .leaves-left {
        left: -15em
    }
}

.leaves-right {
    transform: rotateY(180deg);
    right: -14em;
    left: auto
}

@media (max-width:991px) {
    .leaves-right {
        transform: rotateY(180deg) scale(.7);
        top: -17em;
        right: 12em
    }
}

@media (max-width:767px) {
    .leaves-right {
        right: -15em
    }
}

#reels {
    position: relative;
    z-index: 1
}

#slot {
    max-width: 1045px;
    z-index: 4
}

.background {
    width: 106%;
    height: 107%;
    background-size: contain;
    top: 50%
}

@media (min-width:992px) {
    .background {
        height: 105%
    }
}

.bonus-inline.is--active {
    background: linear-gradient(to left, #f4d434, #f83c01)
}

.bonus-inline.is--active p {
    background: linear-gradient(90deg, #f83c01 0, #f83c01 100%);
    -webkit-background-clip: text
}

.bonus-inline.is--active svg path {
    stroke: #f83c01
}