@font-face {
    font-family: 'Golos Text', sans-serif !important;
    src: url("http://defectologiya.pro/assets/webfonts/GolosText-VariableFont_wght.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-display: swap;
    font-style: normal;
}

@supports (font-variation-settings: normal) {

    body div.df-n * {
        font-family: 'Golos Text', sans-serif;
    }
}

/*Переменные*/
:root {
    --weight-400: 400;
    --weight-450: 450;
    --weight-500: 500;
    --weight-550: 550;
    --weight-600: 600;
    --weight-650: 650;
    --weight-700: 700;
    --weight-750: 750;
    --weight-700: 800;
    --weight-750: 850;
    --weight-700: 900;
}

/*Детали*/
.df-n_defis {
    display: flex;
    gap: 10px;
}

.df-n_defis::before {
    content: '—';
    color: currentColor;
    font-weight: 700;
    display: block;
    position: relative;
}

/*Шрифты*/
.df-n_letter-spacing_plus {
    letter-spacing: .065em;
}

.df-n_letter-spacing_minus {
    letter-spacing: -.025em;
}

.df-n-p_12 {
    font-size: clamp(11px, 1.5vw, 12px);
    line-height: clamp(12px, 1.8vw, 14px);
}

.df-n-p_14 {
    font-size: clamp(13px, 1.6vw, 14px);
    line-height: clamp(14px, 2.2vw, 16px);
}

.df-n-eyebrow {
    font-size: 1rem;
    font-size: clamp(0.7rem, 2vw, 1rem);
    text-transform: uppercase;
    font-weight: var(--weight-400);
    letter-spacing: .065em;
}

h2.df-n-h2,
.df-n-h2 {
    font-size: clamp(1.9rem, 2.2vw, 2.8rem);
    line-height: clamp(1.9rem, 2.2vw, 2.8rem);
    letter-spacing: -.025em;
    font-weight: var(--weight-500);
    margin: 0;
}

.df-n-title-banner {
    color: var(--dfp-color-5);
}

/*Кнопки cо стрелками*/

.df-n_button_text-link {
    display: inline-flex;
    align-items: center;
    color: var(--dfp-color-6);
    font-size: clamp(.75rem, 1.2vw, .875rem);
    font-weight: var(--weight-450);
    border-bottom: 1px dashed var(--dfp-color-6);
    transition: color .2s ease-in-out, border-bottom-color .2s ease-in-out;
    text-wrap: nowrap;
    width: fit-content;
}

.df-n_button_text-link_min {
    color: var(--dfp-color-0);
    font-size: clamp(11px, 1.5vw, 12px);
    line-height: clamp(12px, 1.8vw, 14px);
}

.df-n_button_text-link:hover {
    color: var(--dfp-color-5);
    border-bottom-color: var(--dfp-color-5);
}

.df-n_text-link_arrow,
a.df-n_text-link_arrow,
button.df-n_text-link_arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .875em;
    height: fit-content;
}

.df-n_text-link_arrow::after {
    content: "↓";
    display: inline-block;
    color: currentColor;
    fill: currentColor;
    position: relative;
    font-size: 1.1em;
    font-weight: var(--weight-400);
}

.df-n_text-link_arrow_up::after {
    transform: rotate(225deg);
}

.df-n_text-link_arrow_up-2::after {
    transform: rotate(180deg);
}

.df-n_text-link_arrow_right::after {
    transform: rotate(270deg);
}

.df-n_button_link {
    padding: 1rem;
    border-radius: var(--dfp-radius-3);
    aspect-ratio: 1 / 1;
}

/*Кнопки c плюсами*/

.df-n_button_link_plus {
    will-change: width, height;
    transition: transform .5s ease-in-out;
    -webkit-backface-visibility: hidden;
    /* Chrome, Safari, Opera */
    backface-visibility: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    width: 15px;
    height: 15px;
    transform: translate3d(0, 0, 0);
    outline: 0;
}

.df-n_button_link_plus[aria-expanded="true"] {
    transform: rotate(45deg);
}

.df-n_button_link_plus::after {
    content: "+";
    display: inline-block;
    color: currentColor;
    fill: currentColor;
    position: relative;
    font-size: clamp(1.5rem, 1.6vw, 2rem);
    font-weight: var(--weight-400);
}

