@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
url('../fonts/Roboto-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
url('../fonts/Roboto-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
url('../fonts/Roboto-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Styrene B LC';
src: url('../fonts/subset-StyreneBLC-Bold.woff2') format('woff2'),
url('../fonts/subset-StyreneBLC-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

body, html {
height: 100%;
min-height: 100%;
min-width: 320px;
}

body {
padding: 0;
margin: 0;
color: #333333;
line-height: 1.27;
font-size: 22px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
background: #fff;
display: flex;
flex-flow: column;
justify-content: center;
}

img {
border-style: none;
}

*, *:before, *:after {
box-sizing: border-box;
touch-action: manipulation;
}
.game-buttons{
	-webkit-touch-callout: none; /* iOS Safari */  
	-webkit-user-select: none;   /* Chrome/Safari/Opera */  
	-khtml-user-select: none;    /* Konqueror */  
	-moz-user-select: none;      /* Firefox */  
	-ms-user-select: none;       /* Internet Explorer/Edge */  
	user-select: none;           /* Non-prefixed version, currently */
}

*:hover,
*:focus,
*:active {
outline: none;
}

a:not(.button) {
text-decoration: none;
color: #007AFF;
}

a:not(.button):hover {
text-decoration: underline;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}

.button {
display: block;
height: 48px;
padding: 13px 30px;
font-weight: 500;
font-size: 16px;
line-height: 20px;
border-radius: 4px;
text-align: center;
text-decoration: none;
color: #333;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
border: 1px solid transparent;
background: transparent;
}

.button.disabled {
opacity: 0.7;
}

.button--red,
.button--red.disabled,
.button--red.disabled:hover {
background-color: #E31235;
border-color: #E31235;
color: #FFFFFF;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button--red:hover {
background-color: #bd0f2c;
border-color: #bd0f2c;
}

.button--white {
border: 1px solid #BABAC0;
background-color: #fff;
transition: border-color 0.2s ease;
}

.button--white:hover {
border-color: #333;
}

.page-holder {
    position: relative;
    max-width: 1920px;
    max-height: 1080px;
    height: 100vh;
    margin: auto 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: url(../img/bg-games.png) no-repeat center center #333;
    background-size: cover;
    min-height: 600px;
}

.page-holder.white {
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.page-holder.no-img {
    background-image: none;
}

.page-close {
    display: none;
}

.page-screen {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.page_inner {
    width: 100%;
    max-width: 1557px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 5;
    display: flex;
    height: 100%;
    padding: 5vh 10px;
}

.page-header {
    padding: 32px 0;
    align-items: center;
}

.page-header.hidden {
transform: translateY(-100%);
transition: transform 0.3s ease;
}

.page-header a {
    display: block;
}

.page-header img {
    display: block;
    width: 100%;
}

.main {
    text-align: left;
    width: 100%;
    max-width: 1214px;
    color: #333333;
    margin: auto;
}

.main-animate {
    transform: translateY(20vh);
    opacity: 0;
    position: relative;
}

.anim1-in .main-animate {
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}

.anim1-out .main-animate {
    transition: transform 0.3s ease, opacity 0.15s ease 0.15s;
    transform: translateY(-50vh);
    opacity: 0;
}

.main-animate::before {
    position: absolute;
    content: "";
    top: -22px;
    left: 42px;
    width: 1061px;
    height: 549px;
    background-image: url(../img/bg_white.png);
    background-repeat: no-repeat;
    background-position: center top;
}

.main__inner {
    position: relative;
    margin-left: 281px;
}

.main__inner::before {
    position: absolute;
    content: "";
    top: -35px;
    left: -42%;
    width: 562px;
    height: 562px;
    background-image: url(../img/man.png);
    background-repeat: no-repeat;
    background-size: 562px 562px;
}

.main__inner::after {
    position: absolute;
    content: "";
    top: -135px;
    right: -165px;
    width: 531px;
    height: 322px;
    background-image: url(../img/basket.png);
    background-repeat: no-repeat;
    background-size: 531px 322px;
}

.main__wrapper {
    text-align: left;
    margin-left: 80px;
    margin-top: -28px;
}

.main__title,
.main__subtitle {
    font-family: 'Styrene B LC', Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    transform: matrix(1, -0.19, 0, 0.98, 0, 0);
}

.main__title {
    position: relative;
    font-size: 187px;
    line-height: 224px;
    letter-spacing: -17px;
}

.main__title::before {
    position: absolute;
    content: "";
    top: 68px;
    right: 555px;
    width: 110px;
    height: 124px;
    background-image: url(../img/goal.svg);
    background-repeat: no-repeat;
}

.main__subtitle {
    margin-top: -20px;
    font-size: 64px;
    line-height: 77px;
    letter-spacing: -1px;
}

.main__bottom {
    display: flex;
}

.button--main {
    transform: matrix(1, -0.19, 0, 0.98, 0, 0);
    width: 100%;
    max-width: 264px;
    height: 105px;
    margin-left: 42px;
    margin-top: 17px;
    font-weight: 500;
    font-size: 24px;
    line-height: 22px;
}

.main__text {
    text-align: left;
    max-width: 440px;
    font-size: 22px;
    line-height: 28px;
    margin-top: 54px;

    transform: matrix(1, -0.19, 0, 0.98, 0, 0);
}

.footer {
    position: absolute;
    bottom: 0;
    right: 0;
}

.anim1-out .footer {
transition: transform 0.3s ease;
transform: translateX(350px);
}

.footer__inner {
    display: block;
    width: 245px;
    position: relative;
    margin-left: auto;
    /*z-index: 5;*/
    text-align: center;
    padding-bottom: 15px;
}

.footer::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    /*z-index: 2;*/
    width: 320px;
    height: 320px;
    background-image: url(../img/rectangle.svg);
    background-repeat: no-repeat;
}

.footer__text-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 auto;
    max-width: 205px;
}
.footer__text {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    color: #000000;
    vertical-align: top;
    padding: 0;
}

.footer__text-big {
    margin-top: -5px;
    font-size: 45px;
    line-height: 53px;
    font-weight: bold;
    color: #000000;
}

.how-play {
    text-align: center;
    margin: auto 0;
    flex: 1 1 auto;
    width: 100%;
    opacity: 0;
    transform: translateY(20vh);
}

.anim2-in .how-play {
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.anim2-out .how-play {
    transition: transform 0.3s ease, opacity 0.15s ease 0.15s;
    transform: translateY(-50vh);
    opacity: 0;
}

.screen-title {
    font-weight: bold;
    font-size: 44px;
    line-height: 1.1;
    color: #000000;
}

.how-play__title {
    color: #FFFFFF;
    padding-bottom: 12px;
}

.how-play__subtitle {
    font-size: 22px;
    line-height: 28px;
    color: #FFFFFF;
    padding-bottom: 6vh;
}

.how-play__slider {
    margin-bottom: 32px;
    /*margin-right: -20px;*/
}

.how-play__slider .swiper {
    width: 100%;
}

.how-play .swiper-slide {
    /*width: 492px;*/
	width: 32%;
}

.how-play__item {
    position: relative;
    background-color: #F5F5F6;
    border-radius: 16px;
    padding: 32px 32px 10px;
    min-height: 292px;
    text-align: left;
    margin-bottom: 20px;
}

.how-play__item::after {
    position: absolute;
    content: "";
    top: -50px;
    right: -282px;
    width: 505px;
    height: 210px;
    background-image: url(../img/joystick.svg);
    background-repeat: no-repeat;
}

.how-play__item-wrapper {
    position: relative;
    z-index: 5;
}

.how-play__item-num {
    position: absolute;
    top: -111px;
    left: 10px;
    color: #E30613;
    font-weight: bold;
    font-size: 94px;
    line-height: 110px;
}

.how-play__item-title {
    margin-top: 40px;
    font-size: 32px;
    line-height: 40px;
    color: #000000;
    margin-bottom: 16px;
}

.how-play__item-text {
    font-size: 22px;
    line-height: 150%;
    margin-bottom: 16px;
}

.how-play__item-small {
    font-size: 16px;
    line-height: 24px;
    color: #7E7E83;
}

.how-play__buttons {
    width: 100%;
    max-width: 368px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.button--how {
    width: 172px;
    padding: 13px;
}

.button--action {
    background-color: transparent;
    color: #ffffff;
}

.button--action:hover {
    border-color: #9e9da3;
}

.page-screen3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
}

.page-screen3.anim3-in:before {
    opacity: 1;
    transition: opacity 5.5s linear 0.3s;
}

.play-xbox {
    text-align: center;
    margin: auto 0;
    flex: 1 1 auto;
    width: 100%;
    opacity: 0;
    transform: translateY(20vh);
}

.anim3-in .play-xbox {
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.anim3-out .play-xbox__anim-top {
    transition: transform 0.3s ease, opacity 0.15s ease 0.15s;
    transform: translateY(-50vh);
    opacity: 0;
}

.anim3-out .play-xbox__anim-bottom {
    transition: transform 0.3s ease, opacity 0.15s ease 0.15s;
    transform: translateY(50vh);
    opacity: 0;
}

.play-xbox__slider {
    margin-bottom: 5vh;
}

.play-xbox__title {
    margin-bottom: 1.33em;
}

.play-xbox .swiper-slide {
    width: 428px;
    height: auto;
}

.play-xbox .swiper-slide.swiper-slide--width {
    width: 620px;
}

.play-xbox__item {
height: 100%;
}

.play-xbox__item-inner {
    background-color: #F5F5F6;
    border-radius: 16px;
    height: 100%;
}

.play-xbox__item-wrapper {
    text-align: left;
    padding: 0 32px 40px;
}

.play-xbox__item-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 1.27;
    color: #000000;
    margin-bottom: 0.72em;
}

.play-xbox__item-text {
    font-size: 18px;
    line-height: 150%;
}

.mob {
    display: none;
}

.play-xbox__item-img {
    width: 428px;
    height: 240px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    margin-bottom: 24px;
    border-radius: 16px 16px 0 0;
}

.play-xbox__item-img--all {
    width: 620px;
    height: 240px;
    background-image: url(../img/all.jpg);
}

.play-xbox__item-img--ea {
    background-image: url(../img/ea.jpg);
}

.play-xbox__item-img--bethesda {
    background-image: url(../img/bethesda.jpg);
}

.load {
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 16px;
}

.line {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 34px;
    height: 8px;
    padding: 2px;
    border-radius: 34px;
    background-color: #F5F5F6;
}

.line__red {
    background-color: #E30613;
    border-radius: 34px;
    height: 4px;
    animation: load 5s ease;
}

@keyframes load {
    0% {
        width: 0;
    }
    20% {
        width: 20%;
    }
    60% {
        width: 60%;
    }
    100% {
        width: 100%;
    }
}

.button--play {
    width: 172px;
}

.button--grey {
    background-color: #DEDEE2;
    border-color: #DEDEE2;
    color: #ffffff;
    cursor: auto;
}

.button--turn {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 64px;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    padding: 12px 22px 12px 64px;
    background-color: #333333;
    border-radius: 4px;
    margin: 0 auto;
    text-align: left;
    display: none;
    align-items: center;
}

.button--turn::before {
    position: absolute;
    content: "";
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_button.svg);
    background-repeat: no-repeat;
}

.button--turn.button--close {
    display: none;
}

.page-screen3 button {
    margin: 0 auto;
}

/* ----- game ----- */

.game-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9259vh;
opacity: 0;
}

.game-screen.hidden {
left: -100%;
}

.game-screen.visible {
transition: opacity 0.5s ease;
opacity: 1;
}

.game-screen-inner {
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 1080px;
overflow: hidden;
margin: auto;
position: relative;
}

.game-header,
.page-header {
position: absolute;
top: 0;
left: 10.5%;
right: 10.5%;
z-index: 150;
display: flex;
justify-content: space-between;
}

.game-header__logo {
display: block;
}

.game-header__logo img {
display: block;
height: 13.4em;
}

.game-header__controls {
padding: 2.4em 0 0;
display: flex;
}

.game-header__controls .button {
height: 64px;
padding: 21px 30px;
}

.game-header__controls .button + .button {
margin-left: 20px;
}

.game-header__controls .button span + span {
display: none;
}

#sound {
padding: 0;
width: 64px;
font-size: 0px;
background-image: url("data:image/svg+xml,%3Csvg width='26' height='24' viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 19.3333V7.49134L23.3337 4.62667V12.4533C22.7337 12.16 22.0537 12 21.3337 12C21.2817 12 21.2299 12.0009 21.1783 12.0026C19.997 12.0419 18.8723 12.5284 18.0338 13.3668C17.1587 14.242 16.667 15.429 16.667 16.6667C16.667 17.9043 17.1587 19.0913 18.0338 19.9665C18.909 20.8417 20.096 21.3333 21.3337 21.3333C22.5713 21.3333 23.7583 20.8417 24.6335 19.9665C25.4719 19.1281 25.9583 18.0036 25.9977 16.8224C25.9995 16.7707 26.0003 16.7188 26.0003 16.6667V0L7.33366 3.98144V15.12C6.73366 14.8267 6.05366 14.6667 5.33366 14.6667C4.09598 14.6667 2.909 15.1583 2.03383 16.0335C1.15866 16.9087 0.666992 18.0957 0.666992 19.3333C0.666992 20.571 1.15866 21.758 2.03383 22.6332C2.909 23.5083 4.09598 24 5.33366 24C6.57134 24 7.75832 23.5083 8.63349 22.6332C9.50866 21.758 10.0003 20.571 10.0003 19.3333Z' fill='%23333333'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center center;
}

#sound.off {
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.666992 3.02667L2.37366 1.33333L24.667 23.6267L22.9737 25.3333L10.0003 12.36V19.3333C10.0003 20.571 9.50866 21.758 8.63349 22.6332C7.75832 23.5083 6.57134 24 5.33366 24C4.09598 24 2.909 23.5083 2.03383 22.6332C1.15866 21.758 0.666992 20.571 0.666992 19.3333C0.666992 18.0957 1.15866 16.9087 2.03383 16.0335C2.909 15.1583 4.09598 14.6667 5.33366 14.6667C6.05366 14.6667 6.73366 14.8267 7.33366 15.12V9.69333L0.666992 3.02667ZM26.0003 0V16.6667C26.0003 18 25.427 19.2267 24.507 20.08L17.9203 13.4933C18.7737 12.5733 20.0003 12 21.3337 12C22.0537 12 22.7337 12.16 23.3337 12.4533V4.62667L11.5603 7.13333L8.21366 3.78667L26.0003 0Z' fill='%23333333'/%3E%3C/svg%3E%0A");
}

.game-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(3px);
}

.game-bg:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 88%;
background: url(../img/bg.png) no-repeat bottom center transparent;
background-size: cover;
}

