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

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

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

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

* {
outline: none;
box-sizing: border-box;
}

*:focus {
outline: none;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
}

input, textarea, button {
outline: none;
-webkit-appearance: none;
}

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

html {
overflow: visible !important;
}

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

body {
padding: 0px;
margin: 0px;
color: #303030;
font-size: 18px;
line-height: 1.5;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
background: #fff;
overflow-y: scroll !important;
}

canvas {
cursor: none;
max-width: 100%;
max-height: 100%;
width: 100%;
}

#game {
max-width: 100%;
max-height: 100%;
width: 100%;
text-align: center;
}

.game_wrap {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
display: none;
}

p {
margin: 0 0 20px;
}

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

img {
border-style: none;
display: block;
}

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

a:hover {
text-decoration: none;
}

b {
font-weight: 700;
}

ul, ol {
margin: 0;
padding: 0;
list-style: none outside;
}

.nowrap {
white-space: nowrap;
}

.clear {
clear: both;
font-size: 0px;
line-height: 0px;
height: 0px;
}

.main_frame {
max-width: 100%;
overflow: hidden;
position: relative;
}

.main_width {
max-width: 940px;
padding: 0 20px;
margin: 0 auto;
}

.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #FDD2D2;
z-index: 100;
}
.preloader .prog_stat{
width: 102px;
height: 50px;
position: absolute;
text-align:center;
top: 50%;
left: 50%;
margin: 50px 0 0 -50px;
font-size: 24px;
color:#ed1d24;
font-family: 'Pacifico', Arial, Helvetica, sans-serif;
text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

@keyframes beating {
	0% {
	transform: scale(1.1);
	}
	50% {
	transform: scale(0.8);
	}
	100% {
	transform: scale(1);
	}
}

.preloader .heart {
width: 102px;
height: 97px;
background: url(../img/heart_loader.svg) no-repeat 0 0 transparent;
position: absolute;
top: 50%;
left: 50%;
margin: -47px 0 0 -50px;
transform-origin: 50% 50%;
animation: beating 1s linear infinite;
}

.black_frame {
background: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.black_frame > div {
height: 100%;
}

.slide_hld {
margin: 0 auto;
position: relative;
max-width: 1920px;
min-height: 100%;
}

.slide_zoom {
position: absolute;
top: 50%;
left: 50%;
width: 1920px;
height: 940px;
margin-top: -470px;
margin-left: -960px;
background: #fff;
transform-origin: 50% 50%;
overflow: hidden;
}

.start .bg {
position: absolute;
top: -28px;
bottom: -28px;
left: 0;
width: 100%;
background: url(../img/bg_start.jpg) no-repeat center center transparent;
overflow: hidden;
}

.start .logo,
.final .logo {
display: block;
width: 150px;
height: 67px;
background: url(../img/logo.svg) no-repeat 0 0 transparent;
position: absolute;
}

.start .logo {
top: 63px;
left: 50px;
}

.final .logo {
top: 50px;
left: 82px;
}

.start .shield {
display: block;
width: 379px;
height: 431px;
background: url(../img/shield.png) no-repeat 0 0 transparent;
background-size: 379px 431px;
position: absolute;
top: 448px;
right: 138px;
}

@keyframes start {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

.start .start_text {
font-size: 36px;
line-height: 42px;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-align: center;
position: absolute;
top: 703px;
left: 0;
right: 0;
animation: start 1.5s linear 0s infinite;
}

.start .hand_girl {
width: 796px;
height: 797px;
background: url(../img/hand_girl_start.png) no-repeat 0 0 transparent;
position: absolute;
top: 320px;
left: -170px;
}

.start .hand_boy {
width: 873px;
height: 552px;
background: url(../img/hand_boy_start.png) no-repeat 0 0 transparent;
position: absolute;
top: -181px;
right: -215px;
}

#press_start {
display: block;
position: absolute;
top: 190px;
left: 389px;
right: 381px;
bottom: 182px;
}

.start_rules {
font-size: 16px;
line-height: 19px;
position: absolute;
top: 775px;
right: 270px;
color: #ED1D24;
text-decoration: underline;
font-weight: 500;
}

.start_rules:hover {
text-decoration: none;
}

.start .hand_boy {
width: 873px;
height: 552px;
background: url(../img/hand_boy_start.png) no-repeat 0 0 transparent;
position: absolute;
top: -181px;
right: -215px;
}

#sound {
position: absolute;
top: 42px;
right: 50px;
width: 100px;
height: 100px;
background: url(../img/sound1.svg) no-repeat 0 0 transparent;
display: block;
}

#sound.hidden {
display: none;
}

