.chart {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  margin: 0;
}

.chart svg {

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: none;
  stroke: var(--c3);
  stroke-width: 1;
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
}

.chart:hover .outer {
  stroke-dashoffset: 0;
  -webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */

/* Set the initial values for the animation */
/*.chart[data-percent="100"] .outer {
  stroke-dashoffset: 0;
  animation: show100 4s;
}

/* Keyframes for the initial animation */

/*@keyframes show100 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 595;
  }
}*/