@font-face { 
    font-family:SBSANSDISPLAY-REGULAR; 
    src: url(../fonts/SBSANSDISPLAY-REGULAR.ttf);
}
@font-face { 
    font-family:SBSANSDISPLAY-SEMIBOLD; 
    src: url(../fonts/SBSANSDISPLAY-SEMIBOLD.ttf);
}


body{
	background: #050c19;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	font-family:SBSANSDISPLAY-REGULAR; 
}

div{
	box-sizing: border-box;
}


.big_title{
	font-size: 28px;
	color: #fff;
	width: 280px;
	margin: auto;
	margin-top: 50px;
	position: relative;
	z-index: 3;
	font-family:SBSANSDISPLAY-SEMIBOLD;
	line-height: 1.2;
}
.big_text{
	font-size: 14px;
	line-height: 1.3em;
	color: #fff;
	width: 280px;
	margin: auto;
	margin-top: 10px;
	position: relative;
	z-index: 3;
}

.itog_text.v1 {
  color: #fff;
  font-size: 1.325em;
  padding: 0 40px;
  text-align: center;
}




.fon1{
	background: #050c19;
	position: absolute;
	width: 1600px;
	height: 1600px;
	top: 50%;
	margin-top: -800px;
	z-index: 50;
	left: -1600px;
	border-radius: 100%;
}
.fon2{
	background: #050c19;
	position: absolute;
	width: 1600px;
	height: 1600px;
	top: 50%;
	margin-top: -800px;
	z-index: 50;
	left: 50%;
	margin-left: -800px;
	border-radius: 100%;
}
.main{
	max-width: 450px;
	width: 100%;
	height: 100vh;
	/*background: url(../img/ugl_l_b.png) no-repeat left bottom / 300px,
	url(../img/ugl_r_t.png) no-repeat top right / 300px,
	url(../img/bg_hello.jpg) no-repeat center bottom / cover;*/
	background: url(../img/bg_hello.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main_in{
	max-width: 450px;
	width: 100%;
	height: 100vh;
	background: url(../img/bg_hello.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: absolute;
	overflow: hidden;
	overflow-y: hidden;
	z-index: 1;
	top: 0px;
	left: 50%;
	margin-left: -225px;
	padding-bottom: 50px;
}

.main_in__final {
    background: url(../img/bg_final.jpg) no-repeat center bottom / cover;
}

.main_in__result {
    background: url(../img/bg_yes.jpg) no-repeat center bottom / cover;
}

.main_in .star_zag{
	font-family:SBSANSDISPLAY-SEMIBOLD; 
	font-size: 34px;
	color: #e0f5ff;
	background: linear-gradient(90deg, #d9f0ff, #a0d8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Для Firefox */
    background-clip: text;
    color: transparent;
  text-align: center;
  width: 280px;
  max-width: 100%;
  margin: auto;
  margin-top: 20px;
}
.main_in .usloviya{
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	color: #fff;
	font-size: 14px;
}
.main_in .usloviya a{
	color: #ccc;
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px dashed #ccc;
}
.main_in .usloviya .link{
	background: rgba(52, 68, 81, 0.5);
	padding: 10px;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
}
.main_in .usloviya .link:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0px;
    left: 0px;
    border-radius: 10px;
    opacity: 0.3;
    z-index: 0;
    background: linear-gradient(to top left, rgba(156, 224, 124, 0.8), rgba(156, 224, 124, 0.2));
}
.main_in .usloviya .check{
	background: rgba(52, 68, 81, 0.5);
	padding: 10px;
	border-radius: 10px;
	margin-left: 15px;
	cursor: pointer;
	padding-left: 25px;
	position: relative;
	position: relative;
}
.main_in .usloviya .check:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0px;
    left: 0px;
    border-radius: 10px;
    opacity: 0.3;
    z-index: 0;
    background: linear-gradient(to top left, rgba(156, 224, 124, 0.8), rgba(156, 224, 124, 0.2));
}
.main_in .usloviya .check:before{
	content: "";
	position: absolute;
	top: 10px;
	left: 5px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #ccc;
	border: 2px solid #ccc;
}
.main_in .usloviya .check.activ:before{
	background: #e87c05;
	border: 2px solid #ccc;
}


.avatar{
	text-align: center;
	margin-top: 70px;
}

.avatar img {
    max-width: 180px;
}

.podskazka{
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
}
.podskazka img{
	margin-left: -25px;
}


.rezult{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 5;
	
}

.main_in__final .rezult {
    display: block;
    font-size: 1.325em;
}

.rezult_no{
	display: none;
}

.rezult_yes{
	display: none;
	width: 100%;
    max-width: 100%;
}

/*.rezult_zag {
    font-size: 28px;
    font-weight: 300;
    color: #000000;
    text-align: center;
    padding: 25px 20px;
    background: url(../img/button_yes.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 1.625em;
}*/

.rezult_zag {
    font-size: 22px;
    font-weight: 300;
    color: #000000;
    text-align: center;
    background: linear-gradient(180deg, #ffd35c 0%, #ff006e 100%);
    border-radius: 20px;
    padding: 20px 30px;
    color: #000;
    text-align: center;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 0 30px rgba(255, 200, 100, 0.5);
    max-width: 80%;
    margin: 0 auto;
}

.rezult_zag strong {
    display: block;
    font-weight: 900;
    font-family: SBSANSDISPLAY-SEMIBOLD;
    text-transform: uppercase;
}

.rezult_img{
	text-align: center;
	margin-top: 10%;
}

.rezult_img img {
    max-width: 170px;
}

.rezult .salut{
	width: 100%;
	height: 50px;
	top: 0px;
	left: 0px;
	position: relative;
}
.rezult .salut_n1,.salut_n2,.salut_n3{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -130px;
	margin-top: -170px;
	mix-blend-mode: screen;
}
@keyframes salut {
  0% { transform: scale(0); opacity: 0; }
  20%{ transform: scale(1); opacity: 1;}
	30%{ transform: scale(1); opacity: 0;}
  100%{ transform: scale(0); opacity: 0;}
}
.rezult .salut_n1 img{
	opacity: 0;
	width: 260px;
	animation: salut 4s infinite linear;
}
.rezult .salut_n2 img{
	opacity: 0;
	width: 260px;
	animation: salut 4s 1s infinite linear;
}






.main2{
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main3{
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main4{
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main5{
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main6{
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}
.main7,
.main8,
.main9,
.main10,
.main11,
.main12,
.main13,
.main14,
.main15,
.main16,
.main18,
.main19,
.main20,
.main21 {
	max-width: 450px;
	width: 100%;
	min-height: 100vh;
	background: url(../img/bg_question.jpg) no-repeat center bottom / cover;
	margin: auto;
	position: relative;
	overflow: hidden;
	z-index: 5;
}

.vopros{
	color: #fff;
	font-size: 18px;
	line-height: 1.5em;
	background: rgb(87 120 147 / 30%);
	padding: 30px 20px;
	border-radius: 20px;
	margin: 20px;
	margin-top: 40px;
	position: relative;
	overflow: hidden;
}
.vopros:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	top: 0px;
	left: 0px;
	border-radius: 10px;
	opacity: 0.3;
	z-index: 0;
	background: linear-gradient(to top left, rgba(156, 224, 124, 0.8), rgba(156, 224, 124, 0.2));
}
.vopros:before{
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	background: #fff;
	top: -200px;
	left: -100px;
	opacity: 0.04;
	z-index: 1;
	transform: rotate(35deg);
}
.vopros_title{
	position: relative;
	z-index: 2;
}

.otvet, .otvet2{
	margin: 20px;
	margin-top: 40px;
}
.otvet_btn{
	width: 100%;
	/*background: rgba(255, 255, 255, 0.7);
	border-radius: 20px;*/
	background: url(../img/button_bg.png);
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	padding: 28px 20px;
	position: relative;
	overflow: hidden;
	font-size: 16px;
	display: none;
	text-align: center;
	cursor: pointer;
}
.otvet2{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 6;
}
.otvet_btn_in{
	position: relative;
	z-index: 2;
}

.otvet a{
	text-decoration: none;
	color: #000;
}
.otvet2 .otvet_btn{
	width: 49%;
	margin-right: 1%;
	position: relative;
	padding-left: 35px;
	cursor: pointer;
}
.otvet2 .otvet_btn:before{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 100px;
	border: 2px solid #888;
	top: 20px;
	left: 10px;
}
.otvet2 .otvet_btn.activ:before{
	border: 2px solid #ffffff;
    background: #3d6a7d;
}





.lottie{
	display: none;
}




.m2_planet{
	width: 150px;
	height: 150px;
	margin: auto;
	margin-top: 50px;
	background: url(../img/m2_planet.png) no-repeat center / cover;
	mix-blend-mode: screen;
	animation: planet 7s infinite ease-in-out;
}
.m3_planet{
	width: 150px;
	height: 150px;
	margin: auto;
	margin-top: 50px;
	background: url(../img/m3_planet.png) no-repeat center / cover;
	mix-blend-mode: screen;
	animation: planet 7s infinite ease-in-out;
}
.m4_planet{
	width: 150px;
	height: 150px;
	margin: auto;
	margin-top: 50px;
	background: url(../img/m4_planet_2.png) no-repeat center / cover;
	mix-blend-mode: screen;
	animation: planet 7s infinite ease-in-out;
}
.m5_planet{
	width: 170px;
	height: 170px;
	margin: auto;
	margin-top: 60px;
	background: url(../img/molly.png) no-repeat center / cover;
	margin-bottom: 30px;
}
.voice {
    background: url(../img/m5_planet_voice.png) no-repeat center / cover;
}
.m6_planet{
	width: 220px;
	height: 150px;
	margin: auto;
	margin-top: 50px;
	background: url(../img/m6_planet.png) no-repeat center / cover;
	mix-blend-mode: screen;
	animation: planet 7s infinite ease-in-out;
}
.m7_planet{
	width: 200px;
	height: 150px;
	margin: auto;
	margin-top: 50px;
	background: url(../img/m7_planet.png) no-repeat center / cover;
	mix-blend-mode: screen;
	animation: planet 7s infinite ease-in-out;
}



.green{
	width: 100px;
	height: 200px;
	background: url(../img/green.png) no-repeat left center / 50px;
	mix-blend-mode: screen;
	z-index: 2;
	position: absolute;
	top: 30px;
}


@keyframes btn {
  0% { transform: rotate(0); }
  1%{ transform: rotate(3deg); }
  2%{ transform: rotate(0deg); }
  3%{ transform: rotate(-3deg); }
  4%{ transform: rotate(0); }
  5%{ transform: rotate(3deg); }
  6%{ transform: rotate(0deg); }
  7%{ transform: rotate(-3deg); }
  8%{ transform: rotate(0); }
  100%{ transform: rotate(0); }
}
.btn{
	width: 260px;
	height: 65px;
	border-radius: 100px;
	background: url(../img/button_start.png) no-repeat center;
	background-size: contain;
	position: absolute;
	cursor: pointer;
	left: 50%;
	margin-left: -125px;
	top: 62%;
	z-index: 20;
	animation: btn 5s infinite linear;
	overflow: hidden;
}
.btn_back {
    top: 70%;
}
@keyframes blik {
  0% { left: -10%; }
  20%{ left: 120%; }
  100%{ left: 120%; }
}
.btn:before{
	content: "";
	width: 25px;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	transform: rotate(20deg);
	top: -10px;
	animation: blik 3s infinite linear;
}
/*.btn_back{
    background-image: url(../img/btn_back.png);
}*/
.btn2{
	width: 260px;
	height: 65px;
	border-radius: 100px;
	background: url(../img/button_start.png) no-repeat center;
	background-size: contain;
	cursor: pointer;
	animation: btn 5s infinite linear;
	overflow: hidden;
	display: none;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
}
.btn2:before{
	content: "";
	width: 25px;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	transform: rotate(20deg);
	top: -10px;
	animation: blik 3s infinite linear;
}
.btn_end{
	width: 250px;
	height: 55px;
	border-radius: 100px;
	background: url(../img/btn.png) no-repeat center;
	cursor: pointer;
	animation: btn 5s infinite linear;
	overflow: hidden;
	display: none;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
}
.btn_end:before{
	content: "";
	width: 25px;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	transform: rotate(20deg);
	top: -10px;
	animation: blik 3s infinite linear;
}
.btn_form{
	width: 250px;
	height: 55px;
	border-radius: 100px;
	background: url(../img/btn.png) no-repeat center;
	cursor: pointer;
	animation: btn 5s infinite linear;
	overflow: hidden;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
	font-size: 0;
}
.btn_form:before{
	content: "";
	width: 25px;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	transform: rotate(20deg);
	top: -10px;
	animation: blik 3s infinite linear;
}





@keyframes planet {
  0% { transform: translateY(0); }
  50%{ transform: translateY(10px); }
  100%{ transform: translateY(0); }
}
.planet_1{
	width: 90px;
	height: 90px;
	position: absolute;
	right: 10px;
	top: 20%;
	animation: planet 7s infinite ease-in-out;
	z-index: 2;
}
.planet_1 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_okko.png) no-repeat center / 50px;
	z-index: 2;
}
.planet_1 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_1.png) no-repeat center / cover;
	z-index: 1;
  opacity: 0.6;
}
.planet_2{
	width: 95px;
	height: 95px;
	position: absolute;
	left: 30%;
	margin-left: -55px;
	top: 30%;
	animation: planet 9s infinite ease-in-out;
	z-index: 2;
}
.planet_2 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_szvuk.png) no-repeat center / 60px;
	z-index: 2;
}
.planet_2 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_2.png) no-repeat center / cover;
	z-index: 1;
  opacity: 0.6;
}
.planet_3{
	width: 105px;
	height: 105px;
	position: absolute;
	right: 10px;
    top: 35%;
	animation: planet 12s infinite ease-in-out;
	z-index: 2;
}
.planet_3 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_smarket.png) no-repeat center / 100px;
	z-index: 2;
}
.planet_3 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_3.png) no-repeat center / cover;
	z-index: 1;
    opacity: 0.7;
}
.planet_4{
	width: 99px;
	height: 99px;
	position: absolute;
	right: 30px;
	top: 68%;
	animation: planet 15s infinite ease-in-out;
	mix-blend-mode: screen;
	z-index: 2;
}
.planet_4 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_delivery.png) no-repeat center / 100px;
	z-index: 2;
}
.planet_4 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_4.png) no-repeat center / cover;
	z-index: 1;
    opacity: 0.8;
}
.planet_5{
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 73%;
	animation: planet 8s infinite ease-in-out;
	z-index: 2;
}
.planet_5 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_sapteka.png) no-repeat center / 70px;
	z-index: 2;
}
.planet_5 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_5.png) no-repeat center / cover;
	z-index: 1;
    opacity: 0.8;
}
.logo_prime {
    width: 160px;
    height: 160px;
    position: absolute;
    background: url(../img/logo_praym.png?a72d6) no-repeat center / 130px;
    bottom: 20px;
    left: 50%;
    margin-left: -80px;
    z-index: 2;
}