.game-bg:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 12%;
background: #bfcbce;
border-top: 2em solid #99a6ab;
}

.game-bg-top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(50% 88.89% at 50% 50%, rgba(0, 0, 0, 0.105) 0%, rgba(0, 0, 0, 0.3) 100%), rgba(255, 255, 255, 0.4);
z-index: 1;
}

.left-side {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}

.shelf {
position: absolute;
width: 27%;
top: 0;
height: 38%;
left: 0;
}

.shelf-string {
position: absolute;
width: 24px;
height: 430px;
background: url(../img/string2.svg) no-repeat bottom center transparent;
right: 120px;
bottom: 33px;
}

.shelf-main ~ .shelf-string {
background-image: url(../img/string1.svg);
bottom: 43px;
margin-right: 30px;
}

.shelf-main {
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
background: url(../img/shelf1.svg) no-repeat right bottom transparent;
}

.bottom-shelf {
top: 30%;
}

.right-side .shelf {
left: auto;
right: 0;
}

.right-side .shelf-main {
transform-origin: bottom center;
transform: scaleX(-1);
}

.right-side .shelf-string {
right: auto;
left: 120px;
}

.right-side .shelf-main ~ .shelf-string {
margin-right: 0;
margin-left: 30px;
}

.box {
width: 7em;
height: 8.3em;
position: absolute;
bottom: 16px;
/*margin-bottom: 172px;*/
}

