/* -https://codepen.io/janverstr/pen/PvPoaV */
.svg-item {
    width: 100%;
    font-size: 16px;
    margin: 0 auto;
    animation: donutfade 1s;
}

@keyframes donutfade {
    /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .svg-item {
        width: 80%;
    }
}

.donut-ring {
    stroke: #224e71;
}

.donut-segment {
    transform-origin: center;
    stroke: #a5090a;
}
.donut-segment-1 {
    /*stroke: aqua;*/
    animation: donut1 3s;
}
.donut-segment-2 {
    /*stroke: aqua;*/
    animation: donut2 3s;
}

.donut-segment-3 {
    /*stroke: aqua;*/
    animation: donut3 3s;
}

.donut-segment-4 {
    /*stroke: aqua;*/
    animation: donut4 3s;
}
.donut-segment-5 {
    /*stroke: aqua;*/
    animation: donut5 3s;
}
.donut-segment-6 {
    /*stroke: aqua;*/
    animation: donut6 3s;
}
/*.segment-1 {
    fill: #ccc;
}

.segment-2 {
    fill: aqua;
}

.segment-3 {
    fill: #d9e021;
}

.segment-4 {
    fill: #ed1e79;
}
.segment-5 {
    fill: #ed1e79;
}
.segment-6 {
    fill: #ed1e79;
}*/



.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.donut-text {
    /*font-family: Arial, Helvetica, sans-serif;*/
    fill: #fff;
    /*fill: #FF6200;*/
}
/*
.donut-text-1 {
    fill: #a5090a;
}

.donut-text-2 {
    fill: #d9e021;
}

.donut-text-3 {
    fill: #ed1e79;
}*/

.donut-label {
    font-size: 0.28em;
    font-weight: 700;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
    font-size: 0.65em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

.donut-data {
    font-size: 0.25em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color: #224e71;
    fill: #fff;
    animation: donutfadelong 1s;
}




/* ---------- */
/* just for this presentation */
/*html {
    text-align: center;
}*/

.svg-item {
    max-width: 15%;
    display: inline-block;
}