* {
    padding: 0px;
    margin: 0px;
    border: 0px
}

*, *:before, *:after {
    box-sizing: border-box
}

:focus, :active {
    outline: none
}

a:focus, a:active {
    outline: none
}

body {
    font-size: inherit;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input, button, textarea {
    font-family: inherit;
    font-size: inherit
}

button {
    cursor: pointer;
    color: inherit;
    background-color: inherit
}

a {
    color: inherit;
    text-decoration: none;
}

ul li {
    list-style: none
}

img {
    vertical-align: top
}

h1, h3, h3, h4, h5, h6 {
    font-weight: inherit;
    font-size: inherit
}

@media (max-width: 600px) {
    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:focus, textarea {
        font-size: 16px
    }
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-Bold.woff") format("woff"), url("/public/fonts/FiraSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-BoldItalic.woff") format("woff"), url("/public/fonts/FiraSans-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-ExtraBoldItalic.woff") format("woff"), url("/public/fonts/FiraSans-ExtraBoldItalic.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-Italic.woff") format("woff"), url("/public/fonts/FiraSans-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-Medium.woff") format("woff"), url("/public/fonts/FiraSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-MediumItalic.woff") format("woff"), url("/public/fonts/FiraSans-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-Regular.woff") format("woff"), url("/public/fonts/FiraSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-SemiBold.woff") format("woff"), url("/public/fonts/FiraSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FiraSans";
    src: local("☺"), url("/public/fonts/FiraSans-SemiBoldItalic.woff") format("woff"), url("/public/fonts/FiraSans-SemiBoldItalic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "FiraSansCondensed";
    src: local("☺"), url("/public/fonts/FiraSansCondensed-Regular.woff") format("woff"), url("/public/fonts/FiraSansCondensed-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FiraSansCondensed";
    src: local("☺"), url("/public/fonts/FiraSansCondensed-SemiBold.woff") format("woff"), url("/public/fonts/FiraSansCondensed-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "icomoon";
    src: url("/public/fonts/icomoon.eot?fptwap");
    src: url("/public/fonts/icomoon.eot?fptwap#iefix") format("embedded-opentype"), url("/public/fonts/icomoon.ttf?fptwap") format("truetype"), url("/public/fonts/icomoon.woff?fptwap") format("woff"), url("/public/fonts/icomoon.svg?fptwap#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

[class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-attachment-added:before {
    content: ""
}

.icon-paper-clip-svgrepo-com:before {
    content: ""
}

.icon-checkbox-arrow:before {
    content: ""
}

.icon-vk:before {
    content: ""
}

.icon-agency:before {
    content: ""
}

.icon-arrow-down:before {
    content: ""
}

.icon-arrow-right:before {
    content: ""
}

.icon-letter:before {
    content: ""
}

.icon-long-arrow-right:before {
    content: ""
}

.icon-person:before {
    content: ""
}

html {
    --scrollbar-width: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden
}

html:not(.is-mobile,.ua-mac) {
    --scrollbar-width: 17px
}

html.scroll-lock:not(.is-mobile,.ua-mac) {
    padding-right: var(--scrollbar-width)
}

.scroll-lock {
    overflow: hidden
}

body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.section-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: auto
}

.section-container_save {
    padding: 0 var(--container-save-space)
}

.section-container_big {
    max-width: var(--container-max-width-big)
}

.section-container_space, .section-container_space-top {
    padding-top: var(--section-space)
}

.section-container_space, .section-container_space-bottom {
    padding-bottom: var(--section-space)
}

.section-container_big-space, .section-container_big-space-top {
    padding-top: var(--section-space-big)
}

.section-container_big-space, .section-container_big-space-bottom {
    padding-bottom: var(--section-space-big)
}

html {
    --main-color: rgb(31, 176, 230);
    --main-color-light: #B3DFF1;
    --color-primary: black;
    --color-primary-invert: white;
    --color-dimmed: #949EA7;
    --btn-color: #1FB0E6;
    --btn-color-hover: white;
    --btn-border-color: rgb(179, 223, 241);
    --btn-bg-color-hover: rgb(31, 176, 230);
    --btn-active-color: #279ECA;
    --btn-light-color: white;
    --btn-light-color-hover: rgb(31, 176, 230);
    --btn-light-bg-color-hover: white;
    --btn-light-border-color: white;
    --btn-light-blue-border-color-hover: rgb(31, 176, 230);
    --header-title-color: #86949D;
    --remark-color: #86949D;
    --link-color-hover: rgb(31, 176, 230);
    --header-decor-color: #F4F5F6;
    --header-submenu-bg-color: white;
    --submenu-color-hover: white;
    --burger-panel-color: white;
    --burger-panel-bg-color: rgb(31, 176, 230);
    --burger-color: white;
    --footer-bg-color: #293D50;
    --footer-color: white;
    --footer-decor-color: #3E5062;
    --footer-title-color: #949EA7;
    --welcome-block-color: white;
    --slider-thumb-color: #949EA7;
    --slider-thumb-active-color: #1FB0E6;
    --color-service-desc: #70818B;
    --list-bullet-color: #1FB0E6;
    --table-highlight-color: #F4F5F6;
    --error-color: #E02525;
    --input-border-color: #C6D0DA;
    --placeholder-color: #949EA7;
    --disabled-bg-color: #F4F5F6;
    --disabled-color: #C6D0DA;
    --checkbox-thumb-color: #1FB0E6;
    --underline-color: #DEDEDE;
    --last-news-bg-color: #F4F5F6;
    --pagination-btn-hover-color: #F4F5F6;
    --pagination-btn-active-color: #293D50;
    --drawer-bg-color: white;
    --drawer-underlay-color: #293d50a1;
    --cookies-panel-bg-color: #293D50;
    --container-save-space: 20px;
    --min-space: 24px;
    --container-max-width: calc(1250px + var(--container-save-space) * 2);
    --container-max-width-big: calc(1494px + var(--container-save-space) * 2);
    --header-menu-space: 30px;
    --header-colapse: config . $ mbpHeaderColapse;
    --footer-menu-space: 30px;
    --footer-menu-space-vertical: 11px;
    --section-border-radius: 45px;
    --section-space: 25px;
    --section-space-big: 60px;
    --card-border-radius: 11px;
    --table-border-radius: 4px;
    --card-hover-frame-border-radius: 22px;
    --article-section-gap: 26px;
    --input-border-radius: 5px;
    --article-paragraph-gap: 10px;
    --page-pagination-gap-h: 25px;
    --page-pagination-gap-v: 18px;
    --pagination-btn-border-radius: 2px;
    --page-pagination-btn-gap-h: 4px;
    --drawer-border-radius: 11px
}

@media (max-width: 1260px) {
    html {
        --header-menu-space: 28px
    }
}

@media (max-width: 1200px) {
    html {
        --container-max-width: calc(690px + var(--container-save-space) * 2);
        --container-max-width-big: calc(920px + var(--container-save-space) * 2);
        --section-border-radius: 20px;
        --section-space-big: 40px
    }
}

@media (max-width: 768px) {
    html {
        --footer-menu-space-vertical: 8px;
        --section-border-radius: 0;
        --article-section-gap: 20px
    }
}

.tg-btn-cap {
    font-family: FiraSans;
    font-style: italic;
    font-size: 19px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0%
}

@media (max-width: 1200px) {
    .tg-btn-cap {
        font-size: 13px;
        font-weight: 600;
        line-height: 23px
    }
}

@media (max-width: 768px) {
    .tg-btn-cap {
        font-size: 19px;
        line-height: 23px
    }
}

.tg-faq {
    font-size: 19px;
    font-weight: 400;
    line-height: 23px
}

@media (max-width: 1200px) {
    .tg-faq {
        font-size: 15px;
        line-height: 23px
    }
}

@media (max-width: 768px) {
    .tg-faq {
        font-size: 19px;
        line-height: 23px
    }
}

.tg-header-btn-cap {
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    line-height: 18px
}

.tg-h1, .tg-h2 {
    font-size: 37px;
    font-style: italic;
    font-weight: 700;
    line-height: 44.77px
}

@media (max-width: 1200px) {
    .tg-h1, .tg-h2 {
        font-size: 22px;
        line-height: 26.4px
    }
}

@media (max-width: 520px) {
    .tg-h1, .tg-h2 {
        font-size: 28px;
        line-height: 33.6px
    }
}

.section-title {
    margin-bottom: 30px
}

.tg-h3 {
    font-size: 21px;
    font-weight: 600;
    line-height: 25.2px
}

@media (max-width: 1200px) {
    .tg-h3 {
        font-size: 15px;
        line-height: 18px;
        text-align: left
    }
}

@media (max-width: 520px) {
    .tg-h3 {
        font-size: 20px;
        line-height: 24px
    }
}

.tg-regular {
    font-size: 18px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .tg-regular {
        font-size: 14px;
        line-height: 21px
    }
}

@media (max-width: 1200px) {
    .tg-regular_stable {
        font-size: 15px;
        line-height: 143%
    }
}

@media (max-width: 520px) {
    .tg-regular {
        font-size: 17px;
        line-height: 23px
    }
}

.tg-remark {
    font-size: 15px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .tg-remark {
        font-size: 12px;
        line-height: 17.16px
    }
}

@media (max-width: 520px) {
    .tg-remark {
        font-size: 14px;
        line-height: 23px
    }
}

.tg-important {
    font-size: 23px;
    font-style: italic;
    font-weight: 700;
    line-height: 34.5px
}

@media (max-width: 1200px) {
    .tg-important {
        font-size: 18px;
        line-height: 27px
    }
}

@media (max-width: 768px) {
    .tg-important {
        font-size: 18px;
        line-height: 27px
    }
}

.tg-not-important {
    font-size: 15px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .tg-not-important {
        font-size: 13px;
        line-height: 23px
    }
}

.img-wrap {
    display: flex
}

.img-wrap__inner {
    flex: 1 1 auto;
    position: relative;
    left: 0;
    top: 0;
    padding-top: var(--height-ratio, 50%);
    transition: transform .4s
}

.img-wrap img, .img-wrap__item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.img-wrap_top-left img, .img-wrap_top-left .img-wrap__item {
    object-position: top left
}

.img-wrap_cover img, .img-wrap_cover .img-wrap__item {
    object-fit: cover
}

.btn {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 10px;
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: 5px;
    padding: 11px 19px 10px;
    transition: color ease-in-out .3s, background-color .3s, border-color .3s;
    font-style: italic
}

@media (max-width: 1200px) {
    .btn {
        padding: 5px 15px 5px
    }
}

@media (max-width: 768px) {
    .btn {
        padding: 11px 20px 11px
    }
}

.btn:disabled {
    color: var(--disabled-color);
    background-color: var(--disabled-bg-color);
    border-color: var(--disabled-color)
}

.btn:active {
    --btn-bg-color-hover: var(--btn-active-color)
}

@media (any-hover: hover) {
    .btn:not(:disabled):hover {
        color: var(--btn-color-hover);
        background-color: var(--btn-bg-color-hover);
        border-color: var(--btn-border-color-hover)
    }
}

.btn_sm {
    padding: 9px 14px 8px
}

.btn_light {
    --btn-color: var(--btn-light-color);
    --btn-color-hover: var(--btn-light-color-hover);
    --btn-border-color: var(--btn-light-border-color);
    --btn-bg-color-hover: var(--btn-light-bg-color-hover)
}

.btn_light:active {
    --btn-bg-color-hover: var(--btn-light-bg-color-hover)
}

.btn_light-blue {
    --btn-color: var(--btn-light-color);
    --btn-border-color: var(--btn-light-border-color);
    --btn-border-color-hover: var(--btn-light-blue-border-color-hover)
}

.btn__cap {
    text-wrap: nowrap
}

.btn__icon {
    font-size: 19px
}

.btn [class~=icon-arrow-right] {
    position: relative;
    left: 0;
    top: 1px;
    font-size: 12px
}

@media (max-width: 1200px) {
    .btn [class~=icon-arrow-right] {
        font-size: 9px
    }
}

.text-link {
    cursor: pointer;
    transition: color .3s, text-decoration-color .3s, background-color .3s;
    color: currentColor
}

.text-link_underline {
    text-decoration-color: var(--underline-color);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-offset: .1em;
    text-decoration-thickness: .1px
}

.text-link:disabled, .text-link._disabled {
    color: var(--disabled-color)
}

@media (any-hover: hover) {
    a:not(._disabled):hover .text-link, .text-link:not(._disabled,:disabled):hover {
        color: var(--link-color-hover);
        text-decoration-color: var(--link-color-hover)
    }
}

@media (max-width: 768px) {
    .welcome-block {
        --container-save-space: 0
    }
}

.welcome-slider {
    overflow: hidden
}

.welcome-slider__body {
    margin-bottom: 26px;
    display: flex
}

@media (max-width: 1200px) {
    .welcome-slider__body {
        margin-bottom: 16px
    }
}

@media (max-width: 768px) {
    .welcome-slider__body {
        margin-bottom: 24px
    }
}

.welcome-slider__body > * {
    flex: 0 0 100%
}

.welcome-slider__pagination {
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
    align-items: center;
    gap: 18px;
    min-height: 14px;
    border-radius: 2px
}

@media (max-width: 1200px) {
    .welcome-slider__pagination {
        gap: 12.46px
    }
}

@media (max-width: 768px) {
    .welcome-slider__pagination {
        gap: 18px
    }
}

.welcome-slider__thumb {
    width: 12px;
    height: 13px;
    background-color: var(--slider-thumb-color);
    cursor: pointer;
    transition: background-color .3s
}

.welcome-slider__thumb._active {
    background-color: var(--slider-thumb-active-color)
}

@media (max-width: 1200px) {
    .welcome-slider__thumb {
        width: 8px;
        height: 9px;
        border-radius: 1.5px
    }
}

@media (max-width: 768px) {
    .welcome-slider__thumb {
        width: 12px;
        height: 13px;
        border-radius: 2px
    }
}

.welcome-slide {
    color: var(--welcome-block-color);
    display: grid;
    border-radius: var(--section-border-radius);
    overflow: hidden;
    cursor: grab
}

@media (max-width: 768px) {
    .welcome-slide {
        align-content: end;
        align-items: end
    }
}

.welcome-slide__bg {
    position: relative;
    left: 0;
    top: 0;
    z-index: 0;
    --height-ratio: 35.2%;
    grid-column: 1/span 1;
    grid-row: 1/span 1
}

@media (max-width: 1260px) {
    .welcome-slide__bg {
        --height-ratio: 37.96%
    }
}

.welcome-slide__bg::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(31, 176, 230, 0.7) 40%, rgba(31, 176, 230, 0.2) 70%, rgba(0, 212, 255, 0) 100%)
}

@media (max-width: 768px) {
    .welcome-slide__bg::after {
        background: linear-gradient(0deg, rgba(31, 176, 230, 0.7) 40%, rgba(31, 176, 230, 0.2) 70%, rgba(0, 212, 255, 0) 100%)
    }
}

@media (max-width: 768px) {
    .welcome-slide__bg {
        --height-ratio: 60%
    }
}

@media (max-width: 520px) {
    .welcome-slide__bg {
        --height-ratio: 138.66%
    }
}

.welcome-slide__inner {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    grid-column: 1/span 1;
    grid-row: 1/span 1;
    max-width: 1040px;
    width: 100%;
    margin: auto;
    padding: 40px
}

@media (max-width: 1200px) {
    .welcome-slide__inner {
        padding-left: 165px
    }
}

@media (max-width: 768px) {
    .welcome-slide__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 10px 30px;
        margin: 0
    }
}

.welcome-slide__title {
    font-size: 45px;
    font-weight: 800;
    font-style: italic;
    line-height: 54px;
    margin-bottom: 17px
}

@media (max-width: 1260px) {
    .welcome-slide__title {
        font-size: 22px;
        line-height: 26.4px;
        margin-bottom: 8px
    }
}

@media (max-width: 768px) {
    .welcome-slide__title {
        font-size: 30px;
        font-weight: 600;
        line-height: 36px;
        text-align: center;
        margin-bottom: 20px
    }
}

.welcome-slide__subtitle {
    font-family: FiraSans;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 30px;
    max-width: 540px
}

@media (max-width: 1260px) {
    .welcome-slide__subtitle {
        font-size: 13px;
        line-height: 15.6px;
        margin-bottom: 20px;
        max-width: 280px
    }
}

@media (max-width: 768px) {
    .welcome-slide__subtitle {
        font-size: 17px;
        line-height: 23px;
        text-align: center;
        margin-bottom: 28px
    }
}

.services__title {
    margin-bottom: 24px
}

@media (max-width: 1200px) {
    .services__title {
        margin-bottom: 18px
    }
}

.services__body {
    display: grid;
    gap: 12px 44px;
    grid-template-columns:repeat(3, 1fr);
    margin-bottom: 10px
}

.services__body_thick {
    grid-template-columns:repeat(4, 1fr);
    gap: 12px 24px
}

@media (max-width: 1440px) {
    .services__body_thick {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 1200px) {
    .services__body {
        grid-template-columns:repeat(2, 1fr);
        gap: 0px 16px
    }
}

@media (max-width: 520px) {
    .services__body {
        grid-template-columns:1fr
    }
}

.service-card {
    --height-ratio: 52.44%;
    --padding: 18px;
    --img-margin-bottom: 30px;
    padding: var(--padding);
    margin: 0 calc(var(--padding) * -1)
}

@media (max-width: 1200px) {
    .service-card {
        --padding: 12px;
        --img-margin-bottom: 16px
    }
}

.service-card__inner {
    position: relative;
    left: 0;
    top: 0;
    padding-bottom: 8px
}

.service-card__spacer {
    content: "";
    display: inline-block;
    width: 100%;
    padding-top: calc(var(--height-ratio));
    margin-bottom: var(--img-margin-bottom)
}

.service-card__img-wrap {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--spacer-height);
    width: 100%;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    z-index: -1;
    transition: left .3s, top .3s, width .3s, height .3s
}

.service-card__img-wrap::after {
    content: "";
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(31, 176, 230, 0.7) 40%, rgba(31, 176, 230, 0.2) 70%, rgba(0, 212, 255, 0) 100%);
    opacity: 0;
    transition: opacity .3s
}

.service-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.service-card__title {
    margin-bottom: 13px;
    transition: color .2s;
    text-decoration-line: underline;
    text-decoration-thickness: .1px;
    text-underline-offset: .2em;
    text-decoration-color: var(--color-dimmed)
}

@media (max-width: 1200px) {
    .service-card__title {
        margin-bottom: 9px
    }
}

.service-card__desc {
    color: var(--color-service-desc);
    transition: color .3s
}

@media (any-hover: hover) {
    .service-card:hover {
        color: var(--color-primary-invert)
    }

    .service-card:hover .service-card__desc {
        color: var(--color-primary-invert)
    }

    .service-card:hover .service-card__img-wrap {
        left: calc(var(--padding) * -1);
        top: calc(var(--padding) * -1);
        width: calc(100% + var(--padding) * 2);
        height: var(--card-height)
    }

    .service-card:hover .service-card__img-wrap::after {
        opacity: 1
    }

    .service-card:hover .service-card__img {
        filter: grayscale(1)
    }
}

.news {
    color: var(--color-primary-invert)
}

.news__container {
    position: relative;
    left: 0;
    top: 0;
    border-radius: var(--section-border-radius);
    background-color: var(--main-color);
    overflow: hidden;
    z-index: 0
}

.news__inner {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1
}

.news__decor {
    position: absolute;
    left: -300px;
    bottom: 74px;
    width: 986px;
    height: 500px;
    z-index: 0
}

@media (max-width: 1200px) {
    .news__decor {
        display: none
    }
}

.news__title {
    margin-bottom: 12px
}

.news__body {
    display: grid;
    grid-template-columns:4.8fr 8.2fr;
    align-items: start;
    align-content: start;
    gap: 0 80px;
    margin-bottom: 12px
}

@media (max-width: 1200px) {
    .news__body {
        gap: 26px 40px;
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 768px) {
    .news__body {
        gap: 12px;
        grid-template-columns:1fr
    }
}

.news__body > *:first-child {
    grid-column: 1/span 1;
    grid-row: 1/99
}

@media (max-width: 1200px) {
    .news__body > *:first-child {
        grid-column: 1/span 3;
        grid-row: 1/span 1
    }
}

@media (max-width: 768px) {
    .news__body > *:first-child {
        grid-column: 1/span 1;
        grid-row: 1/span 1
    }
}

.news__body > *:nth-child(n+2) {
    grid-column: 2/span 1;
    justify-self: end
}

.news__body > *:nth-child(n+2):not(:last-child) {
    margin-bottom: 18px
}

@media (max-width: 1200px) {
    .news__body > *:nth-child(n+2) {
        grid-column: auto/span 1
    }
}

.news-card {
    --height-ratio: 51.24%;
    --padding: 18px;
    padding: var(--padding);
    margin: 0 calc(var(--padding) * -1);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--card-hover-frame-border-radius);
    transition: border-color .3s
}

@media (max-width: 520px) {
    .news-card {
        --padding: 10px
    }
}

.news-card_main {
    max-width: calc(440px + var(--padding) * 2)
}

@media (max-width: 1200px) {
    .news-card_main {
        max-width: 720px
    }
}

@media (max-width: 768px) {
    .news-card_main {
        max-width: none
    }
}

.news-card:not(.news-card_main) {
    max-width: 750px
}

@media (max-width: 768px) {
    .news-card:not(.news-card_main) {
        max-width: none
    }
}

.news-card__inner {
    display: grid;
    align-items: start
}

@media (max-width: 1200px) {
    .news-card_main .news-card__inner {
        gap: 34px;
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 520px) {
    .news-card_main .news-card__inner {
        gap: 12px;
        grid-template-columns:1fr
    }
}

.news-card__img-wrap {
    border-radius: var(--card-border-radius);
    overflow: hidden
}

.news-card_main .news-card__img-wrap {
    margin-bottom: 35px
}

@media (max-width: 1200px) {
    .news-card_main .news-card__img-wrap {
        margin-bottom: 0
    }
}

.news-card:not(.news-card_main) .news-card__inner {
    grid-template-columns:minmax(236px, 2.4fr) 4.6fr;
    gap: 24px
}

@media (max-width: 1200px) {
    .news-card:not(.news-card_main) .news-card__inner {
        grid-template-columns:1fr;
        gap: 12px
    }
}

@media (max-width: 768px) {
    .news-card:not(.news-card_main) .news-card__inner {
        gap: 34px;
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 520px) {
    .news-card:not(.news-card_main) .news-card__inner {
        gap: 12px;
        grid-template-columns:1fr
    }
}

.news-card__date {
    color: var(--main-color-light);
    margin-bottom: 7px
}

.news-card__title {
    margin-bottom: 12px;
    text-decoration: underline;
    text-underline-offset: .1em;
    text-decoration-thickness: .01em
}

.news-card__desc {
    display: -webkit-box;
    max-height: 100px;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 520px) {
    .news-card__desc {
        line-clamp: 3;
        -webkit-line-clamp: 3
    }
}

@media (any-hover: hover) {
    .news-card:hover {
        border-color: var(--main-color-light)
    }
}

.important__body {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 40px
}

@media (max-width: 1200px) {
    .important__body {
        gap: 24px
    }
}

@media (max-width: 520px) {
    .important__body {
        grid-template-columns:1fr;
        gap: 32px
    }
}

.important-card {
    display: grid;
    grid-template-columns:1fr 4.5fr;
    gap: 36px;
    align-items: center
}

@media (max-width: 1200px) {
    .important-card {
        grid-template-columns:1fr 3fr;
        gap: 14px
    }
}

@media (max-width: 520px) {
    .important-card {
        grid-template-columns:1fr;
        gap: 16px
    }
}

.important-card__img-wrap {
    --height-ratio: 100%
}

@media (max-width: 520px) {
    .important-card__img-wrap {
        width: 76px
    }
}

.important-card__title {
    text-underline-offset: .1em
}

@media (max-width: 520px) {
    .important-card__title {
        max-width: 420px
    }
}

.feedback__container {
    position: relative;
    left: 0;
    top: 0;
    border-radius: var(--section-border-radius);
    background-color: var(--footer-bg-color);
    overflow: hidden
}

.feedback__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

@media (max-width: 1200px) {
    .feedback__bg {
        display: none
    }
}

.feedback__body {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns:2.72fr 2.11fr;
    gap: 40px;
    justify-content: space-between;
    align-items: start
}

@media (max-width: 520px) {
    .feedback__body {
        grid-template-columns:1fr;
        gap: 30px
    }
}

.feedback-card {
    color: var(--color-primary-invert);
    display: grid;
    grid-template-columns:3.4fr 2.4fr;
    gap: 34px
}

.feedback-card:first-child {
    --height-ratio: 77.24%
}

.feedback-card:nth-child(2) {
    --height-ratio: 99.53%
}

.feedback-card__img-wrap {
    border-radius: var(--card-border-radius);
    overflow: hidden
}

.feedback-card__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 26.4px;
    margin-bottom: 18px
}

@media (max-width: 1200px) {
    .feedback-card__title {
        font-size: 16px;
        line-height: 19.2px
    }
}

@media (max-width: 768px) {
    .feedback-card__title {
        font-size: 22px;
        line-height: 26.4px
    }
}

@media (max-width: 1200px) {
    .feedback-card {
        grid-template-columns:1fr;
        gap: 18px
    }
}

.faq .faq__body, .faq .faq__column {
    display: grid;
    gap: 16px 56px
}

@media (max-width: 768px) {
    .faq .faq__body, .faq .faq__column {
        gap: 18px
    }
}

.faq__body {
    grid-template-columns:1fr 1fr;
    margin-bottom: 50px
}

@media (max-width: 1200px) {
    .faq__body {
        grid-template-columns:1fr;
        margin-bottom: 30px
    }
}

@media (max-width: 768px) {
    .faq__body {
        margin-bottom: 40px
    }
}

.faq__footer {
    display: grid;
    justify-content: start;
    grid-auto-flow: column;
    gap: 14px
}

@media (max-width: 768px) {
    .faq__footer {
        grid-auto-flow: row;
        gap: 10px
    }
}

section {
    position: relative;
    left: 0;
    top: 0
}

.section-decor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 682px;
    overflow: hidden;
    z-index: -1
}

.section-decor > img {
    content: "";
    position: absolute;
    width: 1344px;
    height: 100%;
    background-size: contain
}

.section-decor_left-top > img {
    left: -770px;
    top: 40px
}

.section-decor_mid {
    top: 40%
}

.section-decor_mid > img {
    left: -600px
}

.ul-item, .article-ul > li {
    display: inline-grid;
    grid-template-columns:auto 1fr;
    gap: .8em;
    max-width: 1200px
}

.ul-item::before, .article-ul > li::before {
    content: "";
    border-radius: 2px;
    background-color: var(--list-bullet-color);
    width: 6px;
    height: 7px;
    position: relative;
    top: .35em;
    left: 0
}

@media (max-width: 1200px) {
    .ul-item::before, .article-ul > li::before {
        width: 5px;
        height: 5px
    }
}

@media (max-width: 768px) {
    .ul-item::before, .article-ul > li::before {
        width: 6px;
        height: 7px
    }
}

.article-ol, .article-ul {
    display: grid;
    gap: 10px
}

.article-ol {
    counter-reset: item
}

.article-ol > li {
    list-style-type: none;
    counter-increment: item;
    display: inline-grid;
    grid-template-columns:auto 1fr;
    gap: .8em;
    max-width: 1200px
}

.article-ol > li::before {
    content: counter(item) ".";
    color: var(--main-color);
    font-size: 18px;
    line-height: 27px;
    font-weight: 900
}

.article-ol .article-ol {
    counter-reset: subitem;
    margin-left: 30px
}

.article-ol .article-ol > li {
    counter-increment: subitem
}

.article-ol .article-ol > li::before {
    content: counter(item) "." counter(subitem) "."
}

.article-ul .article-ul {
    margin-left: 30px
}

.list-item-wrap {
    display: inline-grid
}

.y-map {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 71.42%;
    border-radius: var(--card-border-radius);
    overflow: hidden
}

.y-map iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.article {
    font-size: 18px;
    font-weight: 400;
    line-height: 27.13px
}
.article p a {
	text-decoration: underline;
	text-underline-offset: .1em;
}
	.article p a:hover{
		color: var(--link-color-hover);
	}

@media (max-width: 1200px) {
    .article {
        font-size: 14px;
        line-height: 21px
    }
}

@media (max-width: 768px) {
    .article {
        font-size: 14px;
        line-height: 21px;
        text-align: left
    }
}

.article__header {
    margin-bottom: 40px
}

@media (max-width: 1200px) {
    .article__header {
        margin-bottom: 25px
    }
}

@media (max-width: 768px) {
    .article__header {
        margin-bottom: 30px
    }
}

.article h1 {
    font-size: 37px;
    font-style: italic;
    font-weight: 700;
    line-height: 44.4px;
    margin-bottom: 24px
}

@media (max-width: 1200px) {
    .article h1 {
        font-size: 22px;
        line-height: 26.4px
    }
}

@media (max-width: 768px) {
    .article h1 {
        font-size: 28px;
        line-height: 33.6px;
        margin-bottom: 20px
    }
}

.article h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 10px
}

@media (max-width: 1200px) {
    .article h2 {
        font-size: 18px;
        line-height: 27px
    }
}

@media (max-width: 768px) {
    .article h2 {
        font-size: 22px;
        line-height: 33px
    }
}

.article h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 10px
}

