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

.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;  
}

.bg_light_grey{
	background-color: #dbdbdb!important;
}
.category_nemu{
transition: 0.3s; 
color: #1a4ae5!important;
text-decoration: none;
height: 60px;	
padding-top: 20px;
}

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

.show_sold{
	background-color: #ed1c24!important;
	color:#fff!important;
	padding: 4px 15px;
	border-radius: 5px;
	font-size: 12px;
}
.show_promo{
	background-color: #3c8fcd!important;
	color:#fff!important;
	padding: 4px 15px;
	border-radius: 5px;
	font-size: 12px;
}
.show_new{
	background-color: #c45827!important;
	color:#fff!important;
	padding: 4px 15px;
	border-radius: 5px;
	font-size: 12px;
}
.show_demand{
	background-color: #719e38!important;
	color:#fff!important;
	padding: 4px 15px;
	border-radius: 5px;
	font-size: 12px;
}

.bg_green{
	background-color: #00aeef!important;
}
.text_green{
	color: #00aeef!important;
}
.bg_blue{
	background-color: #0017a3!important;
}
.text_blue{
	color: #0017a3!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;
}
.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.3);
}

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


.btn_product{
	font-size: 15px!important;
	border-radius: 2px!important;
	padding: 4px 10px!important;
	color:#f8981c!important;
	background-color: #fff!important;
	border: 2px solid #f8981c!important;
	text-transform: uppercase!important;
	transition: 0.3s; 
}
.btn_product:hover{
	background-color: #f8981c!important;
	color:#fff!important;
}
.btn_wishlist{
	font-size: 15px!important;
	border-radius: 2px!important;
	padding: 4px 10px!important;
	background-color: #000!important;
	color:#fff!important;
	border: 2px solid #000!important;
	transition: 0.3s!important; 
	text-transform: uppercase!important;
}
.btn_wishlist:hover{
	border: 2px solid #000!important;
	background-color: #fff!important;
	color:#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%);
}
/*-----=================================------------*/
/* popular books */
.popular-books {
    position: relative;
	height: 400px;
}

.book-card {
    position: relative;
    box-shadow: 0px 2px 10px #aaa;
    max-width: 420px;
    overflow: hidden;
    transition: all .8s;
}

.rotate {
    perspective: 100rem;
}

.back {
    position: absolute;
    top: -100%;
    background: rgb(255, 255, 255, 0.9);
    height: 100%;
    width: 100%;
    opacity: 0;
    user-select: none;
    pointer-events: none;
    transform: rotateY(180deg);
    transition: top .8s, opacity .4s;
}

.back-content {
    position: absolute;
    top: 10%;
    left: 8%;
    right: 8%;
    text-align: start;
}

.rotate:hover .book-card {
    transform: rotateY(180deg);
}

.rotate:hover .back {
    opacity: 1;
    top: 0;
    user-select: auto;
    pointer-events: auto;
}
/* end of popular books */

/*-----=================================------------*/