body {
   background: #ccc;
}

.dial {
   position: relative;
   width: 350px;
   height: 350px;
   background: #ececec;
   border: 12px solid #5c5c5c;
   border-radius: 50%;
   margin: 8% auto 0;
   box-shadow: 1px 14px 21px 0 rgba(0,0,0,.2);
}

span {
   display: inline-block;
}

.dot {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: -webkit-radial-gradient(ellipse 20px 15px at 50% 0, #ececec 40%, #5c5c5c 80%);
   background: radial-gradient(ellipse 20px 15px at 50% 0, #ececec 40%, #5c5c5c 80%);
   z-index: 10;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
}

.sec-hand {
   position: absolute;
   top: 39px;
   left: 50%;
   margin-left: -7px;
   width: 14px;
   height: 162px;
   background: url('https://themegion.github.com/AnalogClock/sec.svg') 50% 50% no-repeat;
   z-index: 9;
   -webkit-transform-origin: 50% 136px;
           transform-origin: 50% 136px;
}

.sec-hand.shadow {
   top: 46px;
   margin-left: -4px;
   background-image: url('https://themegion.github.com/AnalogClock/sec-shdw.svg');
   opacity: .1;
   z-index: 8;
   -webkit-filter: blur(2px);
           filter: blur(2px);
}

.min-hand {
   position: absolute;
   top: 51px;  
   left: 50%;
   margin-left: -8px;
   width: 16px;
   height: 144px;
   background: url('https://themegion.github.com/AnalogClock/min.svg') 50% 50% no-repeat;
   z-index: 7;
   -webkit-transform-origin: 50% 124px;
           transform-origin: 50% 124px;
}

.min-hand.shadow {
   top: 58px;
   margin-left: -5px;
   background-image: url('https://themegion.github.com/AnalogClock/min-shdw.svg');
   opacity: .1;
   z-index: 6;
   -webkit-filter: blur(2px);
           filter: blur(2px);
}

.hour-hand {
   position: absolute;
   top: 85px;
   left: 50%;
   margin-left: -7px;
   width: 14px;
   height: 110px;
   background: url('https://themegion.github.com/AnalogClock/hour.svg') 50% 50% no-repeat;
   z-index: 5;
   -webkit-transform-origin: 50% 90px;
           transform-origin: 50% 90px;
}

.hour-hand.shadow {
   top: 92px;
   margin-left: -4px;
   background-image: url('https://themegion.github.com/AnalogClock/hour-shdw.svg');
   opacity: .1;
   z-index: 4;
   -webkit-filter: blur(2px);
           filter: blur(2px);
}

.twelve,
.three,
.six,
.nine {
   position: absolute;
   font-family: Lato, sans-serif;
   font-size: 32px;
   color: #777;
}

.twelve {
   top: 35px;
   left: 155px;
}

.three {
   top: 156px;
   right: 39px;
}

.six {
   left: 165px;
   bottom: 35px;
}

.nine {
   top: 156px;
   left: 39px;
}

.diallines {
   position: absolute;
   top: 15px;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 10px;
   background: #b3b3b0;
   z-index: 1;
   -webkit-transform-origin: 50% 160px;
           transform-origin: 50% 160px;
}

.diallines:nth-of-type(5n) {
   position: absolute;
   top: 10px;
   left: 50%;
   margin-left: -2px;
   width: 4px;
   height: 25px;
   background: #b3b3b0;
   z-index: 1;
   -webkit-transform-origin: 50% 165px;
           transform-origin: 50% 165px;
}

.date {
   position: absolute;
   top: 242px;
   left: 50%;
   margin-left: -18px;
   width: 36px;
   height: 30px;
   background: #83837a;
   border-radius: 6px;
   font-family: 'Fjalla One', sans-serif;
   font-size: 21px;
   line-height: 30px;
   color: white;
   text-align: center;
   box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 -2px 2px 0 rgba(255,255,255,.2);
}