.chartcontainer {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}


.chart {
    position: relative;
    display: inline-block;
    color: #999;
  }
  
  .chart figcaption {
    padding: 50px 25px;
    width: 190px;
    height: 190px;
    border: 20px solid #f0f0f0;
    border-radius: 100px;
    line-height: 50px;
  }
  
  .chart img {
    position: absolute;
    max-width: 100px;
    max-height: 100px;
    background: white;
  }
  /* END Container styles */
  
  /* Colors for the circles and positions for the graphics */
  .chart1 {
  }
  
  .chart1 + svg .outer {
    stroke: #e34f26;
  }
  
  .chart2 {
  }
  
  .chart2 + svg .outer {
    stroke: #0d84ce;
  }
  
  .chart3 {
  }
  
  .chart3 + svg .outer {
    stroke: #f0e040;
  }
  
  .chart4 {
  }
  
  .chart4 + svg .outer {
    stroke: #83cd29;
  }
  
  .chart svg {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .outer {
    fill: transparent;
    stroke: #333;
    stroke-width: 20;
    stroke-dasharray: 534;
    transition: stroke-dashoffset 1s;
    -webkit-animation-play-state: running;
    
    /* firefox bug fix - won't rotate at 90deg angles */
    -moz-transform: rotate(-89deg) translateX(-190px);
  }
  
  .chart:hover .outer {
    stroke-dashoffset: 534 !important;
    -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;
    -webkit-animation: show100 2s;
    animation: show100 2s;
  }
  
  .chart[data-percent='75'] .outer {
    stroke-dashoffset: 133;
    -webkit-animation: show75 2s;
    animation: show75 2s;
  }
  
  .chart[data-percent='50'] .outer {
    stroke-dashoffset: 267;
    -webkit-animation: show50 2s;
    animation: show50 2s;
  }
  
  .chart[data-percent='25'] .outer {
    stroke-dashoffset: 401;
    -webkit-animation: show25 2s;
    animation: show25 2s;
  }



  .chart[data-percent='95'] .outer {
    stroke-dashoffset: 27;
    -webkit-animation: show95 2s;
    animation: show95 2s;
}

  .chart[data-percent='90'] .outer {
    stroke-dashoffset: 53;
    -webkit-animation: show90 2s;
    animation: show90 2s;
}

.chart[data-percent='85'] .outer {
    stroke-dashoffset: 81;
    -webkit-animation: show85 2s;
    animation: show85 2s;
}

.chart[data-percent='80'] .outer {
    stroke-dashoffset: 107;
    -webkit-animation: show80 2s;
    animation: show80 2s;
}


  /* END set initial animation values */
  
  /* Keyframes for the initial animation */
  @-webkit-keyframes show100 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes show100 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @-webkit-keyframes show75 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 134;
    }
  }
  
  @keyframes show75 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 124;
    }
  }
  
  @-webkit-keyframes show50 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 267;
    }
  }
  
  @keyframes show50 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 267;
    }
  }
  
  @-webkit-keyframes show25 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 401;
    }
  }
  
  @keyframes show25 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 401;
    }
  }


  @keyframes show25 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 401;
    }
}

/* END Keyframes for the initial animation */

@-webkit-keyframes show95 {
  from {
      stroke-dashoffset: 537;
  }

  to {
      stroke-dashoffset: 27;
  }
}

@keyframes show95 {
  from {
      stroke-dashoffset: 537;
  }

  to {
      stroke-dashoffset: 27;
  }
}

@-webkit-keyframes show90 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 43;
    }
}

@keyframes show90 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 53;
    }
}

@-webkit-keyframes show85 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 81;
    }
}

@keyframes show85 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 81;
    }
}


@-webkit-keyframes show80 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 109;
    }
}

@keyframes show80 {
    from {
        stroke-dashoffset: 537;
    }

    to {
        stroke-dashoffset: 107;
    }
}


  /* END Keyframes for the initial animation */