.flex-wrapper { display: flex; flex-flow: row nowrap; padding: 0rem 5rem 5rem 5rem; }
.single-chart { width: 33%; justify-content: space-around; }
.circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; }
.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; }

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

.circular-chart.orange .circle { stroke: #FB7633; }
.circular-chart.green .circle { stroke: #A3D900; }
.circular-chart.red .circle { stroke: #C80000; }
.percentage { fill: #133F66; font-size: 0.7em; text-anchor: middle; }
.weather { color: #133F66; font-size: 1.3em; text-align: center; font-weight: 100;  padding-bottom: 10px; }
    .weather img { vertical-align: middle; }
.vehicles { color: #999; font-size: 0.14em; text-anchor: middle; }
.time { color: #7B8B90; font-size: 1em; text-align: center; padding-top: 10%; width: 115px; }
.city { color: #7B8B90; font-size: 1em; text-align: center; padding-top: 10px; }

@media (max-width: 992px) {
    .flex-wrapper { padding: 0rem; display: -webkit-box; overflow-x: scroll; width: 100%; }
    .time { padding-top: 25%; width: 65px; }
}