@media (max-width: 1200px) {
    .article h3 {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px
    }
}

@media (max-width: 768px) {
    .article h3 {
        font-size: 22px;
        line-height: 33px
    }
}

.article h4, .article h5, .article h6, .article table caption {
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    margin-bottom: 10px
}

@media (max-width: 1200px) {
    .article h4, .article h5, .article h6, .article table caption {
        font-size: 14px;
        font-weight: 600;
        line-height: 24px
    }
}

@media (max-width: 768px) {
    .article h4, .article h5, .article h6, .article table caption {
        font-size: 14px;
        line-height: 21px
    }
}

.article h5, .article h6 {
    color: var(--remark-color)
}

.article p:not(:last-child), .article .article-img-set:not(:last-child) {
    margin-bottom: var(--article-paragraph-gap)
}

.article__section:not(:last-child) {
    margin-bottom: var(--article-section-gap)
}

.acticle-block:not(:last-child) {
    margin-bottom: 20px
}

.article-important {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 36px
}

.article-important::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    background-color: var(--main-color)
}

.article-remark {
    font-style: italic;
    color: var(--remark-color)
}

.article-img {
    --height-ratio: 51.47%;
    display: inline-grid;
    gap: 10px
}

.article-img_self-size {
    width: 45%
}

.article-img_full-size {
    width: 100%
}

