.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.single-chart {
    width: 100%;
    justify-content: space-around;
}

    .single-chart .circular-chart {
        display: block;
        margin: 10px auto;
        max-width: 80%;
        max-height: 250px;
    }

        .single-chart .circular-chart .circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 3.8;
        }

        .single-chart .circular-chart .circle {
            fill: none;
            stroke-width: 2.8;
            stroke-linecap: round;
            animation: progress 1s ease-in-out forwards;
        }

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.single-chart .circular-chart .percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
}

.single-chart .circular-chart .complete {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.2em;
    text-anchor: middle;
}