.planet_6{
	width: 80px;
	height: 80px;
	position: absolute;
	right: 70px;
    top: 48%;
	animation: planet 8s infinite ease-in-out;
	z-index: 2;
}
.planet_6 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_orenb.png) no-repeat center / 70px;
	z-index: 2;
}
.planet_6 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_4.png) no-repeat center / cover;
	z-index: 1;
    opacity: 0.8;
}

.planet_7{
	width: 120px;
	height: 120px;
	position: absolute;
	left: 30px;
	top: 45%;
	animation: planet 8s infinite ease-in-out;
	z-index: 2;
}
.planet_7 .planet_logo{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/logo_sara.png) no-repeat center / 70px;
	z-index: 2;
}
.planet_7 .planet_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../img/planet_5.png) no-repeat center / cover;
	z-index: 1;
    opacity: 0.8;
}

@keyframes star {
  0% { opacity: 0; }
  70%{ opacity: 1; }
  100%{ opacity: 0; }
}
.stars{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
}
.stars .star{
	background: #fff;
	box-shadow: 0px 0px 5px 2px #fff;
	border-radius: 10px;
	position: absolute;
	opacity: 0;
}
.stars .star_n1{
	width: 3px;
	height: 3px;
	top: 20%;
	left: 40%;
	animation: star 5s infinite ease-in-out;
}
.stars .star_n2{
	width: 2px;
	height: 2px;
	top: 60%;
	left: 60%;
	animation: star 2s infinite 2s ease-in-out;
}
.stars .star_n3{
	width: 2px;
	height: 2px;
	top: 30%;
	left: 70%;
	animation: star 3s infinite 2s ease-in-out;
}
.stars .star_n4{
	width: 3px;
	height: 3px;
	top: 50%;
	left: 20%;
	animation: star 2s infinite 3s ease-in-out;
}
.stars .star_n5{
	width: 3px;
	height: 3px;
	top: 70%;
	left: 40%;
	animation: star 4s infinite 6s ease-in-out;
}



