:root {
  --clocksize: 400px;
	--clocksizehalf: calc( var(--clocksize) / 2 ); 
}

.clock {
  height: var(--clocksize);
  width: var(--clocksize);
  border-radius: var(--clocksizehalf);
  display: flex;
  justify-content: center;
  position: relative;
	background-color: #fff;
  box-shadow: 3px 3px 20px;
}
.clock .clock__second, .clock .clock__minute, .clock .clock__hour, .clock .clock__indicator {
  position: absolute;
  left: calc(50% - 1px);
  width: 5px;
  background: #f4eed7;
  transform-origin: bottom center;
  z-index: 2;
  border-radius: 1px;
}
.clock .clock__second {
  height: calc( var(--clocksizehalf) - 10% );
  margin-top: calc( var(--clocksizehalf) - 42% );
  background: #4b9aaa;
  -webkit-animation: time 60s infinite steps(60);
          animation: time 60s infinite steps(60);
  z-index: 3;
}
.clock .clock__minute {
  height: calc( var(--clocksizehalf) - 12% );
  margin-top: calc( var(--clocksizehalf) - 40% );
  opacity: 0.75;
  -webkit-animation: time 3600s linear infinite;
          animation: time 3600s linear infinite;
}
.clock .clock__hour {
  height: calc( var(--clocksizehalf) - 25% );
  margin-top: calc( var(--clocksizehalf) - 27% );
  -webkit-animation: time 43200s linear infinite;
          animation: time 43200s linear infinite;
}
.clock .clock__indicator {
  height: calc( var(--clocksizehalf) - 4px );
  border-top: calc( var(--clocksize) / 20 ) solid #4b9aaa;
  background: none;
	display: none;
}
.clock .clock__indicator:nth-of-type(5n) {
  opacity: 1;
  height: calc( var(--clocksizehalf) - 4px );
  border-top: calc( var(--clocksize) / 15 ) solid #f4eed7;
	display: block;
}
.clock .clock__axis {
  background: #4b9aaa;
  width: 5px;
  height: 5px;
  border-radius: 3px;
  position: absolute;
  z-index: 4;
  top: 47%;
}