#sound:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: url(../img/sound2.svg) no-repeat 0 0 transparent;
opacity: 0;
}

#sound.mute:before {
opacity: 1;
}

#rules {
position: absolute;
top: 50px;
right: 185px;
width: 86px;
height: 86px;
background: #fff;
border-radius: 43px;
text-decoration: none;
text-align: center;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
transition: width 0.5s, box-shadow 0.5s;
}

#rules:hover {
width: 186px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
}

#rules:before {
content: "";
position: absolute;
top: -4px;
right: 10px;
width: 60px;
height: 95px;
background: url(../img/how.svg) no-repeat 0 0 transparent;
transition: opacity 0.5s;
}

#rules:hover:before {
opacity: 0;
}

#rules > span {
display: block;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 0px;
font-size: 21px;
line-height: 36px;
color: #ED1D24;
font-weight: 700;
transition: width 0.5s;
white-space: nowrap;
height: 100%;
}

#rules:hover > span {
width: 100%;
}

#rules > span > span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 186px;
padding: 25px 0;
}

.comics #skip {
position: absolute;
top: 56px;
right: 165px;
font-size: 18px;
color: #303030;
z-index: 10;
background: #fff;
font-weight: 400;
width: 180px;
}

.comics .page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.comics .speech {
position: absolute;
bottom: 0;
left: 60px;
right: 60px;
background: rgba(20,47,100,0.95);
border-radius: 16px;
color: #fce4be;
font-size: 38px;
line-height: 1.25;
padding: 40px 100px 0;
height: 225px;
}

.comics .speech div {
width: 0%;
overflow: hidden;
height: 47px;
white-space: nowrap;
}

.comics .speech div.spec1 {
position: absolute;
top: 87px;
left: 850px;
}

@keyframes bg1 {
	0% {margin-left: 0;}
	100% {margin-left: -1330px;}
}

@keyframes bg2 {
	0% {margin-left: -1330px;}
	100% {margin-left: 0;}
}

.page1 .bg,
.page2 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3250px;
background: url(../img/bg1.jpg) no-repeat 0 0 transparent;
}

.page1.active .bg {
animation: bg1 8s linear 0s forwards;
}

.page2 .bg {
margin-left: -1330px;
}

.page2.active .bg {
animation: bg2 8s linear 0s forwards;
}

@keyframes girl1 {
	0% {bottom: 0;}
	50% {bottom: -20px;}
	100% {bottom: 0;}
}

.page1 .girl {
width: 627px;
height: 904px;
background: url(../img/girl1.png) no-repeat 0 0 transparent;
position: absolute;
bottom: 0;
left: 85px;
}

.page1.active .girl {
animation: girl1 1s linear 0s infinite;
}

@keyframes boy1 {
	0% {bottom: 0;}
	50% {bottom: -20px;}
	100% {bottom: 0;}
}

.page2 .boy {
width: 684px;
height: 976px;
background: url(../img/boy1.png) no-repeat 0 0 transparent;
position: absolute;
bottom: 0;
right: 140px;
}

.page2.active .boy {
animation: boy1 1s linear 0s infinite;
}

.page3 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg2.jpg) no-repeat 0 0 transparent;
}

.page3 .speech {
display: none;
}

@keyframes boy2 {
	0% {margin-right: -200px;}
	100% {margin-right: 0;}
}

@keyframes boy2-1 {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes boy2-2 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.page3 .boy {
position: absolute;
/*bottom: 0;*/
bottom: -70px;
right: 50px;
margin-right: -200px;
width: 830px;
height: 987px;
}

.page3 .boy .simple,
.page3 .boy .click {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/boy2.png) no-repeat 0 0 transparent;
opacity: 1;
}

.page3 .boy .click {
background-image: url(../img/boy2-1.png);
opacity: 0;
}

.page3.active .boy {
animation: boy2 1.5s linear 0s forwards;
}

.page3.active .boy .simple {
animation: boy2-1 0.001s linear 1.5s forwards;
}

.page3.active .boy .click {
animation: boy2-2 0.001s linear 1.5s forwards;
}

.page3 .blink {
position: absolute;
/*top: 630px;*/
top: 560px;
left: 750px;
width: 112px;
height: 47px;
background: url(../img/shine.png) no-repeat 0 0 transparent;
opacity: 0;
}

.page3.active .blink {
animation: boy2-2 0.001s linear 1.5s forwards;
}

.page4 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg3.jpg) no-repeat 0 0 transparent;
}

@keyframes girl3 {
	0% {margin-left: -258px;}
	100% {margin-left: -128px;}
}