.box i {
display: block;
width: 100%;
height: 100%;
position: relative;
opacity: 1;
overflow: hidden;
}

.box i:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 37.5em;
height: 100%;
background: url(../img/box.png) no-repeat 0 0 transparent;
background-size: auto 100%;
}

.box.box2 i:before {left: -7.5em;}
.box.box3 i:before {left: -15em;}
.box.box4 i:before {left: -22.5em;}
.box.box5 i:before {left: -30em;}

.box.move {
margin-bottom: 0 !important;
}

.box.fall {
bottom: -50%;
z-index: auto;
}

.box.fall i {
opacity: 0;
transition: opacity 0.25s linear 0.75s
}

.left-side .box {
left: -125px;
transform-origin: bottom left;
transform: rotate(15deg);
}

.left-side .box.move {
transition: left 5s linear 0s, margin-bottom 5s linear 0s;
left: 100%;
}

.left-side .box.fall {
transition: left 1s cubic-bezier(.84,.44,1,1) 0s, bottom 1s cubic-bezier(.84,.44,1,1) 0s, transform 1s cubic-bezier(.84,.44,1,1) 0s;
left: 150%;
transform: rotate(80deg);
}

.right-side .box {
right: -125px;
transform-origin: bottom right;
transform: rotate(-15deg);
}

