/**THE SAME CSS IS USED IN ALL 3 DEMOS**/    
/**gallery margins**/  

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');

body, p, label, div, a, li, ul{
	font-family: 'Open Sans', sans-serif !important;
}

.zoom {      
-webkit-transition: all 0.35s ease-in-out;    
-moz-transition: all 0.35s ease-in-out;    
transition: all 0.35s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}     

.zoom:hover,  
.zoom:active,   
.zoom:focus {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(5.5);    
-moz-transform: scale(5.5);  
-webkit-transform: scale(5.5);  
-o-transform: scale(5.5);  
transform: scale(5.5);    
position:relative;      
z-index:100;  
}


.category_nemu{
	transition: 0.3s; 
	color: #ba24a2!important;
	text-decoration: none;
	height: 60px;	
	padding-top: 20px;
}

.category_nemu:hover{
	background-color: #e4e4e4!important;
	font-weight: bold;
}

.category_nemu_active{
	background-color: #e4e4e4!important;
	font-weight: bold;
	transition: 0.3s; 
	text-decoration: none;
	height: 60px;	
	padding-top: 20px;
}

.text_orange{
	color: #f8981c!important;
}
.bg_orange{
	background-color: #f8981c!important;
}
.bg_ctg_menu{
	background-color: #ffffff!important;
}
.bg_light_grey{
	background-color: #ffffff!important;
}

.text_star{
	color: #fdaa01!important;
}
.bg_star{
	background-color: #fdaa01!important;
}


.show_sold{
	background-color: #F04C35!important;
	color:#fff!important;
	padding: 4px 15px;
	/* border-radius: 5px; */
	font-size: 12px;
}
.show_promo{
	background-color: #5E9BD3!important;
	color:#fff!important;
	padding: 4px 15px;
	/* border-radius: 5px; */
	font-size: 12px;
}
.show_new{
	background-color: #F58249!important;
	color:#fff!important;
	padding: 4px 15px;
	/* border-radius: 5px; */
	font-size: 12px;
}
.show_demand{
	background-color: #92CA6D!important;
	color:#fff!important;
	padding: 4px 15px;
	/* border-radius: 5px; */
	font-size: 12px;
}

.bg_green{
	background-color: #a1c93a!important;
}

.text_green{
	color: #a1c93a!important;
}
.bg_purple{
	background-color: #ba24a2!important;
}
.text_purple{
	color: #ba24a2!important;
}
.bg_grey{
	background-color: #393937!important;
}
.text_grey{
	color: #393937!important;
}
.bg_black{
	background-color: #000000!important;
}
.famely_text{
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.7);
	padding-right: 15px;
	padding-left: 15px;
	/* border-radius: 10px; */
	transition: 0.3s; 
}
.famely_text:hover{
	color: #ffffff!important;
	background-color: rgb(159, 36, 143, 1)!important;
	/* border-radius: 10px; */
}

.focus{
	transition: 0.3s; 
}
.focus:hover{
	color: #ba24a2 !important;
	cursor: pointer;
	/* filter: brightness(100%); */
  	transform: scale(1.1);
	 
}

.opacity{
 	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity: 0.7;
	transition: 0.3s; 
	
}
.opacity:hover {opacity: 1;filter: grayscale(0%);  }

/*-----------------------------*/


/* The Transformation img-hover-zoom img-hover-zoom--brightness */

.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(90%);
}

/* The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.05);
}

.img-hover-zoom {
 /* height: 300px;  Modify this according to your need */
  overflow: hidden; /* Removing this will break the effects */
}

.btn_detail{
	font-size: 13px!important;
	border-radius: 2px!important;
	padding: 4px 5px!important;
	color:#f8981c!important;

	/* text-transform: uppercase!important; */
	background-color: #fff!important;
	border: 1px solid #f8981c!important;	
	color:#e98c12!important;
	transition: 0.3s; 
}
.btn_detail:hover{
	background-color: #f8981c!important;
	border: 1px solid #f8981c!important;
	color:#fff!important;	
}

.btn_product{
	font-size: 13px!important;
	border-radius: 2px!important;
	padding: 4px 5px!important;
	color:#f8981c!important;

	/* text-transform: uppercase!important; */
	background-color: #f8981c!important;
	border: 1px solid #f8981c!important;
	color:#fff!important;	
	transition: 0.3s; 
}
.btn_product:hover{
	background-color: #fff!important;
	border: 1px solid #f8981c!important;
	color:#e98c12!important;
}
.btn_wishlist{
	font-size: 13px!important;
	border-radius: 2px!important;
	padding: 4px 5px!important;

	transition: 0.3s!important; 
	/* text-transform: uppercase!important; */
	border: 1px solid #000!important;
	background-color: #fff!important;
	color:#000!important;
}
.btn_wishlist:hover{
	background-color: #000!important;
	color:#fff!important;
	border: 1px solid #000!important;
}
.image_grey{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	transition: 0.3s; 
	cursor: pointer;
}

.image_grey:hover{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}