.article-img figcaption {
    font-style: italic;
    color: var(--remark-color);
    font-size: 15px;
    line-height: 23px
}

.article-img_float-right {
    float: right;
    margin-left: 22px;
    margin-bottom: 12px
}

.article-img_float-left {
    float: left;
    margin-right: 30px;
    margin-bottom: 12px
}

@media (max-width: 768px) {
    .article-img_float-right, .article-img_float-left {
        float: none;
        margin: 0;
        width: 100%
    }

    .article-img_float-right:not(:last-child), .article-img_float-left:not(:last-child) {
        margin-bottom: 10px
    }
}

.article-img-set {
    display: grid;
    grid-template-columns:repeat(2, 45%);
    gap: 32px
}

@media (max-width: 768px) {
    .article-img-set {
        grid-template-columns:1fr;
        gap: 10px
    }
}

.breadcrubs {
    padding: 50px 0px 40px;
    color: var(--remark-color)
}

@media (max-width: 1440px) {
    .breadcrubs {
        padding: 5px 0px 20px
    }
}

@media (max-width: 768px) {
    .breadcrubs {
        padding: 5px 0px 10px
    }
}

.breadcrubs__inner {
    display: inline-flex;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-top: -10px
}

.breadcrubs__inner > * {
    margin-left: 16px;
    margin-top: 10px
}