.page4 .hand_girl {
position: absolute;
top: 15px;
left: 0;
width: 1021px;
height: 684px;
margin-left: -258px;
background: url(../img/hand_girl.png) no-repeat 0 0 transparent;
}

.page4.active .hand_girl {
animation: girl3 3s linear 0s forwards;
}

@keyframes boy3 {
	0% {margin-right: -151px;}
	100% {margin-right: -21px;}
}

.page4 .hand_boy {
position: absolute;
top: -95px;
right: 0;
width: 1022px;
height: 760px;
margin-right: -151px;
background: url(../img/hand_boy.png) no-repeat 0 0 transparent;
}

.page4.active .hand_boy {
animation: boy3 3s linear 0s forwards;
}

.page5 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg4.jpg) no-repeat 0 0 transparent;
}

@keyframes bubble5 {
	0% {opacity: 0; top: 50px;}
	20% {opacity: 1;}
	100% {top: -50px; opacity: 1;}
}

.page5 .bubbles {
position: absolute;
top: 50px;
left: 50%;
margin-left: -972px;
height: 839px;
width: 1944px;
background: url(../img/bubbles1.png) no-repeat 0 0 transparent;
opacity: 0;
}

.page5.active .bubbles {
animation: bubble5 5s linear 0s forwards;
}

.page6 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg5.jpg) no-repeat 0 0 transparent;
}

@keyframes bubble6 {
	0% {top: 50px;}
	100% {top: -50px}
}

.page6 .bubbles {
position: absolute;
top: 50px;
left: 50%;
margin-left: -1000px;
height: 841px;
width: 2000px;
background: url(../img/bubbles2.png) no-repeat 0 0 transparent;
}

.page6.active .bubbles {
animation: bubble6 3.5s linear 0s forwards;
}

@keyframes girl4 {
	0% {margin-left: 0px;}
	100% {margin-left: -50px;}
}

.page6 .girl {
width: 735px;
height: 910px;
background: url(../img/girl3.png) no-repeat 0 0 transparent;
position: absolute;
bottom: -70px;
left: 85px;
}

.page6.active .girl {
animation: girl4 3s linear 0s forwards;
}

@keyframes boy4 {
	0% {margin-right: 0px;}
	100% {margin-right: -50px;}
}

.page6 .boy {
width: 708px;
height: 976px;
background: url(../img/boy3.png) no-repeat 0 0 transparent;
position: absolute;
bottom: -70px;
right: 85px;
}

.page6.active .boy {
animation: boy4 3s linear 0s forwards;
}

@keyframes move_frame {
	0% {margin-left: 0px;}
	100% {margin-left: -1251px;}
}

@keyframes move_frame2 {
	0% {margin-left: -1251px;}
	100% {margin-left: 0px;}
}

.page7 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3171px;
background: url(../img/bg6.jpg) no-repeat 0 0 transparent;
}

.page7.active .bg {
animation: move_frame 0.5s ease-in-out 4s forwards;
}

@keyframes bubble7 {
	0% {top: 150px;}
	100% {top: -150px}
}

@keyframes bubble7_1 {
	0% {opacity: 1; top: -150px;}
	100% {opacity: 0; top: -150px;}
}

.page7 .bubbles {
position: absolute;
top: 150px;
left: 50%;
margin-left: -850px;
height: 779px;
width: 1700px;
background: url(../img/bubbles3.png) no-repeat 0 0 transparent;
}

.page7.active .bubbles {
animation: bubble7 9.5s linear 0s forwards;
}

.page7.change .bubbles {
animation: bubble7_1 0.3s linear 0s forwards;
}

.page7 .girl {
position: absolute;
left: 0;
bottom: -70px;
width: 1105px;
height: 1048px;
}

.page7 .girl div,
.page7 .boy div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.page7 .girl .eyes1 {
background: url(../img/girl4.png) no-repeat 0 0 transparent;
}

.page7 .girl .eyes2 {
visibility: hidden;
background: url(../img/girl4-1.png) no-repeat 0 0 transparent;
}

.page7 .girl .mouth1 {
background: url(../img/girl4-2.png) no-repeat 0 0 transparent;
}

.page7 .girl .mouth2 {
opacity: 0;
background: url(../img/girl4-3.png) no-repeat 0 0 transparent;
}

.page7 .boy {
position: absolute;
right: 0;
bottom: -70px;
width: 940px;
height: 1080px;
}

.page7 .boy .eyes1 {
background: url(../img/boy4.png) no-repeat 0 0 transparent;
}

.page7 .boy .eyes2 {
visibility: hidden;
background: url(../img/boy4-1.png) no-repeat 0 0 transparent;
}

