.filter-desktop > .row > .col-md-2{
    display: flex;
}
.button-musk {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 3;
    color: var(--color-black);
    background-color: var(--color-grey);
    padding: 2px 0 2px 10px;
    text-transform: uppercase !important;
}

.button-musk:hover {
    color: var(--color-white);
    background-color: var(--color-black);
}

.button-musk-painter,
.button-musk-painter:hover{
    font-size: 33px;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    color: var(--color-black);
}
.year,
.era,
.poster-theme,
.sub-theme,
.person,
.painter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 25px 0;
    list-style: none;
/*    max-height: 1000px; */
    overflow-y: auto;
}

.sub-theme {
    padding-top: 15px;
    border-top: solid 1px grey;
}

.text {
    list-style: square;
    margin-left: -1em;
}

.poster-theme li,
.sub-theme li,
.person li,
.painter li {
    width: 25%;
}


.year li a,
.era li a,
.poster-theme li a,
.sub-theme li a,
.person li a,
.painter li a {
    color: var(--color-black);
    font-weight: 500;
    padding: 4px 10px 4px 10px;
}

.text li a {
    color: var(--color-black);
    font-weight: 500;
    padding: 4px 10px 4px 0px;
}

.year li a:hover,
.era li a:hover,
.poster-theme li a:hover,
.sub-theme li a:hover,
.person li a:hover,
.painter li a:hover,
.text li a:hover {
    background-color: var(--color-grey);
}

.text li a[tabindex]:focus {
    color: var(--color-white)!important;
    background-color: var(--color-black);
}

.actsel {
    color: var(--color-white)!important;
    background-color: var(--color-black);
}

.alphabet {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;

}

.alphabet li {
    flex-basis: auto;
    flex-grow: 1;
    text-align: center;
}

.alphabet li a {
    color: var(--color-black);
    font-weight: 600;
    font-size: 25px;
    text-transform: uppercase;
    padding: 4px 8px 4px 8px;
}

.alphabet li a:hover {
    background-color: var(--color-grey);
}

@media all and (min-width: 768px) {
    .filter-mobile {
        display: none;
    }

    .filter-desktop {
        margin-top: 30px;
    }
}

@media all and (max-width: 1100px) {
    .button-musk {
        padding: 2px;
        font-size: 15px;
        justify-content: center;
        align-items: center;
    }
    .poster-theme li,
    .sub-theme li {
        width: 50%;
    }
    .alphabet li a {
        font-size: 18px;
        padding: 4px 4px 4px 4px;
    }
}
@media all and (max-width: 767px) {
    .filter-desktop {
        display: none;
    }

    /*Начало кнопки скрытия фильтра на мобиле*/
    .button-filter-mobile {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 10px;
        color: var(--color-white);
        background-color: var(--color-black);
    }

    .button-filter-mobile:hover {
        color: var(--color-white);
    }

    /*треугольник на кнопе и его смена при открытии*/
    .button-filter-mobile:after {
        position: absolute;
        top: 27px;
        right: 16px;
        content: "";
        width: 20px;
        height: 10px;
        background: url("../img/angle_down.svg") no-repeat;
        transition: background 0.5s ease;
    }

    .button-filter-mobile[aria-expanded="true"]:after {
        background: url("../img/angle_up.svg") no-repeat;
    }

    /*Конец кнопки скрытия фильтра на мобиле*/
    /*Начало стилизации плашек фильтра на мобиле*/
    .filter-card {
        background-color: var(--color-grey);
        padding: 0 15px 10px 15px;
        margin-bottom: 10px;
    }

    .filter-caption {
        text-transform: uppercase;
        padding: 5px 0 5px 0;
    }

    .filter-caption[data-toggle="modal"] {
        cursor: pointer;
    }

    .filter-select-input {
        display: flex;
        width: 100%;
        font-size: 18px;
        padding: 5px;
        background-color: var(--color-white);
        cursor: pointer;
        border: none;
    }

    /*Стилизуем плейсхолдер инпута на всех браузерах*/
    .filter-select-input[placeholder] {
        color: var(--color-black);
    }

    .filter-select-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: var(--color-black);
    }

    .filter-select-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: var(--color-black);
        opacity: 1;
    }

    .filter-select-input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: var(--color-black);
        opacity: 1;
    }

    .filter-select-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: var(--color-black);
    }

    .filter-select-input::-ms-input-placeholder { /* Microsoft Edge */
        color: var(--color-black);
    }

    /*Раздел Техика в фильтре основного окна*/
    .technique {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .technique li {
        margin: 8px 0 8px 0;
    }

    .technique li a {
        display: flex;
        flex-direction: row;
        align-items: center;
        user-select: none;
        color: var(--color-black);
    }

    .technique li a.checkbox-small-checked:before,
    .technique li a.checkbox-small:before {
        content: '';
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
    }

    .technique li a.checkbox-small:before {
        background-image: url("../img/Hacken-0.svg");
    }

    .technique li a.checkbox-small-checked:before {
        background-image: url("../img/Hacken-1.svg");
    }

    /*Конец раздела Техника*/
    .alphabet {
        flex-wrap: wrap;
        margin: 0;
    }
    .alphabet li a {
        font-size: 18px;
        padding: 4px 7px 4px 7px;
    }
}


    /*Всплывайка фильтра на мобиле*/
    .modal-content {
        border-radius: 0;
    }

    .modal-body {
        overflow-y: auto;
    }

    .modal .close {
        font-size: 0;
        position: relative;
        top: 0;
        left: 0;
        width: 62px;
        height: 62px;
        opacity: 1;
        background-color: var(--color-white);
        background-image: url("../img/11.svg");
        background-size: cover;
        cursor: pointer;
    }

    .modal .close {
        opacity: 1;
    }

    .modal-button {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 1000;
        display: flex;
        width: 100%;
        height: 62px;
        background-color: var(--color-black);
    }

    .button-reset,
    .button-ok {
        flex-grow: 1;
        display: flex;
        line-height: 62px;
        justify-content: center;
        background-color: var(--color-black);
        color: var(--color-white);
    }

    .button-reset {
        border-right: 1px solid var(--color-white);
    }

    .button-reset:hover,
    .button-ok:hover {
        color: var(--color-white);
    }

    .era-mobile,
    .theme-mobile,
    .sub-theme-mobile,
    .historische-person-mobile,
    .painter-mobile,
    .technique-mobile{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        list-style: none;
    }

    .custom-checkbox {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    .custom-checkbox + label {
        display: inline-flex;
        align-items: center;
        user-select: none;
        color: var(--color-black);
        font-size: 18px;
        font-weight: 600;
    }

    .custom-checkbox + label::after {
        margin-left: auto;
        content: '';
        display: inline-block;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        flex-grow: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        background-image: url("../img/Hacken-0.svg");
    }

    .custom-checkbox:checked + label::after {
        background-image: url("../img/Hacken-1.svg");
    }

    /* стили при наведении курсора на checkbox */
    .custom-checkbox:not(:disabled):not(:checked) + label:hover::after {
        background-image: url("../img/Hacken-0.svg");
    }

    /* стили для активного состояния чекбокса (при нажатии на него) */
    .custom-checkbox:not(:disabled):active + label::after {

    }

    /* стили для чекбокса, находящегося в фокусе */
    .custom-checkbox:focus + label::after {

    }

    /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
    .custom-checkbox:focus:not(:checked) + label::after {

    }

    /* стили для чекбокса, находящегося в состоянии disabled */
    .custom-checkbox:disabled + label::after {

    }

    .painter-mobile a {padding-top: 0.5em}

}