.article-table {
    width: 100%;
    text-align: left;
    border-spacing: 0
}

.article-table caption {
    text-align: left
}

.article-table th, .article-table td {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding: 7px 20px;
    min-width: 130px
}

@media (max-width: 1200px) {
    .article-table th, .article-table td {
        font-size: 14px;
        line-height: 21px;
        padding: 5.5px 16px 6
    }
}

.article-table th:first-child, .article-table td:first-child {
    border-top-left-radius: var(--table-border-radius);
    border-bottom-left-radius: var(--table-border-radius)
}

.article-table th:last-child, .article-table td:last-child {
    border-top-right-radius: var(--table-border-radius);
    border-bottom-right-radius: var(--table-border-radius)
}

.article-table thead {
    color: var(--color-primary-invert);
    background-color: var(--main-color);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    font-size: 18px;
    line-height: 27px
}

.article-table tr {
    transition: background-color .3s
}

.article-table_heighlight-rows tr:nth-child(2n+2) {
    background-color: var(--table-highlight-color)
}

.article-table_heighlight-cols td:nth-child(2n+2) {
    background-color: var(--table-highlight-color)
}

@media (any-hover: hover) {
    .article-table tbody tr:hover {
        background-color: var(--table-highlight-color)
    }
}

.table-wrap {
    position: relative;
    left: 0;
    top: 0
}

.table-wrap__inner {
    display: flex;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.table-wrap._scrollable::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 15%;
    background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)
}

.table-wrap__tip {
    position: absolute;
    right: 0;
    top: -30px;
    display: none;
    color: var(--remark-color);
    cursor: default
}

.table-wrap._scrollable .table-wrap__tip {
    display: block
}

.table-wrap._scrollable {
    cursor: grab
}

.table-wrap::-webkit-scrollbar {
    display: none
}

.form {
    display: grid;
    justify-items: start;
    align-items: start;
    grid-template-columns:100%;
    gap: 20px;
    max-width: 100%
}

.form_c2 {
    grid-template-columns:50% 50%
}

@media (max-width: 1200px) {
    .form_c2 {
        grid-template-columns:100%
    }
}

.form__remark_open {
    font-size: 18px;
    line-height: 27px
}

@media (max-width: 1200px) {
    .form__remark_open {
        font-size: 14px;
        line-height: 19.6px
    }
}

@media (max-width: 768px) {
    .form__remark_open {
        font-size: 17px;
        line-height: 23px
    }
}

.form__remark_close {
    font-size: 17px;
    line-height: 25.5px;
    color: var(--remark-color)
}

@media (max-width: 1200px) {
    .form__remark_close {
        font-size: 12px;
        line-height: 18px
    }
}

@media (max-width: 768px) {
    .form__remark_close {
        font-size: 14px;
        line-height: 21px
    }
}

.form-block {
    display: inline-block;
    max-width: 100%
}

.form-block__title {
    margin-bottom: 10px
}

.form-block__body {
    display: grid;
    grid-template-columns:100%;
    gap: 24px
}

.form-block__body > * {
    flex: 1 1 100%
}

@media (max-width: 1200px) {
    .form-block__body {
        gap: 12px
    }
}

