.chart__container{max-width:760px;margin:auto}figure.chart{margin:5px}.chart figcaption,.chart .chart__circle--base{position:relative;width:150px;height:150px;border-radius:50%;-webkit-box-shadow:inset 0 0 0 20px rgba(240,240,240,1);-moz-box-shadow:inset 0 0 0 20px rgba(240,240,240,1);box-shadow:inset 0 0 0 20px rgba(240,240,240,1)}.chart{display:flex;align-items:center;justify-content:flex-start}.chart svg{position:absolute;top:0;left:0;height:100%;width:100%}.chart__number{top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px}.chart__outer{fill:transparent;stroke:#0288d1;stroke-width:20;stroke-dasharray:534;transition:stroke-dashoffset 1s;-webkit-animation-play-state:running;-moz-transform:rotate(-89deg) translateX(-190px)}.chart:hover .chart__outer{stroke-dashoffset:534 !important;-webkit-animation-play-state:paused}.chart[data-percent='100'] .chart__outer{stroke-dashoffset:0;-webkit-animation:show100 2s;animation:show100 2s}.chart[data-percent='99'] .chart__outer{stroke-dashoffset:127;-webkit-animation:show99 2s;animation:show99 2s}.chart[data-percent='78'] .chart__outer{stroke-dashoffset:215;-webkit-animation:show78 2s;animation:show78 2s}.chart[data-percent='85'] .chart__outer{stroke-dashoffset:175;-webkit-animation:show85 2s;animation:show85 2s}@-webkit-keyframes show100{from{stroke-dashoffset:537}to{stroke-dashoffset:0}}@keyframes show100{from{stroke-dashoffset:537}to{stroke-dashoffset:0}}@-webkit-keyframes show99{from{stroke-dashoffset:537}to{stroke-dashoffset:127}}@keyframes show99{from{stroke-dashoffset:537}to{stroke-dashoffset:127}}@-webkit-keyframes show78{from{stroke-dashoffset:537}to{stroke-dashoffset:215}}@keyframes show78{from{stroke-dashoffset:537}to{stroke-dashoffset:215}}@-webkit-keyframes show85{from{stroke-dashoffset:537}to{stroke-dashoffset:175}}@keyframes show85{from{stroke-dashoffset:537}to{stroke-dashoffset:175}}