@supports (animation-name: anything) {

	.mug-design-anim {
		overflow: hidden;
	}

	.mug-design-anim img {
		animation-name: cycle; 
		animation-iteration-count: infinite;
		animation-duration: 20s;
		display: inherit !important;
	}

	/*
	@keyframes cycle {
		0% {opacity: 0;}
		20% {opacity: 1;}
		30% {opacity: 0;}
		53% {opacity: 0;}
		100% {opacity: 0;}
	}
	*/
	
	@keyframes cycle {
		0%  { top: 0px; } 
		4%  { top: 0px; } 
		16% { top: 0px; opacity:1; z-index:0; } 
		20% { top: 40%; opacity: 0; z-index: 0; } 
		21% { top: -80%; opacity: 0; z-index: -1; } 
		92% { top: -80%; opacity: 0; z-index: 0; }
		96% { top: -80%; opacity: 0; } 
		100%{ top: 0px; opacity: 1; }
	}
	
	.mug-design-anim-index-0 { animation-delay: -1s; }
	.mug-design-anim-index-1 { animation-delay: -17s; }
	.mug-design-anim-index-2 { animation-delay: -13s; }
	.mug-design-anim-index-3 { animation-delay: -9s; }
	.mug-design-anim-index-4 { animation-delay: -5s; }
	
}