.form-block__body_small-gap {
    gap: 14px
}

.form-block_horizontal .form-block__body {
    flex-direction: row
}

.forms-group {
    display: grid;
    grid-template-columns:100%;
    gap: 30px
}

@media (max-width: 1200px) {
    .forms-group {
        gap: 20px
    }
}

.field {
    display: inline-block;
    max-width: 100%
}

.field input, .field select, .field textarea {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    width: 500px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    padding: 13px 19px;
    min-width: 0;
    max-width: 100%;
    transition: border-color .3s
}

.field input:disabled, .field select:disabled, .field textarea:disabled {
    background-color: var(--disabled-bg-color)
}

@media (max-width: 1200px) {
    .field input, .field select, .field textarea {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        padding: 7px 14px
    }
}

@media (max-width: 768px) {
    .field input, .field select, .field textarea {
        padding: 12px 18px
    }
}

.field textarea {
    width: 500px
}

.field input[type=checkbox] {
    width: 20px;
    height: 20px
}

.field:not(.field_error) input:focus, .field:not(.field_error) select:focus {
    --input-border-color: var(--main-color)
}

.field_error input, .field_error select {
    --input-border-color: var(--error-color)
}

.field input::placeholder, .field textarea::placeholder {
    color: var(--placeholder-color)
}

.field-error {
    color: var(--error-color);
    font-size: 16px;
    line-height: 24px;
    padding-top: 6px
}

.colors-set {
    display: grid;
    gap: 20px
}

.colors-set__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.custom-checkbox, .custom-radio {
    display: grid;
    gap: 10px;
    grid-auto-flow: column;
    align-items: center
}

.custom-checkbox input, .custom-radio input {
    display: none
}

.custom-checkbox__body, .custom-radio__body {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius)
}

.custom-checkbox__arrow, .custom-checkbox__thumb, .custom-radio__arrow, .custom-radio__thumb {
    font-size: 11px;
    color: var(--checkbox-thumb-color);
    opacity: 0;
    transition: opacity .3s
}

.custom-checkbox__title, .custom-radio__title {
    cursor: pointer
}

@media (max-width: 768px) {
    .custom-checkbox__title, .custom-radio__title {
        font-size: 18px;
        line-height: 27px
    }
}

input:checked ~ .custom-checkbox__body .custom-checkbox__arrow, input:checked ~ .custom-checkbox__body .custom-checkbox__thumb, input:checked ~ .custom-checkbox__body .custom-radio__arrow, input:checked ~ .custom-checkbox__body .custom-radio__thumb, input:checked ~ .custom-radio__body .custom-checkbox__arrow, input:checked ~ .custom-radio__body .custom-checkbox__thumb, input:checked ~ .custom-radio__body .custom-radio__arrow, input:checked ~ .custom-radio__body .custom-radio__thumb {
    opacity: 1
}

input:disabled ~ .custom-checkbox__body, input:disabled ~ .custom-radio__body {
    background-color: var(--disabled-bg-color)
}

input:disabled ~ .custom-checkbox__title, input:disabled ~ .custom-radio__title {
    color: var(--disabled-color)
}

.field select {
    cursor: pointer;
    appearance: none;
    padding-right: 34px
}

option:hover {
    padding: 9px 20px 11px;
    background-color: #000
}

.select-wrap {
    display: inline-block;
    position: relative;
    max-width: 100%;
    left: 0;
    top: 0;
    --arrow-color: var(--main-color)
}

.select-wrap__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 14px;
    transform: translateY(-50%);
    color: var(--arrow-color);
    pointer-events: none
}

select:disabled ~ .select-wrap__arrow {
    --arrow-color: var(--disabled-color)
}

.custom-radio__body {
    border-radius: 50%
}

.custom-radio__thumb {
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    background-color: var(--checkbox-thumb-color);
    border-radius: 50%
}

.color-sample {
    width: 47px;
    height: 47px;
    border-radius: 50%
}

.color-sample_black {
    background-color: var(--color-primary)
}

.color-sample_footer-bg {
    background-color: var(--footer-bg-color)
}

.color-sample_footer-decor {
    background-color: var(--footer-decor-color)
}

.color-sample_news-desc {
    background-color: var(--color-service-desc)
}

.color-sample_header-remark {
    background-color: var(--remark-color)
}

.color-sample_footer-remark {
    background-color: var(--footer-title-color)
}

.color-sample_form-border {
    background-color: var(--input-border-color)
}

.color-sample_underline {
    background-color: var(--underline-color)
}

.color-sample_btn-click {
    background-color: var(--btn-active-color)
}

.color-sample_main {
    background-color: var(--main-color)
}

.color-sample_block-bg {
    background-color: var(--burger-panel-bg-color)
}

.color-sample_btn-border {
    background-color: var(--btn-border-color)
}

.color-sample_white {
    border: 1px solid var(--input-border-color);
    background-color: var(--color-primary-invert)
}

.color-sample_page-decor {
    background-color: var(--disabled-bg-color)
}

.color-sample_error {
    background-color: var(--error-color)
}

._scroll-active {
    user-select: none
}

.article-share {
    display: inline-grid;
    justify-content: start;
    align-items: center;
    grid-auto-flow: column;
    gap: 10px
}

.article-share__item {
    font-size: 26px
}

.last-news__body {
    margin-bottom: 40px
}

.closing-container {
    background-color: var(--last-news-bg-color);
    border-top-left-radius: var(--section-border-radius);
    border-top-right-radius: var(--section-border-radius);
    overflow: hidden
}

.news-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 60px
}

@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns:1fr;
        gap: 40px
    }
}

.article-news-card {
    --height-ratio: 51.24%;
    --padding: 18px;
    padding: var(--padding);
    margin: calc(var(--padding) * -1);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--card-hover-frame-border-radius);
    transition: border-color .3s
}

@media (max-width: 520px) {
    .article-news-card {
        --padding: 10px
    }
}

.article-news-card__inner {
    display: grid;
    align-items: start
}

.article-news-card__img-wrap {
    border-radius: var(--card-border-radius);
    overflow: hidden
}

.article-news-card__inner {
    grid-template-columns:minmax(200px, 2fr) 3.8fr;
    gap: 18px
}

@media (max-width: 1200px) {
    .article-news-card__inner {
        grid-template-columns:minmax(200px, 2fr) 4.5fr
    }
}

@media (max-width: 520px) {
    .article-news-card__inner {
        grid-template-columns:1fr
    }
}

.article-news-card__date {
    color: var(--remark-color);
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 7px
}

@media (max-width: 1200px) {
    .article-news-card__date {
        font-size: 14px;
        line-height: 23px
    }
}

.article-news-card__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 26.4px;
    margin-bottom: 12px
}

@media (max-width: 1200px) {
    .article-news-card__title {
        font-size: 18px;
        line-height: 21.6px
    }
}

@media (max-width: 768px) {
    .article-news-card__title {
        font-size: 20px;
        line-height: 24px
    }
}

.article-news-card__desc {
    display: -webkit-box;
    max-height: 100px;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 520px) {
    .article-news-card__desc {
        line-clamp: 3;
        -webkit-line-clamp: 3
    }
}

@media (max-width: 1200px) {
    .article-news-card__desc {
        font-size: 14px;
        line-height: 23px
    }
}

@media (max-width: 768px) {
    .article-news-card__desc {
        font-size: 17px;
        line-height: 23px
    }
}

@media (any-hover: hover) {
    .article-news-card:hover {
        border-color: var(--main-color-light)
    }
}

.article-news__body {
    margin-bottom: 40px
}

.page-pagination {
    font-size: 19px;
    font-weight: 400;
    line-height: 27px
}

@media (max-width: 768px) {
    .page-pagination__back, .page-pagination__forward {
        display: none
    }
}

@media (max-width: 1200px) {
    .page-pagination {
        font-size: 16px;
        line-height: 23px
    }
}

.page-pagination__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: calc(var(--page-pagination-gap-v) * -1);
    margin-left: calc(var(--page-pagination-gap-h) * -1)
}

.page-pagination__inner > * {
    margin-top: var(--page-pagination-gap-v)
}

.page-pagination__inner > *:nth-child(n+2) {
    margin-left: var(--page-pagination-btn-gap-h)
}

.page-pagination__inner > *:is(:nth-child(1),:nth-child(2),:last-child) {
    margin-left: var(--page-pagination-gap-h)
}

.page-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 38px;
    border-radius: var(--pagination-btn-border-radius);
    overflow: hidden
}

@media (max-width: 1200px) {
    .page-pagination-btn {
        width: 32px;
        height: 34px
    }
}

.page-pagination-btn:hover {
    background-color: var(--pagination-btn-hover-color)
}

.page-pagination-btn._active {
    background-color: var(--pagination-btn-active-color)
}

.page-pagination-btn._active:not(:hover) {
    color: var(--color-primary-invert)
}

