::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #101010;
}
::-webkit-scrollbar-track {
  background: #FFFFFF;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #101010 #FFFFFF;
}



@font-face {
  font-family: "b";
  font-style: normal;
  font-weight: 400;
  src: url("font/b.woff2") format("woff2"), url("font/b.woff") format("woff");
}

@font-face {
  font-family: "r";
  font-style: normal;
  font-weight: 400;
  src: url("font/r.woff2") format("woff2"), url("font/r.woff") format("woff");
}



body {padding: 0; margin: 0; cursor: default; background: #FFFFFF; color: #101010; overflow-x: hidden;}

* {font-family: 'r'; font-size: 15px; line-height: 26px; color: #303030; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-appearance: none;}


h1 {display: inline-block; font-family: 'b'; font-weight: normal; color: #252525; font-size: 60px; line-height: 55px; padding: 0; margin: 0; margin-bottom: 5px;}
h2 {font-family: 'b'; font-weight: normal; color: #101010; font-size: 20px; line-height: 26px; padding: 0; margin: 15px 0 55px;}
@media screen and (max-width: 566px){
h1 {font-size: 45px; line-height: 48px;}
}
@media screen and (max-width: 407px){
h1 {font-size: 40px; line-height: 45px;}
}

.line_black {width: 120px; height: 11px; background: url(line_black.png) no-repeat center; margin: 0px auto 25px;}
.line_white {width: 120px; height: 11px; background: url(line_white.png) no-repeat center; margin: 0px auto 25px;}
.line_yellow {width: 120px; height: 11px; background: url(line_yellow.png) no-repeat center; margin: 0px auto 25px;}



.ymaps-layers-pane {width: 100%; height: 450px; padding: 0; margin: 0;}



html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px; z-index: 200; cursor: default;
}





.b_black {position: relative; top: 0px; left: 0px; padding: 90px 100px; display: block; color: #202020; text-align: left; vertical-align: top;}
.b_white {position: relative; top: 0px; left: 0px; padding: 90px 100px; display: block; color: #FFFFFF; text-align: left; vertical-align: top;}

@media screen and (max-width: 650px){
.b_black, .b_white {padding-left: 50px; padding-right: 50px;}
}





.b_width {display: block; padding: 0 100px;}
@media screen and (max-width: 1370px){
.b_width {display: block; padding: 0 50px;}
}
@media screen and (max-width: 500px){
.b_width {padding: 0;}
}






.luch {display: block; width: 70px; height: 55px; margin: 15px auto 55px; background: url(luch.png) no-repeat center;}

.l6_top {position: absolute; top: 0; left: 0; width: 100%; height: 44px; background:  url(l6_top.png) repeat-x center top; z-index: 1000;}
.l6_bottom {position: absolute; top: 100%; margin-top: -80px; left: 0; width: 100%; height: 44px; background:  url(l6_bottom.png) repeat-x left bottom; z-index: 1000;}
.l6_left {position: absolute; top: 0; left: 0; width: 44px; height: 100%; background:  url(l6_left.png) repeat-y left top; z-index: 1000;}
.l6_right {position: absolute; top: 0; left: 100%; margin-left: -44px; width: 44px; height: 100%; background:  url(l6_right.png) repeat-y right bottom; z-index: 1000;}


.line1 {position: relative; width: 100%; height: 190px; background: url(line1.png) repeat-x center top; z-index: 10;}
.line2 {position: relative; width: 100%; height: 322px; margin-top: -302px; background: url(line0.png) repeat-x left top; transform: scale(-1, 1); z-index: 10;}
.line3 {position: relative; width: 100%; height: 300px; background: url(line1.png) repeat-x center top; transform: scale(-1, 1); z-index: 10;}
.line4 {position: relative; width: 100%; height: 268px; margin-top: -380px; background: url(line4.png) repeat-x left top; z-index: 10;}
.line5 {position: relative; width: 100%; height: 190px; top: 60px; background: url(line1.png) repeat-x center top; transform: scale(-1, 1); z-index: 10;}

@media screen and (min-width: 1921px){
.line1 {background: url(line1.png) no-repeat right top; background-size: cover;}
.line2 {background: url(line0.png) no-repeat left bottom; background-size: cover;}
.line3 {background: url(line1.png) no-repeat left top; background-size: cover;}
.line4 {background: url(line4.png) no-repeat left bottom; background-size: cover;}
.line5 {background: url(line1.png) no-repeat center top; background-size: cover;}
}
@media screen and (max-width: 640px){
.line1 {background: url(line1.png) no-repeat right top; background-size: 1000px 95px;}
.line2 {background: url(line0.png) no-repeat left bottom; background-size: 1000px 161px;}
.line3 {background: url(line1.png) no-repeat left top; background-size: 1000px 95px;}
.line4 {background: url(line4.png) no-repeat left bottom; background-size: 1000px 134px;}
.line5 {background: url(line1.png) no-repeat center top; background-size: 1000px 95px;}
}



/* 1 */
.b1 {padding: 80px 0 0; width: 100%; background: #008AB4 url(b1.jpg) no-repeat left top; text-align: center; color: #FFFFFF;}
.b1 .txt {position: relative; display: block; width: 537px; margin: 70px auto; z-index: 20;}
.b1 .txt .luchi {display: block; width: 170px; height: 93px; margin: 0 auto 40px; background: url(b1_luchi.png) no-repeat center;}
.b1 .txt h1 {font-size: 60px; line-height: 40px; margin-bottom: 35px; padding: 0; color: #FFFFFF;}
.b1 .txt h2 {font-size: 152px; letter-spacing: -2.8px; color: #FFF049; margin: 40px 0;}
.b1 .txt h3 {font-family: 'b'; font-weight: normal; font-size: 35px; line-height: 40px; margin: 80px auto 90px; color: #FFFFFF;}
.b1 .line0 {position: relative; width: 100%; height: 322px; background: url(line0.png) repeat-x right bottom; z-index: 10;}

@media screen and (min-width: 1921px){
.b1 {background: #008AB4 url(b1.jpg) no-repeat center top; background-size: cover;}
.b1 .line0 {background: url(line0.png) no-repeat right bottom; background-size: cover;}
}
@media screen and (max-width: 1599px){
.b1 {background: #008AB4 url(b1.jpg) no-repeat -120px top;}
}
@media screen and (max-width: 1461px){
.b1 {background: #008AB4 url(b1.jpg) no-repeat -180px top;}
}
@media screen and (max-width: 1298px){
.b1 {background: #008AB4 url(b1.jpg) no-repeat -210px top;}
.b1 .txt h2 {font-size: 142px; margin: 45px 0;}
.b1 .txt h3 {margin: 80px auto 90px;}
}
@media screen and (max-width: 1169px){
.b1 {background: #008AB4 url(b1.jpg) no-repeat -700px top;}
.b1 .line0 {background: url(line0.png) repeat-x center bottom;}
}
@media screen and (max-width: 739px){
.b1 .txt h2 {font-size: 122px; margin: 40px 0;}
.b1 .txt h3 {margin: 70px auto 90px;}
}
@media screen and (max-width: 640px){
.b1 .line0 {background: url(line0.png) no-repeat center bottom; background-size: 1000px 161px; margin-top: -120px;}
.b1 {padding: 10px 0 0;}
}
@media screen and (max-width: 620px){
.b1 .txt h1 {font-size: 50px; margin-bottom: 30px;}
.b1 .txt h2 {font-size: 102px; margin: 30px 0;}
.b1 .txt h3 {margin: 55px auto 90px;}
.b1 .txt {width: 74%;}
}
@media screen and (max-width: 486px){
.b1 .txt h1 {font-size: 44px; margin-bottom: 25px;}
.b1 .txt h2 {font-size: 86px; margin: 25px 0; letter-spacing: 0;}
.b1 .txt h3 {font-size: 30px; line-height: 33px; margin: 45px auto 90px;}
}
@media screen and (max-width: 400px){
.b1 .txt h2 {font-size: 62px; margin: 17px 0;}
}







/* 2 */

.b2_starfish {position: relative; top: 0; left: 100%; margin-top: -420px; margin-left: -600px; margin-bottom: -20px; width: 477px; height: 481px; background: url(b2_starfish.png) no-repeat center; z-index: 30;}

.b2 {padding: 0 0 70px; width: 100%; text-align: center; background: #FFFFFF;}
.b2 h1 {display: block; margin: 0px 0 25px; text-align: center;}
.b2 .in {display: block; width: 100%; margin: 0 auto;}
.b2 .blocks {display: inline-block; width: 230px; padding: 0; margin: 40px 3%; text-align: center; vertical-align: top;}
.b2 .blocks .block1 {display: block; width: 210px; height: 210px; background: url(b2_1.png) no-repeat center; margin: 0 auto 20px;}
.b2 .blocks .block2 {display: block; width: 210px; height: 210px; background: url(b2_2.png) no-repeat center; margin: 0 auto 20px;}
.b2 .blocks .block3 {display: block; width: 210px; height: 210px; background: url(b2_3.png) no-repeat center; margin: 0 auto 20px;}
.b2 .blocks .block4 {display: block; width: 210px; height: 210px; background: url(b2_4.png) no-repeat center; margin: 0 auto 20px;}

@media screen and (max-width: 1706px){
.b2_starfish {margin-left: -500px;}
}
@media screen and (max-width: 1521px){
.b2_starfish {margin-left: -430px;}
}
@media screen and (max-width: 1521px){
.b2 .blocks {margin: 40px 2.2%;}
}
@media screen and (max-width: 1409px){
.b2 .in {width: 80%;}
.b2 .blocks {width: 35%; margin: 40px 7%;}
}
@media screen and (max-width: 1391px){
.b2_starfish {margin-left: -350px;}
}
@media screen and (max-width: 1298px){
.b2_starfish {margin-left: -270px;}
}
@media screen and (max-width: 1041px){
.b2_starfish {display: none;}
.b2 {padding-top: 20px;}
}
@media screen and (max-width: 795px){
.b2 .blocks {width: 210px; margin: 40px 7%;}
}
@media screen and (max-width: 779px){
.b2 .blocks {width: 70%; margin: 25px 0;}
.b2 .blocks .block1 {width: 105px; height: 105px; background: url(b2_1.png) no-repeat center; background-size: 105px; margin: 0 auto 12px;}
.b2 .blocks .block2 {width: 105px; height: 105px; background: url(b2_2.png) no-repeat center; background-size: 105px; margin: 0 auto 12px;}
.b2 .blocks .block3 {width: 105px; height: 105px; background: url(b2_3.png) no-repeat center; background-size: 105px; margin: 0 auto 12px;}
.b2 .blocks .block4 {width: 105px; height: 105px; background: url(b2_4.png) no-repeat center; background-size: 105px; margin: 0 auto 12px;}
}
@media screen and (max-width: 640px){
.b2 {padding: 25px 0 20px;}
}
@media screen and (max-width: 631px){
.b2 .blocks {width: 80%; margin: 22px 0;}
}
@media screen and (max-width: 392px){
.b2 .blocks {width: 210px;}
}







/* 3 */
.b3_starfish {position: relative; top: 0; left: 0; margin-top: -230px; margin-left: 130px; margin-bottom: -640px; width: 550px; height: 539px; background: url(b3_starfish.png) no-repeat center; z-index: 30;}

.b3 {padding: 190px 0 360px; width: 100%; height: 500px; text-align: center; background: #008AB4 url(b3.jpg) no-repeat right top; background-size: cover; margin-top: 145px; z-index: 0;}
.b3_in {position: relative; top 0; left: 0; width: 70%; max-width: 1300px; height: 500px; margin: -655px auto 0; z-index: 20;}
.b3 h1 {display: block; margin: 30px 0 25px; text-align: center; color: #FFFFFF;}

@media screen and (max-width: 1919px){
.b3 {background: #008AB4 url(b3.jpg) no-repeat right top;}
}
@media screen and (max-width: 1739px){
.b3_in {width: 80%;}
.b3_starfish {margin-left: 50px;}
}
@media screen and (max-width: 1552px){
.b3_starfish {margin-left: -50px;}
}
@media screen and (max-width: 1396px){
.b3_in {width: 100%; max-width: 1396px;}
}
@media screen and (max-width: 1365px){
.b3_starfish {margin-left: -100px;}
}
@media screen and (max-width: 1350px){
.b3 {background: #008AB4 url(b3.jpg) no-repeat center top;}
}
@media screen and (max-width: 1205px){
.b3_starfish {margin-left: -150px;}
}
@media screen and (max-width: 1131px){
.b3_starfish {margin-left: -220px;}
}
@media screen and (max-width: 997px){
.b3_starfish {display: none;}
.b3 {margin-top: -180px; padding: 209px 0 360px;}
}
@media screen and (max-width: 779px){
.b3 {padding: 179px 0 330px;}
}
@media screen and (max-width: 640px){
.b3 {padding: 100px 0 330px;}
}
@media screen and (max-width: 400px){
.b3 {padding: 100px 0 320px;}
}












/* 4 */
.b4 {position: relative; top: 0; left: 0; padding: 80px 0 90px; width: 100%; text-align: left; background: #FFFFFF url(b4.png) no-repeat right top; z-index: 0;}
.b4 .in {position: relative; top: 0; left: 0; width: 100%;}
.b4 h1 {display: block; margin: 30px 0 25px; text-align: center;}
.b4 h2 {display: block; font-size: 45px; color: #252525; margin: 0; text-align: center;}
.b4 h3 {font-family: 'b'; font-weight: normal; color: #252525; font-size: 23px; line-height: 28px; padding: 0; margin: 23px 0 0;}
.b4 .tble {position: relative; top: 0; left: 0; display: table; width: 100%; margin: 30px auto 0;}
.b4 #tble_yes {position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; z-index: 10;}
.b4 .tble .td_pusto {display: table-cell; width: auto;}
.b4 .tble .td_razdel {display: table-cell; width: 90px;}
.b4 .tble .td1 {display: table-cell; width: 162px; vertical-align: middle;}
.b4 .tble .td2 {display: table-cell; width: 192px; vertical-align: middle;}
.b4 .tble .td3 {display: table-cell; width: 150px; padding: 0 0 0 30px; text-align: center; vertical-align: middle; font-family: 'b'; font-weight: normal; color: #252525; font-size: 30px; line-height: 38px;}

.b4 .tble2 {display: none; text-align: center; width: 100%; margin: 70px auto 0;}
.b4 .tble2 .blocks {display: inline-block; width: 150px; margin: 30px 5%;}
.b4 .tble2 .blocks h2 {font-size: 30px; line-height: 32px; margin-bottom: 23px;}
.b4 .tble2 .blocks h3 {font-size: 21px; line-height: 25px; margin: 3px auto 16px;}
.b4 .tble2 .blocks .circle1 {display: block; width: 20px; height: 20px; margin: 5px auto 30px; background: #C9EBF7; border-radius: 50%;}
.b4 .tble2 .blocks .circle2 {display: block; width: 20px; height: 20px; margin: 5px auto 30px; background: #FEF595; border-radius: 50%;}

@media screen and (max-width: 1727px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 108% center;}
}
@media screen and (max-width: 1628px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 115% center;}
}
@media screen and (max-width: 1411px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 119% center;}
}
@media screen and (max-width: 1331px){
.b4 .tble .td3 {padding-right: 0;}
.b4 {background: #FFFFFF url(b4.png) no-repeat 124% 15px;}
.b4 .tble .td_razdel {width: 70px;}
}
@media screen and (max-width: 1234px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 129% 15px;}
}
@media screen and (max-width: 1147px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 137% 15px;}
}
@media screen and (max-width: 1053px){
.b4 {background: #FFFFFF url(b4.png) no-repeat 142% 15px;}
}
@media screen and (max-width: 1016px){
.b4 {background: #FFFFFF;}
}
@media screen and (max-width: 960px){
.b4 {text-align: center;}
.b4 .in {display: none;}
.b4 .tble2 {display: block;}
}
@media screen and (max-width: 861px){
.b4 .tble2 .blocks {margin: 30px 3%;}
}
@media screen and (max-width: 725px){
.b4 .tble2 .blocks {margin: 30px 2%;}
}
@media screen and (max-width: 684px){
.b4 .tble2 .blocks {width: auto; margin: 30px 3%;}
}
@media screen and (max-width: 640px){
.b4 {padding: 50px 0 35px;}
}
@media screen and (max-width: 540px){
.b4 .tble2 .blocks {display: block; margin: 70px 0;}
}








/* 5 */
.b5 {padding: 200px 0 320px; width: 100%; text-align: center; background: #008AB4 url(b5.jpg) no-repeat center top; background-size: cover; margin-top: -300px; z-index: 0;}
.b5 h1 {display: block; margin: 30px 0 25px; text-align: center; color: #FFFFFF;}
.b5 .in {display: block; width: 900px; margin: 60px auto 0;}
.b5 .blocks {display: inline-block; margin: 23px 15px; width: 170px; padding-top: 80px; text-align: center; vertical-align: top; color: #FFFFFF;}
.b5 .block1 {background: url(b5_1.png) no-repeat center top;}
.b5 .block2 {background: url(b5_2.png) no-repeat center top;}
.b5 .block3 {background: url(b5_3.png) no-repeat center top;}
.b5 .block4 {background: url(b5_4.png) no-repeat center top;}
.b5 .block5 {background: url(b5_5.png) no-repeat center top;}
.b5 .block6 {background: url(b5_6.png) no-repeat center top;}
.b5 .block7 {background: url(b5_7.png) no-repeat center top;}
.b5 .block8 {background: url(b5_8.png) no-repeat center top;}
.b5 .block9 {background: url(b5_9.png) no-repeat center top;}
.b5 .block10 {background: url(b5_10.png) no-repeat center top;}
.b5 .block11 {background: url(b5_11.png) no-repeat center top;}
.b5 .block12 {background: url(b5_12.png) no-repeat center top;}

@media screen and (max-width: 1125px){
.b5 .in {width: 700px;}
}
@media screen and (max-width: 899px){
.b5 .in {width: 500px;}
}
@media screen and (max-width: 640px){
.b5 {padding: 140px 0 290px;}
}
@media screen and (max-width: 540px){
.b5 .in {width: 300px;}
}
@media screen and (max-width: 353px){
.b5 .in {width: 200px;}
}










/* 6 */

.b6_starfish {position: relative; top: 0; left: 0; margin: -250px auto 0; width: 100%; height: 360px; background: url(b6_starfish.png) no-repeat center; z-index: 30;}

.b6 {padding: 150px 0 50px; width: 100%; text-align: center; background: #FFFFFF url(b6.png) no-repeat center; z-index: 0;}
.b6 h1 {display: block; margin: 22px 0 22px; text-align: center;}
.b6 .in {width: 70%; margin: 70px auto 0;}
.b6 .in h2 {font-family: 'b'; font-weight: normal; color: #252525; font-size: 30px; line-height: 35px; padding: 0; margin: 0;}
.b6 .in p {font-size: 0; line-height: 0; padding: 20px 0; margin: 0;}
.b6 .in a {font-family: 'b'; font-weight: normal; color: #252525; font-size: 23px; line-height: 20px; padding: 0; margin: 0;}

@media screen and (max-width: 859px){
.b6 {background: #FFFFFF;}
}
@media screen and (max-width: 640px){
.b6 {padding: 130px 0 20px;}
}












/* 7 */

.b7 {position: relative; top: 0; left: 0; padding: 0; width: 100%; margin-top: -123px; z-index: 0;}












@media only screen and (-webkit-min-device-pixel-ratio: 1.01),
  only screen and (-moz-min-device-pixel-ratio: 1.01),
  only screen and (-o-min-device-pixel-ratio: 1.01/1),
  only screen and (min-device-pixel-ratio: 1.01),
  only screen and (min-resolution: 1.01dppx) {

.line_black {background: url(line_black@1.1.png) no-repeat center; background-size: 120px 11px;}
.line_white {background: url(line_white@1.1.png) no-repeat center; background-size: 120px 11px;}
.line_yellow {background: url(line_yellow.png) no-repeat center; background-size: 120px 11px;}

.b1 .txt .luchi {background: url(b1_luchi@1.1.png) no-repeat center; background-size: 170px 93px;}

.b5 .block1 {background: url(b5_1@1.1.png) no-repeat center top; background-size: 58px 58px;}
.b5 .block2 {background: url(b5_2@1.1.png) no-repeat center top; background-size: 50px 60px;}
.b5 .block3 {background: url(b5_3@1.1.png) no-repeat center top; background-size: 50px 59px;}
.b5 .block4 {background: url(b5_4@1.1.png) no-repeat center top; background-size: 55px 61px;}
.b5 .block5 {background: url(b5_5@1.1.png) no-repeat center top; background-size: 60px 60px;}
.b5 .block6 {background: url(b5_6@1.1.png) no-repeat center top; background-size: 60px 60px;}
.b5 .block7 {background: url(b5_7@1.1.png) no-repeat center top; background-size: 66px 60px;}
.b5 .block8 {background: url(b5_8@1.1.png) no-repeat center top; background-size: 60px 60px;}
.b5 .block9 {background: url(b5_9@1.1.png) no-repeat center top; background-size: 66px 60px;}
.b5 .block10 {background: url(b5_10@1.1.png) no-repeat center top; background-size: 67px 60px;}
.b5 .block11 {background: url(b5_11@1.1.png) no-repeat center top; background-size: 56px 56px;}
.b5 .block12 {background: url(b5_12@1.1.png) no-repeat center top; background-size: 60px 60px;}

}