@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%; overflow-y: scroll;}
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 {background:#0b443b; -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; background: #00a3ff;}
a.btn:hover, .btn:hover { background-position: 100% 100%; color: white; }


/*=======Позицинирование========*/
section  {padding:0 15px; position:relative; box-sizing:border-box;  }
.container {max-width:1200px; margin:10px auto; width:100%; display: flex; flex-wrap: wrap; position:relative;}
main {min-height: calc(100vh - 200px);}
article {width:calc(100% - 420px); }
aside {width:360px;}

.sidenote {position:absolute; right:20px; width:320px; font-size:65%; margin-top:15px; line-height:150%;}
.sidenote img {display:block; max-width:80%;}
.sidenote p {margin: 0 0 10px;}

@media screen and (max-width: 1230px) {
    article {width:70%;}
    aside {width:30%; }

    .sidenote {width:230px;}
}

@media screen and (max-width: 860px) {
    article, aside {width:100%;}
    .sidenote {position:static; margin:15px -15px; font-size:90%; padding:15px; background:whitesmoke; width:100%;}
}

/*================== ХЕДЕР  ==========================*/
header, footer {display:flex; justify-content: space-between; align-items:start; border:none; position:relative; padding:20px 4%;}
.hfleft, .hfleft {margin:0; display:flex;}

.logo, .logo:hover { background-repeat:no-repeat; background-position:left center; background-size:contain; background-image: url(../images/mys.png); width:59px; height:78px;}

.menuopener { background-repeat: no-repeat; background-position: 92% center; background-size: 32px; background-image: url(../images/0/menu.svg); padding: 7px 46px 7px 18px; border-radius: 24px; background-color: #e4f5ff; font-size: 16px; color: rgb(64, 64, 64); cursor: pointer; transition: all .1s ease-in; user-select: none; }
.menuopener:hover {background-color: rgba(214, 229, 236, 0.5); transition: all .1s ease-in; }
body.active .menuopener {z-index: 99; background-image: url(../images/0/close.svg); background-color: #ffffff; position:absolute; top:20px; right:4%; color:rgb(128, 128, 128);  }

body.active {overflow-y: hidden;}
body.active header {overflow-y: scroll; position:relative;}
body.active section {overflow-y: scroll;}

menu {margin:0; position: fixed; top: 0; bottom: 0; right: 0; width: 92%; max-width: 600px; background: white; z-index: 98; transform: translateX(100%); transition: transform 0.01s ease; padding:10px 4% ; box-sizing: border-box;  }
body.active  menu { transform: translateX(0);}
.menufon { position: fixed; top: 0; bottom: 0; right: 0; left: 0;  background-color: rgba(46, 46, 55, 0.2); z-index: 97; box-shadow: 0 12px 32px rgba(0, 51, 153, .12), 0 8px 20px rgba(0, 51, 153, .08); display: none; }
body.active .menufon { display: block;}

menu nav.login {padding:18px 50px 20px 10px; }
menu nav.login a {border-bottom:1px dashed;}
.menu nav input {font-family: 'Open Sans', sans-serif; padding:20px 30px; width: calc(100% + 40px); box-sizing: border-box; margin:20px -20px; border:none; outline:none; background-color: rgba(214, 229, 236, 0.5); border-radius:16px; font-size:18px;  }
menu nav .navlink {display:block; padding:20px 10px; border-top:1px dotted rgb(231, 231, 231);  box-sizing: border-box;}
menu nav:nth-child(3) .navlink {border:none;}


@media screen and (max-width: 1300px) {
    header, footer {padding:10px 15px;}
    body.active .menuopener {top:10px; right:15px;}
    menu {max-width: 550px; }
    menu nav.login {padding:8px 50px 20px 0; }
}

@media screen and (max-width: 800px) {
    menu {padding:10px 30px; max-width: 500px; }
    menu nav input {margin:10px -15px; padding:15px; width: calc(100% + 30px);}
    menu nav .navlink {padding:20px 0; }
}

/*================== ГЛАВНАЯ ==========================*/
#maintopblock  {text-align: center; min-height: calc(100vh - 300px); padding:40px 20px 50px; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column;}
.whattype {color:silver; font-size:3vw; font-family: "Montserrat", sans-serif;}
#maintopblock h1 { width:100%; font-size:8vw;  }
#maintopblock p {font-size:2.2vw; color:#313131; text-align: center; }
.mainlink {font-size:4vw; line-height:100%; display:block; padding:50px 0; }

@media screen and (max-width: 800px) {
    #maintopblock {min-height: calc(100svh - 320px); padding:40px 20px;}
    .whattype {font-size:15px;}
    #maintopblock h1 { font-size:32px;  }
    #maintopblock p {font-size:16px; }
}

    
/*================== КУРС ==========================*/
.infocoursewrap { width: 96%; position: relative; display: flex; overflow: hidden; }
.infocourse { text-align: center; padding: 20px; box-sizing: border-box; font-size: 20px; line-height: 100%; margin: 1px; color: #313131; position: relative; z-index: 2; cursor: pointer; width: calc(25% - 2px);}
.infocoursebg {background: #f0f7fb; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; width: 25%; transition: transform 0.25s ease-in-out; transform: translateX(0%); border-radius: 8px;}
.infocourse b {color:#1672c9;}
.mobilestart {display:none;}

@media screen and (max-width: 800px) {
    .infocoursewrap { flex-wrap: wrap; width:100%;}
    .infocourse {width:calc(50% - 2px); padding:10px 5px; font-size: 14px;}
    .infocoursebg {display:none;}
    .mobilestart {display: block; margin:50px 0 0; padding:25px; font-size:32px; text-align: center; color:silver;}
}

#lessonscontainer {margin:15vh auto;}
.allotherlessons {width:100%; margin:0;}
.allotherlessons .lessonwrap:first-child {border-top:none;}

.lessonwrap {width:100%; border-bottom:1px solid #eff1f3; padding:20px 0; }
.lessonwrap:first-child {border-top:1px solid #eff1f3; }
.lessonhead {cursor: pointer; display:flex; align-items: center; justify-content: start; line-height:100%; min-height:50px; position: relative;}
.lessonheadnum {font-size:30px; border-radius:50%; border:1px solid silver; width:60px; height:60px; text-align: center; padding:13px 0; box-sizing: border-box; line-height:100%;}
h2.lessonheadname {font-family: "Montserrat", sans-serif; font-size:32px;  padding:0; margin:20px;}

.lessonheaddop {display:flex; align-items: center; position:absolute; top:28px; right:5px; color:rgb(91, 91, 91);}
.lessonheaddoptime {line-height:100%;}
.lessonheaddopstatus { width:30px; height:30px; position:relative; margin-left:5px; }
.lessonheaddopstatus::after, .lessonheaddopstatus::before {content:""; position:absolute;}
.lessonheaddopstatus::after {top:10px; left:10px; right:10px; bottom:10px; border-radius:50%; background:silver;}
.lessonwrap.closed .lessonheaddopstatus::after {background:none; top:6px; left:8px; right:8px; bottom:6px; border:2px solid silver; border-radius:48%;}
.lessonwrap.closed .lessonheaddopstatus::before {background:silver; top: 13px; left:8px; right:8px; bottom:6px; border-radius:2px;}
.lessonwrap.done .lessonheaddopstatus::after {background:rgb(15, 253, 154);}

.lessonwrap.active .lessonhead {cursor: default;}
.lessonwrap.closed .lessonhead {color:silver;}
.lessonwrap.closed .lessonheadnum {border:1px solid rgb(234, 234, 234);}
.lessonwrap.closed .lessonhead .lessonheaddop{color:silver;}

.lessonbody {display:none;}
.lessonwrap.active .lessonbody {display:block;}
.lessonbody article {margin:30px 0 30px 80px;}

@media screen and (max-width: 800px) {
    #lessonscontainer {margin:20px auto 50px;}
    .lessonhead  {flex-direction: column;     align-items: flex-start;}
    .lessonheadnum {font-size:20px; width:40px; height:40px; padding:9px 0;}
    h2.lessonheadname {font-size:24px; margin:16px 0 0;}
    .lessonheaddop {top:4px; right:0; font-size:14px;}
    .lessonwrap.active .lessonbody {display:block;}
    .lessonbody article {margin:30px 0;}
}


/*================== Интерактив ==========================*/
.testwrap {margin:30px 0; background:rgb(238, 242, 244); padding:30px; border-radius:4px;}
.testwrap textarea {margin: 0 0 20px; min-height:200px;}


/*================== Оплата ==========================*/
.strartwrap {box-shadow: 0 0 30px rgb(196, 198, 200); background:white; border-radius:16px; margin:50px auto; padding:0 20px 30px; text-align:center; width:96%; max-width:480px; position: sticky; bottom: -190px; z-index:20;}
.strartwraphead, .strartwrappoint {margin:0px -20px; padding:10px 20px; }
.strartwraphead {font-family: "Montserrat", sans-serif; font-size:22px; padding:30px 40px; background: rgb(238, 244, 246); border-radius:8px 8px 0 0; margin-bottom:20px;}
.strartwrapbtn {padding:10px 0; }


/*================== СТАТЬЯ ==========================*/
.articleinfo {display:flex; flex-wrap: wrap; margin:10px 0 0;}
.articleinfo > * {display:block; margin:0 5px 5px 0; padding:10px 16px; background:rgb(240, 244, 247); border-radius:8px; font-size:80%; line-height:100%;}

.articleauthor {max-width:300px; background:none; display:flex; flex-direction: column; font-size:75%;}
.authorimg {background-repeat:no-repeat; background-position:left center; background-size:cover; width:64px; height:64px; border-radius: 50%; background-color:rgb(210, 221, 231); margin:10px 0;}


@media screen and (max-width: 800px) {
    .articleauthor { flex-direction:row; max-width:400px; justify-content: space-around; align-items: center;}
    .authordesc {width: calc(100% - 84px); }
    .authorimg {width:48px; height:48px; margin:0; }
}

/*================== ФОРМЫ ==========================*/
label, .label {display:block; text-align:left; margin:12px 0 0; }
label > span, .label > span {display:block; font-size: 13px; color: rgba(0,0,0,0.6); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;}

/*Текстовые инпуты*/
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea, .divtextarea {background:white; padding:14px 15px; width:100%; border-radius:6px; margin:2px 0; font-size:18px; font-weight:400; box-sizing:border-box; outline:none; -webkit-transition:all .1s ease-in; transition:all .1s ease-in; font-family:'Open Sans', sans-serif; min-height:54px; border:none;}

input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, textarea:hover, select:hover, .divtextarea:hover {border:none;}
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus, select:focus, .divtextarea:focus {border:none; outline:none; border:none; -webkit-transition:all .1s ease-in; transition:all .1s ease-in;}

/*Textarea*/
.calctextarea textarea {min-height:250px;}
textarea, .divtextarea {min-width:100%; max-width:100%; font-size: 16px; font-weight:400; line-height:140%;}
input[type="checkbox"],input[type="image"],input[type="radio"] {width: auto;}
input::placeholder,textarea::placeholder {color: #c7c7c7; opacity: 1;	font-weight: 400; line-height:140%; font-family: 'Open Sans', sans-serif; }
	
/*Селекты*/
.select { position: relative; cursor:pointer; margin:2px 0;  }
.select:before {content: ""; position: absolute;  top:0; left:0; right:0; bottom:0; z-index:0; background:white; border-radius: 6px;}
.select:after { content: "";  position: absolute;  right: 14px;  top: 50%; margin-top:-2px; z-index:1; border: 4px solid transparent; border-top: 5px solid rgba(120,120,120,1);}
.select select { position: relative;  background:transparent; padding-right: 25px;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none; z-index:2; overflow:hidden; margin:0;  font-size: 16px;}

/*================== ТИПОГРАФИКА ==========================*/
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:155%; padding-top:0; margin: 3px 0 15px;}
h1, h1.whitelabel input {font-size:44px; }
h2 {font-size:35px; line-height:145%; margin: 60px 0 1px;}
h3 {font-size:23px; line-height:145%; margin: 45px 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; background:rgba(0,0,0,0.04); box-sizing: border-box; }
.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:15px;}
.author, .important, .formula {margin: 25px -15px 8px; border-radius:0; width:auto;}
.btnwrap { margin:20px 0 10px; }
.videowrap {border-radius:8px;}
}

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


/*================== ХЛЕБНЫЕ КРОШКИ ==========================*/
.breadcrumbs {width:100%; box-sizing: border-box; text-align:left; margin:90px 0 40px; padding:10px 5%; line-height:120%; font-size:13px; color:rgba(0,30,50,0.5); background: #f0f7fb; text-align: center;}
.breadcrumbs > span {color:rgba(200, 200, 200, 0.5);}
.breadcrumbs span:first-child a {padding:8px 8px 8px 0;}
.breadcrumbs span a {display: inline-block; text-decoration:none; padding:8px;}
.breadcrumbs span a span {color:rgba(0,30,50,0.75);}

@media screen and (max-width: 800px) {
.breadcrumbs span:first-child a {padding:5px 5px 5px 0;}
.breadcrumbs span a { padding:5px 0;}
}