soustroji

by Petr Haluza

HTML

<div id="gears">
				<div id="gears-static"></div>
				<div id="gear-system-1">
					<div class="shadow" id="shadow15"></div>
					<div id="gear15"></div>
					<div class="shadow" id="shadow14"></div>
					<div id="gear14"></div>
					<div class="shadow" id="shadow13"></div>
					<div id="gear13"></div>
				</div>
				<div id="gear-system-2">
					<div class="shadow" id="shadow10"></div>
					<div id="gear10"></div>
					<div class="shadow" id="shadow3"></div>
					<div id="gear3"></div>
				</div>
				<div id="gear-system-3">
					<div class="shadow" id="shadow9"></div>
					<div id="gear9"></div>
					<div class="shadow" id="shadow7"></div>
					<div id="gear7"></div>
				</div>
				<div id="gear-system-4">
					<div class="shadow" id="shadow6"></div>
					<div id="gear6"></div>
					<div id="gear4"></div>
				</div>
				<div id="gear-system-5">
					<div class="shadow" id="shadow12"></div>
					<div id="gear12"></div>
					<div class="shadow" id="shadow11"></div>
					<div id="gear11"></div>
					<div class="shadow" id="shadow8"></div>
					<div id="gear8"></div>
				</div>
				<div class="shadow" id="shadow1"></div>
				<div id="gear1"></div>
				<div id="gear-system-6">
					<div class="shadow" id="shadow5"></div>
					<div id="gear5"></div>
					<div id="gear2"></div>
				</div>
				<div class="shadow" id="shadowweight"></div>
				<div id="chain-circle"></div>
				<div id="chain"></div>
				<div id="weight"></div>
			</div>

CSS

body{
	margin:0px;
	padding:0px;
	overflow:hidden;
	background: #196a73; 	height:100%;
}

#gears{
	width:478px;
	height:655px;
	position:relative;
	display:inline-block;
	vertical-align:middle;
}
#gears-static{
	background:url(http://i.imgur.com/FgFnjks.png) no-repeat -363px -903px;
	width:329px;
	height:602px;
	position:absolute;
	bottom:5px;
	right:0px;
	opacity:0.4;
}
#title{
	vertical-align:middle;
	color:#9EB7B5;
	width:43%;
	display:inline-block;
}
#title h1{
	font-family: 'PTSansNarrowBold', sans-serif;
	font-size:3.6em;
	text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
}
#title p{
	font-family: sans-serif;
	font-size:1.2em;
	line-height:148%;
	text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
}

.shadow{
	-webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
	-moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
	box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
}

/*gear-system-1*/
#gear15{
	background: url(http://i.imgur.com/FgFnjks.png) no-repeat 0 -993px;
	width: 321px;
	height: 321px;
	position:absolute;
	left:45px;
	top:179px;

	-webkit-animation: rotate-back 24000ms linear infinite;
	-moz-animation: rotate-back 24000ms linear infinite;
	-ms-animation: rotate-back 24000ms linear infinite;
	animation: rotate-back 24000ms linear infinite;
}
#shadow15{
	width:306px;
	height:306px;
	-webkit-border-radius:153px;
	-moz-border-radius:153px;
	border-radius:153px;
	position:absolute;
	left:52px;
	top:186px;
}
#gear14{
	background: url(http://i.imgur.com/FgFnjks.png) no-repeat 0 -856px;
	width: 87px;
	height: 87px;
	position:absolute;
	left:162px;
	top:296px;
}
#shadow14{
	width:70px;
	height:70px;
	-webkit-border-radius:35px;
	-moz-border-radius:35px;
	border-radius:35px;
	position:absolute;
	left:171px;
	top:304px;
}
#gear13{
	background: url(http://i.imgur.com/FgFnjks.png) no-repeat 0 -744px;
	width: 62px;
	height: 62px;
	position:absolute;
	left:174px;
	top:309px;

	-webkit-animation: rotate 8000ms linear infinite;
	-moz-animation: rotate 8000ms...