.drawer {
    position: fixed;
    z-index: 199;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: var(--container-save-space);
    transition: background-color .3s, visibility .3s;
    background-color: rgba(0, 0, 0, 0);
    visibility: hidden;
    overflow: auto
}

.drawer._open {
    visibility: visible;
    background-color: var(--drawer-underlay-color)
}

.drawer__panel {
    padding: auto;
    max-width: 696px;
    width: 100%;
    background-color: var(--drawer-bg-color);
    border-radius: var(--drawer-border-radius);
    overflow: hidden;
    padding: 64px 54px;
    transition: transform .3s, opacity .3s;
    opacity: 0;
    transform: translateY(20px);
    margin: auto
}

@media (max-width: 1200px) {
    .drawer__panel {
        padding: 64px 36px 50px
    }
}

@media (max-width: 768px) {
    .drawer__panel {
        padding: 64px 20px 50px
    }
}

.drawer._open .drawer__panel {
    opacity: 1;
    transform: translateY(0px)
}

.drawer__title {
    font-size: 33px;
    font-style: italic;
    font-weight: 700;
    line-height: 39.6px;
    margin-bottom: 25px
}

@media (max-width: 1200px) {
    .drawer__title {
        font-size: 22px;
        line-height: 26.4px
    }
}

@media (max-width: 768px) {
    .drawer__title {
        font-size: 23px;
        line-height: 27.6px
    }
}

.drawer__img {
    align-self: flex-start;
    width: 94px;
    height: 94px;
    margin-bottom: 40px
}

@media (max-width: 1200px) {
    .drawer__img {
        width: 68px;
        height: 68px;
        margin-bottom: 24px
    }
}

@media (max-width: 768px) {
    .drawer__img {
        align-self: center;
        width: 94px;
        height: 94px;
        margin-bottom: 33px
    }
}

.drawer__body {
    display: flex;
    flex-direction: column
}

.drawer__body:not(:last-child) {
    margin-bottom: 40px
}

@media (max-width: 1200px) {
    .drawer__body:not(:last-child) {
        margin-bottom: 24px
    }
}

.drawer__body p {
    word-break: break-all;
    margin-bottom: 10px
}

.drawer__close-btn {
    position: absolute;
    top: 26px;
    right: 30px
}

.drawer-close-btn {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

.drawer-close-btn::before, .drawer-close-btn::after {
    display: inline-block;
    content: "";
    width: 32px;
    height: 1.5px;
    background-color: currentColor;
    grid-row: 1/span 1;
    grid-column: 1/span 1
}

.drawer-close-btn::before {
    transform: rotate(45deg)
}

.drawer-close-btn::after {
    transform: rotate(-45deg)
}

.page-spacer {
    min-height: 100vh
}

.cookies-drawer {
    position: fixed;
    z-index: 199;
    left: 0;
    width: 100%;
    height: auto;
    font-weight: 400;
    color: var(--color-primary-invert);
    border-top-left-radius: var(--drawer-border-radius);
    border-top-right-radius: var(--drawer-border-radius);
    background-color: var(--cookies-panel-bg-color);
    top: 100%;
    transition: transform .3s;
    padding: 18px 0 53px
}

.cookies-drawer._open {
    transform: translateY(-100%)
}

.cookies-drawer__container {
    position: relative;
    left: 0;
    top: 0;
    max-width: 960px
}

.cookies-drawer__inner {
    display: grid;
    grid-auto-flow: column;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

@media (max-width: 1200px) {
    .cookies-drawer__inner {
        font-size: 14px;
        line-height: 21px
    }
}

@media (max-width: 768px) {
    .cookies-drawer__inner {
        grid-auto-flow: row;
        justify-items: start;
        font-size: 16px;
        line-height: 24px
    }
}

.cookies-drawer__decor img {
    width: 376px;
    height: 191px;
    left: 0;
    top: 0
}

@media (max-width: 768px) {
    .cookies-drawer__decor img {
        left: auto;
        right: 0;
        transform: scaleX(-1)
    }
}

.cookies-drawer__decor {
    transform: translateX(-300px)
}

@media (max-width: 768px) {
    .cookies-drawer__decor {
        transform: translate(100px, 100px)
    }
}

.article-contacts {
    display: grid;
    gap: 20px
}

.article-contacts dt {
    font-weight: 600;
    margin-bottom: 3px
}

.requisites p:not(:last-child) {
    margin-bottom: 4px
}

.attachments {
    color: var(--main-color)
}

.attachments input {
    display: none
}

.attachments, .attachments__body {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    gap: 12px
}

.attachments__body {
    cursor: pointer;
    min-height: 50px
}

.attachments__icon {
    font-size: 26px
}

.attachments__icon_upload {
    font-size: 18px
}

.attachments__icon_added {
    font-size: 26px
}

.attachments:not(._selected) .attachments__icon_added {
    display: none
}

.attachments._selected .attachments__icon_upload {
    display: none
}

.attachments._selected .attachments__cap {
    display: none
}

.attachments__item {
    display: grid;
    grid-auto-flow: column;
    align-items: start;
    gap: 12px
}

.attachments__list {
    color: var(--color-primary);
    font-size: 18px;
    line-height: 27px
}

.attachments__delete-btn {
    width: 16px;
    height: 16px;
    position: relative;
    top: .3em
}

.attachments__size {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--remark-color)
}

.attach-delete-btn {
    display: grid;
    align-items: center;
    justify-content: center
}

.attach-delete-btn__cap {
    font-size: 0
}

.attach-delete-btn > * {
    grid-column: 1/span 1;
    grid-row: 1/span 1
}

.attach-delete-btn::before, .attach-delete-btn::after {
    grid-row: 1/span 1;
    grid-column: 1/span 1;
    content: "";
    width: 12px;
    height: 2px;
    background-color: currentColor
}

.attach-delete-btn::before {
    transform: rotate(45deg)
}

.attach-delete-btn::after {
    transform: rotate(-45deg)
}

.no-break {
    white-space: nowrap
}

.header {
    position: relative;
    left: 0;
    top: 0;
    z-index: 100;
    padding-top: 18px;
    padding-bottom: 25px
}

@media (max-width: 1260px) {
    .header {
        padding-bottom: 26px
    }
}

@media (max-width: 520px) {
    .header {
        padding-bottom: 30px
    }
}

.header__bg-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

.header__bg {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 104%;
    min-width: 1640px;
    height: calc(100% + 28px);
    clip-path: polygon(0px 0px, calc(100% - 0px) 0px, calc(100% - 0px) calc(100% - 115px), calc(100% - 0px) calc(100% - 115px), calc(100% - 22.6255px) calc(100% - 100.843px), calc(100% - 45.944px) calc(100% - 88.864px), calc(100% - 69.7185px) calc(100% - 78.901px), calc(100% - 93.712px) calc(100% - 70.792px), calc(100% - 117.6875px) calc(100% - 64.375px), calc(100% - 141.408px) calc(100% - 59.488px), calc(100% - 164.6365px) calc(100% - 55.969px), calc(100% - 187.136px) calc(100% - 53.656px), calc(100% - 208.6695px) calc(100% - 52.387px), calc(100% - 229px) calc(100% - 52px), 236.5px calc(100% - 52px), 236.5px calc(100% - 52px), 198.5175px calc(100% - 51.462px), 164.96px calc(100% - 49.856px), 135.3625px calc(100% - 47.194px), 109.26px calc(100% - 43.488px), 86.1875px calc(100% - 38.75px), 65.68px calc(100% - 32.992px), 47.2725px calc(100% - 26.226px), 30.5px calc(100% - 18.464px), 14.8975px calc(100% - 9.718px), 0px calc(100% - 0px), 0px 0px);
    background-color: var(--header-decor-color);
    transform: translateX(-50%)
}

@media (max-width: 1260px) {
    .header__bg {
        clip-path: none;
        bottom: 14px
    }
}

@media (max-width: 768px) {
    .header__bg {
        left: 0%;
        bottom: 50px;
        clip-path: polygon(0px 0px, calc(100% - 0px) 0px, calc(100% - 0px) calc(100% - 115px), calc(100% - 0px) calc(100% - 115px), calc(100% - 22.6255px) calc(100% - 100.843px), calc(100% - 45.944px) calc(100% - 88.864px), calc(100% - 69.7185px) calc(100% - 78.901px), calc(100% - 93.712px) calc(100% - 70.792px), calc(100% - 117.6875px) calc(100% - 64.375px), calc(100% - 141.408px) calc(100% - 59.488px), calc(100% - 164.6365px) calc(100% - 55.969px), calc(100% - 187.136px) calc(100% - 53.656px), calc(100% - 208.6695px) calc(100% - 52.387px), calc(100% - 229px) calc(100% - 52px), 236.5px calc(100% - 52px), 236.5px calc(100% - 52px), 198.5175px calc(100% - 51.462px), 164.96px calc(100% - 49.856px), 135.3625px calc(100% - 47.194px), 109.26px calc(100% - 43.488px), 86.1875px calc(100% - 38.75px), 65.68px calc(100% - 32.992px), 47.2725px calc(100% - 26.226px), 30.5px calc(100% - 18.464px), 14.8975px calc(100% - 9.718px), 0px calc(100% - 0px), 0px 0px);
        transform: translateX(0)
    }
}

@media (max-width: 520px) {
    .header__bg {
        bottom: 54px
    }
}

@media (max-width: 1260px) {
    .header__container {
        display: grid;
        grid-auto-flow: column;
        gap: var(--min-space);
        align-items: center
    }
}

.header__logo {
    justify-self: start
}

.header__logo_mob {
    position: relative;
    z-index: 1
}

@media (min-width: 1261px) {
    .header__logo_mob {
        display: none
    }
}

@media (max-width: 1260px) {
    .header__logo_desc {
        margin-bottom: 20px
    }
}

@media (max-width: 520px) {
    .header__logo {
        justify-self: center
    }
}

.header__panel {
    max-height: 100vh
}

@media (max-width: 1260px) {
    .header__panel {
        overflow: auto
    }

    .header__panel {
        --btn-color: var(--burger-panel-color);
        --btn-color-hover: var(--burger-panel-color);
        --btn-border-color: var(--burger-panel-color);
        --link-color-hover: var(--burger-panel-color);
        --header-title-color: var(--burger-panel-color);
        color: var(--burger-panel-color);
        position: fixed;
        z-index: 2;
        left: 0;
        bottom: 100%;
        width: 100%;
        transition: transform .3s;
        background-color: var(--burger-panel-bg-color);
        padding: 17px 30px 40px
    }

    .header__panel._open {
        transform: translateY(100%)
    }
}

.header__panel-inner {
    display: grid;
    grid-template-columns:minmax(max-content, 1fr) min-content minmax(max-content, 1fr);
    gap: 60px var(--min-space);
    align-items: start
}

@media (max-width: 1260px) {
    .header__panel-inner {
        display: inline-grid;
        grid-template-columns:1fr;
        gap: 22px
    }
}

.header__controls {
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    padding-top: 22px
}

@media (max-width: 1260px) {
    .header__controls {
        justify-self: start;
        padding-top: 0
    }
}

@media (max-width: 520px) {
    .header__controls {
        grid-auto-flow: row;
        justify-items: start
    }
}

.header__contacts {
    justify-self: end;
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    padding-top: 22px
}

@media (max-width: 1260px) {
    .header__contacts {
        justify-self: start;
        padding-top: 0;
        gap: 40px
    }
}

@media (max-width: 520px) {
    .header__contacts {
        grid-auto-flow: row;
        justify-items: start;
        gap: 18px
    }
}

.header__menu {
    grid-column: 1/span 3
}

@media (max-width: 1260px) {
    .header__menu {
        grid-column: 1/span 1;
        grid-row: 2/span 1;
        margin-bottom: 8px
    }
}

.header__underlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--drawer-underlay-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s
}

