.countdown-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 2em;
}
.countdown{
  position: relative;    
  width: 100%;
  height: 100%;
  margin: auto;
}
.counter-digits-block{
  position: relative;
  width: 27%;
  height: 100%;
  float: left;
}
.counter-high-hours, .counter-low-hours,
.counter-high-minutes, .counter-low-minutes,
.counter-high-seconds, .counter-low-seconds{
  position: relative;
  width: 42.5%;
  height: 90%;
  margin: 5%;
  float: left;
}
.counter-low-hours,
.counter-low-minutes,  
.counter-low-seconds{
  margin-left: 0;
}
.counter-dots-block{
  position: relative;
  width: 9.5%;
  height: 100%;
  float: left;
}
.counter-dot{
  position: relative;
  width: 100%;
  height: 50%;
  padding-left: 5px;
}
.counter-digit{
  width: 100%;
  height: 100%;
  position: relative;
}
.counter-dot-high,
.counter-dot-low{
  border-radius: 50%;
  position: absolute;
  width: 20%;
  height: 10%;
  left: 45%;
  background-color: #a0a0a0;
}
.counter-dot-low{
  border-radius: 50%;
  top: 20%;
}
.counter-dot-high{
  border-radius: 50%;
  bottom: 20%;
}
.counter-part{
  opacity: 0;
  position: absolute;
  padding: 3px;
  transform: rotate(0deg) translate(0%, 0%);
  transition: transform .5s, width .5s, height .5s;
}
.part-a, .part-b, .part-c, .part-d, .part-e, .part-f, .part-g{
  opacity: 1;
}
.part-a, .part-d, .part-g{
  padding-left: 9px;
  padding-right: 9px;
}
.part-a{
  transform: rotate(0deg) translate(0, 0);
}
.part-b{
  transform: rotate(90deg) translate(40%, -90%);
}
.part-c{
  transform: rotate(90deg) translate(140%, -90%);
}
.part-d{
  transform: rotate(0deg) translate(0, 920%);
}
.part-e{
  transform: rotate(90deg) translate(140%, 200%);
}
.part-f{
  transform: rotate(90deg) translate(40%, 200%);
}
.part-g{
  transform: rotate(0deg) translate(0, 450%);
}
.counter-part-inner{
  width: 100%;
  height: 100%;
  background-color: #4d84a1;
  border-radius: 4px;
}