@keyframes eyes2 {
	to {visibility: visible;}
}

/*.page7.active .girl .eyes1,
.page7.active .boy .eyes1 {
animation: eyes1 1s linear 0s 4;
}*/

.page7.active .girl .eyes2 {
animation: eyes2 0.3s steps(2, end) infinite;	
}

.page7.active .boy .eyes2 {
animation: eyes2 0.3s steps(2, end) 4.5s infinite;
}

.page7 .boy .angry,
.page7 .girl .angry {
opacity: 0;
}

.page7 .boy .mouth1 {
background: url(../img/boy4-2.png) no-repeat 0 0 transparent;
}

.page7 .boy .mouth2 {
opacity: 0;
background: url(../img/boy4-3.png) no-repeat 0 0 transparent;
}

@keyframes hand7_1 {
	0% {margin-left: 0;}
	50% {margin-left: 3px;}
	100% {margin-left: 0;}
}

@keyframes hand7_2 {
	0% {margin-left: 0;}
	50% {margin-left: -3px;}
	100% {margin-left: 0;}
}

.page7 .boy .hand {
width: 467px;
height: 313px;
background: url(../img/hand_boy2.png) no-repeat 0 0 transparent;
bottom: 60px;
left: -110px;
top: auto;
}

.page7.change .boy .hand {
animation: hand7_1 0.2s linear 0s infinite;
}

.page7 .girl .hand1 {
width: 312px;
height: 362px;
background: url(../img/hand_girl2.png) no-repeat 0 0 transparent;
bottom: 50px;
left: 440px;
top: auto;
}

.page7 .girl .hand2 {
width: 322px;
height: 434px;
background: url(../img/hand_girl2-1.png) no-repeat 0 0 transparent;
bottom: 50px;
left: 780px;
top: auto;
}

.page7.change2 .girl .hand1 {
animation: hand7_1 0.2s linear 0s infinite;
}

.page7.change2 .girl .hand2 {
animation: hand7_2 0.2s linear 0s infinite;
}

.page7.change .boy .love,
.page7.change .girl .love {
opacity: 0;
}

.page7.change .boy .angry,
.page7.change .girl .angry {
opacity: 1;
}

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

.page7 .boy .speech_bubble {
opacity: 0;
width: 916px;
height: 727px;
background: url(../img/speech1.png) no-repeat 0 0 transparent;
top: 70px;
left: -900px;
}

.page7.change .boy .mouth2,
.page7.change .boy .speech_bubble {
animation: show7 0.001s linear 1s forwards;
}

.page7.change2 .bg {
margin-left: -1251px;
animation: move_frame2 0.5s ease-in-out 0s forwards;
}

.page7.change2 .boy .speech_bubble {
opacity: 0;
animation: none;
}

.page7 .girl .speech_bubble {
opacity: 0;
width: 896px;
height: 722px;
background: url(../img/speech2.png) no-repeat 0 0 transparent;
top: 10px;
left: 950px;
}

.page7.change2 .girl .mouth2,
.page7.change2 .girl .speech_bubble {
animation: show7 0.001s linear 1.5s forwards;
}

.page8 .bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(../img/bg7.jpg) no-repeat 0 0 transparent;
}

.page8 .both {
width: 1123px;
height: 850px;
background: url(../img/both.png) no-repeat 0 0 transparent;
position: absolute;
left: 416px;
bottom: 49px;
}

.page8 .speech_bubble {
width: 600px;
height: 533px;
background: url(../img/speech3.png) no-repeat 0 0 transparent;
position: absolute;
left: 636px;
bottom: 69px;
opacity: 0;
transition: opacity 0s linear 1s;
}

.page8 .screen {
position: absolute;
overflow: hidden;
background: url(../img/anim1.gif) no-repeat center center transparent;
background-size: cover;
opacity: 0;
}

.page8 .sc1 {
width: 350px;
height: 175px;
top: -21px;
left: 132px;
}

.page8 .sc2 {
width: 312px;
height: 168px;
top: -30px;
left: 564px;
background-image: url(../img/anim2.gif);
}

.page8 .sc3 {
width: 281px;
height: 173px;
top: -20px;
left: 1003px;
background-image: url(../img/anim6.gif);
}

.page8 .sc4 {
width: 313px;
height: 170px;
top: -33px;
left: 1385px;
background-image: url(../img/anim4.gif);
}

.page8 .sc5 {
width: 348px;
height: 175px;
top: 264px;
left: 354px;
background-image: url(../img/anim5.gif);
}

.page8 .sc6 {
width: 272px;
height: 150px;
top: 282px;
left: 775px;
background-image: url(../img/anim3.gif);
}

