/* Content - top bottom product grid*/
.primary-define .product-grid .hover-image {
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  left: 0;
  transform: rotateY(-10deg);
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  padding: 10px 0;
}
.primary-define .product-grid div:hover .hover-image {
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  visibility: visible;
  opacity: 1;
}
.primary-define .product-grid div:hover img {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

/* Content - top bottom product list*/
.primary-define .product-list .hover-image {
  position: absolute;
  text-align: center;
  top: -10;
  width: 100%;
  left: 0;
  transform: rotateY(-10deg);
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  padding: 10px 0;
}
.primary-define .product-list div:hover .hover-image {
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  visibility: visible;
  opacity: 1;
}
.primary-define .product-list div:hover img {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

/* Left */
.primary-define #column-left .box-product .hover-image {
  position: absolute;
  text-align: center;
  top: -10;
  width: 100%;
  left: 0;
  transform: rotateY(-10deg);
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  padding: 10px 0;
}
.primary-define #column-left .box-product div:hover .hover-image {
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  visibility: visible;
  opacity: 1;
}
.primary-define #column-left .box-product div:hover img {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
/* Right */
.primary-define #column-right .box-product .hover-image {
  position: absolute;
  text-align: center;
  top: -10;
  width: 100%;
  left: 0;
  transform: rotateY(-10deg);
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  padding: 10px 0;
}
.primary-define #column-right .box-product div:hover .hover-image {
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  visibility: visible;
  opacity: 1;
}
.primary-define #column-right .box-product div:hover img {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}