/*Кнопки фильтров*/

.df-n_popular-filters,
.df-n_filters-work,
.df-n_filters-retraining {
    margin: 1.2rem 0;
}

.df-n_popular-filters button.active {
    background: var(--dfp-color-1);
    color: var(--dfp-color-5);
    border-color: var(--dfp-color-5);
}

.df-n_popular-filters button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--dfp-color-3);
    border-radius: var(--dfp-radius-3);
    background: var(--dfp-color-2);
    font-size: .875rem;
    color: var(--dfp-color-0);
}

.df-n_popular-filters button:hover {
    background: var(--dfp-color-1);
}

.df-n_filters-work button {
    background: var(--dfp-color-1);
    border: 1px solid transparent;
    padding: .5rem .875rem;
    border-radius: var(--dfp-radius-2);
    transition: all .5s;
}

.df-n_filters-work button.active {
    background: var(--dfp-color-5);
    color: var(--dfp-color-1);
    border-color: var(--dfp-color-5);
}

.df-n_filters-work button:hover {
    background: var(--dfp-color-2);
    border: 1px solid var(--dfp-color-3);
    padding: .5rem .875rem;
}

.df-n_filters-retraining button {
    border: 1px solid transparent;
    padding: .5rem .875rem;
    border-radius: var(--dfp-radius-1);
    transition: all .5s;
}

.df-n_filters-retraining button:hover,
.df-n_filters-retraining button.active {
    border: 1px solid currentColor;
}

button,
summary {
    touch-action: manipulation;
}

/*Кнопки разные и ссылки*/
a {
    transition: all .2s;
}

a.df-n_tel:hover {
    color: var(--dfp-color-20);
}

.df-n_hover_shadow:hover {
    box-shadow: var(--dfp-shadow);
}

.df-n_arrow_circle,
a.df-n_arrow_circle,
button.df-n_arrow_circle {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--dfp-radius-11);
    aspect-ratio: 1/1;
    width: 25px;
    height: 25px;
}

.df-n_arrow_circle-mini {
    width: 20px;
    height: 20px;
}

.df-n_button_blu {
    background: var(--dfp-color-6);
    border: 1px solid var(--dfp-color-1);
    color: var(--dfp-color-1);
    box-sizing: border-box;
}

.df-n_button_blu_w {
    background: var(--dfp-color-2);
    border: 1px solid var(--dfp-color-6);
    color: var(--dfp-color-0);
    box-sizing: border-box;
}

.df-n_button_blu:hover {
    background: var(--dfp-color-5);
    border: 1px solid var(--dfp-color-2);
    color: var(--dfp-color-2);
    box-shadow: var(--dfp-shadow);
}

.df-n_button_blu_w:hover {
    background: var(--dfp-color-3);
    border: 1px solid var(--dfp-color-4);
    color: var(--dfp-color-5);
    box-shadow: var(--dfp-shadow);
}

/* Списки*/
.df-n-list {
    padding-left: 0;
}

.df-n-list li {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: flex-start;
    padding-top: 5px;
}

.df-n-list li::before {
    content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='22' fill='none' class='Group 338' viewBox='0 0 19 22'%3e%3cpath fill='%23fff' stroke='%233E68A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.257' d='M13.494 8.044H1.056a.427.427 0 0 0-.428.427v12.395a.43.43 0 0 0 .43.43h12.437a.43.43 0 0 0 .428-.428V8.472a.43.43 0 0 0-.43-.428' class='Vector'/%3e%3cpath stroke='%233E68A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.257' d='M17.428.628C8.72 10.888 7.136 17.99 7.136 17.99s-1.584-3.946-3.167-5.524' class='Vector'/%3e%3c/svg%3e ");
    display: block;
    position: relative;
    top: -5px;
}

/* Табы*/

.df-n-tab {
    display: flex;
    flex-direction: column;
    gap: .675rem;
}

.df-n-tab button {
    border-bottom: 1px solid var(--dfp-color-6) !important;
    border-radius: 0 !important;
    padding: 2rem;
    display: grid;
    color: var(--dfp-color-6);
    transition: all .2s ease-in-out;
    justify-items: start;
    grid-template-columns: 50px 1fr 25px;
    gap: .675rem;
}

