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

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

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

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

body {
padding: 0px;
margin: 0px;
color: #231F20;
line-height: 1.5;
font-size: 18px;
font-family: 'Styrene B LC', Arial, Helvetica, sans-serif;
background: #fff;
}

img {
border-style: none;
}

* {
box-sizing: border-box;
}

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

a {
text-decoration: underline;
color: inherit;
}

a:hover {
text-decoration: none;
}

b {
font-weight: 500;
}

p {
margin: 0 0 1em;
}

p:last-child {
margin-bottom: 0;
}

input::-ms-clear {
display: none;
}

.center {
text-align: center;
}

.main_frame {
width: 100%;
min-height: 100%;
overflow: hidden;
background: url(../img/bg.png) no-repeat top center #fff;
background-size: cover;
}

.nowrap {
white-space: nowrap;
}

.main_width {
margin: 0 auto;
max-width: 1500px;
padding: 0 30px;
}

.header {
position: absolute;
top: 60px;
left: 0px;
right: 0px;
z-index: 500;
white-space: nowrap;
font-size: 0px;
min-width: 320px;
}

.header .main_width,
.footer .main_width {
padding: 0 60px;
max-width: 100%;
}

.header .main_width {
position: relative;
height: 0px;
}

.header .main_width > * {
display: inline-block;
vertical-align: top;
}

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

.header .logo {
width: 136px;
}

.header .logo_whirl {
width: 141px;
}

.header i {
width: 10px;
height: 14px;
background: url(../img/logo_x.svg) no-repeat 0 0 transparent;
margin: 19px 14px 0 17px;
}

.header .help {
width: 60px;
height: 60px;
border: 1px solid #EDAC09;
background: url(../img/help.svg) no-repeat center center transparent;
position: absolute;
top: 0;
right: 60px;
border-radius: 50%;
transition: background-color 0.3s;
}

.header .help:hover {
background-color: #EDAC09;
}

.footer {
padding: 40px 0 30px;
text-align: right;
}

.footer .socials {
white-space: nowrap;
font-size: 14px;
}

.footer .socials > * {
display: inline-block;
vertical-align: top;
}

.footer .socials span {
opacity: 0.5;
margin-right: 30px;
padding-top: 7px;
}

.footer .socials a {
display: inline-block;
vertical-align: top;
width: 32px;
height: 32px;
background: url(../img/soc_vk.svg) no-repeat center center transparent;
}

.footer .socials a + a {
margin-left: 50px;
}

.footer .socials a.fb {
background-image: url(../img/soc_fb.svg);
}

.footer .socials a.tw {
background-image: url(../img/soc_tw.svg);
}

.page_content {
min-height: 560px;
margin-top: 215px;
}

.content_cols {
display: flex;
flex-flow: row-reverse nowrap;
align-items: flex-start;
justify-content: flex-start;
}

.lamp_col {
width: 48%;
}

.text_col {
width: 52%;
position: relative;
}

.h1 {
font-weight: 900;
font-size: 72px;
line-height: 1.2;
margin: 0 0 30px;
}

.start_slide .text {
max-width: 650px;
margin: 0 0 50px;
}

.start_slide {
padding-top: 45px;
}

.start_slide .btn_hld .btn:first-child {
margin-right: 30px;
}

.btn {
display: inline-block;
vertical-align: top;
font-size: 18px;
color: #000;
text-decoration: none;
padding: 19px 35px 19px;
line-height: 22px;
text-align: center;
white-space: nowrap;
border: 0 none;
margin: 0;
font-family: 'Styrene B LC', Arial, Helvetica, sans-serif;
font-weight: 500;
border-radius: 32px;
background: #EEB111;
transition: background-color 0.3s;
min-width: 200px;
max-width: 100%;
}

.btn:hover {
background-color: #d9a213;
}

.border_btn {
border: 2px solid #EEB111;
background: #fff;
padding: 17px 18px 17px;
}

