:root {
    --white: white;
    --bl: black;
    --black: #2E2E2E;
}
.vi-module {
    position: fixed;
    left: 0;
    top: 0;
    background: var(--white);
    width: 100%;
    z-index: 1020;
    transform: translateY(-105%);
    transition: 0.3s;
    display: none;
    padding-top: 15px;
    padding-bottom: 15px;
}
.vi-module.show {
    transform: translateY(0);
}
.vi__inner {
    max-width: calc(100vw / (var(--vwIdth) / 1830));
    padding: 0 calc(100vw / (var(--vwIdth) / 15));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0 auto;
}
.vi-close {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid var(--bl);
    align-self: flex-end;
}
.vi-close::before {
    content: "";
    width: 2px;
    background: var(--bl);
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -1px;
    top: 0;
    transform: rotate(-45deg);
}
.vi-close::after {
    content: "";
    width: 2px;
    height: 100%;
    background: var(--bl);
    position: absolute;
    margin-left: -1px;
    left: 50%;
    top: 0;
    transform: rotate(45deg);
}
.vi-disable {
    width: 100%;
    border: 2px solid var(--bl);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--bl);
    padding: 15px;
}
.vi-container {
    display: flex;
    width: 100%;
    border: 2px solid var(--bl);
}

.vi-col {
    width: calc(calc(100% - 60px) / 4);
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-right: 2px solid var(--bl);
}
.vi-col:nth-last-child(1) {
    border-right: unset;
}

@media (max-width: 900px) {
    .vi-container {
        flex-direction: column;
    }
    .vi-col {
        width: 100%;
        border-right: unset;
        border-bottom:  2px solid var(--bl);
    }
    .vi-col:nth-last-child(1) {
        border-bottom: unset;
    }
    .vi-module {
        max-height: var(--wHeight);
        max-width: var(--wWidth);
        overflow-y: auto;
    }
}

.vi-col a {
    font-size: .9rem;
    color: var(--bl);
    border: 2px solid var(--bl);
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.vi-col a.active {
    background: var(--bl);
    color: var(--white);
}
.vi-col__title {
    font-size: 1rem;
    color: var(--bl);
    text-align: center;
    flex-grow: 1;
}
html[class*=f1],
html[class*=f1] .page-title,
html[class*=f1] .category__content_title,
html[class*=f1] .banner-news__title,
html[class*=f1] .appeals .page-title,
html[class*=f1] .footer__nav_title,
html[class*=f1] .modal__title,
html[class*=f1] * {
    font-family: Arial;
}

html[class*=f2],
html[class*=f2] .page-title,
html[class*=f2] .category__content_title,
html[class*=f2] .banner-news__title,
html[class*=f2] .appeals .page-title,
html[class*=f2] .footer__nav_title,
html[class*=f2] .modal__title,
html[class*=f2] * {
    font-family: "Times New Roman";
}



html[class*=s1] {
    font-size: 18px;
}
html[class*=s2] {
    font-size: 20px;
}
html[class*=sp1] {
    letter-spacing: 1.5px;
}
html[class*=sp2] {
    letter-spacing: 3px;
}
html.vi .main-content {
    background: var(--white);
}
@media screen and (max-width: 1024px) {
    html.vi .footer__nav_list {
        min-width: 215px;
    }
    html.vi  .footer__nav_top,
    html.vi  .footer__nav_bottom{
        flex-wrap: wrap;
    }
}
@media (max-width: 768px) {
    html.vi .about-workshops__tabs {
        flex-wrap: wrap;
    }
}

html[class*=c1] img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
}

html[class*=c1] {
    --white: black;
    --bl: white;
    --black: white;
    --blue: #95999f;
    --black-light: white;
    --grey: #95999f;
    --grey-bg: white;
    --global-red: white;
    --dark: white;
    --grey2: white;
    --black2: white;
    --brown: black;
}

html[class*=c1] .banner-right__title,
html[class*=c1] .banner-right__text,
html[class*=c1] .banner-news__title,
html[class*=c1] .news__el_date,
html[class*=c1] .news__el_text,
html[class*=c1] .footer__nav_title,
html[class*=c1] .footer__nav_top a,
html[class*=c1] .footer__reviews,
html[class*=c1] .footer__side p,
html[class*=c1] .footer__nav_bottom a,
html[class*=c1] .footer__footnote a,
html[class*=c1] .footer__footnote,
html[class*=c1] .footer__policy,
html[class*=c1] .about-ms__info-title,
html[class*=c1] .about-workshops__tab._active span,
html[class*=c1] .about-history__zag,
html[class*=c1] .about-history__year,
html[class*=c1] .about-history__desc,
html[class*=c1] .about-history__dots .about-history__dot,
html[class*=c1] .about-inform__zag,
html[class*=c1] .about-inform__list li span,
html[class*=c1] .about-factory__info,
html[class*=c1] .about-factory__zag,
html[class*=c1] .about-staff__dir-zag,
html[class*=c1] .not-found__title.swiper-slide,
html[class*=c1] .not-found__title,
html[class*=c1]  .about-ms__info .bx-breadcrumb__item,
html[class*=c1] .about-ms__info .bx-breadcrumb__item a,
html[class*=c1] .burger-menu__nav_link,
html[class*=c1] .burger-menu__submenu a,
html[class*=c1] .ct-main__filter-result,
html[class*=c1] .ct-main__filter-reset button,
html[class*=c1] .brands-list__sliders .brands-list__slider.slick-center .brands-list__slider-name,
html[class*=c1] .brands-list__desc .name,
html[class*=c1] .brands-list__desc p,
html[class*=c1] .brands-list__desc,
html[class*=c1] .news-list__item-date span,
html[class*=c1] .news-list__year:hover span,
html[class*=c1] .shops-info__list-head .names span,
html[class*=c1] .contacts-info ul li span a,
html[class*=c1] .appeals .page-title,
html[class*=c1] .appeals__content,
html[class*=c1] .view-all-text{
    color: white;
}

