BODY { margin: 0px; padding: 0px; }
#wrapper { width: 100%; margin: 0px auto; padding: 0px; }
.banner { background: URL(../images/mainbg.jpg) no-repeat 0 0; width: 100%; position: relative;  background-size: 100%; }
#clouds { background: URL(../images/cloud.png) 0 0; width: 100%; height: 50%; position: absolute; top: 0px; z-index: 1; background-size: 100%;}
#clouds1 { background: URL(../images/cloud1.png) 0 0; width: 100%; height: 50%; position: absolute; top: 0px; z-index: 1; background-size: 100%;}
#clouds2 { background: URL(../images/cloud2.png) 0 0; width: 100%; height: 50%; position: absolute; top: 0px; z-index: 1; background-size: 100%;}

.snowflake {
	position: absolute;
	display: block;
	position: absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-image: -webkit-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: -moz-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: -ms-radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-image: radial-gradient(
		center,
		circle farthest-corner,
		rgba(255, 255, 255, 1) 40%,
		rgba(255, 255, 255, 0) 100%
	);
}

#snow {
	position: absolute;
	width: 100%;
	height: 100%;
}

#building { background: URL(../images/building.png) 0 0; width: 100%; height: 100%;position: absolute; top: 0px; z-index: 2; background-size: 100%;}
.banner:before { content: ""; display: block; padding-top: 0%;  }
.lady { background: URL(../images/lady.png) no-repeat 0 0%; width: 17.5833333%; height: 83%; position: absolute; left: 9.08333333%; right: 0; bottom: 0; top: 17%; animation: sprite 1s steps(19) infinite; z-index: 3; background-size: 100%;}  
.midmachine { background: URL(../images/midmachine.png) no-repeat 0 0%; width: 14.5833333%; height: 48%; position: absolute; left: 48.416666666%; right: 0; bottom: 0; top: 52%; animation: sprite 0.4s steps(6) infinite; z-index: 4; background-size: 100%;}  
.firstmachine { background: URL(../images/firstmachine.png) no-repeat 0 0%; width: 15%; height: 54%; position: absolute; left: 37%; right: 0; bottom: 0; top: 46%; animation: sprite 0.3s steps(6) infinite; z-index: 4; background-size: 100%; }
.seo { background: URL(../images/seo.png) no-repeat 0 0%; width: 100%; height: 100%; position: absolute; left: 0%; right: 0; bottom: 0; top: 0%; animation: sprite 0.7s steps(6) infinite; z-index: 5; background-size: 100%;}
.funnel1 { background: URL(../images/funnel1.png) no-repeat 0 0%; width: 12.833333%; height: 35%; position: absolute; left: 26.25%; right: 0; bottom: 0; top: 54.2%; z-index: 3; background-size: 100%;}
.nut { background: URL(../images/nut.png) no-repeat 0 0%; width: 6.166666%; height: 4.4%; position: absolute; left: 45.25%; right: 0; bottom: 0; top: 87.50%; z-index: 8; background-size: 100%;}
.lastfunnel { background: URL(../images/lastfunnel.png) no-repeat 0 0%; width: 8.0833333%; height: 31.2%; position: absolute; left: 78.75%; right: 0; bottom: 0; top: 44.6%; z-index: 3; background-size: 100%;}
.midfunnel { background: URL(../images/midpipe.png) no-repeat 0 0%; width: 7.91666666%; height: 18.2%; position: absolute; left: 61.25%; right: 0; bottom: 0; top: 67.8%; z-index: 6; background-size: 100%;}
.lastmachine { background: URL(../images/lastmachine.png) no-repeat 0 0%; width: 11.9166666%; height: 53%; position: absolute; left: 67.66666%; right: 0; bottom: 0; top: 47%; animation: sprite 0.1s steps(2) infinite; z-index: 4; background-size: 100%;}
.icons { background: URL(../images/icons.png) no-repeat 0 0%; width: 9.5%; height: 28%; position: absolute; left: 24.0833333%; right: 0; bottom: 0; top: 33.2%; animation: sprite 4s steps(92) infinite; z-index: 7; background-size: 100%;}
.watch1 { background: URL(../images/watch1.png) no-repeat 0 0%; width: 2.5%; height: 6%; position: absolute; left: 49.0833333%; right: 0; bottom: 0; top: 59.2%; animation: sprite 1s steps(22) infinite; z-index: 7; background-size: 100%;}
.watch2 { background: URL(../images/watch2.png) no-repeat 0 0%; width: 2.58333333%; height: 6.4%; position: absolute; left: 57.75%; right: 0; bottom: 0; top: 53.4%; animation: sprite 1s steps(22) infinite; z-index: 7; background-size: 100%;}
.icontray { background: URL(../images/icontray.png) no-repeat 0 0%; width: 6.25%; height: 4.6%; position: absolute; left: 45.25%; right: 0; bottom: 0; top: 83.6%; animation: sprite 2s steps(63) infinite; z-index: 7; background-size: 100%;}
.coin { background: URL(../images/coin.png) no-repeat 0 0%; width: 20.666666%; height: 24.8%; position: absolute; left: 72.58333333%; right: 0; bottom: 0; top: 24.4%; animation: sprite 2s steps(19) infinite; z-index: 7; background-size: 100%;}
.smoke { background: URL(../images/smoke.png) no-repeat 0 0%; width: 4.41666666%; height: 15.2%; position: absolute; left: 46.58333333%; right: 0; bottom: 0; top: 43.6%; animation: sprite 0.6s steps(17) infinite; z-index: 7; background-size: 100%;}

@keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

@media (max-width: 1200px) { 
#wrapper { width: 100%; margin: 0px; padding: 0px; }
}