.page8 .sc7 {
width: 342px;
height: 184px;
top: 258px;
left: 1155px;
background-image: url(../img/anim7.gif);
}

.page8.active .speech_bubble,
.page8.active .screen {
opacity: 1;
}

.final {
min-height: 100vh;
background: url(../img/bg_final.jpg) fixed no-repeat center center transparent;
background-size: cover;
padding: 145px 0 20px;
position: relative;
}

.final .white_block {
background: #fff;
border-radius: 16px;
padding: 50px 20px;
}

.final .white_inner {
margin: 0 auto;
max-width: 655px;
}

.final .final_top {
margin: 0 0 10px;
text-align: center;
color: #707070;
position: relative;
padding-top: 0;
padding-bottom: 65px;
}

.final_top .character {
position: absolute;
top: -50px;
left: -95px;
}

.final_top .girl {
width: 275px;
height: 270px;
background: url(../img/final_girl.png) no-repeat 0 0 transparent;
}

.final_top .boy {
width: 255px;
height: 263px;
background: url(../img/final_boy.png) no-repeat 0 0 transparent;
left: -72px;
}

.final_top .tv {
position: absolute;
top: -62px;
right: -80px;
width: 297px;
height: 291px;
background: url(../img/final_tv.png) no-repeat 0 0 transparent;
}

.final_top_tops {
margin: 0 auto 25px;
min-height: 200px;
position: relative;
padding-top: 9%;
max-width: 460px;
}

.final_title {
position: absolute;
top: 0;
margin-top: -8%;
left: 0;
right: 0;
}

.final_title img {
display: block;
width: 100%;
max-width: 511px;
position: relative;
margin: 0 auto;
}

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

.final_top_tops b {
color: #303030;
}

.final_top_tops .result {
white-space: nowrap;
font-size: 82px;
line-height: 1;
font-weight: 700;
color: #000;
overflow: hidden;
}

.final_top a:not(.btn) {
color: #ED1D24;
font-weight: 700;
}

.account_panel {
margin: 42px 0 26px;
font-size: 0px;
}

.account_item {
display: inline-block;
vertical-align: top;
margin: 0 17px 20px;
width: 250px;
position: relative;
text-align: left;
}

.btn {
display: inline-block;
vertical-align: top;
text-decoration: none;
border: 0 none;
max-width: 100%;
line-height: 23px;
padding: 19px 35px 23px;
font-size: 21px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: 700;
background: #ED1D24;
color: #fff;
white-space: nowrap;
margin: 0;
text-align: center;
position: relative;
border-radius: 40px;
}

.border_btn {
border: 2px solid #ED1D24;
background: #fff;
color: #ED1D24;
padding: 17px 33px 21px;
}

.account_item .btn {
width: 250px;
padding-left: 0;
padding-right: 0;
overflow: hidden;
}

.account_item .btn span {
width: 250px;
display: block;
}

.account_item .border_btn span {
padding-left: 40px;
}

.account_item .border_btn:before {
content: "";
display: block;
width: 24px;
height: 27px;
background: url(../img/share.svg) no-repeat 0 0 transparent;
position: absolute;
left: 22px;
top: 50%;
margin-top: -13px;
}

.account_line {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
height: 0;
overflow: hidden;
}

.account_line a {
flex: 0 1 auto;
display: block;
width: 65px;
height: 65px;
background: url(../img/share_vk.svg) no-repeat center center transparent;
transform-origin: 50% 50%;
opacity: 0;
border-radius: 50%;
overflow: hidden;
}

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

.account_line a.ok {
background-image: url(../img/share_ok.svg);
}

.share .account_line a.vk {
background-image: url(../img/share_vk1.svg);
border-color: transparent;
}

.share .account_line a.fb {
background-image: url(../img/share_fb1.svg);
}

.share .account_line a.ok {
background-image: url(../img/share_ok1.svg);
}

.restart {
display: inline-block;
vertical-align: top;
font-size: 21px;
padding-left: 38px;
position: relative;
text-decoration: none;
}

.restart:before {
content: "";
display: block;
width: 25px;
height: 24px;
background: url(../img/restart.svg) no-repeat 0 0 transparent;
position: absolute;
left: 0;
top: 50%;
margin-top: -12px;
transform-origin: 50% 50%;
transition: transform 0.8s;
}

.restart:hover:before {
transform: rotate(-360deg);
}

.white_block .top_title {
text-align: center;
margin: 0 0 15px;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
}

.champ {
background: #EFEFEF;
border-radius: 40px;
position: relative;
min-height: 75px;
font-size: 18px;
line-height: 1.3;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
padding: 10px 50px 10px 100px;
margin: 0 0 15px;
}