html[class*=c1] .shops-filter__select .jq-selectbox__select-text,
html[class*=c1]  .shops-info__filter-wrp,
html[class*=c1]  .search-head__input input,
html[class*=c1]  .search-head__input input::placeholder {
    color: black;
}

html[class*=c1] .burger-menu__nav_link:hover {
    color: inherit;
    text-decoration: underline;
}

html[class*=c1] .brands-list__desc,
html[class*=c1] .shops-info__filter-wrp,
html[class*=c1] .contacts-info__address,
html[class*=c1] .search-attention{
    background: black;
    border: 2px solid white;
}

html[class*=c1] .search-attention:before {
    opacity: 0.3;
    background-color: white;
    border-radius: 100%;
}

html[class*=c1] .brands-list__product {
    border: 2px solid white;
    padding: 0 15px;
    border-radius: 15px;
}

html[class*=c1] body,
html[class*=c1] .about-history__dots .about-history__dot {
    background: black;
}

html[class*=c1] .shops-info__list-head .btns .btn-stick,
html[class*=c1] .petition-desc{
    border: 2px solid white;
    background: black !important;
}

html[class*=c1] .shops-info__list-head .btns .btn-stick:hover {
    border: 2px solid white;
    background: white !important;
    color: black;
}

html[class*=c1]  input {
    color: white;
}

html[class*=c1]  input::placeholder {
    color: white;
}

html[class*=c1] .btn-golden,
html[class*=c1] .btn-red,
html[class*=c1] .search-head__btn button,
html[class*=c1] .btn-white-bordered{
    border: 2px solid black;
    background: white;
    color: black;
}
html[class*=c1] .btn-golden:hover,
html[class*=c1] .btn-red:hover,
html[class*=c1] .search-head__btn button:hover,
html[class*=c1] .btn-white-bordered:hover {
    border-color: white;
    background: black;
    color: white;
}
html[class*=c1] .search-head__btn button:hover span{
    color: white;
}

html[class*=c1] .pagination-list li._active a,
html[class*=c1] .brands-list__desc-arr.js-brands__desc{
    border: 1px solid white;
    color: white;
}
html[class*=c1] .pagination-list li:hover a {
    color: white;
}
html[class*=c1] .pagination-arr:hover svg,
html[class*=c1] .shops-info__list-head .btns .btn-arr .icon,
html[class*=c1] .contacts-info__dropdown-arr .icon{
    fill: black;
}

html[class*=c1] .news-list__years:after {
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    filter: grayscale(1);
}

html[class*=c1] .not-found__desc a {
    color: white;
    text-decoration: underline;
}

html[class*=c1] .btn-white,
html[class*=c1] .modal-wrap,
html[class*=c1] .pagination-arr,
html[class*=c1] .ct-filter__item-checks label .jq-checkbox,
html[class*=c1] .table td{
    border: 1px solid white;
}
html[class*=c1] .ct-filter__item-checks label .jq-checkbox.checked {
    background-color: white;
}

html[class*=c1] .partners .swiper-slide,
html[class*=c1] .text-page ul li:before,
html[class*=c1] .ct-filter__item-checks label .jq-checkbox.checked .jq-checkbox__div{
    border-color: white;
}

html[class*=c1]  a.contacts-tab._active {
    background: white;
    color: black;
}

html[class*=c1] .banner-left .swiper-button-next,
html[class*=c1] .banner-left .swiper-button-prev,
html[class*=c1] .partners .swiper-button-next,
html[class*=c1] .partners .swiper-button-prev,
html[class*=c1] .burger-menu__nav_link.burger-menu__trigger::after,
html[class*=c1] .sl-arr{
    background: white;
}


html[class*=c1] .ct-filter,
html[class*=c1] .ct-main__filter-top,
html[class*=c1] .appeals{
    background: black;
    border: 2px solid white;
}

