.product-grid{ border: 1px solid var(--light-colour-bg); background: var(--white-color); margin-bottom: 15px; margin-top: 15px;}
.product-grid .product-image{overflow: hidden; position: relative;}
.product-grid .product-image a.image{ display: block; }
.product-grid .product-image img{ width: 100%; }
.product-grid .product-image .pic-1{backface-visibility: hidden; transition: all 0.5s ease 0s;}
.product-grid:hover .product-image .pic-1{ opacity: 0; }
.product-grid .product-image .pic-2{width: 100%; height: 100%; opacity: 0; backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.5s ease 0s;}
.product-grid:hover .product-image .pic-2{ opacity: 1; }
.product-grid .product-hot-label{color: var(--white-color); background:var(--secondary-color); font-size: 10px; line-height:15px; font-weight:var(--font-weight-600); text-transform:uppercase; padding:5px 10px; position: absolute; left:15px; top:15px; letter-spacing:var(--letter-spacing-05); border-radius:var(--border-radius-25);}

.product-grid .product-sold-label {color: var(--white-color); background:var(--text-color); opacity:.4; font-size: 10px; line-height:15px; font-weight:var(--font-weight-600); text-transform:uppercase; padding:5px 10px; position: absolute; left:15px; top:15px; letter-spacing:var(--letter-spacing-05); border-radius:var(--border-radius-25);}

.product-grid .product-hot-offer{color: var(--white-color); background:var(--primary-color); width: 50px; height: 50px; line-height:50px; font-size: 14px; font-weight:var(--font-weight-600); text-transform:uppercase; padding:0; text-align: center; position: absolute; left:15px; top:15px; letter-spacing:normal; border-radius:var(--border-radius-50);}
.product_footer { position: relative; padding-top:0px; max-width:150px; font-size: 14px; line-height:20px; font-weight:var(--font-weight-600); margin-top: 15px; margin-bottom:0px; padding-right:50px; color:var(--text-color);}
.product_footer span {min-width:40px; height:40px; font-size: 25px; line-height:40px; display: block; position: absolute; top:0px; right: 0; font-weight:var(--font-weight-700); color:var(--primary-color);}

.product-grid .product-links{padding: 0; margin: 0; list-style: none; position: absolute; top: 15px; right: 15px;}
.product-grid .product-links li{margin: 0 0 5px 0; transform: rotateY(-90deg); transform-origin: 100% 50%; /*border-bottom: 1px solid #828282;*/ transition: all .3s ease-in-out;}
.product-grid:hover .product-links li{ transform: rotateY(0deg); }
/*.product-grid .product-links li:last-child{ border-bottom: none; }*/
/*.product-grid:hover .product-links li:last-child{ transition-delay: .1s; }*/
.product-grid .product-links li a{display:block; text-align: center; color: var(--text-color); background:var(--light-colour); font-size:11px;  width: 30px; height: 30px; line-height: 30px; transition: all 0.3s; border-radius:var(--border-radius-50);}
.product-grid .product-links li a:hover{ background: var(--primary-color); color: var(--white-color); }
.product-grid .product-content{ padding:15px; }

