@radial_meter_size: 90px;
@radial_thickness: 12;
@radial_mobile_reduction_factor : 1.3;

@radial_meter_bg: rgba(0, 0, 0, 0.05);
@radial_meter_secondary_bg: rgba(0, 0, 0, 0.45);
@radial_meter_color: @third-section-bgColor;
@radial_font-size: @radial_meter_size / 4;
@radial_font-color: rgba(0,0,0,0.5);



.RadialMeter {
  width: @radial_meter_size;
  height: @radial_meter_size;

  @media @onlyScreen and @smallmobile, @mobile  {
    width: @radial_meter_size / @radial_mobile_reduction_factor;
    height: @radial_meter_size / @radial_mobile_reduction_factor;
  }

  background: @radial_meter_bg;
  position: relative;
}

.RadialMeter.small{
  width: @radial_meter_size / @radial_mobile_reduction_factor;
  height: @radial_meter_size / @radial_mobile_reduction_factor;
  .RadialMeter-label{
    width: @radial_meter_size / @radial_mobile_reduction_factor;
    height: @radial_meter_size / @radial_mobile_reduction_factor;
    line-height: @radial_meter_size / @radial_mobile_reduction_factor;
    font-size: @radial_font-size / @radial_mobile_reduction_factor;
  }
}

.RadialMeter-label {
  width: @radial_meter_size;
  height: @radial_meter_size;
  line-height: @radial_meter_size;
  font-size: @radial_font-size;

  @media @onlyScreen and @smallmobile, @mobile  {
    width: @radial_meter_size / @radial_mobile_reduction_factor;
    height: @radial_meter_size / @radial_mobile_reduction_factor;
    line-height: @radial_meter_size / @radial_mobile_reduction_factor;
    font-size: @radial_font-size / @radial_mobile_reduction_factor;
  }

  text-align: center;
  vertical-align: middle;
  z-index: 20;
  position: absolute;
  color: @radial_font-color;
}



.RadialMeter-label small{
  font-size: @radial_font-size / 2 ;
  @media @onlyScreen and @smallmobile, @mobile  {
    font-size: @radial_font-size / 2.5 ;
  }
  position: absolute;
  color: @radial_meter_secondary_bg;
}

.RadialMeter:after {
  position: absolute;
  content: "";
  width: unit(100 - @radial_thickness,%);
  height: unit(100 - @radial_thickness,%);
  border-radius: 100%;
  background: #fff;
  top:unit(@radial_thickness/2,%);
  left:unit(@radial_thickness/2,%);
}


.RadialMeter {
  border-radius: 100%;
  position: relative;
}

.RadialMeter div {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.RadialMeter div:first-child {
  left: 0;
}

.RadialMeter div.second {
  left: 50%;
}

.RadialMeter div span {
  background: @radial_meter_color;
  border-radius: 999px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.RadialMeter div.first span {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;

}

.RadialMeter div.second span {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;

}



/*
generates 360° css classes
*/


.generate_radial_first(180);
.generate_radial_first(@n, @i: 1) when (@i =< @n) {
  .RadialMeter.radial-@{i} div.second span {
    -webkit-transform: rotate(unit(@i, deg));
    -ms-transform: rotate(unit(@i, deg));
    transform: rotate(unit(@i, deg));
  }
  .generate_radial_first(@n, (@i + 1));
}

.generate_radial_second(360);
.generate_radial_second(@n, @i: 181) when (@i =< @n) {

  .RadialMeter.radial-@{i} div.second span {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform:rotate(180deg);
  }

  .RadialMeter.radial-@{i} div.first span {
    -webkit-transform: rotate(unit(@i - 180, deg));
    -ms-transform: rotate(unit(@i - 180, deg));
    transform: rotate(unit(@i - 180, deg));
  }

  .generate_radial_second(@n, (@i + 1));
}