#brands_a_z::after{content:"";display:table;clear:both}#brands_a_z ul{list-style:none;margin:0}#brands_a_z .brands_index{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#brands_a_z .brands_index li{text-transform:uppercase;margin:0 2.74px}#brands_a_z .brands_index li a,#brands_a_z .brands_index li span{padding:2px 10px;font-size:20px}#brands_a_z .brands_index li span{border:1px solid #cdcdcd;color:#cdcdcd}#brands_a_z .brands_index li.active a{border:1px solid #414141;color:#414141}#brands_a_z .brands_index li.active a:hover{background-color:#414141;color:#fff}#brands_a_z #brands-t{text-transform:uppercase;font-weight:700}#brands_a_z .brands a{color:#313030}#brands_a_z .top{margin:24px 0;display:block;float:right;padding:4px 16px;background-color:#414141;color:#fff}#brands_a_z .top:hover{background-color:#000}.brand-thumbnails .thumbnail>a{display:block}.brand-thumbnails .brand-thumbnail{max-width:100%;height:auto}@media (min-width:550px){.brand-thumbnails{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}}@media (min-width:550px) and (min-width:576px){.brand-thumbnails{margin-right:-15px;margin-left:-15px}}@media (min-width:550px) and (min-width:768px){.brand-thumbnails{margin-right:-15px;margin-left:-15px}}@media (min-width:550px) and (min-width:992px){.brand-thumbnails{margin-right:-15px;margin-left:-15px}}@media (min-width:550px) and (min-width:1200px){.brand-thumbnails{margin-right:-15px;margin-left:-15px}}@media (min-width:550px){.brand-thumbnails .thumbnail{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}}@media (min-width:550px) and (min-width:576px){.brand-thumbnails .thumbnail{padding-right:15px;padding-left:15px}}@media (min-width:550px) and (min-width:768px){.brand-thumbnails .thumbnail{padding-right:15px;padding-left:15px}}@media (min-width:550px) and (min-width:992px){.brand-thumbnails .thumbnail{padding-right:15px;padding-left:15px}}@media (min-width:550px) and (min-width:1200px){.brand-thumbnails .thumbnail{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.brand-thumbnails.columns-1 .thumbnail{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.brand-thumbnails.columns-2 .thumbnail{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.brand-thumbnails.columns-3 .thumbnail{-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.brand-thumbnails.columns-4 .thumbnail{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.brand-thumbnails.columns-5 .thumbnail{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.brand-thumbnails.columns-6 .thumbnail{-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.brand-thumbnails.columns-7 .thumbnail{-ms-flex:0 0 14.2857142858%;flex:0 0 14.2857142858%;max-width:14.2857142858%}.brand-thumbnails.columns-8 .thumbnail{-ms-flex:0 0 12.5%;flex:0 0 12.5%;max-width:12.5%}}.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 15px;
text-align: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.card img {
max-width: 100%;
display: block;
margin-bottom: 10px;
;
}
.card h5 {
font-size: 18px;
margin-bottom: 10px;
}
.card p {
font-size: 14px;
margin-bottom: 15px;
}
.card a {
display: inline-block;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 15px;
font-size: 14px;
text-decoration: none;
margin-bottom: 10px;
transition: background-color 0.2s;
}
.card a:hover {
background-color: #660000;
}
.btn {
display: block;
margin-top: 10px;
padding: 5px 10px;
background-color: #660000;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
transition: all 0.2s;
}
.btn:hover {
background-color: #3f0000;
}
.btn-primary {
background-color: #660000 !important;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
font-size: 30px;
font-weight: bold;
color: #000;
text-decoration: none;
transition: all 0.2s;
z-index: 2;
}
.prev:hover,
.next:hover {
color: #660000;
}
.prev {
left: 0;
}
.next {
right: 0;
}  .subcategoryCard-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.subcategoryCard {
width: 17%;
margin-bottom: 20px !important;
margin-right: 20px; display: flex;
flex-direction: column;
justify-content: center;
} .subcategoryCard:nth-child(5n) {
margin-right: 0;
}   @media only screen and (max-width: 991px) {
.subcategoryCard {
width: 48%;
margin-right: 5px; }
.subcategoryCard:nth-child(2n) {
margin-right: 0; }
}  .card {
flex-grow: 1;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
}
.card img {
max-width: 100%;
height: auto;
}
.card h3 {
font-size: 1rem;
}
.card-body {
padding: 15px;
text-align: center;
}
.card-title {
margin-top: 0;
}
.btn-primary {
display: inline-block;
margin-top: 15px;
padding: 10px 15px;
border-radius: 5px;
color: #fff;
background-color: #007bff;
border-color: #007bff;
transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
background-color: #0062cc;
border-color: #005cbf;
}
.subcategoryCard {
position: relative;
height: 400px; }
.card {
position: relative;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
height: 100%; }
.card-body {
padding: 20px;
height: calc(100% - 50px); }
.card-title {
font-size: 24px;
margin-bottom: 10px;
}
.card-footer {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0;
left: 0; width: 100%;
}