.right-side .box.move {
transition: right 5s linear 0s, margin-bottom 5s linear 0s;
right: 100%;
}

.right-side .box.fall {
transition: right 1s cubic-bezier(.84,.44,1,1) 0s, bottom 1s cubic-bezier(.84,.44,1,1) 0s, transform 1s cubic-bezier(.84,.44,1,1) 0s,  opacity 0.25s linear 0.75s;
right: 150%;
transform: rotate(-80deg);
}

.box.done {
z-index: 20;
}

.left-side .box.done {
transition: margin-left 0.25s cubic-bezier(.84,.44,1,1) 0s, bottom 0.25s cubic-bezier(.84,.44,1,1) 0s, transform 0.1s ease 0.15s;
margin-left: 5em;
bottom: -10.5em;
}

.left-side .box.done i {
transition: transform 0.1s ease 0.15s;
transform-origin: bottom left;
transform: rotate(-15deg);
}

.right-side .box.done {
transition: margin-right 0.25s cubic-bezier(.84,.44,1,1) 0s, bottom 0.25s cubic-bezier(.84,.44,1,1) 0s;
margin-right: 5em;
bottom: -8.5em;
}

.right-side .box.done i {
transition: transform 0.1s ease 0.15s;
transform-origin: bottom right;
transform: rotate(15deg);
}

