.clock, .clock * {
  transition: all 0.5s;
}
.clock, .clock-face {
  box-sizing: content-box;
}
.clock {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0; padding: 0;
}
.clock-face {
  border-collapse: none;
  position: relative;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 3px solid #ddd;
  margin: 0 auto;
}
.marker20.large, .marker24.large {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #343434;
  border-radius: 50%;
  left: 56px;
  top: 4px;
  transform-origin: 4px 56px;
}
.marker20, .marker24 {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #808080;
  border-radius: 50%;
  left: 57px;
  top: 5px;
  transform-origin: 3px 55px;
}
.marker20.small, .marker24.small {
  width: 4px;
  height: 4px;
  background: #ccc;
  border-radius: 50%;
  left: 58px;
  top: 6px;
  transform-origin: 2px 54px;
}
.marker20.half, .marker24.half {
  width: 2px;
  height: 4px;
  background: #ccc;
  left: 58px;
  top: 6px;
  transform-origin: 2px 54px;

}

/* Used for the 10 hour clock. Provides hour markers and half-hour markers. */
.marker20.m1  { transform: rotate(18deg); }
.marker20.m2  { transform: rotate(36deg); }
.marker20.m3  { transform: rotate(54deg); }
.marker20.m4  { transform: rotate(72deg); }
.marker20.m5  { transform: rotate(90deg); }
.marker20.m6  { transform: rotate(108deg); }
.marker20.m7  { transform: rotate(126deg); }
.marker20.m8  { transform: rotate(144deg); }
.marker20.m9  { transform: rotate(162deg); }
.marker20.m10 { transform: rotate(180deg); }
.marker20.m11 { transform: rotate(198deg); }
.marker20.m12 { transform: rotate(216deg); }
.marker20.m13 { transform: rotate(234deg); }
.marker20.m14 { transform: rotate(252deg); }
.marker20.m15 { transform: rotate(270deg); }
.marker20.m16 { transform: rotate(288deg); }
.marker20.m17 { transform: rotate(306deg); }
.marker20.m18 { transform: rotate(324deg); }
.marker20.m19 { transform: rotate(342deg); }

/* Used for the 6, 12, and 24 hour clocks. Provides hour and half-hour markers. */
.marker24.m1 { transform: rotate(15deg); }
.marker24.m2 { transform: rotate(30deg); }
.marker24.m3 { transform: rotate(45deg); }
.marker24.m4 { transform: rotate(60deg); }
.marker24.m5 { transform: rotate(75deg); }
.marker24.m6 { transform: rotate(90deg); }
.marker24.m7 { transform: rotate(105deg); }
.marker24.m8 { transform: rotate(120deg); }
.marker24.m9 { transform: rotate(135deg); }
.marker24.m10 { transform: rotate(150deg); }
.marker24.m11 { transform: rotate(165deg); }
.marker24.m12 { transform: rotate(180deg); }
.marker24.m13 { transform: rotate(195deg); }
.marker24.m14 { transform: rotate(210deg); }
.marker24.m15 { transform: rotate(225deg); }
.marker24.m16 { transform: rotate(240deg); }
.marker24.m17 { transform: rotate(255deg); }
.marker24.m18 { transform: rotate(270deg); }
.marker24.m19 { transform: rotate(285deg); }
.marker24.m20 { transform: rotate(300deg); }
.marker24.m21 { transform: rotate(315deg); }
.marker24.m22 { transform: rotate(330deg); }
.marker24.m23 { transform: rotate(345deg); }

.hand {
  position: absolute;
  left: 60px;
  transform-origin: 0%;
}
.hour-hand {
  height: 8px;
  width: 40px;
  top: 56px;
  background:dodgerblue;
  border-radius:6px;
}
.minute-hand {
  height: 5px;
  width: 54px;
  top: 58px; 
  background: #9eb231;
  border-radius:3px;
}
.second-hand {
  height: 1px;
  border-top:1px dotted #999;
  width: 55px;
  top: 60px; 
  transition: transform 0.15s ease-out;
}
.centre {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #444;
  border-radius: 50%;
  top: 54px;
  left: 54px;
}