@keyframes meteor {
  0% { right: -50%; top:  16%;}
  100%{right: 150%; top: 64%;}
}
.meteor{
	width: 130px;
	height: 60px;
	background: url(../img/meteor.png) no-repeat left center / 130px;
	mix-blend-mode: screen;
	position: absolute;
	top: 16%;
	right: -50%;
	animation: meteor 10s infinite ease-in-out;
	z-index: 1;
	transform: rotate(-5deg);
}

@keyframes meteor2 {
  0% { left: -50%; top:  45%;}
  100%{left: 135%; top: 100%;}
}
.meteor2{
	width: 130px;
	height: 60px;
	background: url(../img/meteor.png) no-repeat left center / 130px;
	mix-blend-mode: screen;
	position: absolute;
	top: 45%;
	left: -50%;
	animation: meteor2 10s 5s infinite ease-in-out;
	z-index: 1;
	transform: rotate(230deg);
}



.form{
	position: relative;
	z-index: 100;
	width: 100%;
	max-width: 350px;
	margin-top: 30px;
	padding: 0px 15px;

}
.form input{
	width: 100%;
	height: 50px;
	border-radius: 5px;
	border: none;
	margin-bottom: 10px;
	padding: 0px 10px;
	box-sizing: border-box;
}

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




.more{
	text-align: center;
	margin-top: 20px;
}
.more p{
	color: #fff;
	font-size: 14px;
}


