/* ------- DO NOT EDIT BELOW --------- */
@import url(https://fonts.googleapis.com/css?family=Abel);
.chart-one {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative;
}
.chart-one.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-one.animate figcaption:after {
  -webkit-animation: chart-one-label 3s steps(21) forwards;
          animation: chart-one-label 3s steps(21) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-one svg {
  width: 100%;
  height: 100%;
}
.chart-one svg .circle-background, .chart-one svg .circle-foreground {
  r: 97.5px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: #305556;
  stroke-width: 5px;
}
.chart-one svg .circle-foreground {
  stroke:#389967;
  stroke-dasharray: 128.583px 612.3px;
  stroke-dashoffset: 128.583px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.chart-one figcaption {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  text-align: center;
  color: #c6e8d7;
  position: absolute;
  top: calc(50% - 1.25rem);
  left: 0;
  font-size: 0;
}
.chart-one figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

@-webkit-keyframes chart-one-label {
  100% {
    -webkit-transform: translateY(-52.5rem);
            transform: translateY(-52.5rem);
  }
}

@keyframes chart-one-label {
  100% {
    -webkit-transform: translateY(-52.5rem);
            transform: translateY(-52.5rem);
  }
}
.chart-two {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative;
}
.chart-two.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-two.animate figcaption:after {
  -webkit-animation: chart-two-label 3s steps(48) forwards;
          animation: chart-two-label 3s steps(48) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-two svg {
  width: 100%;
  height: 100%;
}
.chart-two svg .circle-background, .chart-two svg .circle-foreground {
  r: 97.5px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: #305556;
  stroke-width: 5px;
}
.chart-two svg .circle-foreground {
  stroke: #389967;
  stroke-dasharray: 293.904px 612.3px;
  stroke-dashoffset: 293.904px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.chart-two figcaption {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  text-align: center;
  color: #c6e8d7;
  position: absolute;
  top: calc(50% - 1.25rem);
  left: 0;
  font-size: 0;
}
.chart-two figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

@-webkit-keyframes chart-two-label {
  100% {
    -webkit-transform: translateY(-120rem);
            transform: translateY(-120rem);
  }
}

@keyframes chart-two-label {
  100% {
    -webkit-transform: translateY(-120rem);
            transform: translateY(-120rem);
  }
}
.chart-three {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative;
}
.chart-three.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-three.animate figcaption:after {
  -webkit-animation: chart-three-label 3s steps(45) forwards;
          animation: chart-three-label 3s steps(45) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-three svg {
  width: 100%;
  height: 100%;
}
.chart-three svg .circle-background, .chart-three svg .circle-foreground {
  r: 97.5px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: #305556;
  stroke-width: 5px;
}
.chart-three svg .circle-foreground {
  stroke: #389967;
  stroke-dasharray: 275.535px 612.3px;
  stroke-dashoffset: 275.535px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.chart-three figcaption {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  text-align: center;
  color: #c6e8d7;
  position: absolute;
  top: calc(50% - 1.25rem);
  left: 0;
  font-size: 0;
}
.chart-three figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

@-webkit-keyframes chart-three-label {
  100% {
    -webkit-transform: translateY(-112.5rem);
            transform: translateY(-112.5rem);
  }
}

@keyframes chart-three-label {
  100% {
    -webkit-transform: translateY(-112.5rem);
            transform: translateY(-112.5rem);
  }
}
.chart-four {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative;
}
.chart-four.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-four.animate figcaption:after {
  -webkit-animation: chart-four-label 3s steps(22) forwards;
          animation: chart-four-label 3s steps(22) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-four svg {
  width: 100%;
  height: 100%;
}
.chart-four svg .circle-background, .chart-four svg .circle-foreground {
  r: 97.5px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: #305556;
  stroke-width: 5px;
}
.chart-four svg .circle-foreground {
  stroke:#389967;
  stroke-dasharray: 134.706px 612.3px;
  stroke-dashoffset: 134.706px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.chart-four figcaption {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  text-align: center;
  color: #c6e8d7;
  position: absolute;
  top: calc(50% - 1.25rem);
  left: 0;
  font-size: 0;
}
.chart-four figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

@-webkit-keyframes chart-four-label {
  100% {
    -webkit-transform: translateY(-55rem);
            transform: translateY(-55rem);
  }
}

@keyframes chart-four-label {
  100% {
    -webkit-transform: translateY(-55rem);
            transform: translateY(-55rem);
  }
}
@-webkit-keyframes offset {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes offset {
  100% {
    stroke-dashoffset: 0;
  }
}
/* codepen styling only */
figure {
  margin: 1rem !important;
}

figcaption {
  font-family: 'Abel', sans-serif;
}