.gamer {
width: 68em;
height: 68em;
position: absolute;
bottom: 4%;
background: url(../img/gamer.png) no-repeat 0 0 transparent;
background-size: 200% 200%;
}

.gamer:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/gamer-cart.png) no-repeat 0 0 transparent;
background-size: 200% 200%;
z-index: 50;
}

.gamer.left { left: 27%; }
.gamer.right { right: 27%; }

.gamer.left.top, .gamer.left.top:before { background-position: 0 0; }
.gamer.left.bottom, .gamer.left.bottom:before { background-position: 0 100%; }
.gamer.right.top, .gamer.right.top:before { background-position: 100% 0; }
.gamer.right.bottom, .gamer.right.bottom:before { background-position: 100% 100%; }

.game-info {
position: absolute;
top: 15%;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}

.game-info > * {
flex: 0 1 12em;
font-family: 'Styrene B LC', Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 2.4em;
line-height: 1;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
}

.game-info .num {
display: block;
font-size: 2em;
}

.game-info__timer .num {
width: 3.2em;
white-space: nowrap;
margin: 0 auto;
text-align: left;
}

.game-info .accent {
font-size: 1.5em;
}

.hidden_popup {
display: none;
}

.popup {
max-width: 400px;
margin: 0 auto;
background: #fff;
border-radius: 16px;
position: relative;
}

.popup_inner {
padding: 40px 32px 32px;
font-size: 16px;
}

.popup_title {
font-size: 22px;
font-weight: 700;
margin: 0 0 16px;
color: #000;
}

.popup_text {
color: #333;
line-height: 1.5;
}

.help_slide {
display: none;
}

.help_slide.active {
display: block;
}

.help_controls .button--start {
display: none;
}

.help_slides[data-step="2"] ~ .help_controls .button {
display: none;
}

.help_slides[data-step="2"] ~ .help_controls .button--start {
display: block;
}

.help_img {
margin: 0 -32px 24px;
}

.help_img img {
display: block;
max-width: 100%;
margin: 0 auto;
}

.help_img2 img + img {
display: none;
}

.touch .help_img2 img {
display: none;
}

.touch .help_img2 img + img {
display: block;
}

.touch-text {
display: none;
}

.touch .touch-text {
display: inline;
}

.touch .no-touch-text {
display: none;
}

.help_controls {
text-align: center;
margin: 24px 0 0;
}