.product-grid .brand{font-size:13px; line-height:18px; font-weight:var(--font-weight-400); letter-spacing:var(--letter-spacing-05); text-transform:capitalize; margin:0 0 5px 0; color: var(--text-color); -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; position:relative; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.product-grid .brand a{color: var(--text-color); transition: all 0.3s ease 0s;}
.product-grid .brand a:hover{ color: var(--primary-color); }

.product-grid .title{font-size:15px; line-height:20px; font-weight:var(--font-weight-500); letter-spacing:var(--letter-spacing-05); text-transform:capitalize; margin:0; color: var(--black-color); -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; position:relative; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.product-grid .title a{color: var(--black-color); transition: all 0.3s ease 0s;}
.product-grid .title a:hover{ color: var(--primary-color); }

.product-grid .price{color: var(--primary-color); margin-top:15px; font-size:16px; line-height:20px; text-transform: uppercase; font-weight:var(--font-weight-700); letter-spacing:var(--letter-spacing-05);}
.product-grid .price span { text-decoration: line-through; color: var(--text-color); font-size: 14px; font-weight:var(--font-weight-500);}
.product-grid .rating {margin-top: 15px; font-size: 13px; line-height: 20px; color: var(--bs-yellow);}
.product-grid .rating span {color: var(--text-color); float: right; text-align: right;}
.product-grid .add-to-cart-btn { font-size:14px; font-weight:var(--font-weight-500); text-transform:capitalize; padding:5px 20px; line-height:25px ; color:var(--white-color); background:var(--text-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; margin-bottom:0; margin-top: 15px; letter-spacing:var(--letter-spacing-05); border-radius:var(--border-radius-25); border:none;}
.product-grid .add-to-cart-btn:hover {background:var(--secondary-color); color:var(--white-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}

.product-grid .sub-links{ display:inline-block; list-style: none;}
.product-grid .sub-links li{margin:0; display:inline-block; }

.product-grid .sub-links li a{display:block; text-align: center; color: var(--text-color); background:var(--light-colour); font-size:11px;  width: 35px; height: 35px; line-height: 35px; transition: all 0.3s; border-radius:var(--border-radius-50);}
.product-grid .sub-links li a:hover{ background: var(--primary-color); color: var(--white-color); }

.section_carousel { background: var(--secondary-light-colour); padding:15px 0 ; margin-bottom: 15px; margin-top: 15px;}

/*List Grid View*/
.view-group {display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding-left: 0; margin-bottom: 0;}
.thumbnail{padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.item.list-group-item{float: none; width: 100%; margin-bottom:10px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 15px; border: 0;}
.item.list-group-item .img-event {float: left; width:35%;}
.item.list-group-item .list-group-image{margin-right:0px;}
.item.list-group-item .thumbnail{margin-bottom: 0px; display: inline-block;}
.item.list-group-item .caption{ float: left; width: 65%; margin: 0;}
.item.list-group-item:before, .item.list-group-item:after{display: table;content: " ";}
.item.list-group-item:after{clear: both;}
/*List Grid View*/

.marker-list { position: relative; margin-top: 15px; }
.marker-list>li { color:var(--black-color); font-size:13px; line-height:18px; margin-bottom:0; margin-top:7px; font-weight:var(--font-weight-500); letter-spacing:var(--letter-spacing-05); position: relative; padding-left:15px;}
.marker-list>li:last-child {margin-bottom:8px; }
.marker-list>li:after {position: absolute; top:1px; left: 0; display: block; content: "\f00c"; font-family: "FontAwesome"; font-size: 11px; color: var(--bs-green); font-weight:var(--font-weight-900);}
.marker-list>li a {color:var(--black-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; }
.marker-list>li a:hover{color:var(--primary-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.marker-list>li span { font-weight:var(--font-weight-700); color: var(--primary-color); }

.view-btn { float: left; font-size:13px; font-weight:var(--font-weight-500); text-transform:capitalize; padding:0; width:35px; line-height:35px; color:var(--white-color); background:var(--text-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; margin-top: 15px; margin-bottom: 15px;  letter-spacing:var(--letter-spacing-1); border-radius:var(--border-radius-25); border:none;}
.view-btn:hover {background:var(--primary-color); color:var(--white-color);  transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}

.categogy-box { float: right;}
.sort-by {float: left; position: relative; padding-bottom: 15px; padding-top: 15px; padding-right:15px; border-right: 1px solid var(--light-colour);}
.sort-by span { position: relative; font-size: 14px; height:35px; line-height:35px; font-weight:var(--font-weight-400); color:var(--text-color);}
.sort-by select { font-size:14px; margin:0; padding:0 5px ; color:var(--black-color);  width: 130px; height:35px; line-height:35px; font-weight:var(--font-weight-700); background:url(../images/arrow-select.png) no-repeat right 0px center ;border:none;  appearance:none; -webkit-appearance:none;-moz-appearance: none; text-indent: 0.01px; text-overflow: ''; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;  }
.sort-by select:focus {background:url(../images/arrow-select.png) no-repeat right 0px center ; border:none; color:var(--black-color); appearance:none; -webkit-appearance:none;-moz-appearance: none; text-indent: 0.01px; text-overflow: ''; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; }

.show-by {float: left;  position: relative;  padding-bottom: 15px; padding-top: 15px; padding-left: 15px;}
.show-by span { position: relative; font-size: 14px; height:35px; line-height:35px; font-weight:var(--font-weight-400); color:var(--text-color);}
.show-by select { font-size:14px; margin:0; padding:0 5px ; color:var(--black-color);  width:50px; height:35px; line-height:35px; font-weight:var(--font-weight-700); background:url(../images/arrow-select.png) no-repeat right 0px center ;border:none;  appearance:none; -webkit-appearance:none;-moz-appearance: none; text-indent: 0.01px; text-overflow: ''; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.show-by select:focus {background:url(../images/arrow-select.png) no-repeat right 0px center ; border:none; color:var(--black-color); appearance:none; -webkit-appearance:none;-moz-appearance: none; text-indent: 0.01px; text-overflow: ''; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; }

.sale-box {}
.sale-box .inner-down {margin: 0;}

/*PAGINATION*/
.pagination {display: inline-block; margin:15px 0; padding:0;}
.pagination a {width: 35px; height: 35px; line-height: 35px; margin: 0 1px; font-size: 14px; color: #103178; font-weight:var(--font-weight-500); display: inline-flex; justify-content: center; align-items: center; border-radius: var(--border-radius-50); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.pagination a.active {background-color:var(--primary-color); color:var(--white-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.pagination a:hover:not(.active) {background-color: var(--primary-color); color:var(--white-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.pagination i { font-size: 12px;}
/*PAGINATION*/

@media only screen and ( min-width: 1299px) and (max-width: 2399px) {
 
.sort-by span { font-size: 14px; height:35px; line-height:35px; }
.sort-by select { font-size:14px; width: 160px; height:35px; line-height:35px; }

.show-by span { font-size: 14px; height:35px; line-height:35px;}
.show-by select { font-size:14px; width:70px; height:35px; line-height:35px;}
   
}


@media only screen and ( min-width: 768px) and ( max-width: 980px ) { 
 
.product-grid .product-hot-label{font-size: 10px; line-height:15px; padding:5px 10px; left:15px; top:15px; }
.product-grid .product-sold-label {font-size: 10px; line-height:15px; padding:5px 10px; left:15px; top:15px; }   
.product-grid .product-links{top: 15px; right: 15px;}

.product-grid .product-links li a{ font-size:11px;  width: 30px; height: 30px; line-height: 30px;}
.product-grid .title{font-size:15px; line-height:20px;}

.product-grid .price{font-size:16px; line-height:20px;}
.product-grid .price span {font-size: 14px;}
.product-grid .rating {font-size: 13px; line-height: 20px;}
.product-grid .add-to-cart-btn { font-size:14px; padding:5px 20px; line-height:25px;}

/*List Grid View*/
.item.list-group-item .img-event {width: 45%;}
.item.list-group-item .caption{ width: 55%;}
/*List Grid View*/  
    
.sort-by span { font-size: 14px; height:35px; line-height:35px; }
.sort-by select { font-size:14px; width: 160px; height:35px; line-height:35px; }

.show-by span { font-size: 14px; height:35px; line-height:35px;}
.show-by select { font-size:14px; width:70px; height:35px; line-height:35px;}    
}


@media only screen and ( min-width: 600px) and ( max-width: 765px ) {

.product-grid .product-hot-label{font-size: 10px; line-height:15px; padding:5px 10px; left:15px; top:15px; }
.product-grid .product-sold-label {font-size: 10px; line-height:15px; padding:5px 10px; left:15px; top:15px; }     
.product-grid .product-hot-offer{ width:45px; height:45px; line-height:45px; font-size: 13px;}
.product_footer { font-size: 13px; line-height:18px;}
.product_footer span {min-width:36px; height:36px; font-size: 22px; line-height:36px;}    
.product-grid .product-links{top: 15px; right: 15px;}

.product-grid .product-links li a{ font-size:11px; width: 30px; height: 30px; line-height: 30px;}
    
.product-grid .brand{font-size:12px; line-height:18px;}

.product-grid .title{font-size:14px; line-height:20px;}

.product-grid .price{font-size:15px; line-height:20px;}
.product-grid .price span {font-size: 13px;}
.product-grid .rating {font-size: 12px; line-height:18px;}
.product-grid .add-to-cart-btn { font-size:13px; padding:5px 20px; line-height:25px;} 
    
/*List Grid View*/
.item.list-group-item .img-event {width: 45%;}
.item.list-group-item .caption{ width: 55%;}
/*List Grid View*/ 
    
.view-btn {font-size:12px; width:30px; line-height:30px;} 
    
.sort-by span { font-size: 13px; height:30px; line-height:30px; }
.sort-by select { font-size:13px; width: 160px; height:30px; line-height:30px; }

.show-by span { font-size: 13px; height:30px; line-height:30px;}
.show-by select { font-size:13px; width:70px; height:30px; line-height:30px;} 
    
/*PAGINATION*/
.pagination a {width: 30px; height: 30px; line-height: 30px; font-size: 13px;}
.pagination i { font-size: 11px;}
/*PAGINATION*/    
}


@media only screen and ( min-width: 481px) and ( max-width: 599px ) {   
 
.product-grid .product-hot-label{font-size:9px; line-height:15px; padding:5px 10px; left:10px; top:10px; }
.product-grid .product-sold-label {font-size:9px; line-height:15px; padding:5px 10px; left:10px; top:10px; }     
.product-grid .product-hot-offer{ width:40px; height:40px; line-height:40px; font-size: 13px;}
.product_footer { font-size: 13px; line-height:18px;}
.product_footer span {min-width:36px; height:36px; font-size: 22px; line-height:36px;}      
.product-grid .product-links{top: 10px; right: 10px;}

.product-grid .product-links li a{ font-size:10px; width:25px; height:25px; line-height:25px;}
    
.product-grid .brand{font-size:12px; line-height:18px;}
    
.product-grid .title{font-size:14px; line-height:20px;}

.product-grid .price{font-size:15px; line-height:20px;}
.product-grid .price span {font-size: 13px;}
.product-grid .rating {font-size: 12px; line-height:18px;}
.product-grid .add-to-cart-btn { font-size:13px; padding:5px 15px; line-height:25px;}
    
/*List Grid View*/
.item.list-group-item .img-event {width: 45%;}
.item.list-group-item .caption{ width: 55%;}
/*List Grid View*/
    
.view-btn {font-size:12px; width:30px; line-height:30px;}  
    
.sort-by span { font-size: 13px; height:30px; line-height:30px; }
.sort-by select { font-size:13px; width: 160px; height:30px; line-height:30px; }

.show-by span { font-size: 13px; height:30px; line-height:30px;}
.show-by select { font-size:13px; width:70px; height:30px; line-height:30px;} 
    
/*PAGINATION*/
.pagination a {width: 30px; height: 30px; line-height: 30px; font-size: 13px;}
.pagination i { font-size: 11px;}
/*PAGINATION*/     
}



@media only screen and ( min-width: 320px) and ( max-width: 480px ) {

.product-grid .product-hot-label{font-size:9px; line-height:15px; padding:5px 10px; left:10px; top:10px; }
.product-grid .product-sold-label {font-size:9px; line-height:15px; padding:5px 10px; left:10px; top:10px; }    
.product-grid .product-hot-offer{ width:40px; height:40px; line-height:40px; font-size: 13px;}
.product_footer { font-size: 13px; line-height:18px;}
.product_footer span {min-width:36px; height:36px; font-size: 22px; line-height:36px;}     
.product-grid .product-links{top: 10px; right: 10px;}

.product-grid .product-links li a{ font-size:10px; width:25px; height:25px; line-height:25px;}
    
.product-grid .brand{font-size:12px; line-height:18px;}
    
.product-grid .title{font-size:14px; line-height:20px;}

.product-grid .price{font-size:15px; line-height:20px;}
.product-grid .price span {font-size: 13px;}
.product-grid .rating {font-size: 12px; line-height:18px;}
.product-grid .add-to-cart-btn { font-size:12px; padding:5px 12px; line-height:20px;} 
    
/*List Grid View*/
.item.list-group-item .img-event {width:50%;}
.item.list-group-item .caption{ width: 50%;}
/*List Grid View*/
    
.view-btn {font-size:12px; width:30px; line-height:30px;}    
    
.sort-by span { font-size: 12px; height:30px; line-height:30px; }
.sort-by select { font-size:12px; width:90px; height:30px; line-height:30px; }

.show-by span { font-size: 12px; height:30px; line-height:30px;}
.show-by select { font-size:12px; width:40px; height:30px; line-height:30px;} 
    
/*PAGINATION*/
.pagination a {width: 30px; height: 30px; line-height: 30px; font-size: 13px;}
.pagination i { font-size: 11px;}
/*PAGINATION*/     
}