/* ------------------------------ */
/* ----------- Filter ----------- */
/* ------------------------------ */

.filters .filter:last-child {
    margin-right: 0;
}

.filters .filter button {
    -webkit-transition: var(--transition-2);
    -o-transition: var(--transition-2);
    transition: var(--transition-2);
}

body:not(.color-dark) .filters .filter button {
    color: var(--brand-black);
    background-color: transparent;
    border: 1px solid var(--brand-black);
}


body:not(.color-dark) .filters .filter.filter--active button {
    color: var(--brand-white);
    background-color: var(--brand-black);
}


body.color-dark .filters .filter button {
    color: var(--brand-white);
    background-color: transparent;
    border: 1px solid var(--brand-white);
}


body.color-dark .filters .filter.filter--active button {
    color: var(--brand-black);
    background-color: var(--brand-white);
}

.no-touchevents .filters .filter:not(.filter--active) button:hover {
    opacity: var(--opacity-2);
}

.filter--hide {
    display: none;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1240px) {

    .section > .section__filter + div {
        padding-top: var(--spacing-6);
    }

    .filters .filter {
        margin-top: var(--spacing-3);
        margin-right: var(--spacing-3);
    }

    .filters .filter button {
        padding: 7px 22px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .section > .section__filter + div {
        padding-top: 50px;
    }

    .filters .filter {
        margin-top: var(--spacing-2);
        margin-right: var(--spacing-2);
    }

    .filters .filter button {
        padding: 7px 20px;
    }

}

@media all and (min-width: 768px) {

    .filters {
        margin-top: calc(-1 * var(--spacing-3));
    }

}


@media all and (max-width: 767.98px) {

    .section > .section__filter + div {
        padding-top: var(--spacing-5-5);
    }

    .filters .filter button {
        padding: 7px 16px;
    }
}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .filters {
        margin-top: -14px;
    }

    .filters .filter {
        margin-top: 14px;
        margin-right: 12px;
    }

}


@media all and (max-width: 575.98px) {

    .filters .filter {
        margin-top: 10px;
        margin-right: 8px;
    }

}