.clock{
    width: 63px;
    height: 63px;
    border: 1px solid #d4dee1;
    border-radius: 50%;
    background-color: antiquewhite;
    margin: 0px;
    padding: 0px;
    position: relative;
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5);
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	opacity: 1.0; /*now opacity depends on srcanim_div*/
	transition: opacity 1.0s;
}
.clock:hover {
	opacity: 1.0;
}
.center{
    background-color: #555;
    position: absolute;
    left: calc(50% - 1px);
    top:  calc(50% - 1px);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    z-index: 20;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.hourhand{
    width: 3px;
    height: 14px;
    background-color: #e6194B;
	background-image: -webkit-linear-gradient(top,
		#e6194B 40%,
		antiquewhite);
    transform-origin: bottom center;
    border-radius: 0px;
    position: absolute;
    top: 18px;
    left: 29px;
    z-index: 10;
	/*
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
	*/
	transition: transform .4s linear;
	transform: rotate(0deg);

}
.minhand{
    width: 3px;
    height: 19px;
    background-color:#888;
	background-image: -webkit-linear-gradient(top,
		#888 60%,
		antiquewhite);
    transform-origin: bottom center;
    border-radius: 0px;
    position: absolute;
    top: 13px;
    left: 29px;
    z-index: 9;
	/*
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
	*/
	transition: transform .4s linear;
      transform: rotate(0deg);

}
.sechand{
    width: 1px;
    height: 20px;
    background-color:red;
    transform-origin: bottom center;
    border-radius: 0px;
    position: absolute;
    top: 10px;
    left: 29px;
    transition: all 0.06s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    z-index: 8;  
      transform: rotate(0deg);

}
.time{
    position: absolute;
    top: 45%;
    left: 10%;
    border: 1px solid #fff8dc;
    background-color: #fff;
    padding: 1px;
    display: block;
    box-shadow: inset 0px 2px 5px rgba(0,0,0,.4);
    border-radius: 5px;
    min-width: 10px;
    height: 5px;

}
.time small{
    color:red;
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.clock ul{
    list-style: none;
    padding: 0px 0px 0px 0px;
}
.clock ul li{
    position: absolute;
    width:10px;
    height:10px;
    text-align: center;
    line-height: 10px;
    font-size: 8px;
    color:#444;
}
.clock ul li:nth-child(1){
    right: 18%;
    top:8%;
}
.clock ul li:nth-child(2){
    right: 5%;
    top:24%;
}
.clock ul li:nth-child(3){
    right: 0px;
    top:calc(50% - 4px);
    color:#000;
    font-size: 10px;
    font-weight: bold;
}
.clock ul li:nth-child(4){
    right: 5%;
	bottom: 17%;
}
.clock ul li:nth-child(5){
    right: 19%;
	bottom: 4%;
}
.clock ul li:nth-child(6){
    right: calc(50% - 6px);
	bottom: -1px;
    color:#000;
    font-size: 10px;
    font-weight: bold;
}
.clock ul li:nth-child(7){
    left: 20%;
	bottom: 4%;
}
.clock ul li:nth-child(8){
    left: 5%;
	bottom: 17%;
}
.clock ul li:nth-child(9){
    left: 0%;
    top:calc(50% - 5px);
    color:#000;
    font-size: 10px;
    font-weight: bold;
}
.clock ul li:nth-child(10){
    left: 5%;
    top:24%;
}
.clock ul li:nth-child(11){
    left: 19%;
    top:8%;
}
.clock ul li:nth-child(12){
    right: calc(50% - 4px);
    top:2px;
    color:#000;
    font-size: 10px;
    font-weight: bold;
}