*{
	box-sizing: border-box;
}
body {
	background-color: white;
}
#clock{
	position: absolute;
	width: 90%;
	top: 50%;
	margin-top: -12%;
	left: 50%;
	margin-left: -45%;
}
#clock:before{
	content: "";
	display: block;
	padding-top: 24%;
}
.digit{
	position: absolute;
	top: 0;
	width: 16%;
	height: 100%;
}

.c{
	position: absolute;
	width: 50%;
	border-radius: 400px;
	border: solid 1px #CCC;
	overflow: hidden;
}
.c:before{
	content: "";
	display: block;
	padding-top: 100%;
}

.ai{
	position: absolute;
	background-color: #000;
	height: 8%;
	top: 50%;
	left: 50%;
	
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: 7% 50%;
	-moz-transform-origin: 7% 50%;
	-moz-transform: rotate(-90deg);
	-ms-transform-origin: 7% 50%;
	-ms-transform: rotate(-90deg);
	transform-origin: 7% 50%;
	transform: rotate(-90deg);
	
}
.small{
	width: 40%;
}
.long{
	
	width: 49%;
}
#H1{
	left: 0;
}

#H2{
	left: 16%;
}

#M1{
	left: 34%;
}

#M2{
	left: 50%;
}

#S1{
	left: 68%;
}

#S2{
	left: 84%;
}

.c0{
	top: 0;
	left: 0;
}
.c1{
	top: 0;
	left: 50%;
}
.c2{
	top: 33.33%;
	left: 0;
}
.c3{
	top: 33.33%;
	left: 50%;
}
.c4{
	top: 66.66%;
	left: 0;
}
.c5{
	top: 66.66%;
	left: 50%;
}