.bg-red{background:#555555;}
.btn-orange{background:#DB6501 !important;}
.bradius{border-radius:50px 0px 0px 50px !important;}
.bg-black{background:#000;}
.btn-outline-white{ border:1px solid #fff !important; color:#fff !important;}
.btn-outline-white:hover{background:#fff; border:1px solid #fff !important; color:#222 !important;}
.text-black{ color:#000;}
.text-red{ color:#555555;}
.text-red:hover{ color:#901210;}
.fs-14{ font-size: 14px;}
.patern{background:#000 url(../img/pattern-bg.png) repeat;}
.patern::before{content:"";
top:0px;
background-color:rgba(24,24,16,0.6);
display: block;
width: 100%;
height:100%;
text-align: center;
position: absolute;}

.patern-red{background:#555555 url(../img/pattern-bg.png) repeat;}
.patern-red::before{content:"";
top:0px;
background-color:rgba(85,85,85,0.7);
display: block;
width: 100%;
height:100%;
text-align: center;
position: absolute;}

.bgg{ width: 100%; position: relative; min-height: 300px;}

.bgg:before{content:"";
top:0px;
background-color:rgba(24,24,16,0.6);
display: block;
width: 100%;
height:100%;
text-align: center;
position: absolute;}

.c-n{right:0px; top: 0px;position: absolute;width: 25px;height: 25px;text-align: center;color: #fff;border-radius: 50px;line-height: 25px; font-size: 12px; }
.red-divider{background:#555555; height: 2px; width: 70px; margin: 0 auto;}
.slider-nav a{ text-decoration: none; color:#000;}
.slider-nav a:hover{ text-decoration: none; color:#222;}
.slick-slide {
  margin: 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}
.banner{background-size:cover !important; min-height: 300px; position: relative;}
.banner:before{
  content:"";
  background-color:rgba(0,0,0,0.8);
  display: block;
  width: 100%;
  height:100%;
  line-height: 1.618;
  font-size: 3em;
  text-align: center;
  position: absolute;}
.tt{ z-index: 1;}
.ft-links a{ color:#222; text-decoration:none;}
.ft-links a:hover{ color:#555555; text-decoration:none;}
.ft-links li{margin-bottom: 5px; list-style: inside;}

.ft-link-sub-cat a{ color:#222; text-decoration:none;}
.ft-link-sub-cat a:hover{ color:#555555; text-decoration:none;}
.ft-link-sub-cat li{margin-bottom: 5px; width: 50%; float: left; list-style: inside;}

.followys a:hover i{ color:#555555;}
.inner-banner{ position: relative; background-size:cover; padding: 100px 0px;}
.inner-banner:before{
  content:"";
  background-color:rgba(0,0,0,0.7);
  display: block;
  width: 100%;
  height:100%;
  left:0px;
  top:0px;
  text-align: center;
  position: absolute;}
.breadcrumb-item a{ color:#7b838b; text-decoration:none;}
.breadcrumb-item a:hover{ color:#555555;}
.sidebar-submenu li a{ color:#222;}
.sidebar-list .btn-toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    float: right;
    color: #ddd;
}
.btn-toggle[aria-expanded="true"]::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    color: #ddd;
}
.sidebar-list .btn-toggle:focus{ box-shadow:0px;}
.sidebar-submenu li a{ text-decoration:none; line-height: 30px; font-size: 14px;}
.sidebar-submenu li a:hover{ text-decoration:none; line-height: 30px; font-size: 14px; color:#555555;}
.sidebar-submenu{ list-style: disc;}

/** Prdocut Lisitng**/
.products .card{

    border:1px solid #eee;
    cursor: pointer;
}


.weight{

    margin-top: -65px;
    transition: all 0.5s;
}

.weight small{

    color: #e2dede;
}

.buttons {
        padding: 10px;
    background-color: #d6d4d44f;
    border-radius: 4px;
    position: relative;
    margin-top: 7px;
    opacity: 0;
    transition: all 0.8s;
}

.dot {
    height: 14px;
    width: 14px;
    background-color: green;
    border-radius: 50%;
    position: absolute;
    left: 27%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    color: #fff;
    opacity: 0;
}

.cart-button {
    height: 48px
}

.cart-button:focus {
    box-shadow: none
}

.cart {
    position: relative;
    height: 48px !important;
    width: 50px;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 11px;
    border-radius: 5px;
    font-size: 14px;
    transition: 1s ease-in-out;
    overflow: hidden;

}

.cart-button.clicked span.dot {
    animation: item 0.3s ease-in forwards
}

@keyframes item {
    0% {
        opacity: 1;
        top: 30%;
        left: 30%
    }

    25% {
        opacity: 1;
        left: 26%;
        top: 0%
    }

    50% {
        opacity: 1;
        left: 23%;
        top: -22%
    }

    75% {
        opacity: 1;
        left: 19%;
        top: -18%
    }

    100% {
        opacity: 1;
        left: 14%;
        top: 28%
    }
}



.products .card:hover .buttons{

    opacity: 1;
}


.products .card:hover .weight{

     margin-top: 10px;
}

.products .card:hover{

    transform: scale(1.04);
    z-index: 2;
    overflow: hidden;
}

.dropdown-menu > li:hover > .submenu{display: block;}
@media (min-width: 992px){
.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}}

.tabs-structure li a{ color:#222;}
.tabs-structure li a:hover{ color:#222;}
.sidebar-list li.active a{font-weight:700;}
.text-grey{ color:#5f5f5f;}
.order-list td{padding:20px 10px !important;}
.qty{    position: absolute;
    top: -10px;
    background: #db6501;
    border: 1px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    left: -5px;
    font-size: 12px; border-radius: 50px;}
.content p{ word-break: break-all;}
.align-centered{ display: grid; place-items: center; min-height: 230px; }
.align-centered img{ height:160px; width: 100%;}
.seller-height{ min-height: 300px;}  
.f-img{width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    text-align: center;}
.f-img img{
    display: block;
    position: relative;
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
}    
.card-description {
    min-height: 150px;
    padding-bottom: 10px;
    display: block;
}
.w50{ display: inline-block; width: 60px; height: 60px;}
.tfxd{left:15px; bottom: 40px;transition: transform .2s; }
.tfxd:hover{transform: scale(1.1); }
.border-dotted{ border:1px dashed #555555;}
.prd-img{width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    text-align: center;}
    .prd-img .pimg{    display: block;
        position: relative;
        width: 100%;
        height: 200px;
        object-fit: contain;
        object-position: top;}
.abtus h5{ font-weight:normal; font-size: 16px; line-height: 24px;}        
.onhoverm{ display: none;}
.mhover:hover .onhoverm{display: block; padding:5% 2%;
    top: 0px;
    width: 90%;
    height: 100%;
    background:#f2f2f2; box-shadow:-1px 1px 1px #f1f1f1; border:1px solid #f1f1f1;}