@media (min-width: 1261px) {
    .header__underlay {
        display: none
    }
}

.header__panel._open ~ .header__underlay {
    visibility: visible;
    opacity: 1
}

.header__burger-btn {
    justify-self: end;
    z-index: 3
}

@media (max-width: 520px) {
    .header__burger-btn {
        position: absolute
    }
}

@media (min-width: 1261px) {
    .header .header__burger-btn {
        display: none
    }
}

.menu-disclosure {
    position: relative;
    left: 0;
    top: 0
}

.menu-disclosure__item {
    z-index: 0
}

.menu-disclosure__submenu {
    z-index: 1
}

@media (min-width: 1261px) {
    .menu-disclosure__submenu {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        top: -3px;
        transform: translateY(10px);
        transition: visibility .3s, opacity .3s, transform .3s
    }

    .menu-disclosure__submenu_right {
        left: calc(100% - 10px)
    }

    .menu-disclosure__submenu_left {
        right: calc(100% - 10px)
    }

    .menu-disclosure__submenu_bottom {
        top: 100%
    }
}

@media (max-width: 1260px) {
    .menu-disclosure__submenu {
        height: 0px;
        overflow: hidden
    }
}

@media (max-width: 1260px) {
    .menu-disclosure__submenu {
        padding-left: 24px
    }
}

@media (max-width: 1260px) {
    .menu-disclosure:first-child .header-submenu__inner, .header-menu-item_main ~ .menu-disclosure__submenu .header-submenu__inner {
        margin-top: 20px
    }
}

@media (min-width: 1261px) {
    .menu-disclosure._open > .menu-disclosure__submenu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 1260px) {
    .menu-disclosure._open > .menu-disclosure__submenu {
        height: auto
    }
}

.header-logo figure {
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    align-items: end
}

@media (max-width: 1260px) {
    .header-logo figure {
        gap: 30px
    }
}

.header-logo figure img {
    width: 179px;
    height: 96px
}

@media (max-width: 1260px) {
    .header-logo figure img {
        width: 119px;
        height: 64px
    }
}

@media (max-width: 520px) {
    .header-logo figure img {
        width: 131px;
        height: 70px
    }
}

.header-logo_mob figure {
    gap: 30px
}

.header-logo_mob figure img {
    width: 119px;
    height: 64px
}

@media (max-width: 520px) {
    .header-logo_mob figure img {
        width: 131px;
        height: 70px
    }
}

.header-logo figcaption {
    display: grid;
    font-size: 16px;
    font-style: italic;
    line-height: 19.2px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--header-title-color)
}

.header-logo figcaption span:nth-child(1) {
    /*padding-left: 1.2em;*/
}

.header-logo figcaption span:nth-child(2) {
    /*padding-left: .6em*/
}

@media (max-width: 1260px) {
    .header-logo figcaption {
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 8px
    }
}

@media (max-width: 520px) {
    .header-logo figcaption {
        display: none
    }
}

.header-logo_mob figcaption {
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 8px
}

.header-contact {
    text-align: right
}

@media (max-width: 1260px) {
    .header-contact {
        text-align: left
    }
}

.header-contact__href {
    justify-self: end;
    font-size: 23px;
    font-weight: 500;
    line-height: 27.6px
}

@media (max-width: 1260px) {
    .header-contact__href {
        margin-bottom: 4px
    }
}

.header-contact__title {
    color: var(--header-title-color);
    font-style: italic;
    font-size: 15px;
    line-height: 18px
}

@media (max-width: 1260px) {
    .header-contact__title {
        opacity: .6;
        font-weight: 400
    }
}

@media (max-width: 1260px) {
    .header-contact:last-child .header-contact__title {
        max-width: 192px
    }
}

.header-menu {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--header-menu-space)
}

@media (max-width: 1260px) {
    .header-menu {
        grid-auto-flow: row
    }
}

.header-menu-item {
    cursor: pointer;
    transition: color .3s, background-color .3s;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px
}

@media (min-width: 1261px) {
    .header-menu-item {
        display: grid;
        grid-auto-flow: column;
        gap: 6px
    }
}

@media (max-width: 1260px) {
    .header-menu-item {
        font-size: 17px;
        line-height: 20.4px
    }
}

.header-menu-item_main {
    font-size: 19px;
    line-height: 22.8px;
    font-weight: 500
}

@media (max-width: 1260px) {
    .header-menu-item_main {
        font-size: 17px;
        font-weight: 700;
        line-height: 12px
    }
}

@media (max-width: 768px) {
    .header-menu-item_main {
        font-size: 17px;
        line-height: 12px
    }
}

@media (min-width: 1261px) {
    .header-menu-item_sub {
        padding: 8px 36px
    }
}

.header-menu-item__arrow {
    align-self: center;
    justify-self: end;
    font-size: .7em;
    transition: transform .3s
}

.menu-disclosure._open > .header-menu-item_main {
    color: var(--link-color-hover)
}

@media (max-width: 1260px) {
    .menu-disclosure._open > .header-menu-item_main {
        font-weight: 700
    }
}

@media (min-width: 1261px) {
    .menu-disclosure._open > .header-menu-item_parent:not(.header-menu-item_main) {
        color: var(--submenu-color-hover);
        background-color: var(--link-color-hover)
    }
}

@media (any-hover: hover)and (min-width: 1261px) {
    .header-menu-item_sub:hover {
        color: var(--submenu-color-hover);
        background-color: var(--link-color-hover)
    }
}

.menu-disclosure._open > .header-menu-item .header-menu-item__arrow {
    transform: translateY(-0.1em) rotateX(180deg)
}

@media (min-width: 1261px) {
    .header-submenu {
        background-color: var(--header-submenu-bg-color);
        box-shadow: 0px 24px 34px 0px rgba(0, 0, 0, .1098039216);
        padding: 10px 0;
        min-width: 380px
    }
}

@media (max-width: 1260px) {
    .header-submenu__inner {
        display: grid;
        gap: 20px
    }
}

