.brand-letter-box {
    min-height: 286px;
}

.brand-letter-item-box .brand-letter-item {
    font-size: 24px;
    color: #000;
    font-weight: bold;
}

.brands-box {
    margin-top: 15px;
}
.brands-box .brand-box {
    padding: 10px 0;
    border-top: 1px #f0f0f0 solid;
}

.brand-letter-box .brands-box-invisible {
    position: absolute;
    width: 100%;
    opacity: 0;
    left: 0;
    padding: 0 20px 20px 20px;
    border-left: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    margin-top: -1px;
}

.brand-letter-box:hover .brands-box-invisible {
    background: #fff;
    opacity: 1;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #bbb;
    box-shadow: 2px 3px 5px #dedede;

    -webkit-transition: opacity .5s, border-color .5s,-webkit-box-shadow .5s;
    -webkit-transition: opacity .5s, border-color .5s,box-shadow .5s;
    transition: opacity .5s, border-color .5s,box-shadow .5s;
}

.brand-link.brand-link-inactive {
    color: #bbb !important;
}