.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%;}
}