@media only screen and (min-width: 40.063em) {

	.products-grid li {
		opacity: 0;
	}
	
	/*.products-grid li.shown,
	.no-js .products-grid li,
	.no-cssanimations .products-grid li {
		opacity: 1;
	}*/
	
	.products-grid li.shown {
		opacity: 1;
	}
	
	/* Effect 0: Show */
	.products-grid.effect-e0 li.animate:not(.shown) {
		opacity: 1;
	}
	
	/* Effect 1: Fade */
	.csstransforms3d .products-grid.effect-e1 li.animate:not(.shown) {
		-webkit-animation: fadeIn 1.5s ease forwards;
		-moz-animation: fadeIn 1.5s ease forwards;
		animation: fadeIn 1.5s ease forwards;
	}
	
	@-webkit-keyframes fadeIn {
		to { opacity: 1; }
	}
	
	@-moz-keyframes fadeIn {
		to { opacity: 1; }
	}
	
	@keyframes fadeIn {
		to { opacity: 1; }
	}
	
	/* Effect 2: Move Up */
	.csstransforms3d .products-grid.effect-e2 li.animate:not(.shown) {
		-webkit-transform: translateY(200px);
		-moz-transform: translateY(200px);
		transform: translateY(200px);
		-webkit-animation: moveUp .5s ease forwards;
		-moz-animation: moveUp .5s ease forwards;
		animation: moveUp .5s ease forwards;
	}
	
	@-webkit-keyframes moveUp {
		to { -webkit-transform: translateY(0); opacity: 1; }
	}
	
	@-moz-keyframes moveUp {
		to { -moz-transform: translateY(0); opacity: 1; }
	}
	
	@keyframes moveUp {
		to { transform: translateY(0); opacity: 1; }
	}
	
	/* Effect 3: Scale Up */
	.csstransforms3d .products-grid.effect-e3 li.animate:not(.shown) {
		-webkit-transform: scale(0.6);
		-moz-transform: scale(0.6);
		transform: scale(0.6);
		-webkit-animation: scaleUp .5s ease-in-out forwards;
		-moz-animation: scaleUp .5s ease-in-out forwards;
		animation: scaleUp .5s ease-in-out forwards;
	}
	
	@-webkit-keyframes scaleUp {
		to { -webkit-transform: scale(1); opacity: 1; }
	}
	
	@-moz-keyframes scaleUp {
		to { -moz-transform: scale(1); opacity: 1; }
	}
	
	@keyframes scaleUp {
		to { transform: scale(1); opacity: 1; }
	}
	
	/* Effect 4: Fall Perspective */
	.csstransforms3d .products-grid.effect-e4 {
		-webkit-perspective: 1200px;
		-moz-perspective: 1200px;
		perspective: 1200px;
	}
	
	.csstransforms3d .products-grid.effect-e4 li.animate:not(.shown) {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: translateZ(500px) translateY(300px) rotateX(-90deg);
		-moz-transform: translateZ(500px) translateY(300px) rotateX(-90deg);
		transform: translateZ(500px) translateY(300px) rotateX(-90deg);
		-webkit-animation: fallPerspective .7s ease-in-out forwards;
		-moz-animation: fallPerspective .7s ease-in-out forwards;
		animation: fallPerspective .7s ease-in-out forwards;
	}
	
	@-webkit-keyframes fallPerspective {
		100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
	}
	
	@-moz-keyframes fallPerspective {
		100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
	}
	
	@keyframes fallPerspective {
		100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
	}
	
	/* Effect 5: Fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
	.csstransforms3d .products-grid.effect-e5 {
		-webkit-perspective: 1500px;
		-moz-perspective: 1500px;
		perspective: 1500px;
	}
	
	.csstransforms3d .products-grid.effect-e5 li.animate:not(.shown) {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform-origin: 50% 50% -300px;
		-moz-transform-origin: 50% 50% -300px;
		transform-origin: 50% 50% -300px;
		-webkit-transform: rotateX(-180deg);
		-moz-transform: rotateX(-180deg);
		transform: rotateX(-180deg);
		-webkit-animation: fly 1s ease-in-out forwards;
		-moz-animation: fly 1s ease-in-out forwards;
		animation: fly 1s ease-in-out forwards;
	}
	
	@-webkit-keyframes fly {
		100% { -webkit-transform: rotateX(0deg); opacity: 1; }
	}
	
	@-moz-keyframes fly {
		100% { -moz-transform: rotateX(0deg); opacity: 1; }
	}
	
	@keyframes fly {
		100% { transform: rotateX(0deg); opacity: 1; }
	}
	
	/* Effect 6: Flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
	.csstransforms3d .products-grid.effect-e6 {
		-webkit-perspective: 1300px;
		-moz-perspective: 1300px;
		perspective: 1300px;
	}
	
	.csstransforms3d .products-grid.effect-e6 li.animate:not(.shown) {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform-origin: 0% 0%;
		-moz-transform-origin: 0% 0%;
		transform-origin: 0% 0%;
		-webkit-transform: rotateX(-80deg);
		-moz-transform: rotateX(-80deg);
		transform: rotateX(-80deg);
		-webkit-animation: flip .8s ease-in-out forwards;
		-moz-animation: flip .8s ease-in-out forwards;
		animation: flip .8s ease-in-out forwards;
	}
	
	@-webkit-keyframes flip {
		100% { -webkit-transform: rotateX(0deg); opacity: 1; }
	}
	
	@-moz-keyframes flip {
		100% { -moz-transform: rotateX(0deg); opacity: 1; }
	}
	
	@keyframes flip {
		100% { transform: rotateX(0deg); opacity: 1; }
	}
	
	/* Effect 7: Helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
	.csstransforms3d .products-grid.effect-e7 {
		-webkit-perspective: 1300px;
		-moz-perspective: 1300px;
		perspective: 1300px;
	}
	
	.csstransforms3d .products-grid.effect-e7 li.animate:not(.shown) {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
		-webkit-animation: helix .8s ease-in-out forwards;
		-moz-animation: helix .8s ease-in-out forwards;
		animation: helix .8s ease-in-out forwards;
	}
	
	@-webkit-keyframes helix {
		100% { -webkit-transform: rotateY(0deg); opacity: 1; }
	}
	
	@-moz-keyframes helix {
		100% { -moz-transform: rotateY(0deg); opacity: 1; }
	}
	
	@keyframes helix {
		100% { transform: rotateY(0deg); opacity: 1; }
	}
	
	/* Effect 8: PopUp  */
	.csstransforms3d .products-grid.effect-e8 {
		-webkit-perspective: 1300px;
		-moz-perspective: 1300px;
		perspective: 1300px;
	}
	
	.csstransforms3d .products-grid.effect-e8 li.animate:not(.shown) {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: scale(0.4);
		-moz-transform: scale(0.4);
		transform: scale(0.4);
		-webkit-animation: popUp .8s ease-in forwards;
		-moz-animation: popUp .8s ease-in forwards;
		animation: popUp .8s ease-in forwards;
	}
	
	@-webkit-keyframes popUp {
		60% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
		100% { -webkit-transform: scale(1); opacity: 1; }
	}
	
	@-moz-keyframes popUp {
		60% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
		100% { -moz-transform: scale(1); opacity: 1; }
	}
	
	@keyframes popUp {
		60% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
		100% { transform: scale(1); opacity: 1; }
	}

}