.brands .container-letters  {min-height: 32px;}
.brands .letters-controller {background: white;z-index: 5;}
.brands .wrapper-letters ul {display: table;width: 100%;padding: 0 15px;text-align: center;list-style-type: none;margin-left: 0;border-bottom-width: 1px;border-bottom-style: solid;table-layout: fixed;}
.brands .wrapper-letters ul li {display: table-cell;}
.brands .wrapper-letters ul li span {cursor: pointer;padding: 7px 10px;display: inline-block;border-bottom-width: 3px;border-bottom-style: solid;border-bottom-color: transparent;}
.brands .container-brands .wrapper-brands ul {margin-left: 0;list-style-type: none;}
.brands .container-brands .wrapper-brands > ul > li {display: block;width: 100%;min-height:30px;position: relative;}
.brands .container-brands .wrapper-brands > ul > li:last-child {margin-bottom: 0;}
.brands .container-brands .wrapper-brands ul li .letter span {line-height: 100%;display: block;}
.brands .container-brands .wrapper-brands ul li .brands ul li {float: left;width: 22.678%;padding-bottom: 5px;}
.brands .container-brands .wrapper-brands ul li .brands ul li a {text-decoration: none;border-bottom: 1px solid transparent;}
.brands .wrapper-letters ul li.disabled {opacity: 0.5}
.brands .wrapper-letters ul li.disabled span {cursor: default;}
.brands .wrapper-letters ul li.sel span,
.brands .wrapper-letters ul li:not(.disabled) span:hover {border-bottom-color: currentColor; border-bottom-color: var(--color-theme);}
@media screen and (min-width: 768px) {
	.brands .container-brands .wrapper-brands {padding-left: 3%;}
	.brands .container-brands .wrapper-brands ul li .letter {width: 20px;text-align: center;position: absolute;top: 1em;left: 0;transform: translateY(-80%);}
	.brands .container-brands .wrapper-brands ul li .brands {width: calc(100% - 20px);padding-left: 9%;}
	.brands .container-brands .wrapper-brands ul li .brands ul li:nth-child(4n+1) {clear: left;}
	.brands .container-brands .wrapper-brands ul li .brands ul li:not(:nth-child(4n+1)) {padding-left: 4.3%;}
}
@media screen and (max-width: 768px) {
	.brands .container-letters {display: none;}
	.brands .container-brands .wrapper-brands ul li .brands ul li {width: 48%; padding-bottom: 0;padding-top: 10px;}
	.brands .container-brands .wrapper-brands ul li .brands ul li:nth-child(-n+2) {padding-top: 0;}
	.brands .container-brands .wrapper-brands ul li .brands ul li:nth-child(2n+1) {clear: left;}
	.brands .container-brands .wrapper-brands ul li .brands ul li:not(:nth-child(2n+1)) {padding-left: 4%;}
}