.masking-hover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($m-color-primary, .9);
	opacity: 0;
	@include transition(all 0.3s ease-in-out);
}
.content-center{
	position: absolute;
	top: 50%;
	left: 50%;
	@include transform(translate(-50%, -50%));
}

.btn-wishlist {
	&.active {
		color: #f00!important;
		&:hover{
			color: #f00;
		}
	}
}
.imageBox{
	height: auto;
	display: block;
	margin-bottom: 40px;
	.productImage{
		position: relative;
		margin-bottom: 20px;
		display: block;
		overflow: hidden;
		img{
			width: 100%;
			@include transition(all 0.3s ease-in-out);
		}
		.productMasking{
			@extend .masking-hover;
			ul{
				width: 168px;
				height: 56px;
				background: #fff;
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;
				@extend .content-center;
				li{
					position: relative;
					width: 33.333%;
					&::after {
						position: absolute;
						content: '';
						height: 24px;
						border-right: 1px solid rgba(0,0,0,0.1);
						top: 50%;
						@include transform(translateY(-50%));
						right: 0;
					}
					&:last-child::after {
						display: none;
					}
					a{
						padding: 0;
						width: 100%;
						text-align: center;
						border: none;
						border-radius: 0px;
						background-color: transparent;
						font-size: 14px;
						color: $m-color-secondary;
						@include transition(all 0.3s ease-in-out);
						&:hover{
							color: $m-color-secondary;
						} 
					}
				}
			}
		}
		@include mobile{
			width: 100%;
			height: auto;
		}
	}
	&:hover{
		.productImage img{
			@include transform(scale(1.2));
		}
		.productMasking{
			opacity: 1;
			ul{
				-webkit-animation: move-bottom 0.3s linear;
				animation: move-bottom 0.3s linear;
			}
		}
	} 
	.productCaption{
		width: 100%;
		display: block;
		text-align: center;
		@include tablet {
			text-align: left;
		}
		h4{
			font-size: 16px;
			text-transform: capitalize;
			margin-bottom: 10px;
			a{
				color: $m-color-secondary;
			}
		}
		h3{
			color: #a5a5a5;
			font-size: 20px;
			font-weight: 700;
		}
		h5 {
			font-size: 16px;
			font-weight: 400;
			margin-bottom: 10px;
			a{
				color: $m-color-secondary;
			}
		}
		.offer-price{
			font-size: 24px;
			font-weight: 700;
			color: $m-color-primary;
			display: block;
			margin-bottom: 10px;
		}
		.regular-price{
			font-size: 18px;
			color: #c5c5c5;
			display: block;
			margin-bottom: 25px;
		}
	}
}