/* SAMPLE CSS STYLES FOR JQUERY CLOCK PLUGIN */
.jqclock {
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 5px #2936c2 solid;
  background: #acc8fafc;
  padding: 15px;
  margin: 3px;
  min-height: 210px;
}

.clockdate {
  color: DarkRed;
  margin-bottom: 15px;
  font-size: 28px;
  display: block;
}

.clocktime {
  border: 2px inset White;
  background: rgb(44, 1, 42);
  padding: 10px;
  font-size: 36px;
  font-family: "Courier";
  color: LightGreen;
  margin: 22px;
  display: block;
  font-weight: 500;
}


.clock{
  width: 210px;
  height: 210px;
  margin:0 auto;
  margin-top: 1.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(clock.png);
  background-size: cover;
  border: 5px solid #2936c2;
  border-radius: 50%;
  box-shadow: 0 -15px 15px rgba(255,255,255, 0.05),
              inset 0 -15px 15px rgba(255,255,255, 0.05),
              0 15px 15px rgba(0, 0, 0, 0.3),
              inset 0 15px 15px rgba(0, 0, 0, 0.3);
  
}
.clock:before{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  z-index: 10000;
}
.clock .hour, .clock .minutes, .clock .seconds{
  position: absolute;

}
.clock .hour, .hor{
  width: 120px;
  height: 100px;

}
.clock .minutes, .mn{
  width: 160px;
  height: 120px;
  
}
.clock .seconds, .sc{
  width: 180px;
  height: 150px;
}
.hor, .mn, .sc{
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
}
.hor:before{
  content: '';
  position: absolute;
  width: 7px;
  height: 55px;
  background: #2936c2;
  z-index: 10;
  border-radius: 6px 6px 0 0;
}
.mn:before{
  content: '';
  position: absolute;
  width: 4.5px;
  height: 75px;
  background: #6745ec;
  z-index: 11;
  border-radius: 6px 6px 0 0;
}
.sc:before{
  content: '';
  position: absolute;
  width: 3px;
  height: 100px;
  background:rgb(252, 40, 86);
  z-index: 12;
  border-radius: 6px 6px 0 0;
}