html{scroll-behavior:smooth;}
body{font-family:'Roboto Condensed', sans-serif; color:#000; }

.object-cover{object-fit:cover;}




.p{font-size:14px;}
a{transition:300ms;}
.dropdown-menu.bg-dark a{color:#fff;}
.dropdown-menu.bg-dark a:hover{color:#000;}

.text-dark{color:#000 !important;}
.btn{box-shadow:none !important; border-radius:0 !important;}
.form-control{border-radius:0 !important;}
.form-control:focus,
.custom-select:focus{box-shadow:none !important; border-color:#000}
.object-cover{object-fit:cover;}

#formalMenu li.position-relative i{position:absolute; top:-15px; right:-15px; width:30px; line-height:30px;}
#catNav .nav-item > a{font-weight:700; text-transform:uppercase;}

#mySearch{width:0; position:absolute; z-index:556; top:0; right:0; overflow-x:hidden; transition:300ms; background:#fff;}
#mySearch .input-group{min-width:200px;}
#mySearch .form-control{height:42px;}
#mySearch .btn{padding:0 15px;}

.sidenav{height:100%; width:0; position:fixed; z-index:555; top:0; left:0; background-color:var(--warning); overflow-x:hidden; transition:500ms;}
.sidenav .nav{min-width:320px}
.sidenav .nav-link,
.sidenav .dropdown-item{transition:500ms;}
.sidenav .nav-link:hover{background-color:var(--dark); color:#fff !important;}
.sidenav .dropdown-menu{transform:unset !important}
.sidenav li.show a{background:var(--dark); color:#fff !important;}
.sidenav .dropdown-item:hover{background:#fff ; color:var(--dark) !important}

.category-card img{opacity:0.5; transition:300ms}
.category-card:hover img{opacity:1}
.category-card:after{background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(52,58,64,1) 100%);content:""; position:absolute; top:30%; right:0; bottom:0; left:0;}
.category-card .card-img-overlay{top:unset; z-index:1;}


#pageBanner{height:250px;}

#leftNav{position:sticky; top:15px;}
#leftNav h6 a{color:#000; display:block; text-decoration:none;}
#leftNav h6 a i{transition:300ms}
#leftNav h6 a[aria-expanded="true"] i{transform: rotate(45deg);}
#leftNav .nav a{border-left:1px solid #fff;}
#leftNav .nav a.active,
#leftNav .nav a:hover{border-left:3px solid #ffc107; padding-left:5px;}

#productView .carousel-inner{width: calc(100% - 100px); margin-left:100px}
#productView .carousel-indicators{right:unset; margin:0 !important; flex-direction:column;}
#productView .carousel-indicators>li{width:80px; height:80px; margin:5px 0 0 0; border:none;}
#productView .carousel-indicators li img{display:block; width:100%; height:100%; object-fit: contain;}

#detailsArea .nav-link{border-radius:0; font-weight:700;}
#detailsArea .nav-link.active{background:#f8f9fa;}

#detailsArea #pills-details img{mix-blend-mode:multiply;}

.expire{position:relative; overflow:hidden;}
.expire .card-body,
.expire .card-img-top{opacity:0.8; filter:blur(2px);}
.expire:after{position:absolute; content:"EXPIR"; z-index:1; background:#ffc107; width:100%; text-align:center; padding:10px; top:50%; margin-top:-22px;}

@media (min-width:992px) and (max-width:1199px){

}
@media (min-width:768px) and (max-width:991px){
#productView .carousel-inner{width:100%; margin-left:0}
#productView .carousel-indicators{position:unset; flex-direction:row;}
#productView .carousel-indicators>li{margin-right:5px;}
}
@media (min-width:576px) and (max-width:767px){ 
    #pageBanner{height:100px;}
}
@media (min-width:0px) and (max-width:575px){
#productView .carousel-inner{width:100%; margin-left:0}
#productView .carousel-indicators{position:unset; flex-direction:row;}
#productView .carousel-indicators>li{margin-right:5px;}
#pageBanner{height:100px;}

#detailsArea .nav-link{padding:.5rem 9px; font-size:15px;}
}