/*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    filter: gray
}

.grayscale.grayscale-fade {
    transition: filter .5s
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .grayscale.grayscale-fade {
        -webkit-transition: -webkit-filter .5s;
        transition: -webkit-filter .5s
    }
}

.grayscale.grayscale-fade:hover, .grayscale.grayscale-off {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.grayscale.grayscale-replaced {
    -webkit-filter: none;
    filter: none
}

.grayscale.grayscale-replaced > svg {
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 1
}

.header .grayscale.grayscale-replaced.grayscale-off > svg,
.header .grayscale.grayscale-replaced.grayscale-fade:hover > svg {
  opacity: 0;
}

.brands__item .grayscale.grayscale-fade:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    filter: gray
}

.brands__item.active-middle .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.brands__item.active-middle svg {
    opacity: 0
}

.brands__item:not(.active-middle):hover svg {
    opacity: 1;
}

.brands__item.swiper-slide-active .grayscale-replaced.grayscale > svg{
    opacity: 1;
}