/* Custom code goes here - paste your css code below in line 3 */


media (min-width: 768px) {
	

	/***** 1 FORMA DE HOVER EN IMAGEN ****/

	/* CSS product imagen hover encima para product list */
.product-image-container a.thumbnail.product-thumbnail, .product-image-container a.thumbnail.product-thumbnail picture {
  display: inline;
}

#products .products .thumbnail-container .product-thumbnail .image1{opacity:1;transition:all .5s cubic-bezier(.07,.74,.56,.89)}

.product-image-container a.thumbnail.product-thumbnail, .product-image-container a.thumbnail.product-thumbnail picture .image1 {
  opacity: 1 !important;
}

	#products .products .thumbnail-container .product-thumbnail .image1{opacity:1;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
	  #products .products .thumbnail-container:hover .product-thumbnail .image1{opacity:0}

	#products .products .thumbnail-container .product-thumbnail .image2{
		opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89);
		width: 88% !important;	
	}
	  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}
	  /* END product*/


	.image2 {
		position: absolute;
		margin: 0px;
		/* left: 22px; */
		left: 22px;
	}

	/* product imagen hover encima para product list */

	/*

	#products .products .thumbnail-container .product-thumbnail .image1{opacity:1;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
	  #products .products .thumbnail-container:hover .product-thumbnail .image1{opacity:0; display:none;}

	#products .products .thumbnail-container .product-thumbnail .image2{opacity:0; 
		transition:all .5s cubic-bezier(.07,.74,.56,.89)
		 }
	/*#products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}*/

	/* probar */
	/*
	#posicion-image2 {
		position: absolute;
		margin: 0px;
		left: 0px;
		opacity:1;
	}

	#products .products .thumbnail-container:hover .product-thumbnail .image2 {
		position: relative;
		margin: 0px;
		left: 0px;
		opacity:1;
	}


	/* END Posiciona imagen encima de otra */

} /* minimo 768 ancho para hover */


/* en moviles hover img2 OCULTO */
@media (max-width: 768px) {
	
	 #products .products .thumbnail-container:hover .product-thumbnail .image1{ opacity:1 }
	
	.image2 {
		position: absolute;
		left: 0px;
		display: none !important;
	}
}