/*Общие*/
body{background:#FAFAFE;font-family:'Noto Sans', sans-serif;color:var(--ct);font-size:16px;line-height:1.47}
a{text-decoration:none;color:black}
a:hover{text-decoration:none !important;color:var(--c1)}
.btn.focus, .btn:focus,input.focus, input:focus{outline:0;box-shadow:none}
button:focus{outline:none}
main{min-height:60vh}
body.no_scroll{overflow:hidden}
img{max-width:100%}
[data-src]{min-height:2px;min-width:2px}
.stretched-link:before{content:"";position:absolute;width:100%;height:100%;top:0;left:0}
section h2 {font-weight: bold}
section h2 span{color:var(--c1);font-weight:bold}
h1{font-weight:700}
.small {font-size: 0.9rem; line-height: 1rem;font-weight: 100;}
.sticky-top{position:sticky;top:60px}
.hide {display: none}
.p-rel{position: relative}
.rub:after {content: " ₽"; }


/*Кнопки*/
.btn{padding:0.5rem 1.25rem;font-weight: 700; display: inline-flex; transition:all 0.5s 0s;display:inline-flex;gap:0.5rem; border-radius:2rem;border:none;user-select:none}
.btn.lg {padding:0.75rem 3rem; }
.btn.sm {padding:0.25rem 1rem; font-size: 0.9rem;font-weight: unset}

.btn1{color:var(--c1);background: linear-gradient(180deg, #FFE873 5.83%, #FFD43B 113.33%);transition: none}
.btn1:hover{background:var(--c2) !important;}

.btn_link {border-bottom: 1px solid var(--c1);font-weight: 600;color: var(--cd)}


/*Иконки*/
.icon{width: 1.5rem;height: 1.5rem;-webkit-mask:url(img/arrow.svg) no-repeat center/contain;background-color:var(--c1);display:inline-block;margin:auto 0;}
.icon.sm {width: 1rem;height: 1rem;}
.icon.menu{-webkit-mask-image:url(img/menu.svg)}
.icon.filter{-webkit-mask-image:url(img/filter.svg)}


/*Шапка*/
header{position:relative;}
header .menu.main,.head-menu {margin: auto 0;}

/*Логотип*/
.logo {margin: 1rem 0; position: relative; display: flex;gap: 1.25rem; max-width: 400px;}
.logo:hover {text-decoration: none !important;}
.logo img{width:60px;min-width: 60px;height: auto;margin: auto 0}
.logo>span {margin: auto}
.logo .site {color: var(--c1);font-weight: 700;font-size: 30px;display: block;    line-height: 1.2;}
.logo .site span{color: var(--c2)}
.logo .text {color: var(--c1);font-size: 13px; margin-top: 0.25rem;   display: block; line-height: 1.2;}


/*Меню*/
.menu{display:flex;list-style:none;padding:0;margin-bottom: 0;}
.menu li{position:relative}
.menu li a{margin:auto;display:flex;padding:0.5rem 0;font-weight:500; text-transform:uppercase;color: var(--c1)}
.menu li:not(:last-child) a:after{content: "";width:7px; height: 7px; margin: auto 1rem;background-color: var(--c2);border-radius: 7px;}

/*Футер*/
footer { background-color:var(--c1); padding: 2rem 0; color: white; }
footer .menu a,footer a  {color: white}
footer .menu a:hover,footer a:hover {color: white; text-decoration: underline !important;}

footer .menu2 {margin: 30px 0;}
footer .menu2 h3 {font-size: 20px;font-weight: 700; margin-bottom: 20px }
footer .menu2 ul {display: flex;flex-wrap: wrap;gap: 0.2rem;}
footer .menu2 li {width:24% }
footer .menu2 a:after {content: none !important;text-transform: unset}
footer .menu2 a {text-transform: unset;font-size: 15px;font-weight: 400; padding: 0} 

footer .logo .site,footer .logo .text {color: white;}

/*Рейтинг*/
.rating {display: flex; gap: 0.5rem; color: var(--cd)}
.rating .stars {width: 100px; min-width:100px;height: 20px;display: inline-block; -webkit-mask: url(img/star_fill.svg) repeat left/contain;background-color: #ccc;}
.rating .stars span {height: 100%; display: inline-block;-webkit-mask: url(img/star_fill.svg) repeat left/contain;background-color: #00b43e;}

/*Хлебные крошки*/
#breadcrumbs{font-size:14px;margin-bottom:0.5rem}
#breadcrumbs a{border-bottom:1px dotted}

/*Модалки*/
.modal{top:0;left:0;opacity:1;transition:all 0.5s 0s;position:fixed;width:100vw;height:100vh;background-color:rgb(0 0 0 / 60%);display:flex;justify-content:center;margin:auto;z-index:999}
.modal h2{margin-bottom:2rem;font-weight:bold}
.modal_content{position:relative;min-width:300px;max-width:400px;max-height:90%;margin:auto;padding:2.5rem 2rem 2rem;background-color:white;box-shadow:0px 3px 5px rgb(0 0 0 / 25%);border-radius:5px}
.modal_close{position:absolute;right:10px;top:10px;width:20px;height:20px;background:url(img/close.svg) no-repeat center/contain;cursor:pointer}
.modal.hide{opacity:0;pointer-events:none;height:150vh;top:-50vh}
.modal-lg .modal_content{width:95%;max-width:900px;max-height:80%;overflow-y:auto}

/*Загрузка*/
.loading:not(img):not(iframe):not([data-bg]){overflow:hidden; width:30px !important;height:30px;border-radius:100%;-webkit-mask:url(img/loading.svg) no-repeat center/contain; background-color:var(--c1);animation:spin 2s linear infinite;display:block;margin:1rem auto}
img.loading{opacity:0}
img.loaded{opacity:1;transition:all 0.5s 0s}
@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}


/*Блок Баннер*/
#top_banner {color: white;text-align: center;height: 500px;display: flex; background-size: cover; flex-direction: column; justify-content: center}
#top_banner h1 {line-height: 1.5}
#top_banner h1 span {color: var(--c2)}
#top_banner .btn {margin-top: 30px; box-shadow: var(--shadow)}
#top_banner .arrow {transform: rotate(90deg)}

/*Верхняя строка заголовков списка*/
.top-row { font-weight: 600;     margin: 0.5rem 0;   border: 1px solid #e4e6ec; font-size: 0.8rem; text-align: center; width: 100%; display: flex; justify-content: space-between;}
.top-row .school-name {width: 35%;text-align: left}
.top-row>* {width: 14%; padding: 1rem;position: relative }
.top-row>*:not(:last-child){border-right: 1px solid #e4e6ec}
.top-row [data-sort]:after, .top-row [data-sort]:before { content: "▲"; position: absolute; top: 0.75rem; font-size: 0.75rem; color: #b3b3b3; text-align: center; width: 1rem; display: block; right: 0.5rem; }
.top-row [data-sort]:before { right: 0.5rem; text-align: center; top: 1.5rem; transform: scaleY(-1); }
.top-row [data-sort]:hover{cursor: pointer}
.top-row [data-sort]:not(.ASC):not(.DESC):hover:after{color: var(--c1);}
.top-row [data-sort].DESC:after,.top-row [data-sort].ASC:before{color: var(--c1);}
.top-row.mini>* {width: 17%}
.top-row.mini .school-name {width: 35%;}

/*Рейтинг*/
.rating {display: flex; gap: 0.5rem; color: var(--cd)}
.rating .stars {width: 100px; min-width:100px;height: 20px;display: inline-block; -webkit-mask: url(img/star_fill.svg) repeat left/contain;background-color: #ccc;}
.rating .stars span {height: 100%; display: inline-block;-webkit-mask: url(img/star_fill.svg) repeat left/contain;background-color: #fc0;}

/**/
#quote {font-size: 20px}
.quote { background-color: var(--c2); padding: 2rem; border-radius: 10px; position: relative }
.quote:before{content: ""; display: block; -webkit-mask: url('img/quote.svg') no-repeat center/contain; background-color: var(--c1); width: 49px; height: 49px; position: absolute; right: 20px;top: -20px; }
.quote .date {color: #A4A6BA;font-size: 13px; text-align: right}

/*Школа*/
.school {margin-bottom: 1rem}
.school .name {font-size: 1.3rem;font-weight: 600;min-width: 150px;}
.school .top {background-color: white; box-shadow: var(--shadow); display: flex;justify-content: space-between;padding: 1rem;gap: 2rem;}
.school .top>* {margin: auto 0;}
.school .rating-review {display: flex; gap: 1rem;    margin-right: auto !important;}
.school .info { display: flex; gap: 2rem; padding: 1.5rem;border: 1px solid var(--cl);background-color: white}
.school .info .plus-minus,.school .link {min-width: 300px;max-width: 300px; font-size: 0.9rem}
.school .plus-minus>div {font-weight: bold; color: green;margin-bottom: 1rem}
.school .plus-minus>div:nth-child(3){ color: red}
.school h3 {font-size: 20px; opacity: 0.7}
.school .owl-nav {top: -50px !important;width: 120px !important;}
.school .owl-nav button {width: 40px; height: 40px;}


/*Сетка курсов*/
.courses-grid {border: 1px solid var(--cl);}
.courses-grid .col:first-child {margin-top: 0 !important;}

/*Сетка курсов*/
.post_courses { background-color: white; width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid var(--cl); box-shadow: 0 0 0 transparent; transition: all 0.25s 0s; }
.post_courses:hover {box-shadow: var(--shadow); z-index: 99;position: relative}

.post_courses .tag  { font-size: 0.8rem; padding: 0.25rem 0.5rem; position: absolute; top: 0; left: 0; border-radius: 0 0 10px 0; background-color: var(--c2);color: white}
.post_courses .school-name {width: 35% !important;display: flex; padding: 0;position: relative}
.post_courses .school-name .img { min-width: 130px; padding: 0.5rem 1rem; max-width: 130px; height: 100px; margin: auto 0; }
.post_courses .school-name .img img {display: block; object-fit: contain;object-position: center;width: 100%; height: 100%;}
.post_courses .school-name .info {padding: 1rem;text-align: left}
.post_courses .school {opacity: 0.8; font-size: 0.8rem; margin-bottom: 0.25rem}
.post_courses .name {font-weight: 600;margin: 0.5rem 0; line-height: 1.1rem;}
.post_courses>* {width: 14%;margin: auto 0; padding:0.5rem 1rem;text-align: center;}
.post_courses>*:not(:last-child):not(:nth-child(5)) {border-right: 1px solid var(--cl);}

.post_courses .btn {width: auto; margin-right: 1rem; text-align: center; padding: 0.5rem 1rem; justify-content: center;margin: auto 1rem auto 0}
.post_courses.full .btn:before {content: "Подробнее"}
.post_courses.full .btn:after {content: "";width: 15px; height: 15px; -webkit-mask: url('img/arrow.svg') no-repeat center/contain; background-color: var(--c1);    margin: auto 0;}

/*Сетка курсов мини*/
.post_courses.mini {font-size: 0.9rem}
.post_courses.mini>* {width: 17%}
.post_courses.mini .name { font-weight: unset; font-size: 1rem;text-align: left;padding: 1rem}
.post_courses .btn_link {font-size: 0.8rem;    white-space: nowrap;}

/**/
.course-one { margin-bottom: 2rem; border-radius: 10px; color: white; background: linear-gradient(132deg, #0084c4,#4444b8);padding: 2rem}
.course-one .name {font-size: 25px; font-weight: bold; margin-bottom: 1rem;color: white;display: block}
.course-one .img, .course-one img { border-radius: 10px; background-color: white; max-width: 100%; padding: 0.5rem; }
.course-one .btn {border-radius: 10px;margin-top: 20px;}
.course-one .experts {opacity: 0.8;font-size: 1rem}
.course-one .quest span {color: black}
.course-one  .quest:before {background-color: white}

/**/
.quest {display: inline-flex;    position: relative; opacity: 0.7;}
.quest:before {content: "";width: 20px;height: 20px;  background-color: var(--cd); -webkit-mask: url('img/quest.svg') no-repeat center/contain}
.quest span {position: absolute;font-size: 0.9rem; line-height: 1.2; box-shadow: var(--shadow);transition: all 0.5s 0s; bottom:40px;right: -150px; opacity: 0; pointer-events: none;width: 300px; padding: 1rem; background-color: white; border-radius: 5px;}
.quest:hover{opacity: 1}
.quest:hover span {bottom: 30px;opacity:1}

/**/
/*FAQ*/
.faq-b {background-color: var(--cl)}
.faq-b h2, .faq-b h2+p{margin-bottom: 1rem;}
.faq-b .faq-items {display: flex;flex-direction: column-reverse; justify-content: start}
.faq-b .faq-item {margin-bottom: 0.5rem;border-bottom: 1px solid var(--cl)}
.faq-b .faq-item.hide{display: none}
.faq-b .faq-item .name {font-weight: bold; padding: 0 1rem; background-color: white;  font-size: 1.1rem; display: flex; justify-content: space-between}
.faq-b .faq-item .name span {margin: auto 0;}
.faq-b .faq-item .name:after{content: "+";opacity: 0.9; font-size: 30px;color: var(--c1)}
.faq-b .faq-item .name:not(.show):after{content: "-"}
.faq-b .faq-item .text {padding: 1rem;background-color: white;}
.faq-b .faq-item .text.hide{display: none}


/**/
.review-call .call,.review-call .review {background-color: white; box-shadow: var(--shadow);border-radius: 20px; padding: 2rem }
.review-call .review {justify-content: space-between}
.review-call .review h3 {font-size: 20px;}


/*Рейтинг*/
.vote-block {position: relative;display: inline-block;margin-right: 40px;}
.rating-one { margin-top: 10px; }
.vote-block .rating-info {position: absolute; bottom: -20px;left: 42px; font-size: 14px;font-weight: bold; color: #a9a9a9; text-transform: uppercase;}
span.rating-text { position: absolute;top: 5px;right: -40px;}
.vote-block .rating-info { position: absolute;bottom: -20px;left: 42px;font-size: 14px;font-weight: bold;color: #a9a9a9;text-transform: uppercase;}
.vote-block .ratings:hover li {background-image: url("img/star2x.png");}
.rating-block {font-size: 12px;line-height: 40px;display: inline-block;height: 40px;vertical-align: super;margin-right: 10px;}
.vote-block .ratings li {display: block;width: 29px;height: 27px;float: right;text-indent: -9999px;cursor: pointer;margin-bottom: 0px !important;}
.vote-block .ratings li:hover,.vote-block .ratings li:hover ~ li { background-position: 0 -27px;}
.vote-block.disabled .rating li.current {display: block;z-index: 10;}
.vote-block .ratings li.active,
.vote-block .ratings li.active ~ li {background-position: 0 -45px;}
.vote-block li.current { display: none;}
.vote-block ol.ratings.show-current {padding: 0px; }
.vote-block ol.show-current li {cursor: default;z-index: 2;position: relative; border: none; background-color: unset;}
.vote-block ol.show-current li.current {position: absolute;top: 0;left: 0;display: block;width: 100%;z-index: 1;background-position: 0 0;background-repeat: repeat-x;background-image: url("img/star2x.png"); padding: unset;}
.vote-block ol.show-current li.current span {display: block;height: 27px;width: 0;background: inherit;background-position: 0 -54px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .vote-block ol.show-current li.current { background-image: url("img/star2x.png");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .vote-block .ratings:hover li { background-image: url("img/star2x.png");}
}




/*Размеры сетки*/
@media (max-width:1920px){.container{max-width:1160px}}
@media (max-width:1200px){.container{max-width:1160px}}
@media (max-width:1024px){.container{max-width:1024px}}

/*Мобилки*/
@media (max-width:768px){
    /*Шапка*/
    header {display: flex;box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)}
    .btn[data-show=".head-menu"]{margin: auto 0; background-color: var(--c1);width: 40px; height: 40px;padding: 0;    justify-content: center;}
    .btn[data-show=".head-menu"] .icon {background-color: var(--c2);width: 20px ;height: 20px;}
    .head-menu { z-index: 9; position: fixed; top: 0; left: 0; width: 79vw; background-color: white; box-shadow: 0 0 100px; bottom: 0; }
    .head-menu .menu {flex-direction: column}
    .head-menu .menu a {padding: 10px 20px}

    /*Футер*/
    footer {font-size: 0.9rem; }
    footer .menu {flex-wrap: wrap}
    footer .menu2 li {width:100%; }


    /**/
    .post-item{min-height: unset;}

    /**/
    .courses-grid {border: none}
    .post_courses {flex-wrap: wrap;    overflow: hidden; border: 1px solid var(--cl);box-shadow: var(--shadow);}
    .post_courses>* {width: 100%; display: flex; gap: 1rem; padding: 0.25rem 1rem}
    .post_courses .school-name {width: 100% !important;display: block;}
    .post_courses .school-name .img { min-width: unset; padding: 1rem; max-width: unset; margin: auto;    border-bottom: 1px solid var(--cl); }
    .post_courses .tag { left: unset; right: -3rem; top: 2rem; border-radius: 10px; font-size: 12px; transform: rotate(45deg); padding: 0.25rem 2.5rem; }
    .post_courses .label { text-align: left; font-weight: 700; font-size: 0.9rem; display: block; opacity: 1; margin: auto 0; width: 40%; }
    .post_courses .btn {margin: 1rem auto;}

    /**/
    .post_courses.full .btn:before {content: "На сайт курса"}

    /**/
    .post_courses.mini {box-shadow: none;padding: 1rem}
    .post_courses.mini .label {font-size: 12px; opacity: 0.7;}
    .post_courses.mini>* {width: 100% !important;padding: 0 0.5rem!important;display: flex; border: none;text-align: left}
    .post_courses.mini .price {white-space: nowrap;}
    .post_courses.mini .school-name{width: 100% !important;    }
    .post_courses.mini .name{width: 100% !important;padding: 0 !important;}
    .post_courses.mini .days {margin-bottom: 1rem;}

    /**/
    .school .info{display: block}
    .school .top {flex-wrap: wrap;    gap: 1rem;}
    .school .name {width: 55%; min-width: 55%}
    .school .rating-review {width: 35%;display: block}
    .school .plus-minus {margin-top: 1rem}
    .school .owl-nav { top: -50px !important; width: 120px !important; left: unset; top: 0 !important; }

    /**/
    .post_review { display: block}
    .post_review>div {margin-top: 1rem}

    /*Блок Баннер*/
    #top_banner { min-height: 80vh; z-index:1;background-position: center;height: auto;padding: 50px 0;position: relative}
    #top_banner:before{z-index:-1;content: ""; position: absolute; background-color: black; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4;}

    /*Горизонтальная прокрутка блоков на мобиле*/
    .horizon{padding:0!important;overflow-y:hidden;white-space:nowrap;display:block !important;}
    .horizon>div{display:inline-block;width:80% !important;margin-right:0.5rem;white-space:initial;vertical-align:top}



}