/* CLOCK.JQ.JS v3 - 2013 */
/* rhq.be - haqqazi.com - github @rhq */



/* Global */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: arial, sans-serif;
	font-size: 7px;
	line-height: 1.6;
	background-color: #ecf0e9;
}



/* Layout */
#main {
	width: 100%; height: 100%;
	display: table;
	margin: 0; padding: 0;
}
#main #content {
	display: table-cell;
	vertical-align: middle;
}
#main #content #block {
	max-width: 450px; max-height: 450px;
	margin: auto;
}
#main #content #block.center > div {
	position: absolute !important;
	top: 50%; left: 50%;
	-webkit-transition: all 250ms ease;
	   -moz-transition: all 250ms ease;
		-ms-transition: all 250ms ease;
		 -o-transition: all 250ms ease;
			transition: all 250ms ease;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		 -o-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
}



/* Clock.jq.js */
#clock {
	width: 450px; height: 450px;
	margin: auto;
}
#clock .circle .semicircle {
	position: relative;
	float: left;
	overflow: hidden;
}
#clock .circle .semicircle div {
	border-top: 30px solid transparent;
	border-right: 30px solid transparent;
	-webkit-transition: all ease 500ms;
	   -moz-transition: all ease 500ms;
		-ms-transition: all ease 500ms;
		 -o-transition: all ease 500ms;
		 	transition: all ease 500ms;
}
#clock #hour, #clock #minute { position: absolute; }
#clock #hour { margin: 120px 0 0 120px; }
#clock #minute { margin: 60px 0 0 60px; }
#clock #hour .semicircle {
	width: 105px; height: 210px;
}
#clock #hour1, #clock #hour2 {
	width: 150px; height: 150px;
	border-radius: 300px;
	border-left: 30px solid rgba(1,1,1,.4);
	border-bottom: 30px solid rgba(1,1,1,.4);
}
#clock #hour2 { margin-left: -105px; }
#clock #minute .semicircle {
	width: 165px; height: 330px;
}
#clock #minute1, #clock #minute2 {
	width: 270px; height: 270px;
	border-radius: 540px;
	border-left: 30px solid rgba(1,1,1,.6);
	border-bottom: 30px solid rgba(1,1,1,.6);
}
#clock #minute2 { margin-left: -165px; }
#clock #seconde .semicircle {
	width: 225px; height: 450px;
}
#clock #seconde1, #clock #seconde2 {
	width: 390px; height: 390px;
	border-radius: 780px;
	border-left: 30px solid rgba(1,1,1,.8);
	border-bottom: 30px solid rgba(1,1,1,.8);
}
#clock #seconde2 { margin-left: -225px; }



/* Media queries */
@media screen and (max-width: 570px) {
	#main #content #block.center > div {
		-webkit-transform-origin: center center;
		   -moz-transform-origin: center center;
			-ms-transform-origin: center center;
			 -o-transform-origin: center center;
			 	transform-origin: center center;
		-webkit-transform: translate(-50%,-50%) scale(.6,.6);
		   -moz-transform: translate(-50%,-50%) scale(.6,.6);
			-ms-transform: translate(-50%,-50%) scale(.6,.6);
			 -o-transform: translate(-50%,-50%) scale(.6,.6);
			 	transform: translate(-50%,-50%) scale(.6,.6);
	}
}