/* RESET
------------------------- */

* { margin: 0; padding: 0; }
li { list-style: none; }
/*body { background: #ddd; }*/

/* CLOCK BODY
------------------------- */

#iClock { 
	position: relative;
	overflow: hidden;
	width: 268px;
	height: 268px;
	margin: 20px auto;
	background: #f8f8f8;
	border-radius: 268px;
 }
 
 /* center dot */
 
 #iClock:after { 
	content: '';
	position: absolute;
	z-index: 12;
	left: 50%;
	top: 50%;
	margin-left: -2px;
	margin-top: -2px;
	width: 2px;
	height: 2px;
	border:1px solid #fff;
	background: #666;
	border-radius: 2px;
 }
 
 /* inset shadow */
 
 #iClock:before { 
	content: '';
	position: absolute;
	z-index: 12;
	width: 100%;
	height: 100%;
	background: transparent;
	overflow: hidden;
	border-radius: 100%;
	-webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
	   -moz-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
		 -o-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
			box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
 }
 

/* MINUTE - HOUR
------------------------- */

ul.clock#minute, ul.clock#hour {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	width: 252px;
	height: 252px;
}

ul.clock#minute li, ul.clock#hour li {
	position: absolute;
	left: 50%;
	top: 0;
	width: 2px;
	height: 126px;
	margin-left: -1px;	
	-webkit-transform-origin: 50% 100%;
	   -moz-transform-origin: 50% 100%;
		 -o-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
}

ul.clock#minute li span, ul.clock#hour li span{
	display: block;
	width: 100%;
	height: 13px;
	text-indent: -9999px;
	background:#333;
}

/* 360(deg) / 60(minute) - 6*1, 6*2, 6*3 ... */
		
