.clock {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid  white;
  border-radius: 50%;
  margin: 20px;
  left: 35px;
  top: 20px;
  margin: 0 auto;
}


.marker {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: white;
}

.marker:nth-child(1) {
  top: 22.05771px;
  left: 145px;
}

.marker:nth-child(2) {
  top: 55px;
  left: 177.94229px;
}

.marker:nth-child(3) {
  top: 100px;
  left: 190px;
}

.marker:nth-child(4) {
  top: 145px;
  left: 177.94229px;
}

.marker:nth-child(5) {
  top: 177.94229px;
  left: 145px;
}

.marker:nth-child(6) {
  top: 190px;
  left: 100px;
}

.marker:nth-child(7) {
  top: 177.94229px;
  left: 55px;
}

.marker:nth-child(8) {
  top: 145px;
  left: 22.05771px;
}

.marker:nth-child(9) {
  top: 100px;
  left: 10px;
}

.marker:nth-child(10) {
  top: 55px;
  left: 22.05771px;
}

.marker:nth-child(11) {
  top: 22.05771px;
  left: 55px;
}

.marker:nth-child(12) {
  top: 10px;
  left: 100px;
}

.hand {
  position: absolute;
  left: 100px;
  bottom: 100px;
  background-color: white;
}

.hour {
  width: 8px;
  height: 75px;
  margin-left: -2px;
  margin-bottom: -10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transform-origin: 50% 65px;
  -ms-transform-origin: 50% 65px;
  -webkit-transform-origin: 50% 65px;
  transform-origin: 50% 65px;
}

.minute {
  width: 3px;
  height: 95px;
  margin-left: -2px;
  margin-bottom: -10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transform-origin: 50% 85px;
  -ms-transform-origin: 50% 85px;
  -webkit-transform-origin: 50% 85px;
  transform-origin: 50% 85px;
}

.second {
  width: 2px;
  height: 105px;
  margin-left: -0.5px;
  background-color: red;
  margin-bottom: -10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transform-origin: 50% 95px;
  -ms-transform-origin: 50% 95px;
  -webkit-transform-origin: 50% 95px;
  transform-origin: 50% 95px;
}
.clock-top-area{
  position: relative;
  height: 300px;
  background: #010f65;
}
.clock-title{
  position: absolute;
  margin: 0 auto;
  bottom: 20px;
  left: 35px;
  width: 200px;
  text-align: center;
  color: #ffb922;
}