/* CLOCK.JS v1 - 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: 444px; max-height: 444px;
	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.js */
#clock {
	width: 444px; height: 444px;
	position: relative;
	margin: auto;
	border-radius: 222px;
	background-color: rgba(1,1,1,.8);
}
#clock .needle {
	position: absolute;
	bottom: 222px;
	background-color: #ecf0e9;
	border-radius: 2px;
	-webkit-transform-origin: bottom center;
	   -moz-transform-origin: bottom center;
		-ms-transform-origin: bottom center;
		 -o-transform-origin: bottom center;
			transform-origin: bottom center;
	-webkit-transition: -webkit-transform .5s ease 0s;
	   -moz-transition:    -moz-transform .5s ease 0s;
		-ms-transition:     -ms-transform .5s ease 0s;
		 -o-transition:      -o-transform .5s ease 0s;
			transition:         transform .5s ease 0s;
}
#clock #needle_S {
	width: 2px; height: 210px;
	left: 221px;
}
#clock #needle_M {
	width: 6px; height: 180px;
	left: 220px;
}
#clock #needle_H {
	width: 8px; height: 140px;
	left: 219px;
}



/* 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);
	}
}