ul.clock#minute li:nth-child(1) {  -webkit-transform: rotate(6deg);   -moz-transform: rotate(6deg);   -o-transform: rotate(6deg);   transform: rotate(6deg);   }
ul.clock#minute li:nth-child(2) {  -webkit-transform: rotate(12deg);  -moz-transform: rotate(12deg);  -o-transform: rotate(12deg);  transform: rotate(12deg);  }
ul.clock#minute li:nth-child(3) {  -webkit-transform: rotate(18deg);  -moz-transform: rotate(18deg);  -o-transform: rotate(18deg);  transform: rotate(18deg);  }
ul.clock#minute li:nth-child(4) {  -webkit-transform: rotate(24deg);  -moz-transform: rotate(24deg);  -o-transform: rotate(24deg);  transform: rotate(24deg);  }
ul.clock#minute li:nth-child(5) {  -webkit-transform: rotate(30deg);  -moz-transform: rotate(30deg);  -o-transform: rotate(30deg);  transform: rotate(30deg);  }
ul.clock#minute li:nth-child(6) {  -webkit-transform: rotate(36deg);  -moz-transform: rotate(36deg);  -o-transform: rotate(36deg);  transform: rotate(36deg);  }
ul.clock#minute li:nth-child(7) {  -webkit-transform: rotate(42deg);  -moz-transform: rotate(42deg);  -o-transform: rotate(42deg);  transform: rotate(42deg);  }
ul.clock#minute li:nth-child(8) {  -webkit-transform: rotate(48deg);  -moz-transform: rotate(48deg);  -o-transform: rotate(48deg);  transform: rotate(48deg);  }
ul.clock#minute li:nth-child(9) {  -webkit-transform: rotate(54deg);  -moz-transform: rotate(54deg);  -o-transform: rotate(54deg);  transform: rotate(54deg);  }
ul.clock#minute li:nth-child(10) { -webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);  }
ul.clock#minute li:nth-child(11) { -webkit-transform: rotate(66deg);  -moz-transform: rotate(66deg);  -o-transform: rotate(66deg);  transform: rotate(66deg);  }
ul.clock#minute li:nth-child(12) { -webkit-transform: rotate(72deg);  -moz-transform: rotate(72deg);  -o-transform: rotate(72deg);  transform: rotate(72deg);  }
ul.clock#minute li:nth-child(13) { -webkit-transform: rotate(78deg);  -moz-transform: rotate(78deg);  -o-transform: rotate(78deg);  transform: rotate(78deg);  }
ul.clock#minute li:nth-child(14) { -webkit-transform: rotate(84deg);  -moz-transform: rotate(84deg);  -o-transform: rotate(84deg);  transform: rotate(84deg);  }
ul.clock#minute li:nth-child(15) { -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg);  -o-transform: rotate(90deg);  transform: rotate(90deg);  }
ul.clock#minute li:nth-child(16) { -webkit-transform: rotate(96deg);  -moz-transform: rotate(96deg);  -o-transform: rotate(96deg);  transform: rotate(96deg);  }
ul.clock#minute li:nth-child(17) { -webkit-transform: rotate(102deg); -moz-transform: rotate(102deg); -o-transform: rotate(102deg); transform: rotate(102deg); }
ul.clock#minute li:nth-child(18) { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); }
ul.clock#minute li:nth-child(19) { -webkit-transform: rotate(114deg); -moz-transform: rotate(114deg); -o-transform: rotate(114deg); transform: rotate(114deg); }
ul.clock#minute li:nth-child(20) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul.clock#minute li:nth-child(21) { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); }
ul.clock#minute li:nth-child(22) { -webkit-transform: rotate(132deg); -moz-transform: rotate(132deg); -o-transform: rotate(132deg); transform: rotate(132deg); }
ul.clock#minute li:nth-child(23) { -webkit-transform: rotate(138deg); -moz-transform: rotate(138deg); -o-transform: rotate(138deg); transform: rotate(138deg); }
ul.clock#minute li:nth-child(24) { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); }
ul.clock#minute li:nth-child(25) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul.clock#minute li:nth-child(26) { -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -o-transform: rotate(156deg); transform: rotate(156deg); }
ul.clock#minute li:nth-child(27) { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); }
ul.clock#minute li:nth-child(28) { -webkit-transform: rotate(168deg); -moz-transform: rotate(168deg); -o-transform: rotate(168deg); transform: rotate(168deg); }
ul.clock#minute li:nth-child(29) { -webkit-transform: rotate(174deg); -moz-transform: rotate(174deg); -o-transform: rotate(174deg); transform: rotate(174deg); }
ul.clock#minute li:nth-child(30) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul.clock#minute li:nth-child(31) { -webkit-transform: rotate(186deg); -moz-transform: rotate(186deg); -o-transform: rotate(186deg); transform: rotate(186deg); }
ul.clock#minute li:nth-child(32) { -webkit-transform: rotate(192deg); -moz-transform: rotate(192deg); -o-transform: rotate(192deg); transform: rotate(192deg); }
ul.clock#minute li:nth-child(33) { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
ul.clock#minute li:nth-child(34) { -webkit-transform: rotate(204deg); -moz-transform: rotate(204deg); -o-transform: rotate(204deg); transform: rotate(204deg); }
ul.clock#minute li:nth-child(35) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul.clock#minute li:nth-child(36) { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
ul.clock#minute li:nth-child(37) { -webkit-transform: rotate(222deg); -moz-transform: rotate(222deg); -o-transform: rotate(222deg); transform: rotate(222deg); }
ul.clock#minute li:nth-child(38) { -webkit-transform: rotate(228deg); -moz-transform: rotate(228deg); -o-transform: rotate(228deg); transform: rotate(228deg); }
ul.clock#minute li:nth-child(39) { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
ul.clock#minute li:nth-child(40) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul.clock#minute li:nth-child(41) { -webkit-transform: rotate(246deg); -moz-transform: rotate(246deg); -o-transform: rotate(246deg); transform: rotate(246deg); }
ul.clock#minute li:nth-child(42) { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
ul.clock#minute li:nth-child(43) { -webkit-transform: rotate(258deg); -moz-transform: rotate(258deg); -o-transform: rotate(258deg); transform: rotate(258deg); }
ul.clock#minute li:nth-child(44) { -webkit-transform: rotate(264deg); -moz-transform: rotate(264deg); -o-transform: rotate(264deg); transform: rotate(264deg); }
ul.clock#minute li:nth-child(45) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul.clock#minute li:nth-child(46) { -webkit-transform: rotate(276deg); -moz-transform: rotate(276deg); -o-transform: rotate(276deg); transform: rotate(276deg); }
ul.clock#minute li:nth-child(47) { -webkit-transform: rotate(282deg); -moz-transform: rotate(282deg); -o-transform: rotate(282deg); transform: rotate(282deg); }
ul.clock#minute li:nth-child(48) { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
ul.clock#minute li:nth-child(49) { -webkit-transform: rotate(294deg); -moz-transform: rotate(294deg); -o-transform: rotate(294deg); transform: rotate(294deg); }
ul.clock#minute li:nth-child(50) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul.clock#minute li:nth-child(51) { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
ul.clock#minute li:nth-child(52) { -webkit-transform: rotate(312deg); -moz-transform: rotate(312deg); -o-transform: rotate(312deg); transform: rotate(312deg); }
ul.clock#minute li:nth-child(53) { -webkit-transform: rotate(318deg); -moz-transform: rotate(318deg); -o-transform: rotate(318deg); transform: rotate(318deg); }
ul.clock#minute li:nth-child(54) { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
ul.clock#minute li:nth-child(55) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul.clock#minute li:nth-child(56) { -webkit-transform: rotate(336deg); -moz-transform: rotate(336deg); -o-transform: rotate(336deg); transform: rotate(336deg); }
ul.clock#minute li:nth-child(57) { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
ul.clock#minute li:nth-child(58) { -webkit-transform: rotate(348deg); -moz-transform: rotate(348deg); -o-transform: rotate(348deg); transform: rotate(348deg); }
ul.clock#minute li:nth-child(59) { -webkit-transform: rotate(354deg); -moz-transform: rotate(354deg); -o-transform: rotate(354deg); transform: rotate(354deg); }
ul.clock#minute li:nth-child(60) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }



/* HOUR
        ------------------------- */

ul.clock#hour li {
    width: 12px;
    margin-left: -6px;
}

ul.clock#hour li span{
    height: 30px;
}

/* 360(deg) / 12(hour) - 30*1, 30*2, 30*3 ... */

ul.clock#hour li:nth-child(1) { -webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  -o-transform: rotate(30deg);  transform: rotate(30deg);  }
ul.clock#hour li:nth-child(2) { -webkit-transform: rotate(60deg);   -moz-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);  }
ul.clock#hour li:nth-child(3) { -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  -o-transform: rotate(90deg);  transform: rotate(90deg);  }
ul.clock#hour li:nth-child(4) { -webkit-transform: rotate(120deg);  -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul.clock#hour li:nth-child(5) { -webkit-transform: rotate(150deg);  -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul.clock#hour li:nth-child(6) { -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul.clock#hour li:nth-child(7) { -webkit-transform: rotate(210deg);  -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul.clock#hour li:nth-child(8) { -webkit-transform: rotate(240deg);  -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul.clock#hour li:nth-child(9) { -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul.clock#hour li:nth-child(10) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul.clock#hour li:nth-child(11) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul.clock#hour li:nth-child(12) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
		
		

/* SCORPION - HAND - SECOND
------------------------- */

#scorpion, #hand, #second {
	position: absolute;
	left: 50%;
	top: 0;
	height: 134px;
	
	-webkit-transform-origin: 50% 100%;
	-webkit-transform: rotate(0deg);
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-transform-origin: 50% 100%;
	-moz-transform: rotate(0deg);
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-o-transform-origin: 50% 100%;
	-o-transform: rotate(0deg);
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
	transform-origin: 50% 100%;
	transform: rotate(0deg);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#scorpion span, #hand span, #second span{
	display: block;
	width: 100%;
	text-indent: -9999px;
}

/* SCORPION
------------------------- */

#scorpion {
	z-index: 2;
	width: 12px;
	margin-left: -6px;
	
	-webkit-animation-duration: 43200s;
	-webkit-animation-name: scorpion;
	-moz-animation-duration: 43200s;
	-moz-animation-name: scorpion;
	-o-animation-duration: 43200s;
	-o-animation-name: scorpion;
	animation-duration: 43200s;
	animation-name: scorpion;
}

@-webkit-keyframes scorpion {
  0%   { -webkit-transform: rotate(30deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes scorpion {
  0%   { -moz-transform: rotate(30deg); }
  100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes scorpion {
  0%   { -o-transform: rotate(30deg); }
  100% { -o-transform: rotate(360deg); }
}

@keyframes scorpion {
  0%   { transform: rotate(30deg); }
  100% { transform: rotate(360deg); }
}

#scorpion span{
	height: 103px;
	margin-top: 60px;
	background:#333;
}

/* HAND
------------------------- */
		
#hand {
	z-index: 3;
	width: 12px;
	margin-left: -6px;
	
	-webkit-animation-duration: 3600s;
	-webkit-animation-name: hand;
	-moz-animation-duration: 3600s;
	-moz-animation-name: hand;
	-o-animation-duration: 3600s;
	-o-animation-name: hand;
	animation-duration: 3600s;
	animation-name: hand;
}

@-webkit-keyframes hand {
  0%   { -webkit-transform: rotate(48deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes hand {
  0%   { -moz-transform: rotate(48deg); }
  100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes hand {
  0%   { -o-transform: rotate(48deg); }
  100% { -o-transform: rotate(360deg); }
}

@keyframes hand {
  0%   { transform: rotate(48deg); }
  100% { transform: rotate(360deg); }
}

#hand span{
	height: 144px;
	margin-top: 23px;
	background:#333;
}

/* SECOND
------------------------- */

#second {
	z-index: 4;
	width: 4px;
	margin-left: -2px;
	
	-webkit-animation-duration: 60s;
	-webkit-animation-name: second;
	-moz-animation-duration: 60s;
	-moz-animation-name: second;
	-o-animation-duration: 60s;
	-o-animation-name: second;
	animation-duration: 60s;
	animation-name: second;
}

@-webkit-keyframes second {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes second {
  0%   { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes second {
  0%   { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}

@keyframes second {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#second span{
	height: 118px;
	margin-top: 60px;
	background: #cd1d1d;
}

/* second start ball */

#second span::before{
	content: '';
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 40px;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	background: #cd1d1d;
	border-radius: 100%;
}

/* second center ball */

#second span::after{
	content: '';
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 128px;
	margin-left: -6px;
	width: 12px;
	height: 12px;
	background: #cd1d1d;
	border-radius: 100%;
}