:root {
  --first-color: #F3A829;
  --text-color: #ffffff;
  --text-light: #ffffff;
  --text-gray: #ececf394;
  --white-color: #FFF;
  --z-normal: 1;
  --z-tooltip: 10;
}


.clock__circle {
  position: relative;
  width: 23vh;
  height: 23vh;
  border-radius: 50%;
  -ms-grid-column-align: center;
  justify-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /*background: #F3F3F3;*/
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

.clock__content {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  row-gap: 3.5rem;
}

.clock_time,
.clock_min{
  position: absolute;
  top: 50%;
  /*width: .4vw;*/
  width: 100%;
  height: 1vw;
  /*height:1.1vw;*/
}

.clock_time::after{
  content: "";
  position: absolute;
  height:1.2vw;
  width: .4vw;
  background-color: var(--text-light);
  border-radius: 5px;
  top: 50%;
  right: .3vw;
  -webkit-transform: translate(0,-50%) rotate(90deg);
  -ms-transform: translate(0,-50%) rotate(90deg);
  transform: translate(0,-50%) rotate(90deg);
}
.clock_time::before{
  content: "";
  position: absolute;
  height:1.2vw;
  width: .4vw;
  background-color: var(--text-light);
  border-radius: 5px;
  top: 50%;
  left: .3vw;
  -webkit-transform: translate(0,-50%) rotate(90deg);
  -ms-transform: translate(0,-50%) rotate(90deg);
  transform: translate(0,-50%) rotate(90deg);
}

.clock_min::after{
  content: "";
  position: absolute;
  height:.5vw;
  width: .2vw;
  background-color: var(--text-gray);
  border-radius: 5px;
  top: 50%;
  right: .1vw;
  -webkit-transform: translate(0px,-50%) rotate(90deg);
  -ms-transform: translate(0px,-50%) rotate(90deg);
  transform: translate(0px,-50%) rotate(90deg);

}

.clock_min::before{
  content: "";
  position: absolute;
  height:.5vw;
  width: .2vw;
  background-color: var(--text-gray);
  border-radius: 5px;
  top: 50%;
  left: .1vw;
  -webkit-transform: translate(0,-50%) rotate(90deg);
  -ms-transform: translate(0,-50%) rotate(90deg);
  transform: translate(0,-50%) rotate(90deg);
}


.clock_1{
  -webkit-transform: translate(0,-50%) rotate(6deg);
  -ms-transform: translate(0,-50%) rotate(6deg);
  transform: translate(0,-50%) rotate(6deg);
}
.clock_2{
  -webkit-transform: translate(0,-50%) rotate(12deg);
  -ms-transform: translate(0,-50%) rotate(12deg);
  transform: translate(0,-50%) rotate(12deg);
}
.clock_3{
  -webkit-transform: translate(0,-50%) rotate(18deg);
  -ms-transform: translate(0,-50%) rotate(18deg);
  transform: translate(0,-50%) rotate(18deg);
}
.clock_4{
  -webkit-transform: translate(0,-50%) rotate(24deg);
  -ms-transform: translate(0,-50%) rotate(24deg);
  transform: translate(0,-50%) rotate(24deg);
}
.clock_5{
  -webkit-transform: translate(0,-50%) rotate(36deg);
  -ms-transform: translate(0,-50%) rotate(36deg);
  transform: translate(0,-50%) rotate(36deg);
}
.clock_6{
  -webkit-transform: translate(0,-50%) rotate(42deg);
  -ms-transform: translate(0,-50%) rotate(42deg);
  transform: translate(0,-50%) rotate(42deg);
}
.clock_7{
  -webkit-transform: translate(0,-50%) rotate(48deg);
  -ms-transform: translate(0,-50%) rotate(48deg);
  transform: translate(0,-50%) rotate(48deg);
}
.clock_8{
  -webkit-transform: translate(0,-50%) rotate(54deg);
  -ms-transform: translate(0,-50%) rotate(54deg);
  transform: translate(0,-50%) rotate(54deg);
}
.clock_9{
  -webkit-transform: translate(0,-50%) rotate(66deg);
  -ms-transform: translate(0,-50%) rotate(66deg);
  transform: translate(0,-50%) rotate(66deg);
}
.clock_10{
  -webkit-transform: translate(0,-50%) rotate(72deg);
  -ms-transform: translate(0,-50%) rotate(72deg);
  transform: translate(0,-50%) rotate(72deg);
}
.clock_11{
  -webkit-transform: translate(0,-50%) rotate(79deg);
  -ms-transform: translate(0,-50%) rotate(79deg);
  transform: translate(0,-50%) rotate(79deg);
}
.clock_12{
  -webkit-transform: translate(0,-50%) rotate(85deg);
  -ms-transform: translate(0,-50%) rotate(85deg);
  transform: translate(0,-50%) rotate(85deg);
}
.clock_13{
  -webkit-transform: translate(0,-50%) rotate(97deg);
  -ms-transform: translate(0,-50%) rotate(97deg);
  transform: translate(0,-50%) rotate(97deg);
}
.clock_14{
  -webkit-transform: translate(0,-50%) rotate(103deg);
  -ms-transform: translate(0,-50%) rotate(103deg);
  transform: translate(0,-50%) rotate(103deg);
}
.clock_15{
  -webkit-transform: translate(0,-50%) rotate(109deg);
  -ms-transform: translate(0,-50%) rotate(109deg);
  transform: translate(0,-50%) rotate(109deg);
}
.clock_16{
  -webkit-transform: translate(0,-50%) rotate(115deg);
  -ms-transform: translate(0,-50%) rotate(115deg);
  transform: translate(0,-50%) rotate(115deg);
}
.clock_17{
  -webkit-transform: translate(0,-50%) rotate(127deg);
  -ms-transform: translate(0,-50%) rotate(127deg);
  transform: translate(0,-50%) rotate(127deg);
}
.clock_18{
  -webkit-transform: translate(0,-50%) rotate(133deg);
  -ms-transform: translate(0,-50%) rotate(133deg);
  transform: translate(0,-50%) rotate(133deg);
}
.clock_19{
  -webkit-transform: translate(0,-50%) rotate(139deg);
  -ms-transform: translate(0,-50%) rotate(139deg);
  transform: translate(0,-50%) rotate(139deg);
}
.clock_20{
  -webkit-transform: translate(0,-50%) rotate(145deg);
  -ms-transform: translate(0,-50%) rotate(145deg);
  transform: translate(0,-50%) rotate(145deg);
}
.clock_21{
  -webkit-transform: translate(0,-50%) rotate(157deg);
  -ms-transform: translate(0,-50%) rotate(157deg);
  transform: translate(0,-50%) rotate(157deg);
}
.clock_22{
  -webkit-transform: translate(0,-50%) rotate(163deg);
  -ms-transform: translate(0,-50%) rotate(163deg);
  transform: translate(0,-50%) rotate(163deg);
}
.clock_23{
  -webkit-transform: translate(0,-50%) rotate(169deg);
  -ms-transform: translate(0,-50%) rotate(169deg);
  transform: translate(0,-50%) rotate(169deg);
}
.clock_24{
  -webkit-transform: translate(0,-50%) rotate(175deg);
  -ms-transform: translate(0,-50%) rotate(175deg);
  transform: translate(0,-50%) rotate(175deg);
}

.clock__twelve_six{
  -webkit-transform: translate(0,-50%) rotate(90deg);
  -ms-transform: translate(0,-50%) rotate(90deg);
  transform: translate(0,-50%) rotate(90deg);
}

.clock__one_seven {
  -webkit-transform: translate(0,-50%) rotate(-60deg);
  -ms-transform: translate(0,-50%) rotate(-60deg);
  transform: translate(0,-50%) rotate(-60deg);
}
.clock__two_eight {
  -webkit-transform: translate(0,-50%) rotate(-30deg);
  -ms-transform: translate(0,-50%) rotate(-30deg);
  transform: translate(0,-50%) rotate(-30deg);
}
.clock__four_ten{
  -webkit-transform: translate(0,-50%) rotate(30deg);
  -ms-transform: translate(0,-50%) rotate(30deg);
  transform: translate(0,-50%) rotate(30deg);
}

.clock__three_nine {
  -webkit-transform: translate(0,-50%) rotate(0);
  -ms-transform: translate(0,-50%) rotate(0);
  transform: translate(0,-50%) rotate(0);

}
.clock__five_eleven{
  -webkit-transform: translate(0,-50%) rotate(60deg);
  -ms-transform: translate(0,-50%) rotate(60deg);
  transform: translate(0,-50%) rotate(60deg);
}


.clock__rounder {
  width: 1.2vw;
  height: 1.2vw;
  background-color: var(--first-color);
  border-radius: 50%;
  /*border: 2px solid var(--body-color);*/
  z-index: var(--z-tooltip);
  -webkit-box-shadow:0px 0px 7px 0px rgba(34,34,34,0.53);
  box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.53);
}