.border_btn:hover {
background: #EEB111;
}

.start_slide .btn {
width: 250px;
}

.lamp_container {
position: relative;
max-width: 685px;
height: 563px;
}

.lamp_bg {
position: absolute;
top: 0;
left: 50%;
margin-left: -343px;
width: 686px;
}

.lamp_bg svg {
display: block;
}

@keyframes clouds {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(1020px);
	}
}

#cloud1 {
animation: clouds 11000ms 0ms linear infinite;
}

#cloud2 {
animation: clouds 9400ms 3260ms linear infinite;
}

#cloud3 {
animation: clouds 16400ms 400ms linear infinite;
}

#cloud4 {
animation: clouds 13600ms 0ms linear infinite;
}

.lamp_deco {
position: absolute;
top: 0;
left: 0;
right: 0;
}

.lamp_deco > * {
position: absolute;
}

.lamp_deco .round {
background: #FFDD25;
border-radius: 50%;
}

.lamp_deco .round1 {
width: 100px;
height: 100px;
top: -70px;
right: 50%;
margin-right: -310px;
}

.lamp_deco .round2 {
width: 30px;
height: 30px;
top: 50px;
right: 50%;
margin-right: -235px;
}

@keyframes star {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	90% {
		transform: scale(1);
		opacity: 1;
	}
	95% {
		transform: scale(0.65);
		opacity: 0.3;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.lamp_deco .star {
transform-origin: 50% 50%;
width: 32px;
height: 32px;
}

.lamp_deco .star:before {
content: "";
display: block;
background: url(../img/star.svg) no-repeat center center transparent;
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
transform-origin: 50% 50%;
}

.lamp_deco .star1 {
top: 148px;
left: 50%;
margin-left: -200px;
}

.lamp_deco .star1:before {
animation: star 4000ms 0ms ease-in-out infinite;
}

.lamp_deco .star2 {
top: 315px;
left: 50%;
margin-left: -100px;
transform: scale(0.4) rotate(20deg);
}

.lamp_deco .star2:before {
animation: star 3800ms 4330ms ease-in-out infinite;
}

.lamp_deco .star3 {
top: 480px;
left: 50%;
margin-left: -10px;
transform: scale(0.7) rotate(-30deg);
}

.lamp_deco .star3:before {
animation: star 4200ms 2170ms ease-in-out infinite;
}

.lamp_deco .star4 {
top: 105px;
right: 50%;
margin-right: -240px;
transform: scale(0.7) rotate(20deg);
}

.lamp_deco .star4:before {
animation: star 3900ms 1050ms ease-in-out infinite;
}

.lamp {
position: absolute;
top: 162px;
left: 50%;
margin-left: -330px;
transform-origin: 0 0;
transform: scale(1);
opacity: 1;
}

.lamp:before {
content: "";
display: block;
width: 512px;
height: 383px;
background: url(../img/lamp.png) no-repeat 0 0 transparent;
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
transform: rotate(-20deg);
}

.game_state .lamp,
.final_state .lamp,
.form_state .lamp {
top: 365px;
margin-left: 60px;
transform: scale(0.25);
}

.game_state .lamp {
transition: top 1s ease-out, margin-left 1s ease-out, transform 1s ease-out;
}

.game_state .lamp:before {
transform: rotate(30deg);
transition: transform 1s linear;
}

.final_state .lamp,
.form_state .lamp {
transition: opacity 0.25s ease-out;
opacity: 0;
}

.in_lamp {
width: 176px;
height: 166px;
background: url(../img/inlamp.png) no-repeat 0 0 transparent;
position: absolute;
top: 428px;
right: 50%;
margin-right: -175px;
transform-origin: 0 0;
transform: rotate(2deg);
opacity: 0;
}

.in_lamp.animate {
background-position: -180px 0;
}

.final_state .in_lamp,
.form_state .in_lamp {
opacity: 1;
transition: opacity 0.25s ease-out;
}

.lamp_slider_hld {
position: absolute;
top: -65px;
left: 50%;
width: 500px;
margin-left: -250px;
overflow: hidden;
opacity: 0;
height: 0px;
transition: opacity 0.5s ease-out;
}

.final_state .lamp_slider_hld {
overflow: visible;
opacity: 1;
}

.form_state .lamp_slider_hld {
overflow: visible;
transition: opacity 0.25s ease-out;
}

.lamp_slider_hld.hidden {
height: 0px !important;
}

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

.slick_arrow {
display: block;
width: 65px;
height: 65px;
border-radius: 50%;
border: 5px solid #D9D9D9;
background: url(../img/arrow_l.svg) no-repeat 10px 50% transparent;
position: absolute;
margin: 10px 0 0;
padding: 0;
cursor: pointer;
z-index: 50;
top: 50%;
transition: background-color 0.3s;
}

.slick_arrow:hover {
background-color: #fff;
}

.slick_prev {
left: -115px;
}

.slick_next {
right: -115px;
background-image: url(../img/arrow_r.svg);
background-position: 18px 50%;
}

.prizes {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0px;
overflow: hidden;
opacity: 0;
}

.form_state .prizes {
overflow: visible;
opacity: 1;
transition: opacity 0.15s ease-out 0.25s;
z-index: 100;
}

.prize {
position: absolute;
white-space: nowrap;
text-decoration: none;
color: #EEB111;
font-size: 16px;
line-height: 1.3;
transform-origin: 0 0;
}

.prize:hover {
text-decoration: underline;
}

.prize img {
display: block;
}

.prize span {
display: block;
transform-origin: 0 0;
transform: rotate(5deg);
margin-top: -5px;
}

.prize1 {
top: 50px;
left: 50%;
margin-left: -340px;
transform: rotate(3deg);
}

.prize2 {
top: 270px;
left: 50%;
margin-left: -222px;
transform: rotate(13deg);
}

.prize3 {
top: 122px;
right: 50%;
margin-right: -245px;
transform: rotate(-20deg);
}

.prize3 span {
margin-left: 92px;
}

@keyframes pooff {
	to { background-position: -15200px 0; }
}

.pooff {
width: 950px;
height: 864px;
position: absolute;
top: 50%;
left: 50%;
margin: -543px 0 0 -460px;
background: url(../img/poof_sprite.png) no-repeat 0 0 transparent;
opacity: 0;
}

.pooff.animate {
animation: pooff 0.5s steps(16) forwards;
opacity: 1;
}

@keyframes flying {
    0% {
        margin-top: 0;
    }
    50% {
        margin-top: 10px;
    }
    100% {
        margin-top: 0;
    }
}

.genie {
position: absolute;
top: -88px;
left: 50%;
width: 430px;
height: 471px;
margin-left: -227px;
background: url(../img/genie.png) no-repeat 0 0 transparent;
opacity: 0;
animation: flying 3300ms 0ms ease-in-out infinite;
}

.game_state .genie {
transition: opacity 0.2s ease-out 1.25s;
opacity: 1;
}

.genie.game_anim {
transition: opacity 0.2s ease-out 0.2s;
}

.genie.f2 {
background-position: -430px 0;
}

.genie.f3 {
background-position: -860px 0;
}

.genie.f4 {
background-position: -1290px 0;
}

.food {
position: absolute;
top: -88px;
left: 50%;
width: 470px;
height: 470px;
margin-left: -235px;
background: url(../img/food.png) no-repeat 0 0 transparent;
opacity: 0;
animation: flying 3300ms 0ms ease-in-out infinite;
transition: opacity 0.2s ease-out 0s;
}

.food[data-food="f2"] { background-position: -470px 0; }
.food[data-food="f3"] { background-position: -940px 0; }
.food[data-food="f4"] { background-position: -1410px 0; }
.food[data-food="f5"] { background-position: -1880px 0; }

.food.visible {
opacity: 1;
transition: opacity 0.2s ease-out 0.2s;
}

.food.visible ~ .genie {
opacity: 0;
transition-delay: 0s;
}

.game_slide {
padding-top: 80px;
}

.q_text {
font-weight: 900;
font-size: 56px;
line-height: 1.2;
min-height: 202px;
}

.btns_line {
margin: 50px -15px 0;
white-space: nowrap;
font-size: 0px;
}

.deco_bubble .btns_line {
margin-top: 40px;
}

.btns_line .btn {
margin: 0 15px;
}

.deco_bubble {
padding-top: 40px;
position: relative;
}

.final_yes_slide .deco_bubble,
.final_no_slide .deco_bubble {
padding-top: 80px;
}

.deco_bubble:before {
content: "";
display: block;
width: 820px;
height: 606px;
background: url(../img/bubble.png) no-repeat 0 0 transparent;
position: absolute;
top: -30px;
left: -145px;
}

.deco_bubble_inner {
position: relative;
max-width: 555px;
}

.final_yes_slide .deco_bubble_inner {
max-width: 610px;
}

.deco_bubble_title {
color: #EEB111;
font-size: 72px;
line-height: 1;
margin: 0 45px 30px -45px;
font-weight: 900;
}

.deco_bubble_text {
font-size: 32px;
line-height: 1.2;
font-weight: 900;
}

.guess_slide .deco_bubble_text {
min-height: 155px;
}

.slider_slide {
max-width: 610px;
}

.h3 {
font-size: 32px;
line-height: 1.2;
font-weight: 900;
margin: 0 0 20px;
}

.slider_controls {
display: inline-block;
vertical-align: top;
font-size: 0px;
margin: 0 0 30px;
white-space: nowrap;
}

.slider_controls_inner {
display: inline-block;
vertical-align: top;
background: #E2E7F2;
border-radius: 5px;
}

.slider_controls a {
display: inline-block;
vertical-align: top;
font-weight: 500;
font-size: 18px;
line-height: 20px;
color: #000;
text-decoration: none;
text-align: center;
padding: 12px 22px;
border-radius: 5px;
border: 3px solid #E2E7F2;
}

.slider_controls[data-active="1"] a:nth-child(1),
.slider_controls[data-active="2"] a:nth-child(2),
.slider_controls[data-active="3"] a:nth-child(3) {
background: #EEB111;
}

.slider_text .text_inner {
display: none;
}

.slider_text .text_inner.active {
display: block;
}

.slider_progress {
margin: 20px 5px 0;
max-width: 305px;
position: relative;
height: 50px;
}

.slider_progress:before {
content: "";
display: block;
height: 7px;
background: #E2E7F2;
position: absolute;
top: 21px;
left: 0;
right: 0;
}

.slider_progress i {
display: block;
position: absolute;
top: 13px;
left: -5px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #E2E7F2;
}

.slider_progress i:before {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #EEB111;
opacity: 0;
position: absolute;
top: 3px;
left: 3px;
transition: opacity 0.1s linear 0.1s;
z-index: 1;
}

.slider_progress i:nth-child(1):before,
.slider_progress[data-active="2"] i:nth-child(2):before,
.slider_progress[data-active="3"] i:nth-child(2):before,
.slider_progress[data-active="3"] i:nth-child(3):before {
opacity: 1;
}

.slider_progress i:nth-child(3):before {
width: 50px;
height: 50px;
top: 0;
left: 0;
}

.slider_progress i:nth-child(3):after {
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background: url(../img/gift.svg) no-repeat 0 0 transparent;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
opacity: 0.3;
transition: opacity 0.1s linear 0.1s;
z-index: 3;
}

.slider_progress[data-active="3"] i:nth-child(3):after {
opacity: 1;
}

.slider_progress i:nth-child(2) {
left: 50%;
margin-left: -12px;
}

.slider_progress i:nth-child(3) {
left: auto;
right: -5px;
top: 0;
width: 50px;
height: 50px;
}

.slider_progress .tail {
display: block;
position: absolute;
top: 23px;
left: 0;
width: 0%;
background: #EEB111;
height: 3px;
transition: width 0.3s linear 0s;
}

.slider_progress[data-active="2"] .tail {
width: 50%;
}

.slider_progress[data-active="3"] .tail {
width: 100%;
}

.to_form_text,
.slider_bottom {
margin: 30px 0 0;
}

.slider_bottom .bottom_part {
display: none;
}

.slider_bottom .bottom_part.active {
display: block;
}

.slider_bottom .bottom_part .btn {
width: 315px;
max-width: 100%;
}

.to_form_text p {
margin: 0 0 20px;
}

.form_slide {
padding-top: 55px;
}

.h2 {
font-size: 56px;
line-height: 1.2;
font-weight: 900;
margin: 0 0 20px;
}

.form_slide p {
margin: 0 0 50px;
}

.form {
max-width: 600px;
position: relative;
}

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

.text_input {
display: block;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 24px 210px 24px 30px;
height: 72px;
font-size: 18px;
line-height: 22px;
font-family: 'Styrene B LC', Arial, Helvetica, sans-serif;
font-weight: 400;
color: #231F20;
margin: 0;
border: 1px solid #D9DBE3;
border-radius: 40px;
box-shadow: 0 5px 0px #D9DBE3;
}

.text_input.error {
border-color: #ff0000;
}

.text_input::-webkit-input-placeholder {
color: rgba(0,0,0,0.4);
}
.text_input:-moz-placeholder,
.text_input::-moz-placeholder {
color: rgba(0,0,0,0.4);
opacity: 1;
}
.text_input:-ms-input-placeholder {
color: rgba(0,0,0,0.4);
}

.input_hld label.error {
position: absolute;
top: 100%;
left: 35px;
white-space: nowrap;
color: #ff0000;
font-size: 12px;
line-height: 16px;
margin-top: 8px;
}

.form .btn {
position: absolute;
top: 6px;
right: 6px;
width: 200px;
}

.checkbox {
display: inline-block;
vertical-align: top;
padding: 0 0 0 40px;
position: relative;
font-size: 14px;
line-height: 18px;
}

.checkbox label.error {
display: none !important;
}

.checkbox a {
color: inherit;
}

.checkbox  input {
display: none;
}

.checkbox span {
display: inline-block;
}

.checkbox span:before {
content: "";
display: block;
width: 25px;
height: 25px;
box-sizing: border-box;
background: #F3F3F3;
border: 2px solid #EEB111;
border-radius: 5px;
position: absolute;
top: -2px;
left: 0;
}

.checkbox span:after {
content: "";
display: block;
width: 18px;
height: 13px;
background: url(../img/check.svg) no-repeat 0 0 transparent;
position: absolute;
top: 3px;
left: 5px;
opacity: 0;
}

.checkbox input.error ~ span:before {
border-color: #ff0000;
}

.checkbox input:checked ~ span:after {
opacity: 1;
}

.thanks_slide {
padding-top: 115px;
}

.thanks_slide p {
margin: 0 0 30px;
max-width: 550px;
}

.socials_yellow {
font-size: 0px;
white-space: nowrap;
}

.socials_yellow a {
display: inline-block;
vertical-align: top;
width: 64px;
height: 64px;
border: 1px solid #C4C4C4;
border-radius: 50%;
background: url(../img/soc_vk1.svg) no-repeat center center transparent;
}

.socials_yellow a + a {
margin-left: 20px;
}

.socials_yellow a.fb {
background-image: url(../img/soc_fb1.svg);
}

.socials_yellow a.tw {
background-image: url(../img/soc_tw1.svg);
}

#mobile_detect {
width: 1px;
height: 1px;
position: fixed;
top: -10px;
left: -10px;
display: none;
}

.new_btn{
	margin-top: 30px;
	padding: 19px 27px 19px;
}