.champ img {
display: block;
width: 75px;
position: absolute;
top: 4px;
left: 3px;
}

.champ > div {
flex: 1 1 100%;
}

.champ a {
color: #ED1D24;
}

.rating_table {
width: 100%;
border-collapse: collapse;
}

.rating_table td {
text-align: left;
vertical-align: top;
border-bottom: 1px solid #cecece;
padding: 20px 20px 20px 0;
color: #303030;
font-size: 18px;
line-height: 1.3;
}

.rating_table td:first-child {
width: 55px;
color: #909090;
font-weight: 700;
padding-right: 10px;
}

.rating_table .num {
display: inline-block;
vertical-align: top;
padding-left: 7px;
position: relative;
}

.rating_table tr:nth-child(1) .num,
.rating_table tr:nth-child(2) .num,
.rating_table tr:nth-child(3) .num {
color: transparent;
}

.rating_table tr:nth-child(1) .num:before,
.rating_table tr:nth-child(2) .num:before,
.rating_table tr:nth-child(3) .num:before {
content: "";
display: block;
width: 29px;
height: 33px;
background: url(../img/medal1.svg) no-repeat 0 0 transparent;
position: absolute;
top: -2px;
left: 0;
}

.rating_table tr:nth-child(2) .num:before {
background-image: url(../img/medal2.svg);
}

.rating_table tr:nth-child(3) .num:before {
background-image: url(../img/medal3.svg);
}

.rating_table .name {
font-weight: 500;
}

.rating_table td:last-child {
padding-right: 0;
width: 30px;
}

.rating_table .time {
display: inline-block;
vertical-align: top;
font-family: 'Pacifico', Arial, Helvetica, sans-serif;
white-space: nowrap;
font-size: 25px;
line-height: 23px;
padding-left: 24px;
position: relative;
}

.rating_table .time:before {
content: "";
display: block;
width: 17px;
height: 17px;
background: url(../img/time.svg) no-repeat 0 0 transparent;
position: absolute;
top: 50%;
margin-top: -8px;
left: 0;
}

/* Share animation */
.account_item .btn {
animation: BG__back__1 300ms 0ms linear forwards;
overflow: hidden;
}

.account_item.animate .btn {
animation: BG__width__1 300ms 0ms linear forwards, BG__width__2 100ms 300ms ease-in-out forwards, BG__width__3 200ms 400ms ease-in-out forwards, BG__width__4 100ms 600ms ease-in-out forwards;
}

@keyframes BG__width__1 {
    from { width: 250px; }
    to { width: 250px; padding-left: 0;}
}
@keyframes BG__width__2 {
    from { width: 250px; }
    to { width: 260px; }
}
@keyframes BG__width__3 {
    from { width: 260px; }
    to { width: 55px; }
}
@keyframes BG__width__4 {
    from { width: 55px; }
    to { width: 65px; }
}
@keyframes BG__back__1 {
    from { width: 65px; }
    to { width: 250px; }
}

.account_item .btn span,
.account_item .btn:before {
animation: span__opacity_back__1 300ms 0ms linear forwards;
}

.account_item.animate .btn span,
.account_item.animate .btn:before {
animation: span__opacity__1 300ms 0ms linear forwards;
}