.df-n-tab button>div:first-child {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: var(--weight-650);
    height: fit-content;
    line-height: clamp(1.3rem, 1.6vw, 1.6rem);
}

.df-n-tab button>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    align-items: flex-start;
    font-size: clamp(1.3rem, 1.6vw, 1.6rem);
    font-weight: var(--weight-550);
    line-height: clamp(1.3rem, 1.6vw, 1.6rem);
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: start;
}

.df-n-tab button>div:nth-child(2)>span {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    font-weight: var(--weight-400);
    line-height: clamp(1rem, 1.1vw, 1.1rem);
    color: var(--dfp-color-5);
    transition: color .2s ease-in-out;
}

.df-n-tab button.active>div:nth-child(2)>span {
    color: var(--dfp-color-1);
}

.df-n-tab button>a {
    position: relative;
    left: 10px;
}

.df-n-tab button:hover {
    border-bottom: 1px solid transparent !important;
    border-radius: var(--dfp-radius-2) !important;
    background-color: var(--dfp-color-14) !important;
    color: var(--dfp-color-5);
}

.df-n-tab button a {
    display: none;
}

.df-n-tab button.active a,
.df-n-tab button:hover a {
    display: flex;
}

.df-n-tab button:hover>div:nth-child(2)>span {
    color: var(--dfp-color-5);
}

.df-n-tab button.active {
    border-bottom: 1px solid transparent !important;
    border-radius: var(--dfp-radius-2) !important;
    background-color: var(--dfp-color-6) !important;
    color: var(--dfp-color-1);
    cursor: text;
}

.df-n-tab button.active:hover>div:nth-child(2)>span {
    color: var(--dfp-color-1);
}

.df-n-tab button:has(+ button:hover),
.df-n-tab button:has(+ button.active:hover),
.df-n-tab button:has(+ button.active) {
    border-bottom: 1px solid transparent !important;
}

.df-n-tab button:last-child {
    border-bottom: 0px;
}

/*Гриды*/
.df-n_grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.df-n_grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.df-n_grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/*Карточки курса*/
.df-n_course-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--dfp-radius-2);
    background: var(--dfp-color-1);
    transition: all .2s ease-in-out;
    border: 1px solid var(--dfp-color-3);
    justify-content: space-between;
}

.df-n_course-card:hover {
    background: var(--dfp-color-2);
    border: 1px solid var(--dfp-color-4);
    box-shadow: var(--dfp-shadow-1);
}

.df-n_course-card_top {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--dfp-color-5);
    min-height: 110px;
}

.df-n_course-price {
    border-top: 1px solid var(--dfp-color-5);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .875rem;
    height: 105px;
}

/*Карусели*/

/*Карусель авторов в карточке*/
.df-n_authors-carousel {
    max-width: 190px;
    margin-right: 15px;
}

