/* Add custom CSS styles below */ 
body{
  background-color: #e2e2e2 !important;
}

/*** header ****/
div#mainnav {
    background-color: #625857;
}

i.header-btn_icon.sicon-user-circle,i.header-btn_icon.icon.sicon-shopping-bag{
    background-color: #fff;
    color: #000;
    border: none;
}

.s-user-menu-trigger{
background-color: transparent;
}

.main-menu li>a{
color: #fff;
} 
.main-menu li>a:hover {
color: #e2e2e2 ;
}

.sub-menu a {
color: #000 !important;
}
/*** banners ****/

.s-block--fixed-banner .container{
max-width:100% !important;
margin-right:0px !important;
margin-left:0px !important;
padding-right:0px !important;
padding-left:0px !important;
}
.banner--fixed img {
border-radius: 0rem !important;
 background-color: transparent;

}
.s-block--fixed-banner:nth-of-type(1){
  margin-top:0px !important;
}


/*** products ****/

button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    background-color: #000;
    color: #fff;
    border: none;
}



/*** footer ****/
footer.store-footer {
    background-color: transparent !important;
}

.store-footer__inner {
    background-color: #000 !important;

}


.store-footer__inner *{
color: #fff !important;
}

/*** first grid *****/

section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
    direction:ltr
}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry {
    height:180px;
}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(1) { grid-area: 1 / 4 / 2 / 5; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(2) { grid-area: 2 / 4 / 3 / 5; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(3) { grid-area: 1 / 3 / 3 / 4; height:100%}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(4) { grid-area: 1 / 2 / 2 / 3; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(6) { grid-area: 1 / 1 / 3 / 2; height:100%}



/**** second grid ******/

section:nth-child(13) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:0px;
}

section:nth-child(13) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8.two-row .banner-entry{
    height:250px;
    background-color:transparent;
}

section:nth-child(13) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8.two-row .banner-entry div{
    background-size:contain;
    background-repeat:no-repeat;
}


/****** Responsive ******/

@media (max-width:767px){
.main-menu li>a{
color: #000;
} 
.main-menu li>a:hover {
color: #e2e2e2 ;
}

.store-footer__inner * {
    align-items: center;
    justify-content: center;
    text-align:center
}



section:nth-child(13) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:15px;
}

section:nth-child(13) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8.two-row .banner-entry{
    height:100px;
    background-color:transparent;
}



/*** first grid *****/

section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
    direction:ltr
}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry {
    height:110px;
}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(3) { grid-area: 1 / 1 / 3 / 2; height:100%}
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(4) { grid-area: 4 / 1 / 5 / 2; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
section:nth-child(5) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry:nth-child(6) { grid-area: 3 / 2 / 5 / 3; height:100%}
}

.text-primary {
    color: #414042;
    color: rgba(249, 250, 251, 1);
}