.clock
{
  border-radius: 50%;
  background: #fff url(../images/clockBG1.gif) no-repeat center;
  background-size: 95%;
  padding-bottom: 31%;
  position: relative;
  border:solid 1px #506987
}

.clock > div
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hour-hand
{
  background: #000;
  width: 3.5%;
  height: 40%;
  position: absolute;
  left: 48.25%;
  top: 22%;
  -webkit-transform-origin: 50% 71%;
  transform-origin: 50% 71%;
}
.minute-hand
{
  background: #000;
  width: 3.5%;
  height: 55%;
  position: absolute;
  left: 48.25%;
  top: 7%;
  -webkit-transform-origin: 50% 78.5%;
  transform-origin: 50% 78.5%;
}
.second-hand
{
  background: red;
  width: 1.5%;
  height: 42%;
  position: absolute;
  left: 49.25%;
  top: 20%;
  -webkit-transform-origin: 50% 71%;
  transform-origin: 50% 71%;
  z-index: 8;
}
.clock .second-hand::before
{
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -9%;
  left: -200%;
  height: 18%;
  width: 500%;
}
.clock::after
{
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 4%;
  height: 4%;
  z-index: 10;
}