@font-face { font-family: 'ytm'; src: local('Kelson Sans Light RU'), local('KelsonSans-LightRU'), url('/templates/sg/page/spec_ya_gk/fonts/YS-Text-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'PFR'; src: local('Kelson Sans Light RU'), local('KelsonSans-LightRU'), url('/templates/sg/page/spec_ya_gk/fonts/PF/PFReminderPro-Medium.otf') format('opentype'); font-weight: normal; font-style: normal; }

.wrap.material main{ width: 1200px; }
.ya_yo{ font-family: 'Calibri', 'San Francisco', 'Arial Narrow', 'Arial', 'helvetica', sans-serif; background: linear-gradient(#4c93cc, #0e2e63); }
.ya_yo .head{ background-image: url(/templates/sg/page/spec_ya_gk/bg1.png); background-size: contain; height: 360px; position: relative;   z-index: 1;}
.ya_yo .head .logos{ position:absolute; display:grid; grid-template-columns: 1fr 1fr; margin:20px 40px; z-index: 3; }
.ya_yo .head .logos .logo{ background-image: url(/templates/sg/page/spec_ya_gk/logo.png); background-size: contain; background-repeat: no-repeat; width: 400px; height: 60px; }

.ya_yo .head .els{ position: absolute; width: 100%; height: 145px; overflow: hidden;  z-index: 2; }
.ya_yo .head .els .el{ background-image: url(/templates/sg/page/spec_ya_gk/el.png); background-size: contain; background-repeat: no-repeat; width: 180px; height: 180px; position: absolute; }
.ya_yo .head .els .el[num="0"]{ left: -84px; }
.ya_yo .head .els .el[num="1"]{ top: -40px; left: 40px; }
.ya_yo .head .els .el[num="2"]{ top: -32px; left: 135px; }
.ya_yo .head .els .el[num="3"]{ top: 0px; left: 246px; }
.ya_yo .head .els .el[num="4"]{ top: -30px; left: 373px; }
.ya_yo .head .els .el[num="5"]{ top: -74px; left: 476px; }
.ya_yo .head .els .el[num="6"]{ top: -19px; left: 583px; }
.ya_yo .head .els .el[num="7"]{ top: -48px; left: 712px; }
.ya_yo .head .els .el[num="8"]{ top: 0px; left: 850px; }
.ya_yo .head .els .el[num="9"]{ top: -24px; left: 957px; }
.ya_yo .head .els .el[num="10"]{ top: -49px; left: 1074px; }

.ya_yo .head .menu{ position:absolute; display:inline-block; right: 0;margin: 30px 40px; z-index: 999; }
.ya_yo .head .menu a{ color:#fff; text-decoration:none; padding: 0 10px; }
.ya_yo .head .menu a:hover{ color:#003baa; text-decoration:underline; }

.ya_yo .head .t1{ position: absolute; color: #fff; top: 70%; left: 10%; font-family: "PFR"; text-align:center; }
.ya_yo .head .t1:before{ content: ""; background-image: url(/templates/sg/page/spec_ya_gk/list.png); width: 150px; height: 98px; background-position: center; position: absolute; background-size: contain; background-repeat: no-repeat; bottom: -70px; left: 20%; }
.ya_yo .head .t1 .r1{ display: block; font-size: 50px; line-height: 52px; }
.ya_yo .head .t1 .r2{ display: block; font-size: 34px; line-height: 32px; margin-bottom: 10px; color: #ffff1c; }

.ya_yo .head .pack_yo{ position: absolute; width: 50%; height: 400px; bottom: -140px; right: 50px; z-index: 1; }
.ya_yo .head .pack_yo:before{ content: ""; position: absolute; box-shadow: 0px 0px 700px 170px #fff; width: 100px; height: 100px; border-radius: 100px; top: 33%; left: 33%; z-index: 0; }
.ya_yo .head .pack_yo .boxes{ background-image: url(/templates/sg/page/spec_ya_gk/lin.png); background-size: contain; background-repeat: no-repeat; position: absolute; width: 640px; height: 550px; right: -50px; bottom: -114px; z-index: 1; }


.ya_yo .wrapi{ padding-top: 150px; padding-bottom:100px; }
.ya_yo .wrapi .participation{ }
.ya_yo .wrapi .participation h1{ text-align: center; color: #fff; font-size: 30px; line-height: 30px; margin-bottom: 30px; font-family: "PFR"; font-weight: normal; }
.ya_yo .wrapi .participation .steps{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 15px; width: 90%; margin: auto; }
.ya_yo .wrapi .participation .steps .step{ background-image: url(/templates/sg/page/spec_ya_gk/box.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 250px; position: relative; }
.ya_yo .wrapi .participation .steps .step span{ position: absolute; top: 175px; text-align: center; width: 100%; color: #fff; height: 32px; font-size: 14px; line-height: 16px; margin-bottom: 14px; }
.ya_yo .wrapi .participation .steps .step span n{ font-size: 19px; margin-bottom: 10px; display: block; }
.ya_yo .wrapi .participation .steps .step i{ background-size: contain; background-repeat: no-repeat; position: absolute; width: 90%; height:90% }
.ya_yo .wrapi .participation .steps .step i{ font-family: "PFR"; font-weight: normal; position: absolute; color: #fff; padding: 17px; font-size: 24px; }
.ya_yo .wrapi .participation .steps .step:after{ content: ""; position: absolute; width: 100%; height: 130px; top: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; }
.ya_yo .wrapi .participation .steps .step a{ color:#fff; }
.ya_yo .wrapi .participation .steps .step.s1:after{ background-image: url(/templates/sg/page/spec_ya_gk/pach.png); }
.ya_yo .wrapi .participation .steps .step.s2:after{ background-image: url(/templates/sg/page/spec_ya_gk/qr.png?2); }
.ya_yo .wrapi .participation .steps .step.s3:after{ background-image: url(/templates/sg/page/spec_ya_gk/plus.png); }
.ya_yo .wrapi .participation .steps .step.s4:after{ background-image: url(/templates/sg/page/spec_ya_gk/priz.png); }

.ya_yo .wrapi .winners{ margin-bottom: 100px; }
.ya_yo .wrapi .winners h1{ text-align: center; color: #fff; font-size: 30px; line-height: 30px; margin-bottom: 30px; font-family: "PFR"; font-weight: normal; }
.ya_yo .wrapi .winners .title_p{ text-align: center; color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 10px; }
.ya_yo .wrapi .winners .winners_item{ width: 60%; margin: auto; display: grid; text-align: center; margin-bottom: 30px; background: #fff; border-radius: 20px; padding: 15px; }
.ya_yo .wrapi .winners .winners_item i{ padding-bottom: 5px; }
.ya_yo .wrapi .winners .winners_item span{ display: grid; grid-template-columns: 50% 50%; }
.ya_yo .wrapi .winners .winners_item span i{}
.ya_yo .wrapi .winners .winners_item span b{}


.ya_yo .wrapi .questions_answer{ margin-bottom: 100px; }
.ya_yo .wrapi .questions_answer h1{ text-align: center; color: #fff; font-size: 30px; line-height: 30px; margin-bottom: 30px; font-family: "PFR"; font-weight: normal; }
.ya_yo .wrapi .questions_answer .questions{ width: 60%; margin: auto; display: grid; position: relative; }
.ya_yo .wrapi .questions_answer .questions:after{ content: ""; position: absolute; width: 90px; height: 195px; top: -80px; left: -115px; background-image: url(/templates/sg/page/spec_ya_gk/list2.png); background-size: contain; background-repeat: no-repeat; }
.ya_yo .wrapi .questions_answer .questions .question{ position: relative; background: #4580bd; color:#fff; border-radius: 20px; margin-bottom: 10px; padding: 20px 30px; cursor: pointer; }
.ya_yo .wrapi .questions_answer .questions .question:after{ content: ""; background-image: url(/templates/sg/page/spec_ya_gk/arr.png); background-size: contain; background-repeat: no-repeat; position: absolute; width: 20px; height: 14px; right: 30px; top: 28px; }
.ya_yo .wrapi .questions_answer .questions .question .name{}
.ya_yo .wrapi .questions_answer .questions .question .answer{ display:none; font-weight: bold; padding: 20px 0; }
.ya_yo .wrapi .questions_answer .questions .question:focus .answer,
.ya_yo .wrapi .questions_answer .questions .question:active .answer{ display:block; }


.ya_yo .wrapi .footer{ padding-top: 20px; width: 80%; margin: auto; display: grid; border-top: 1px solid #ffffff4d; color:#fff; }
.ya_yo .wrapi .footer p{  }
.ya_yo .wrapi .footer p a{ color:#fff; }

.ya_yo .wrapi .activate{  }
.ya_yo .wrapi .activate h1{ text-align: center; color: #fff; font-size: 30px; line-height: 30px; margin-bottom: 30px; font-family: "PFR"; font-weight: normal; }
.ya_yo .wrapi .activate form{ width: 40%; margin: auto; display: grid; grid-template-columns: 1.3fr 0.7fr; grid-column-gap: 10px;}
.ya_yo .wrapi .activate form input[type="text"]{ padding: 20px; border-radius: 10px; border: none; outline: 0; }
.ya_yo .wrapi .activate form button{ border-radius: 10px; color: #fff; background: linear-gradient(90deg,#ff5c4d,#eb469f 25%,#8341ef 72%,#3f68f9); border: none; cursor: pointer; }


@media screen and (max-width: 900px) {
	.wrap{ padding-top: 40px; max-width: 100%; }
	.wrap.material main{ width: 100% }
	article{ padding: 0; }
	.ya_yo .head{ background-size: cover; }
	.ya_yo .head .logos{ margin-top: 75px; display:block; margin: auto; width: 100%; top: 60px; }
	.ya_yo .head .logos .logo{ background-position: center; display: block; width: 100%; }
	.ya_yo .head .menu{ margin: 20px auto; width: 100%; text-align: center; z-index: 999; }
	.ya_yo .head .t1{ top: 170px; left:30% }
	.ya_yo .head .t1 .r1{ font-size: 30px; line-height: 31px; letter-spacing: 2.1px;}

	.ya_yo .head .pack_yo{ width: 100%; height: 360px; bottom: -210px; right:0px; }
	.ya_yo .head .pack_yo .boxes{ width: 100%; right:0px; bottom: -290px; background-position: 32px center; }
	.ya_yo .head .pack_yo:before{ top: 82%; }



	.ya_yo .wrapi { padding-top: 450px; }
	.ya_yo .wrapi .winners .winners_item{ width: 90%; }
	.ya_yo .wrapi .winners .winners_item span{ grid-template-columns: 70% 30%; }

	.ya_yo .wrapi .participation .steps{ grid-template-columns: 1fr; grid-row-gap: 10px; max-width: 258px; }
	.ya_yo .wrapi .questions_answer .questions{ width: 92%; }
	.ya_yo .wrapi .questions_answer .questions .question{ padding: 20px 20px; }

	.ya_yo .wrapi .footer a{ color:#000; font-weight:bold; }

	.ya_yo .wrapi .activate form{ width: 90%; grid-template-columns: 1.2fr 1fr; }
}