@charset "UTF-8";
/* CSS Document */

.clock_body { 
  
  margin-left:auto;
  margin-right:auto;
  width: 500px;
}
.clock { /*Clock face*/
  
  background: rgba(255, 255, 255, 0.1);
  background-position:50% 50%;
  background-size:100%;
  width: 100%;
  height: 100%;
	opacity:.8;
  border-radius: 100%;
  position: relative;
  margin: 20px auto;
  box-shadow: 1px 5px 20px rgba(0,0,0,0.4);
}
.clock:after { /*Dot in the middle*/
  background:#999;
  border-radius: 100%;
  width:5%;
  height:5%;
  margin-left: 47.8%;
  margin-top: 47.8%;
  content:"";
  position:absolute;
  box-shadow: 1px 5px 5px rgba(0,0,0,0.6);
  z-index: 10;  
  
}
.clock span { /*Group hand style*/
  display: block;
  background: black;
  position: absolute;
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center; /*needed for Chrome! Not included in Prefix FREE*/
  left: 50%;
  bottom: 50%;
  border-radius: 10px; 
	box-shadow: 1px 4px 10px rgba(0,0,0,0.6); 
}
.clock .hours { /*Hour hand*/
  height: 30%;
  left: 48.8%;
  width: 4%;
  z-index:9;
}
.clock .minutes { /*Minute hand*/
  height: 45%;
  width: 3%;
  left: 49.2%;
  z-index:9;
}
.clock .seconds { /*Seconds hand*/
  background: black;
  height: 47%;
  left: 49.7%;
  width: 2%;
  z-index:9;
}
.seconds:after { /*Back of seconds hand*/
  background: black;
  height: 30%;
  width: 250%;
   left: -80%;
  content:"";
  top:100%;
  position:absolute;
  border-radius: 10px; 

}
.clock .midday, .clock .three, .clock .six, .clock .nine { /*Hour markers*/
  background: rgba(255,255,255,0.3);
  height: 10%;
  width: 1px;
  left: 50%;
  top: 1%;
  border-radius: 3px;
}
.clock .three { /*Hour marker - Three o'clock*/
  top: 50%;
  left: 89%;
  height: 1px;
  width: 10%;
}
.clock .six { /*Hour marker - Six o'clock*/
  top: 89%;
}
.clock .nine { /*Hour marker - Nine o'clock*/
  top: 50%;
  left: 1%;
  height: 1px;
  width: 10%;
}
/***********Clock sizes*************/
.clock1 {
  float:left;
  width: 250px;
  height: 250px;
}
.clock2 {
  float:left;
  width: 200px;
  height: 200px;
}
.clock3 {
  float:right;
  width: 150px;
  height: 150px;
}
.clock4 {
  float:left;
  width: 100px;
  height: 100px;
}
.clock5 {
  float:right;
  width: 50px;
  height: 50px;
}