@keyframes span__opacity__1 {
	from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes span__opacity_back__1 {
	from { opacity: 0; }
    to { opacity: 1; }
}

.account_item.animate .account_line {
animation: line__height__1 100ms 500ms linear forwards;
overflow: visible;
}

@keyframes line__height__1 {
	from { height: 0px; }
    to { height: 65px; }
}

.account_item.animate .vk {
animation: ShapeVk__width__1 600ms 0ms linear forwards, ShapeVk__width__2 200ms 600ms ease-in-out forwards, ShapeVk__opacity__1 585ms 0ms linear forwards, ShapeVk__opacity__2 14ms 585ms linear forwards;
}

@keyframes ShapeVk__width__1 {
    from { transform: scale(0); }
    to { transform: scale(0); }
}
@keyframes ShapeVk__width__2 {
	from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes ShapeVk__opacity__1 {
	from { opacity: 0; }
    to { opacity: 0; }
}
@keyframes ShapeVk__opacity__2 {
	from { opacity: 0; }
    to { opacity: 1; }
}

.account_item.animate .fb {
animation: ShapeFB__width__1 600ms 0ms linear forwards, ShapeFB__width__2 200ms 600ms ease-in-out forwards, ShapeFB__width__3 100ms 800ms ease-in-out forwards, ShapeFB__width__4 100ms 900ms linear forwards, ShapeFB__opacity__1 585ms 0ms linear forwards, ShapeFB__opacity__2 15ms 585ms linear forwards;
}

@keyframes ShapeFB__width__1 {
    from { transform: scale(0); }
    to { transform: scale(0); }
}
@keyframes ShapeFB__width__2 {
    from { transform: scale(0); }
    to { transform: scale(1.15); }
    }
}
@keyframes ShapeFB__width__3 {
    from { transform: scale(1.15); }
    to { transform: scale(1); }
}
@keyframes ShapeFB__width__4 {
    from { transform: scale(1); }
    to { transform: scale(1); }
}
@keyframes ShapeFB__opacity__1 {
   from { opacity: 0; }
   to { opacity: 0; }
}
@keyframes ShapeFB__opacity__2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.account_item.animate .ok {
animation: ShapeOK__width__1 700ms 0ms linear forwards, ShapeOK__width__2 200ms 700ms ease-in-out forwards, ShapeOK__width__3 100ms 900ms ease-in-out forwards, ShapeOK__opacity__1 685ms 0ms linear forwards, ShapeOK__opacity__2 15ms 685ms linear forwards;
}

@keyframes ShapeOK__width__1 {
    from { transform: scale(1); }
	to { transform: scale(0); }
}
@keyframes ShapeOK__width__2 {
    from { transform: scale(0); }
	to { transform: scale(1.15); }
}
@keyframes ShapeOK__width__3 {
    from { transform: scale(1.15); }
	to { transform: scale(1); }
}
@keyframes ShapeOK__opacity__1 {
   from { opacity: 0; }
   to { opacity: 0; }
}
@keyframes ShapeOK__opacity__2 {
   from { opacity: 0; }
   to { opacity: 1; }
}
/* Share animation END */

.choose .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/bg_fight.jpg) no-repeat 0 0 transparent;
}

#paralax {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.choose .light {
position: absolute;
top: 0;
left: 50%;
width: 2050px;
margin-left: -1050px;
height: 940px;
background: url(../img/figth_light.png) no-repeat 0 0 transparent;
}

.choose .girl {
position: absolute;
bottom: -65px;
left: 0;
width: 1098px;
height: 984px;
background: url(../img/girl_fight.png) no-repeat 0 0 transparent;
transition: margin-left 0.5s linear, opacity 0.5s linear;
}

.choose .girl.animate {
opacity: 0;
margin-left: -200px;
}

.choose .boy {
position: absolute;
bottom: -65px;
left: 876px;
width: 1044px;
height: 990px;
background: url(../img/boy_fight.png) no-repeat 0 0 transparent;
transition: margin-left 0.5s linear, opacity 0.5s linear;
}

.choose .boy.animate {
opacity: 0;
margin-left: 200px;
}

.choose .pult {
position: absolute;
top: 47px;
left: 933px;
width: 151px;
height: 443px;
background: url(../img/pult_fight.png) no-repeat 0 0 transparent;
}

.choose .text {
position: absolute;
bottom: 47px;
left: 50%;
margin-left: -830px;
width: 1659px;
height: 145px;
background: url(../img/choose_text.png) no-repeat 0 0 transparent;
}

.choose_link {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}

.choose_link.girl_power {
left: 0;
}

.choose_link.boy_power {
right: 0;
}