.df-n_authors-carousel .slick-track {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.df-n_authors-carousel img {
    width: 2.2rem;
    max-width: 2.2rem;
    height: 2.2rem;
    max-height: 2.2rem;
    border: .5px solid var(--dfp-color-4);
    border-radius: 50%;
}

/*Карусель педагогов*/
.df-n_teachers_block {
    padding: 2rem 2rem;
}

.df-n_teachers {
    display: flex !important;
    padding: 0;
    box-sizing: border-box;
}

.df-n_teachers .slick-track {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.df-n_teachers_item {
    margin: 0;
    height: stretch;
}

.df-n_teachers_item-img {
    width: 99%;
    height: auto;
    border-radius: var(--dfp-radius-1);
}

.df-n_teachers>i::before {
    width: 23px;
    height: 23px;
    content: "↓";
    font-style: normal;
    color: var(--dfp-color-5);
    border: 1px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dfp-radius-11);
    position: absolute;
    top: calc(50%);
    cursor: pointer;
    transition: all 0.5s;
    z-index: 1;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background: var(--dfp-color-1);
    left: -23px;
    font-size: 15px;
}

.df-n_teachers>i.active::before,
.df-n_teachers>i:hover::before,
.df-n_teachers>i:focus::before {
    color: var(--dfp-color-1);
    border: 1px solid var(--dfp-color-5);
    background: var(--dfp-color-5);
}

.df-n_teachers>i.right::before {
    left: calc(100% + 4px);
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
}



/*Блоки вопросов с ответами*/
.df-n_questions>div {
    border-bottom: 1px solid var(--dfp-color-6);
    padding-top: .5rem;
    padding-bottom: 1.5rem;
}

.df-n_questions>div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.df-n_questions>div:first-child {
    padding-top: 0;
}

/*Поиск для баннера*/

.df-form_consult input.df-n_form-control {
    padding: 0.675rem 0.675rem 0.675rem 40px;
    margin-left: -20px;
    background-color: var(--dfp-color-2);
}

.df-n_form-control_icon {
    width: 20px;
    height: 20px;
    order: -1;
    position: relative;
    left: 20px;
}

.df-form_consult input.df-n_form-control.input:focus {
    outline: none;
    background-color: var(--dfp-color-1);
}

.df-n_button_search {
    background: var(--dfp-color-3);
    color: var(--dfp-color-13);
    border: 1px solid var(--dfp-color-3);
    border-radius: var(--dfp-radius-2);
    transition: all .5s;
    box-shadow: 0;
    padding: 0.5rem 1rem;

}

.df-n_button_search:hover {
    background: var(--dfp-color-2);
    border: 1px solid var(--dfp-color-4);
}

.df-n_banner_slider {
    min-height: 700px;
}

.df-n_banner_slider>div.slick-list,
.df-n_banner_slider>div.slick-list>div.slick-track,
.df-n_banner_slider>div.slick-list>div.slick-track>section.df-n_banner {
    height: 100%;
}

.df-n_banner {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 700px;
}

/* Документы */

.diploma-art {
    min-width: 0;
}

.diploma-image-button {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 20px 0 100px 12px;
}

.diploma-sheet {
    width: 92%;
    height: auto;
    transform: rotate(-4deg);
    border: 6px solid var(--dfp-color-1);
    box-shadow: 0 12px 25px var(--dfp-color-4);
    border-radius: var(--dfp-radius-1);
}

.diploma-cover {
    position: absolute;
    width: 28%;
    height: auto;
    right: 5px;
    bottom: 29px;
    transform: rotate(7deg);
    box-shadow: 0 6px 18px var(--dfp-color-0);
    border-radius: var(--dfp-radius-1);
}

/* Модальные окна */

.df-n-popap-close {
    box-sizing: content-box !important;
    border-radius: var(--dfp-radius-11);
    padding: 5px;
    order: 2;
    background-color: var(--dfp-color-14) !important;
    will-change: width, height;
    transition: all .5s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    outline: 0;
    transform: rotate(45deg);
    border: 1px solid var(--dfp-color-14) !important;
}

.df-n-popap-close:hover {
    background-color: var(--dfp-color-1) !important;
    border: 1px solid var(--dfp-color-14d) !important;
}

.df-n-popap-close::after {
    content: "+";
    position: relative;
    width: 20px;
    height: 20px;
    font-size: 26px;
    color: var(--dfp-color-5);
    font-weight: 400;
    opacity: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
}

.df-n-popap {
    max-width: 600px !important;
    min-width: 275px;
}
.df-n-popap_max {
    max-width: 75% !important;
    min-width: 275px;
}
.df-n-popap-content {
    border: 0px;
}

/* Адаптив*/
@media (max-width: 1200px) {
    .df-n_grid-3-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 992px) {
    .df-n_grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .df-n_grid-2,
    .df-n_grid-3 {
        grid-template-columns: 1fr;
    }

    .df-n_grid-3-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .df-n-tab {
        gap: .5rem;
    }

    .df-n-tab button {
        padding: 1.3rem;
        gap: .5rem;
        grid-template-columns: 35px 1fr 25px;
    }

    .df-n-tab button>div:nth-child(2) {
        gap: .55rem;
    }

    .df-n_banner_slider,
    .df-n_banner {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .df-n_grid-2 {
        grid-template-columns: 1fr;
    }

    .df-n_banner_slider,
    .df-n_banner {
        min-height: 720px;
    }
    .df-n-popap {
    max-width: 95vw;
    min-width: 95vw;
}
}

@media (max-width: 576px) {
    .df-n_grid-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}