.burger-btn {
    display: grid;
    gap: 3.6px;
    padding: 9px 6px;
    border: .56px solid var(--btn-color);
    border-radius: 3px;
    transition: background-color .3s, border-color .3s
}

@media (max-width: 520px) {
    .burger-btn {
        padding: 17px 12px;
        gap: 6px
    }
}

.burger-btn > div {
    width: 18px;
    height: 1px;
    border-radius: 6.2px;
    background: var(--btn-color);
    transition: background-color .3s, border-color .3s, transform .3s
}

@media (max-width: 520px) {
    .burger-btn > div {
        width: 31px;
        height: 2px
    }
}

@media (any-hover: hover) {
    .burger-btn:hover {
        background: var(--btn-color)
    }

    .burger-btn:hover > div {
        background: var(--btn-color-hover)
    }
}

.burger-btn div:nth-child(1) {
    transform-origin: 0 50%
}

.burger-btn div:nth-child(3) {
    transform-origin: 0 50%
}

.burger-btn._active {
    border-color: var(--burger-panel-color)
}

.burger-btn._active > div {
    background: var(--burger-panel-color)
}

.burger-btn._active div:nth-child(1) {
    transform: translate(2.5px, -1.6px) rotate(45deg)
}

@media (max-width: 520px) {
    .burger-btn._active div:nth-child(1) {
        transform: translate(3.5px, -2.6px) rotate(45deg)
    }
}

.burger-btn._active div:nth-child(2) {
    width: 0
}

.burger-btn._active div:nth-child(3) {
    transform: translate(2.5px, 1.6px) rotate(-45deg)
}

@media (max-width: 520px) {
    .burger-btn._active div:nth-child(3) {
        transform: translate(3.5px, 2.6px) rotate(-45deg)
    }
}

.footer {
    color: #fff;
    background-color: var(--footer-bg-color);
    overflow: hidden
}

.footer__logo {
    grid-row: 1/span 3
}

@media (max-width: 1200px) {
    .footer__logo {
        grid-row: 1/span 1
    }
}

@media (max-width: 768px) {
    .footer__logo {
        margin-bottom: 25px
    }
}

.footer__inner {
    display: grid;
    gap: 0 60px;
    grid-template-columns:auto 1fr;
    align-items: start;
    padding: 30px 0 26px
}

@media (max-width: 1200px) {
    .footer__inner {
        padding: 20px 0 70px
    }
}

@media (max-width: 768px) {
    .footer__inner {
        grid-template-columns:1fr;
        padding: 30px 0
    }
}

.footer__inner > * {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1
}

.footer__menu {
    grid-column: 2/span 1
}

@media (max-width: 768px) {
    .footer__menu {
        grid-column: 1/span 1;
        border-top: 1px solid var(--footer-decor-color)
    }
}

@media (max-width: 1200px) {
    .footer__contacts {
        grid-column: 1/span 2
    }
}

@media (max-width: 768px) {
    .footer__contacts {
        grid-column: 1/span 1;
        border-top: 1px solid var(--footer-decor-color)
    }
}

.footer__footer {
    grid-column: 2/span 1;
    display: grid;
    align-items: end;
    grid-auto-flow: column;
    gap: var(--min-space);
    justify-content: space-between
}

@media (max-width: 1200px) {
    .footer__footer {
        grid-column: 1/span 2
    }
}

@media (max-width: 768px) {
    .footer__footer {
        grid-column: 1/span 1;
        grid-auto-flow: row;
        justify-items: start
    }
}

@media (max-width: 768px) {
    .footer__created-by {
        grid-column: 1/span 1;
        grid-row: 1/span 1
    }
}

.footer-menu {
    padding: 23px 0 24px
}

@media (max-width: 1200px) {
    .footer-menu {
        padding: 12px 0 21px
    }
}

@media (max-width: 768px) {
    .footer-menu {
        padding: 19px 0
    }
}

.footer-menu__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-left: calc(var(--footer-menu-space) * -1);
    margin-top: calc(var(--footer-menu-space-vertical) * -1)
}

.footer-menu__inner > * {
    margin-left: var(--footer-menu-space);
    margin-top: var(--footer-menu-space-vertical)
}

@media (max-width: 768px) {
    .footer-menu__inner {
        flex-direction: column
    }
}

.footer-menu__item {
    font-size: 18px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .footer-menu__item {
        font-size: 15px
    }
}

.footer-contacts {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: var(--min-space);
    padding: 26px 0 42px;
    border-top: 1px solid var(--footer-decor-color);
    font-size: 16px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .footer-contacts {
        font-size: 14px;
        padding: 26px 0 28px
    }
}

@media (max-width: 768px) {
    .footer-contacts {
        justify-content: start;
        grid-auto-flow: row;
        font-size: 15px;
        gap: 21px;
        padding: 26px 0 26px
    }
}

@media (max-width: 1200px) {
    .footer-contacts__base {
        grid-column: 1/span 2;
        max-width: 430px
    }
}

.footer-contacts__social {
    margin-top: 4px
}

.footer-base-contacts {
    display: grid;
    grid-template-columns:auto auto;
    gap: 8px 12px
}

@media (max-width: 768px) {
    .footer-base-contacts {
        gap: 0;
        grid-template-columns:auto
    }
}

.footer-base-contacts dt {
    color: var(--footer-title-color)
}

@media (max-width: 768px) {
    .footer-base-contacts dd:not(:last-child) {
        margin-bottom: 24px
    }
}

.footer-social__title {
    color: var(--footer-title-color);
    margin-bottom: 10px
}

@media (max-width: 768px) {
    .footer-social__title {
        margin-bottom: 4px
    }
}

.footer-social__list {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    justify-content: end;
    font-size: 27px
}

@media (max-width: 768px) {
    .footer-social__list {
        justify-content: start
    }
}

.footer-copyright {
    color: var(--footer-title-color);
    font-size: 16px;
    line-height: 23px
}

@media (max-width: 1200px) {
    .footer-copyright {
        font-size: 12px
    }
}

@media (max-width: 768px) {
    .footer-copyright {
        font-size: 14px
    }
}

.created-by {
    color: var(--footer-title-color);
    display: grid;
    grid-template-columns:auto auto;
    gap: 10px;
    align-items: center;
    text-align: right
}

@media (max-width: 768px) {
    .created-by {
        text-align-last: left
    }
}

.created-by__cap {
    font-size: 14px;
    line-height: 16.8px
}

@media (max-width: 1200px) {
    .created-by__cap {
        font-size: 12px
    }
}

@media (max-width: 768px) {
    .created-by__cap {
        font-size: 14px
    }
}

.created-by__icon {
    font-size: 26px
}

@media (max-width: 768px) {
    .created-by__icon {
        grid-row: 1/span 1;
        grid-column: 1/span 1
    }
}

.footer-logo {
    position: relative;
    left: 0;
    top: 0;
    z-index: 0
}

.footer-logo__img {
    width: 153px;
    height: 83px
}

@media (max-width: 1200px) {
    .footer-logo__img {
        width: 96px;
        height: 52px
    }
}

@media (max-width: 768px) {
    .footer-logo__img {
        width: 106px;
        height: 57px
    }
}

.footer-logo__decor {
    position: absolute;
    right: 0;
    top: calc(100% + 30px);
    width: 510px;
    height: 259px;
    z-index: 0
}

@media (max-width: 1200px) {
    .footer-logo__decor {
        top: calc(100% + 15px);
        width: 333px;
        height: 169px
    }
}

@media (max-width: 768px) {
    .footer-logo__decor {
        display: none
    }
}

html {
    color: var(--color-primary);
    line-height: 1;
    font-family: FiraSans
}

.article-text-section ul > li::before {
    content: "";
	display: inline-block;
	vertical-align: top;
	margin-top: 0.25em;
	margin-right: 0.8em;
    border-radius: 2px;
    background-color: var(--list-bullet-color);
    width: 6px;
    height: 7px;
    position: relative;
    top: .35em;
    left: 0
}

@media (max-width: 1200px) {
    .article-text-section ul > li::before {
        width: 5px;
        height: 5px
    }
}

@media (max-width: 768px) {
    .article-text-section ul > li::before {
        width: 6px;
        height: 7px
    }
}

.article-text-section ol {
    counter-reset: item
}

.article-text-section ol > li {
    list-style-type: none;
    counter-increment: item;
}

.article-text-section ol > li::before {
    content: counter(item) ".";
	display: inline-block;
	vertical-align: top;
	margin-top: 0.25em;
	margin-right: 0.8em;
    color: var(--main-color);
    font-size: 18px;
    line-height: 27px;
    font-weight: 900
}

.article-text-section ol ol {
    counter-reset: subitem;
    margin-left: 30px
}

.article-text-section ol ol > li {
    counter-increment: subitem
}

.article-text-section ol ol > li::before {
    content: counter(item) "." counter(subitem) "."
}

.article-text-section ul ul {
    margin-left: 30px
}

.article-text-section a {
    color: #0000FF;
    text-decoration: underline;
}