.overlay {
background: rgba(35,38,41,0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 400;
display: none;
}

.hidden_popup {
position: absolute;
left: 200%;
top: 100%;
width: 100%;
max-width: 1200px;
}

.mfp-container {
padding: 0;
}

.popup {
position: relative;
max-width: 1200px;
margin: 0 auto;
background: #fff;
border-radius: 16px;
z-index: 500;
text-align: center;
color: #707070;
font-size: 18px;
padding: 0 30px 45px;
min-width: 320px;
}

.popup.get_email {
max-width: 750px;
}

.close_popup,
button.mfp-close {
display: block;
position: absolute;
top: -20px !important;
right: -20px;
width: 54px;
height: 57px;
background: url(../img/close.svg) no-repeat 0 0 transparent;
z-index: 50;
color: transparent;
font-size: 0px;
opacity: 1;
}

.popup_inner {
max-width: 700px;
margin: 0 auto;
}

.popup_title {
font-family: 'Pacifico', Arial, Helvetica, sans-serif;
color: #ED1D24;
font-size: 62px;
line-height: 1;
margin: 0 0 26px;
text-shadow: -0 -6px 2px #FFFFFF, 0 -6px 2px #FFFFFF, -0 6px 2px #FFFFFF, 0 6px 2px #FFFFFF, -6px -0 2px #FFFFFF, 6px -0 2px #FFFFFF, -6px 0 2px #FFFFFF, 6px 0 2px #FFFFFF, -1px -6px 2px #FFFFFF, 1px -6px 2px #FFFFFF, -1px 6px 2px #FFFFFF, 1px 6px 2px #FFFFFF, -6px -1px 2px #FFFFFF, 6px -1px 2px #FFFFFF, -6px 1px 2px #FFFFFF, 6px 1px 2px #FFFFFF, -2px -6px 2px #FFFFFF, 2px -6px 2px #FFFFFF, -2px 6px 2px #FFFFFF, 2px 6px 2px #FFFFFF, -6px -2px 2px #FFFFFF, 6px -2px 2px #FFFFFF, -6px 2px 2px #FFFFFF, 6px 2px 2px #FFFFFF, -3px -6px 2px #FFFFFF, 3px -6px 2px #FFFFFF, -3px 6px 2px #FFFFFF, 3px 6px 2px #FFFFFF, -6px -3px 2px #FFFFFF, 6px -3px 2px #FFFFFF, -6px 3px 2px #FFFFFF, 6px 3px 2px #FFFFFF, -4px -6px 2px #FFFFFF, 4px -6px 2px #FFFFFF, -4px 6px 2px #FFFFFF, 4px 6px 2px #FFFFFF, -6px -4px 2px #FFFFFF, 6px -4px 2px #FFFFFF, -6px 4px 2px #FFFFFF, 6px 4px 2px #FFFFFF, -5px -6px 2px #FFFFFF, 5px -6px 2px #FFFFFF, -5px 6px 2px #FFFFFF, 5px 6px 2px #FFFFFF, -6px -5px 2px #FFFFFF, 6px -5px 2px #FFFFFF, -6px 5px 2px #FFFFFF, 6px 5px 2px #FFFFFF, -6px -6px 2px #FFFFFF, 6px -6px 2px #FFFFFF, -6px 6px 2px #FFFFFF, 6px 6px 2px #FFFFFF, -6px -6px 2px #FFFFFF, 6px -6px 2px #FFFFFF, -6px 6px 2px #FFFFFF, 6px 6px 2px #FFFFFF;
position: relative;
z-index: 10;
top: -20px;
}

.rules_slider_outer {
position: relative;
}

.rules_slider {
padding: 0 0 115px;
}

.rules_slider .boy_rules {
display: none;
}

.rules_slider.boy .girl_rules {
display: none;	
}

.rules_slider.boy .boy_rules {
display: block;
}

.rules_slider img {
margin: 0 auto 30px;
display: block;
width: auto;
max-width: 80%;
}

.rules_slider p {
margin: 0;
padding: 0 0 50px;
}

.rules_slider .slick-dots {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 0px;
}

.rules_slider .slick-dots li {
display: inline;
margin: 0 5px;
}

.rules_slider .slick-dots button {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #C4C4C4;
border: 2px solid #fff;
padding: 0;
margin: 0;
font-size: 0px;
}

.rules_slider .slick-dots .slick-active button {
background: #ED1D24;
border-color: #ED1D24;
}

.rules_btn {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
}

.rules_btn .btn {
display: block;
width: 182px;
margin: 0 auto;
}

.rules_btn .end_btn {
display: none;
}

.rules_slider_outer.ended .next_btn {
display: none;
}

.rules_slider_outer.ended .end_btn {
display: block;
}

.input_hld {
position: relative;
margin: 0 auto 50px;
max-width: 590px;
}

.text_input {
display: block;
box-sizing: border-box;
width: 100%;
background: #EFEFEF;
padding: 17px 30px 18px;
font-size: 24px;
line-height: 36px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: 400;
color: #303030;
margin: 0;
border: 2px solid #EFEFEF;
border-radius: 40px;
text-align: left;
}

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

.text_input:focus {
border-color: #BCBCBC;
}

.email_input .text_input {
padding-left: 70px;
}

.email_input svg {
display: block;
position: absolute;
top: 50%;
margin-top: -11px;
left: 30px;
opacity: 0.5;
}

.email_input .text_input:focus ~ svg {
opacity: 1;
}

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

.email_input .text_input.error ~ svg {
opacity: 1;
}

.email_input .text_input.error ~ svg path {
fill: #ED1D24;
}

.input_hld label.error {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
margin-top: 5px;
font-size: 14px;
line-height: 18px;
color: #ED1D24;
}

.btn_hld .btn {
width: 250px;
}

.mobile_default {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(../img/default.png) no-repeat bottom center #fdd2d2;
background-size: contain;
display: none;
}

.sounds {
display: none;
}