.clock .clock__indicator:nth-of-type(1) {  transform: rotateZ(calc(6deg * 1));}
.clock .clock__indicator:nth-of-type(2) {  transform: rotateZ(calc(6deg * 2));}
.clock .clock__indicator:nth-of-type(3) {  transform: rotateZ(calc(6deg * 3));}
.clock .clock__indicator:nth-of-type(4) {  transform: rotateZ(calc(6deg * 4));}
.clock .clock__indicator:nth-of-type(5) {  transform: rotateZ(calc(6deg * 5));}
.clock .clock__indicator:nth-of-type(6) {  transform: rotateZ(calc(6deg * 6));}
.clock .clock__indicator:nth-of-type(7) {  transform: rotateZ(calc(6deg * 7));}
.clock .clock__indicator:nth-of-type(8) {  transform: rotateZ(calc(6deg * 8));}
.clock .clock__indicator:nth-of-type(9) {  transform: rotateZ(calc(6deg * 9));}
.clock .clock__indicator:nth-of-type(10) {  transform: rotateZ(calc(6deg * 10));}
.clock .clock__indicator:nth-of-type(11) {  transform: rotateZ(calc(6deg * 11));}
.clock .clock__indicator:nth-of-type(12) {  transform: rotateZ(calc(6deg * 12));}
.clock .clock__indicator:nth-of-type(13) {  transform: rotateZ(calc(6deg * 13));}
.clock .clock__indicator:nth-of-type(14) {  transform: rotateZ(calc(6deg * 14));}
.clock .clock__indicator:nth-of-type(15) {  transform: rotateZ(calc(6deg * 15));}
.clock .clock__indicator:nth-of-type(16) {  transform: rotateZ(calc(6deg * 16));}
.clock .clock__indicator:nth-of-type(17) {  transform: rotateZ(calc(6deg * 17));}
.clock .clock__indicator:nth-of-type(18) {  transform: rotateZ(calc(6deg * 18));}
.clock .clock__indicator:nth-of-type(19) {  transform: rotateZ(calc(6deg * 19));}
.clock .clock__indicator:nth-of-type(20) {  transform: rotateZ(calc(6deg * 20));}
.clock .clock__indicator:nth-of-type(21) {  transform: rotateZ(calc(6deg * 21));}
.clock .clock__indicator:nth-of-type(22) {  transform: rotateZ(calc(6deg * 22));}
.clock .clock__indicator:nth-of-type(23) {  transform: rotateZ(calc(6deg * 23));}
.clock .clock__indicator:nth-of-type(24) {  transform: rotateZ(calc(6deg * 24));}
.clock .clock__indicator:nth-of-type(25) {  transform: rotateZ(calc(6deg * 25));}
.clock .clock__indicator:nth-of-type(26) {  transform: rotateZ(calc(6deg * 26));}
.clock .clock__indicator:nth-of-type(27) {  transform: rotateZ(calc(6deg * 27));}
.clock .clock__indicator:nth-of-type(28) {  transform: rotateZ(calc(6deg * 28));}
.clock .clock__indicator:nth-of-type(29) {  transform: rotateZ(calc(6deg * 29));}
.clock .clock__indicator:nth-of-type(30) {  transform: rotateZ(calc(6deg * 30));}
.clock .clock__indicator:nth-of-type(31) {  transform: rotateZ(calc(6deg * 31));}
.clock .clock__indicator:nth-of-type(32) {  transform: rotateZ(calc(6deg * 32));}
.clock .clock__indicator:nth-of-type(33) {  transform: rotateZ(calc(6deg * 33));}
.clock .clock__indicator:nth-of-type(34) {  transform: rotateZ(calc(6deg * 34));}
.clock .clock__indicator:nth-of-type(35) {  transform: rotateZ(calc(6deg * 35));}
.clock .clock__indicator:nth-of-type(36) {  transform: rotateZ(calc(6deg * 36));}
.clock .clock__indicator:nth-of-type(37) {  transform: rotateZ(calc(6deg * 37));}
.clock .clock__indicator:nth-of-type(38) {  transform: rotateZ(calc(6deg * 38));}
.clock .clock__indicator:nth-of-type(39) {  transform: rotateZ(calc(6deg * 39));}
.clock .clock__indicator:nth-of-type(40) {  transform: rotateZ(calc(6deg * 40));}
.clock .clock__indicator:nth-of-type(41) {  transform: rotateZ(calc(6deg * 41));}
.clock .clock__indicator:nth-of-type(42) {  transform: rotateZ(calc(6deg * 42));}
.clock .clock__indicator:nth-of-type(43) {  transform: rotateZ(calc(6deg * 43));}
.clock .clock__indicator:nth-of-type(44) {  transform: rotateZ(calc(6deg * 44));}
.clock .clock__indicator:nth-of-type(45) {  transform: rotateZ(calc(6deg * 45));}
.clock .clock__indicator:nth-of-type(46) {  transform: rotateZ(calc(6deg * 46));}
.clock .clock__indicator:nth-of-type(47) {  transform: rotateZ(calc(6deg * 47));}
.clock .clock__indicator:nth-of-type(48) {  transform: rotateZ(calc(6deg * 48));}
.clock .clock__indicator:nth-of-type(49) {  transform: rotateZ(calc(6deg * 49));}
.clock .clock__indicator:nth-of-type(50) {  transform: rotateZ(calc(6deg * 50));}
.clock .clock__indicator:nth-of-type(51) {  transform: rotateZ(calc(6deg * 51));}
.clock .clock__indicator:nth-of-type(52) {  transform: rotateZ(calc(6deg * 52));}
.clock .clock__indicator:nth-of-type(53) {  transform: rotateZ(calc(6deg * 53));}
.clock .clock__indicator:nth-of-type(54) {  transform: rotateZ(calc(6deg * 54));}
.clock .clock__indicator:nth-of-type(55) {  transform: rotateZ(calc(6deg * 55));}
.clock .clock__indicator:nth-of-type(56) {  transform: rotateZ(calc(6deg * 56));}
.clock .clock__indicator:nth-of-type(57) {  transform: rotateZ(calc(6deg * 57));}
.clock .clock__indicator:nth-of-type(58) {  transform: rotateZ(calc(6deg * 58));}
.clock .clock__indicator:nth-of-type(59) {  transform: rotateZ(calc(6deg * 59));}
.clock .clock__indicator:nth-of-type(60) {  transform: rotateZ(calc(6deg * 60));}

@-webkit-keyframes time {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes time {
  to {
    transform: rotateZ(360deg);
  }
}