@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 400;  src: local(''), url('../fonts/open-sans/open-sans-v29-latin_cyrillic-regular.woff2') format('woff2'); font-display: swap;}
@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 700;  src: local(''), url('../fonts/open-sans/open-sans-v29-latin_cyrillic-700.woff2') format('woff2'); font-display: swap;}

@font-face {font-family: 'Montserrat'; font-style: normal;  font-weight: 700;  src: local(''), url('../fonts/montserrat/montserrat-v24-latin_cyrillic-700.woff2') format('woff2'); font-display: swap;}

@font-face { font-family: 'Material Symbols Rounded';  font-style: normal;  font-weight: 400;  src: local(''),  url(../fonts/icons.woff2) format('woff2'); font-display: swap;}
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;  font-size: 24px;  line-height: 1;  letter-spacing: normal;  text-transform: none;  display: inline-block;  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}

html, body {margin:0; padding:0; scroll-behavior: smooth;}
body {min-height:90vh; font-family: 'Open Sans', sans-serif; font-size: 17px; font-weight:400; line-height:140%; background:#f7fafc;}
h1, h2, h3 {font-family: "Montserrat", sans-serif;}
a {-webkit-transition: all .4s ease-in; transition: all .4s ease-in; color:#0072c4; text-decoration: none;}
a:hover {-webkit-transition: all .4s ease-in; transition: all .4s ease-in;}
iframe {max-width:100%;}
img {max-width:100%;}

@media screen and (max-width: 800px) {
body {font-size: 16px; overflow-x: hidden;}		
}

/*=======Кастомные стили========*/
h1 span, h2 span, .logo span, a.btn, .btn { background: linear-gradient(30deg, #860004, #d73001);}
a.btn, .btn {    background: linear-gradient(30deg, #860004, #d73001);}

h1 span, h2 span, .logo span { -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }
a.btn, .btn { transition: background-position 0.4s ease, transform 0.2s ease; background-size: 100% 200%; cursor: pointer; -webkit-transition: background-position 0.4s ease, transform 0.2s ease; }
a.btn:hover, .btn:hover { background-position: 100% 100%; color: white; }

header, section  {padding:0 8px;  max-width:1200px; position:relative; box-sizing:border-box; margin:0 auto;}
section {margin-bottom:100px;}

@media screen and (max-width: 800px) {
    section {margin-bottom:50px;}
}

/*================== ХЕДЕР  ==========================*/
header {display:flex; justify-content: space-between; align-items:center; border:none; position:relative; min-height:40px;}
.headerleft, .headerright {margin:24px 12px 12px; display:flex; }
.logo, .logo:hover {font-family: "Montserrat", sans-serif; text-decoration:none; color:rgb(140, 147, 151); line-height:100%; font-size:18px; position:relative; background-repeat:no-repeat; background-position:left center; background-size:22px; background-image: url(../images/grib2.svg); padding:8px 2px 10px 30px;}
header .tggo { background-repeat:no-repeat; background-position:left center; background-size:contain; background-image: url(../images/tg.svg); width:38px; height:38px;}
header .tggo:hover {transform: scale(1.1); transition: all .2s ease-in;}

@media screen and (max-width: 800px) {
    header, section  {padding:5px 20px;}
    .headerleft, .headerright {margin:4px 0px 0;}
}

/*================== Главные блоки ==========================*/
section.bentawrap {display:flex; flex-wrap: wrap; }
.bentablock {position:relative; margin:8px; padding:30px 30px 40px; box-sizing: border-box; color:black; text-decoration:none; border-radius: 12px;}
.l1 { width: calc(100% / 12 - 16px); }
.l2 { width: calc(100% / 6 - 16px); }
.l3 { width: calc(100% / 4 - 16px); }
.l4 { width: calc(100% / 3 - 16px); }
.l5 { width: calc((100% / 12) * 5 - 16px); }
.l6 { width: calc(100% / 2 - 16px); }
.l7 { width: calc((100% / 12) * 7 - 16px); }
.l8 { width: calc((100% / 3) * 2 - 16px); }
.l9 { width: calc((100% / 12) * 9 - 16px); }
.l10 { width: calc((100% / 6) * 3 - 16px); }
.l11 { width: calc((100% / 12) * 11 - 16px); }
.l12 { width: calc(100% - 16px); }

@media screen and (max-width: 800px) {
    .bentablock {padding:10px 30px 20px;}
    .l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9, .l0, .l11, .l12 {width:100%; padding:0; margin:0;}
}


/*================== Первый экран  ==========================*/
.bentawrap.topblock {flex-direction: row-reverse; min-height: calc(100vh - 200px); align-content: center; align-items: center;}

.mainblock {padding-top:70px; padding-bottom:90px; background:transparent; padding-left:0; }

.chipswrap {padding:20px 0 10px;}
.chips {display:inline-block; padding:8px 12px; background: #f1f2f5;  border-radius:16px; margin:0 5px 5px 0; font-size:12px; color: #16232e; line-height: 100%;}
.chips span {display:inline-block; vertical-align:middle; margin-right:6px; font-weight:bold; color:rgba(0,0,0,0.5); }

.mainimgblock {position:relative; padding:0; overflow: hidden;}
.mainimgblock::before {content: ""; display: block;  padding-top:75%;}
.mainimgblock .mainimg { background-repeat:no-repeat; background-position:center center; background-size:cover; background-image: url(../images/main.jpg);}

.sticky {position: sticky;	top: 8px;}
.centerblock {text-align: center;}
.headerblock {padding: 30px 0;}
.headerblock h2 {padding:0; margin:0;}

@media screen and (max-width: 800px) {
    .bentawrap.topblock {min-height: calc(100vh - 200px);}
    .mainblock {padding:20px 0 30px; }
    .headerblock {padding:20px 0;}
    .chipswrap {padding:10px 0;}
}


/*================== Слайдер типа сторис на главной  ==========================*/
.carouselslide {position:absolute; top:0; left:0; right:0; bottom:0; display: none; background-repeat:no-repeat; background-position:center 55%; background-size:cover; background-color:silver; }
.carouselslide.active {display: block;}

.carouselnav {position: absolute; bottom: 0px; left: 10px; right: 10px; display: flex; transition: all .2s ease-in;}
.carouselnav div {transition: all .2s ease-in; flex: 1; margin: 5px 1%; position: relative; height: 24px; cursor: pointer;}
.carouselnav div::before {content:''; display: block; position: absolute; top: 12px; bottom: 8px; left: 0;  right:0; background: rgba(250, 250, 250, 0.4);  border-radius: 2px; box-shadow: 0 0 2px rgba(96, 96, 96, 0.1);}
.carouselnav div span {display: block; position: absolute; top: 12px; bottom: 8px; left: 0;  background: rgba(255, 255, 255, 0.75); transition: width 5s linear; width:0%;  border-radius: 2px; }



/*================== Каталог ==========================*/
.onegood { width:calc(100% / 3 - 16px); padding:0; }
.onegoodimg {position:relative; padding:0; overflow: hidden; border-radius: 8px;}
.onegoodimg::before {content: ""; display: block;  padding-top:90%;}
.onegoodimg div {position:absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-position:center center; background-size:cover; transition: all .4s ease-in; }
.onegoodimg:hover div {transition: all .4s ease-in; transform: scale(1.1);}
.onegoodname {font-family: "Montserrat", sans-serif; margin:10px; position:absolute; bottom:0; color:white; }

@media screen and (max-width: 800px) {
    .onegood {width:calc(100%); padding:0; margin:10px 0;}
    .onegoodimg::before {content: ""; display: block;  padding-top:70%;}
}

/*================== Как выглядит обучение ==========================*/
.manyslides { background:rgb(255, 255, 255); min-height:250px; position:relative; border-radius: 8px; box-shadow: 0 0 30px rgb(176, 179, 183);}
.manyslides::before {content: ""; display: block; position:absolute; top:-6px; left:-6px; right:6px; bottom:6px; border-radius: 8px; box-shadow: 0 0 4px rgb(199, 201, 204); background:rgb(255, 255, 255);}
.oneslide {display:none; position:absolute; top:-12px; left:-12px; right:12px; bottom:12px; background-repeat:no-repeat; background-position:center center; background-size:contain; background-color:white; border-radius: 8px; box-shadow: 0 0 4px rgb(199, 201, 204); }
.oneslide.active {display:block;}


.slide {opacity:0.25; padding:20px 4%; cursor:pointer; border-radius:16px;  margin:5px 0;}
.slide.active {opacity:1; box-shadow: 0 0 30px rgb(232, 235, 239); background:white;}
.slide strong {display:block; font-size:18px;}
.slide span {display:block; padding:5px 0;}

@media screen and (max-width: 800px) {
    .manyslides {margin-left:15px;}
    .slidnames {padding:10px 0;}
    .slide {padding:10px 5%;  margin:2px 0;}
    .slide strong {font-size:16px;}
    .slide span {font-size:12px; line-height:140%;}
}


/*================== FAQ ==========================*/
.faqwrap {margin:0 0 20px; padding:0;}
.faqwrap .faq { padding: 20px 5%; margin:10px 0; box-shadow:0 0 30px rgb(223, 224, 226); border-radius:16px; cursor: pointer; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.faq strong { display: block; font-size:19px;}
.faq span { display: block; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; box-sizing: border-box;}
.faq span em {display:block; padding:20px 0 10px; font-style: normal; }
.faq.active span { max-height: 200px; }

@media screen and (max-width: 800px) {

}


/*================== ТИПОГРАФИКА ==========================*/
p {line-height:160%; margin: 25px 0 8px;}
article p img {border-radius:10px;}

li {margin: 8px 0;}
sup {font-size:50%; line-height: 100%;}

h1 {font-weight:700; line-height:135%; padding-top:0; margin: 0 0 15px;}
h1, h1.whitelabel input {font-size:44px; }
h2 {font-size:35px; line-height:145%; margin: 30px 0 1px;}
h3 {font-size:23px; line-height:145%; margin: 25px 0 1px; color:rgba(0,30,100,1);}

.chip {display:inline-block; padding:8px 12px; background: #f8f9fd;  border-radius:12px; margin:0 5px 5px 0; font-size:16px; color: #4b5f71;}
.chip span {display:inline-block; vertical-align:middle; font-size:18px; margin-right:6px; font-weight:bold; color:rgba(0,0,0,0.5); }

.opredelenie {padding:15px 15px 15px 25px; border-left:5px solid #69b5f180; font-size:115%; background:rgba(150,150,150,0.04);}
.important {background:rgba(250,150,150,0.2); padding:30px 30px;}
.formula { padding:70px 40px; font-size:120%; font-weight:600; text-align:center; border-radius:30px; background:rgb(220 235 235 / 50%); font-family: "Montserrat", sans-serif;}
.formula.big {font-size:52px; font-weight:500;}
.author {padding:30px 30px; background:rgba(0,0,0,0.04);}
.author img {max-width:90px; float:right; margin: 0 0 20px 20px;}

.btnwrap { margin:40px 0 20px; }
.btn {display:inline-block;  font-weight:600; text-decoration:none; color:white; box-shadow:0 0 15px rgba(0,0,0,0.1); border-radius:10px; padding:15px 35px; margin:0 5px 5px 0;  font-size:18px; min-width:150px; text-align:center; box-sizing:border-box;}
.btn:hover {box-shadow:0 0 25px rgba(0,0,0,0.2);}

.btn.bigbtn {padding:20px 40px; font-size:20px; border-radius:16px; min-width:250px;}
.btn.smallbtn {font-size:16px;  padding:8px 20px; border-radius:6px; font-weight:500; min-width:auto; }
.btn.whitebtn, .btn.whitebtn:hover {background:white; color:rgba(0,0,0,0.95); box-shadow:0 0 15px rgba(0,0,0,0);}
.btn span {display:inline-block; vertical-align:middle; margin-left:15px; transform: scale(0.75); font-weight:bold; -webkit-transition: all .2s ease-in; transition: all .2s ease-in;}
.btn:hover span {transform: scale(0.8); transition: all .2s ease-in;}

.videowrap {width:100%; position:relative; border-radius:20px; overflow:hidden; margin:0 0 30px;}
.videowrap:before{ content: "";  display: block;  padding-top:56%; }
.videowrap iframe {display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}


.tablewrap {max-width:100%; overflow: auto; margin: 30px 0 10px; border: 1px solid #ddd;  border-radius:6px; overflow: hidden;}
.tablewrap table { width: calc(100% + 2px); border-collapse: collapse; margin:-1px;}
.tablewrap th, .tablewrap td { text-align: left; padding: 12px; border: 1px solid #ddd; }
.tablewrap th { background-color: #f2f2f2; color: #333; padding: 14px 12px;}
.tablewrap tbody tr:hover { background-color: #f5f5f5; }



@media screen and (max-width: 800px) {
h1, h1.whitelabel input{font-size:26px;}
h2 {font-size:22px;}
h3 {font-size:20px;}
.testwrap {margin:10px -15px;}
.formula {padding:50px 20px;  margin:30px 5px;}
.formula.big {font-size:32px;}
.author {padding:20px 20px;}
.author, .important, .formula {margin: 25px -15px 8px; border-radius:0;}
.btnwrap { margin:20px 0 10px; }
}

@media screen and (max-width: 570px) {
.btn {display:block;}
}


footer section {margin-bottom:20px;}