.itog_text{
	display: none;
}

.btn_error{
	width: 250px;
	height: 55px;
	border-radius: 100px;
	background: url(../img/btn.png) no-repeat center;
	cursor: pointer;
	animation: btn 5s infinite linear;
	overflow: hidden;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
}
.btn_error:before{
	content: "";
	width: 25px;
	height: 80px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	transform: rotate(20deg);
	top: -10px;
	animation: blik 3s infinite linear;
}


.tell_error{
	color: #fff;
	text-align: center;
	font-size: 14px;
	padding: 10px 0px;
}


.pravila_close{
	z-index: 101;
	width: 40px;
	height: 40px;
	background: #050c19;
	opacity: 0.8;
	position: fixed;
	right: 10px;
	top: 10px;
	cursor: pointer;
	display: none;
}
.pravila_close:before{
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
	top: 12px;
	left: 2px;
}
.pravila_close:after{
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	background: #fff;
	transform: rotate(-45deg);
	top: 12px;
	left: 2px;
}
.pravila{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #050c19;
	color: #fff;
	font-size: 14px;
	z-index: 100;
	padding: 20px;
	padding-top: 50px;
	padding-bottom: 50px;	
	overflow: hidden;
	overflow-y: scroll;
	display: none;
}

.pravila .h1{
	font-size: 20px;
	font-weight: 800;
}

.final_info {
  max-width: 380px;
  margin: 0 auto;
  color: #fff;
  font-size: 1.025em;
  text-align: center;
  margin-top: 80px;
}

.itog {
  line-height: 1.2;
  margin-top: 20px;
}