.clock__hour,
.clock__minutes,
.clock__seconds {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.clock__hour {
  width: 95%;
  height: 98%;
}
.clock__hour::before {
  content: '';
  position: absolute;
  background-color: var(--text-color);
  width: .5vw;
  height:40%;
  border-radius: .75rem;
  z-index: var(--z-normal);
  -webkit-box-shadow:0px 0px 7px 0px rgba(34,34,34,0.53);
  box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.53);
  -webkit-transform: translate(0,35%);
  -ms-transform: translate(0,35%);
  transform: translate(0,35%);
}

.clock__minutes {
  width: 95%;
  height: 98%;
}

.clock__minutes::before {
  content: '';
  position: absolute;
  background-color: var(--text-color);
  width: .3vw;
  height:53%;
  border-radius: .75rem;
  z-index: var(--z-normal);
  -webkit-box-shadow:0px 0px 7px 0px rgba(34,34,34,0.53);
  box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.53);
}

.clock__seconds {
  width: 95%;
  height: 98%;
}

.clock__seconds::before {
  content: '';
  position: absolute;
  background-color: var(--first-color);
  width: .2vw;
  height: 53%;
  border-radius: .75rem;
  z-index: var(--z-normal);
}
.clock__seconds::after {
  content: '';
  position: absolute;
  background-color: var(--first-color);
  width: .75vw;
  height: .75vw;
  border-radius: 50%;
  z-index: var(--z-normal);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,25%);
  -ms-transform: translate(-50%,25%);
  transform: translate(-50%,25%);
}