.product-card-hover-wrapper {
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,0.04);
	overflow: hidden;
	position: relative;
	text-align: center;
	@include border-radius($global-radius);

	.image-overlay-content {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0
	}

	&.overlay-fade-in {
		p {
			letter-spacing: 0.15em;
			color: $white-smoke;
			font-size: rem-calc(28);
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(linear);
		}
		img {
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(linear);
		}
		.image-overlay-content {
			@include opacity(0);
			background-color: rgba(0,0,0, 0.4);
			@include transition-property(all);
                        @include transition-duration(0.4s);
                        @include transition-timing-function(ease-in-out);
		}
		h2 {
			color: $silver;
			font-size: rem-calc(29);
			margin-top: 40%;
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(ease-in-out);
			background: rgba(0,0,0,0.7);
		}
		.button {
			display: inline-block;
			text-decoration: none;
			padding: rem-calc(7) rem-calc(14); 
			background: $white;
			color: $jet;
			text-transform: uppercase;
			@include box-shadow($black 0 0 1px);
			position: relative;
			border: 1px solid $aluminum;
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(ease-in-out);

			&:hover {
				@include box-shadow($black 0 0 5px);
			}

  		}
		&:hover img {
			@include transform(scale(1.2));
		}
  		&:hover .image-overlay-content {
			@include opacity(1);

  		}
		&:hover h2, p, .button {
			@include opacity(1);
		}
		&:hover p {
			@include transition-delay(0.1s);
		}
		&:hover .button {
			@include transition-delay(0.2s);
		}

	} 

	&.overlay-slide-in-left {
		img {
			@include transition-property(all);
                        @include transition-duration(0.3s);
                        @include transition-timing-function(ease-in-out);
		}
		.image-overlay-content {
			background-image: url(../images/pattern1.jpg);
			background-color: rgba(0,0,0,0.3);
			@include transform(translateX(-110%));
			@include opacity(1);
			@include transition-property(all);
                        @include transition-duration(0.4s);
                        @include transition-timing-function(ease-in-out);
			@include box-shadow($iron 0 0 7px);
		}
		h2{
			font-size: rem-calc(29);
			background: rgba(255, 255, 255, 0.7);
			margin-top: 40%;
			color: $black;
			@include box-shadow(rgba(0,0,0,0.1) 0 1px 1px);
		}
		p {
			@include opacity(0);
			color: $oil;
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(linear);
		}
		.button {
			display: inline-block;
			text-decoration: none;
			padding: rem-calc(7) rem-calc(14); 
			background: $black;
			color: $white;
			text-transform: uppercase;
			@include box-shadow($black 0 0 1px);
			position: relative;
			@include border-radius(rem-calc(7));

			&:hover {
				background-color: $tuatara;
			}
  		}
		&:hover .image-overlay-content {
			@include transform(translateX(0));
		} 
		&:hover img {
			@include transform(translateX(80%));
			@include transition-delay(0.1s);
		}
		&:hover p{
			@include opacity(1);
			@include transition-delay(0.4s);
		}

	}
	
	&.overlay-fade-in-new-background {
		.button {
			display: inline-block;
			text-decoration: none;
			padding: rem-calc(7) rem-calc(14); 
			background: $black;
			color: $white;
			text-transform: uppercase;
			@include border-radius(rem-calc(5));
			@include box-shadow($black 0 0 1px);
			position: relative;
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(ease-in-out);

    			&:hover {
				@include box-shadow(#white 0 0 rem-calc(5));
				background-color: $jet;
    			}

  		}
		p{
			font-size: rem-calc(28); 
		}
		.image-overlay-content {
			@include opacity(0);
			background-image: url(../images/pattern2.jpg);
			background-color: rgba(255,255,255, 0.5);
			@include transition-property(all);
                        @include transition-duration(0.4s);
                        @include transition-timing-function(ease-in-out);

  		}
		h2 {
			color: $black;
			font-size: rem-calc(26);
			margin-top: 30%;
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(ease-in-out);
		}
  		p {
			@include opacity(0);
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(linear);
		}
		img{
			@include transition-property(all);
                        @include transition-duration(0.2s);
                        @include transition-timing-function(ease-in-out);
		}
		&:hover img {
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
			filter: gray;
			-webkit-filter: grayscale(100%);
			@include transform(scale(1.5));
  		}
		&:hover .image-overlay-content {
			@include opacity(1);
  		}
		&:hover h2, p, .button {
			@include opacity(1);
		}
		&:hover p {
			@include transition-delay(0.1s);
		}
		&:hover .button {
			@include transition-delay(0.2s);
		}

	}
}



/* RTL */
[dir='rtl'] .product-card-hover-wrapper {
        .image-overlay-content {
                left: auto;
		right:0;
        }
}