.popup .button {
width: 100%;
}


.final-slide {
display: none;
}

.final-slide.active {
display: block;
}

.result_block {
background: #F5F5F6;
border-radius: 16px;
padding: 8px 24px;
color: #BABAC0;
font-size: 14px;
font-weight: 500;
}

.result_block b {
display: block;
color: #000;
font-size: 44px;
line-height: 48px;
}

.final-button {
margin: 24px 0 0;
}

.popup .full-link {
margin: 24px 0 0;
text-align: center;
}

.popup .full-link a {
font-weight: 500;
}

.result-top {
margin-top: 24px;
}

.result-prizes {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin: 0 0 24px;
}

.result-prizes > div {
max-width: 48%;
}

.result-prizes img {
display: block;
max-width: 100%;
filter: drop-shadow(0px 1px 20px rgba(4, 6, 28, 0.1));
border-radius: 8px;
margin: 0 auto 16px;
}

.final_form {
margin: 16px 0;
}

.input_hld {
margin: 0 0 16px;
position: relative;
}

.input_label {
display: inline-block;
font-size: 14px;
line-height: 20px;
margin: 0 0 8px;
}

.text_input {
display: block;
box-sizing: border-box;
width: 100%;
background: #fff;
border-radius: 4px;
padding: 12px 16px;
font-size: 16px;
line-height: 24px;
font-family: 'Roboto', Arial, sans-serif;
font-weight: 400;
color: #333;
margin: 0;
border: 1px solid #BABAC0;
height: 48px;
}

.text_input::-webkit-input-placeholder {
color: #BABAC0;
}
.text_input:-moz-placeholder,
.text_input::-moz-placeholder {
color: #BABAC0;
opacity: 1;
}
.text_input:-ms-input-placeholder {
color: #BABAC0;
}

.phone_input::-webkit-input-placeholder {
color: #333;
}
.phone_input:-moz-placeholder,
.phone_input::-moz-placeholder {
color: #333;
opacity: 1;
}
.phone_input:-ms-input-placeholder {
color: #333;
}

.input_hld label.error {
position: absolute;
top: 100%;
left: 0;
right: 0;
font-size: 12px;
line-height: 1.2;
color: #E31235;
}

.email-warning {
border-radius: 16px;
padding: 16px 16px 16px 80px;
position: relative;
color: #7E7E83;
min-height: 80px;
background: url(../img/mclub.svg) no-repeat 20px 25px #F5F5F6;
margin: 0 0 24px;
line-height: 1.5;
}

.game-buttons {
position: absolute;
bottom: 5vh;
left: 24px;
right: 24px;
min-height: 104px;
height: 15vh;
z-index: 200;
display: none;
}

.touch .game-buttons {
display: block;
}

.game-button {
display: block;
width: 48px;
height: 48px;
background: #fff;
border: 1px solid #BABAC0;
border-radius: 50%;
margin: 0;
padding: 0;
font-size: 0px;
color: transparent;
position: absolute;
}

.game-button.left {
left: 0;
}

.game-button.right {
right: 0;
}

.game-button.bottom {
bottom: 0;
}

.game-button.top {
top: 0;
}

.game-button:before {
content: "";
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 12.59L12.59 14L2 3.41V10H0V0H10V2H3.41L14 12.59Z' fill='%23333333'/%3E%3C/svg%3E ") no-repeat 0 0 transparent;
position: absolute;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
transform-origin: center center;
}

.game-button.bottom.left:before { transform: scaleY(-1); }
.game-button.top.right:before { transform: scaleX(-1); }
.game-button.bottom.right:before { transform: scale(-1,-1); }

#mobile_detect {
width: 1px;
height: 1px;
position: absolute;
top: 0;
left: 0;
display: none;
font-size: 1vh;
}

#mobile_detect_main {
width: 1px;
height: 1px;
position: absolute;
top: 0;
left: 0;
display: none;
}

.mfp-container {
padding: 16px;
}

.double-data-warning {
color: #E31235;
margin: -10px 0 10px;
display: none;
}

.game-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: #fff;
z-index: 1000;
}

.game-overlay__inner {
flex: 0 1 auto;
margin: auto;
padding: 50px 20px 30px;
font-size: 15px;
text-align: center;
background: url(../img/icon_button.svg) no-repeat top center transparent;
}