svg.radial-progress {
    height: auto;
    max-width: 200px;
    padding: 1em;
    transform: rotate(-90deg);
    width: 100%;
}

svg.radial-progress circle {
    fill: rgba(0,0,0,0);
    stroke-dashoffset: 219.91148575129; /* Circumference */
    stroke-width: 10;
}

svg.radial-progress circle.incomplete { opacity: 0.25; }
svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; /* Circumference */ }

svg.radial-progress text {
    font: 400 1em/1 'Oswald', sans-serif;
    text-anchor: middle;
}

.svg-container {
    display: table-cell;
    padding: 5px;
    /*border: solid 1px red;*/
}

.svg-element {
    display: inline-flex;
    /*border: solid 1px green;*/
}

.svg-title {
    padding: 10px;
    /*border: solid 1px blue;*/
    display:flex;
    justify-content:center;
    align-items:center;
}

@media only screen and ( max-width: 768px ) {
    .svg-container {
        width: 100% !important;
        margin-top: 10px;
        display: block;
    }
    .svg-element {
        display: block;
    }
    .svg-title {
        max-width: 80%;
        margin: 0 auto;
        height: unset !important;
    }
}