html[class*=c1]  .ct-main__filter-select .jq-selectbox__trigger-arrow {
    background: unset;
    position: absolute;
    top: 5px;
    right: 12px;
    width: 0;
    height: 0;
    border-top: 5px solid white;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
html[class*=c1] .ct-main__filter-select .jq-selectbox li:hover {
    background: white;
    color: black;
    text-decoration: underline
}
html[class*=c1] .ct-item__img {
    background: #e6e6e6;
}


@media (max-width: 1024px) {
    html[class*=c1] .burger-menu__nav_link.burger-menu__trigger::after{
        background: transparent;
    }
}

html[class*=c1] .shops-tab._active {
    background: white;
    color: black;
}

html[class*=c1] .ct-li__zag {
    background: white;
}
html[class*=c1] .mCSB_container {
    background: #ffffffe0;
}
html[class*=c1] .mCSB_container li {
    padding: 5px;
}

html[class*=c1]  .banner-news__date svg,
html[class*=c1] .footer__social svg,
html[class*=c1] .download-link .download-link__icon,
html[class*=c1]  .ct-filter__item-title .icon,
html[class*=c1] .pagination-arr .icon{
    fill: white;
}

html[class*=c1] a:hover {
    text-decoration: underline;
}


html[class*=c1] .brands__el,
html[class*=c1] .header__logo,
html[class*=c1]  .category__content_title,
html[class*=c1] .partners .swiper-slide,
html[class*=c1] .footer__social::after,
html[class*=c1] .burger-menu__close::before,
html[class*=c1] .burger-menu__close::after{
    background: white;
}

html.vi[class*=c2] {
    --white: #c8e5ff;
    --grey-bg: #c8e5ff;
    --bl: #002d56;
    --black: #002d56;
    --global-red: black;
    --brown:#002d56;
}

html[class*=c2] a:hover {
    text-decoration: underline;
}

html.vi[class*=c2] body {
    background: var(--white);
}

html[class*=c2] .burger-menu__nav_link:hover {
    color: var(--white);
    text-decoration: underline;
}

html.vi[class*=c2] .not-found__item {
    background: var(--white);
}

html.vi[class*=c2] .ct-main__filter-result._active,
html.vi[class*=c2] .shops-filter__btn button,
html.vi[class*=c2] .shops-info__list-head .names span {
    color: var(--bl);
}

html.vi[class*=c2] .download-link .download-link__icon,
html.vi[class*=c2] .ct-main__filter-point .icon{
    fill: black;
}

html.vi[class*=c2] .download-link,
html.vi[class*=c2] .contacts-info__dropdown{
    border-color: var(--bl);
}

html[class*=c2] .shops-tab._active,
html[class*=c2] .contacts-tab._active{
    background: var(--bl);
}

html[class*=c2] .btn-golden {
    background: transparent;
    border: 1px solid white;
}
html[class*=c2] .partners .swiper-slide,
html[class*=c2] .text-page ul li:before,
html[class*=c2] .shops-tabs,
html[class*=c2] .shops-info__list-li,
html[class*=c2]  .contacts-tabs{
    border-color: var(--bl);
}

html[class*=c2] .burger-menu__close::before,
html[class*=c2] .burger-menu__close::after {
    background: white;
}

html[class*=c2] img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
}

html[class*=c2] .mCSB_container {
    background: #00000066;
}
html[class*=c2] .ct-li__zag {
    background: var(--bl);
}

html[class*=c2] .mCSB_container li {
    padding: 5px;
}
html[class*=c2] .ct-item__img {
    background: white;
}
html[class*=c2] .burger-menu__submenu a:hover {
    color: var(--white);
}

html[class*=c2] .shops-info__list-head .btns .btn-stick {
    border: 2px solid var(--black);
    background: var(--bl) !important;
    color: var(--white);
}

html[class*=c2] .shops-info__list-head .btns .btn-stick:hover {
    border: 2px solid var(--black);
    background: var(--white) !important;
    color: var(--bl);
}

html[class*=c2] input {
    border-color: black;
}

html[class*=c2] .table td{
    border: 1px solid black;
}

html[class*=c2] .btn-red{
    border: 2px solid var(--black);
    background: var(--bl);
}

html[class*=c2] .btn-red:hover {
    background: var(--white);
    color: var(--bl);
}

html[class*=c2] .search-head__btn button{
    border: 2px solid var(--black);
    background: var(--white);
}
html[class*=c2] .search-head__btn button span{
    color: var(--bl);
}

html[class*=c2] .search-head__btn button:hover {
    background: var(--bl);
    color: var(--bl);
}

html[class*=c2] .search-head__btn button:hover span{
    color: var(--white);
}

html[class*=c2] .ct-filter__item-checks label .jq-checkbox,
html[class*=c2] .ct-filter__item-checks label .jq-checkbox.checked .jq-checkbox__div,
html[class*=c2] .ct-main__filter-point{
    border-color: black;
}
html[class*=c2] .ct-filter__item-checks label .jq-checkbox.checked {
    background-color: black;
    border-color: black;
}

html[class*=c2] .news-list__years:after {
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    filter: grayscale(1);
}