/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
.progress-pie {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eee;
    background-image: -webkit-linear-gradient(left,transparent 50%,#4CC9D8 0);
    background-image: linear-gradient(to right,transparent 50%,#4CC9D8 0);
    position: relative;
    display: inline-block;
    
}

    .progress-pie::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0/50%;
        background-color: inherit;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left
    }

    .progress-pie::after {
        
        position: absolute;
        width: 70%;
        height: 70%;
        margin: auto;
        border-radius: 50%;
        background-color: #fff;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        
    }
    .progress-pie .pie-content {
        margin: 0;
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #F2F3F8;
        border-radius: 50%;
        text-align:center;
        z-index: 23;
    }
        .progress-pie .pie-content span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .progress-pie[data-value="0"]:before {
            -webkit-transform: rotate(0turn);
            -ms-transform: rotate(0turn);
            transform: rotate(0turn)
        }

    .progress-pie[data-value="1"]:before {
        -webkit-transform: rotate(.01turn);
        -ms-transform: rotate(.01turn);
        transform: rotate(.01turn)
    }

    .progress-pie[data-value="2"]:before {
        -webkit-transform: rotate(.02turn);
        -ms-transform: rotate(.02turn);
        transform: rotate(.02turn)
    }

    .progress-pie[data-value="3"]:before {
        -webkit-transform: rotate(.03turn);
        -ms-transform: rotate(.03turn);
        transform: rotate(.03turn)
    }

    .progress-pie[data-value="4"]:before {
        -webkit-transform: rotate(.04turn);
        -ms-transform: rotate(.04turn);
        transform: rotate(.04turn)
    }

    .progress-pie[data-value="5"]:before {
        -webkit-transform: rotate(.05turn);
        -ms-transform: rotate(.05turn);
        transform: rotate(.05turn)
    }

    .progress-pie[data-value="6"]:before {
        -webkit-transform: rotate(.06turn);
        -ms-transform: rotate(.06turn);
        transform: rotate(.06turn)
    }

    .progress-pie[data-value="7"]:before {
        -webkit-transform: rotate(.07turn);
        -ms-transform: rotate(.07turn);
        transform: rotate(.07turn)
    }

    .progress-pie[data-value="8"]:before {
        -webkit-transform: rotate(.08turn);
        -ms-transform: rotate(.08turn);
        transform: rotate(.08turn)
    }

    .progress-pie[data-value="9"]:before {
        -webkit-transform: rotate(.09turn);
        -ms-transform: rotate(.09turn);
        transform: rotate(.09turn)
    }

    .progress-pie[data-value="10"]:before {
        -webkit-transform: rotate(.1turn);
        -ms-transform: rotate(.1turn);
        transform: rotate(.1turn)
    }

    .progress-pie[data-value="11"]:before {
        -webkit-transform: rotate(.11turn);
        -ms-transform: rotate(.11turn);
        transform: rotate(.11turn)
    }

    .progress-pie[data-value="12"]:before {
        -webkit-transform: rotate(.12turn);
        -ms-transform: rotate(.12turn);
        transform: rotate(.12turn)
    }

    .progress-pie[data-value="13"]:before {
        -webkit-transform: rotate(.13turn);
        -ms-transform: rotate(.13turn);
        transform: rotate(.13turn)
    }

    .progress-pie[data-value="14"]:before {
        -webkit-transform: rotate(.14turn);
        -ms-transform: rotate(.14turn);
        transform: rotate(.14turn)
    }

    .progress-pie[data-value="15"]:before {
        -webkit-transform: rotate(.15turn);
        -ms-transform: rotate(.15turn);
        transform: rotate(.15turn)
    }

    .progress-pie[data-value="16"]:before {
        -webkit-transform: rotate(.16turn);
        -ms-transform: rotate(.16turn);
        transform: rotate(.16turn)
    }

    .progress-pie[data-value="17"]:before {
        -webkit-transform: rotate(.17turn);
        -ms-transform: rotate(.17turn);
        transform: rotate(.17turn)
    }

    .progress-pie[data-value="18"]:before {
        -webkit-transform: rotate(.18turn);
        -ms-transform: rotate(.18turn);
        transform: rotate(.18turn)
    }

    .progress-pie[data-value="19"]:before {
        -webkit-transform: rotate(.19turn);
        -ms-transform: rotate(.19turn);
        transform: rotate(.19turn)
    }

    .progress-pie[data-value="20"]:before {
        -webkit-transform: rotate(.2turn);
        -ms-transform: rotate(.2turn);
        transform: rotate(.2turn)
    }

    .progress-pie[data-value="21"]:before {
        -webkit-transform: rotate(.21turn);
        -ms-transform: rotate(.21turn);
        transform: rotate(.21turn)
    }

    .progress-pie[data-value="22"]:before {
        -webkit-transform: rotate(.22turn);
        -ms-transform: rotate(.22turn);
        transform: rotate(.22turn)
    }

    .progress-pie[data-value="23"]:before {
        -webkit-transform: rotate(.23turn);
        -ms-transform: rotate(.23turn);
        transform: rotate(.23turn)
    }

    .progress-pie[data-value="24"]:before {
        -webkit-transform: rotate(.24turn);
        -ms-transform: rotate(.24turn);
        transform: rotate(.24turn)
    }

    .progress-pie[data-value="25"]:before {
        -webkit-transform: rotate(.25turn);
        -ms-transform: rotate(.25turn);
        transform: rotate(.25turn)
    }

    .progress-pie[data-value="26"]:before {
        -webkit-transform: rotate(.26turn);
        -ms-transform: rotate(.26turn);
        transform: rotate(.26turn)
    }

    .progress-pie[data-value="27"]:before {
        -webkit-transform: rotate(.27turn);
        -ms-transform: rotate(.27turn);
        transform: rotate(.27turn)
    }

    .progress-pie[data-value="28"]:before {
        -webkit-transform: rotate(.28turn);
        -ms-transform: rotate(.28turn);
        transform: rotate(.28turn)
    }

    .progress-pie[data-value="29"]:before {
        -webkit-transform: rotate(.29turn);
        -ms-transform: rotate(.29turn);
        transform: rotate(.29turn)
    }

    .progress-pie[data-value="30"]:before {
        -webkit-transform: rotate(.3turn);
        -ms-transform: rotate(.3turn);
        transform: rotate(.3turn)
    }

    .progress-pie[data-value="31"]:before {
        -webkit-transform: rotate(.31turn);
        -ms-transform: rotate(.31turn);
        transform: rotate(.31turn)
    }

    .progress-pie[data-value="32"]:before {
        -webkit-transform: rotate(.32turn);
        -ms-transform: rotate(.32turn);
        transform: rotate(.32turn)
    }

    .progress-pie[data-value="33"]:before {
        -webkit-transform: rotate(.33turn);
        -ms-transform: rotate(.33turn);
        transform: rotate(.33turn)
    }

    .progress-pie[data-value="34"]:before {
        -webkit-transform: rotate(.34turn);
        -ms-transform: rotate(.34turn);
        transform: rotate(.34turn)
    }

    .progress-pie[data-value="35"]:before {
        -webkit-transform: rotate(.35turn);
        -ms-transform: rotate(.35turn);
        transform: rotate(.35turn)
    }

    .progress-pie[data-value="36"]:before {
        -webkit-transform: rotate(.36turn);
        -ms-transform: rotate(.36turn);
        transform: rotate(.36turn)
    }

    .progress-pie[data-value="37"]:before {
        -webkit-transform: rotate(.37turn);
        -ms-transform: rotate(.37turn);
        transform: rotate(.37turn)
    }

    .progress-pie[data-value="38"]:before {
        -webkit-transform: rotate(.38turn);
        -ms-transform: rotate(.38turn);
        transform: rotate(.38turn)
    }

    .progress-pie[data-value="39"]:before {
        -webkit-transform: rotate(.39turn);
        -ms-transform: rotate(.39turn);
        transform: rotate(.39turn)
    }

    .progress-pie[data-value="40"]:before {
        -webkit-transform: rotate(.4turn);
        -ms-transform: rotate(.4turn);
        transform: rotate(.4turn)
    }

    .progress-pie[data-value="41"]:before {
        -webkit-transform: rotate(.41turn);
        -ms-transform: rotate(.41turn);
        transform: rotate(.41turn)
    }

    .progress-pie[data-value="42"]:before {
        -webkit-transform: rotate(.42turn);
        -ms-transform: rotate(.42turn);
        transform: rotate(.42turn)
    }

    .progress-pie[data-value="43"]:before {
        -webkit-transform: rotate(.43turn);
        -ms-transform: rotate(.43turn);
        transform: rotate(.43turn)
    }

    .progress-pie[data-value="44"]:before {
        -webkit-transform: rotate(.44turn);
        -ms-transform: rotate(.44turn);
        transform: rotate(.44turn)
    }

    .progress-pie[data-value="45"]:before {
        -webkit-transform: rotate(.45turn);
        -ms-transform: rotate(.45turn);
        transform: rotate(.45turn)
    }

    .progress-pie[data-value="46"]:before {
        -webkit-transform: rotate(.46turn);
        -ms-transform: rotate(.46turn);
        transform: rotate(.46turn)
    }

    .progress-pie[data-value="47"]:before {
        -webkit-transform: rotate(.47turn);
        -ms-transform: rotate(.47turn);
        transform: rotate(.47turn)
    }

    .progress-pie[data-value="48"]:before {
        -webkit-transform: rotate(.48turn);
        -ms-transform: rotate(.48turn);
        transform: rotate(.48turn)
    }

    .progress-pie[data-value="49"]:before {
        -webkit-transform: rotate(.49turn);
        -ms-transform: rotate(.49turn);
        transform: rotate(.49turn)
    }

    .progress-pie[data-value="50"]:before {
        -webkit-transform: rotate(.5turn);
        -ms-transform: rotate(.5turn);
        transform: rotate(.5turn)
    }

    .progress-pie[data-value="51"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.01turn);
        -ms-transform: rotate(.01turn);
        transform: rotate(.01turn)
    }

    .progress-pie[data-value="52"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.02turn);
        -ms-transform: rotate(.02turn);
        transform: rotate(.02turn)
    }

    .progress-pie[data-value="53"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.03turn);
        -ms-transform: rotate(.03turn);
        transform: rotate(.03turn)
    }

    .progress-pie[data-value="54"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.04turn);
        -ms-transform: rotate(.04turn);
        transform: rotate(.04turn)
    }

    .progress-pie[data-value="55"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.05turn);
        -ms-transform: rotate(.05turn);
        transform: rotate(.05turn)
    }

    .progress-pie[data-value="56"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.06turn);
        -ms-transform: rotate(.06turn);
        transform: rotate(.06turn)
    }

    .progress-pie[data-value="57"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.07turn);
        -ms-transform: rotate(.07turn);
        transform: rotate(.07turn)
    }

    .progress-pie[data-value="58"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.08turn);
        -ms-transform: rotate(.08turn);
        transform: rotate(.08turn)
    }

    .progress-pie[data-value="59"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.09turn);
        -ms-transform: rotate(.09turn);
        transform: rotate(.09turn)
    }

    .progress-pie[data-value="60"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.1turn);
        -ms-transform: rotate(.1turn);
        transform: rotate(.1turn)
    }

    .progress-pie[data-value="61"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.11turn);
        -ms-transform: rotate(.11turn);
        transform: rotate(.11turn)
    }

    .progress-pie[data-value="62"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.12turn);
        -ms-transform: rotate(.12turn);
        transform: rotate(.12turn)
    }

    .progress-pie[data-value="63"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.13turn);
        -ms-transform: rotate(.13turn);
        transform: rotate(.13turn)
    }

    .progress-pie[data-value="64"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.14turn);
        -ms-transform: rotate(.14turn);
        transform: rotate(.14turn)
    }

    .progress-pie[data-value="65"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.15turn);
        -ms-transform: rotate(.15turn);
        transform: rotate(.15turn)
    }

    .progress-pie[data-value="66"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.16turn);
        -ms-transform: rotate(.16turn);
        transform: rotate(.16turn)
    }

    .progress-pie[data-value="67"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.17turn);
        -ms-transform: rotate(.17turn);
        transform: rotate(.17turn)
    }

    .progress-pie[data-value="68"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.18turn);
        -ms-transform: rotate(.18turn);
        transform: rotate(.18turn)
    }

    .progress-pie[data-value="69"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.19turn);
        -ms-transform: rotate(.19turn);
        transform: rotate(.19turn)
    }

    .progress-pie[data-value="70"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.2turn);
        -ms-transform: rotate(.2turn);
        transform: rotate(.2turn)
    }

    .progress-pie[data-value="71"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.21turn);
        -ms-transform: rotate(.21turn);
        transform: rotate(.21turn)
    }

    .progress-pie[data-value="72"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.22turn);
        -ms-transform: rotate(.22turn);
        transform: rotate(.22turn)
    }

    .progress-pie[data-value="73"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.23turn);
        -ms-transform: rotate(.23turn);
        transform: rotate(.23turn)
    }

    .progress-pie[data-value="74"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.24turn);
        -ms-transform: rotate(.24turn);
        transform: rotate(.24turn)
    }

    .progress-pie[data-value="75"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.25turn);
        -ms-transform: rotate(.25turn);
        transform: rotate(.25turn)
    }

    .progress-pie[data-value="76"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.26turn);
        -ms-transform: rotate(.26turn);
        transform: rotate(.26turn)
    }

    .progress-pie[data-value="77"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.27turn);
        -ms-transform: rotate(.27turn);
        transform: rotate(.27turn)
    }

    .progress-pie[data-value="78"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.28turn);
        -ms-transform: rotate(.28turn);
        transform: rotate(.28turn)
    }

    .progress-pie[data-value="79"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.29turn);
        -ms-transform: rotate(.29turn);
        transform: rotate(.29turn)
    }

    .progress-pie[data-value="80"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.3turn);
        -ms-transform: rotate(.3turn);
        transform: rotate(.3turn)
    }

    .progress-pie[data-value="81"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.31turn);
        -ms-transform: rotate(.31turn);
        transform: rotate(.31turn)
    }

    .progress-pie[data-value="82"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.32turn);
        -ms-transform: rotate(.32turn);
        transform: rotate(.32turn)
    }

    .progress-pie[data-value="83"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.33turn);
        -ms-transform: rotate(.33turn);
        transform: rotate(.33turn)
    }

    .progress-pie[data-value="84"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.34turn);
        -ms-transform: rotate(.34turn);
        transform: rotate(.34turn)
    }

    .progress-pie[data-value="85"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.35turn);
        -ms-transform: rotate(.35turn);
        transform: rotate(.35turn)
    }

    .progress-pie[data-value="86"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.36turn);
        -ms-transform: rotate(.36turn);
        transform: rotate(.36turn)
    }

    .progress-pie[data-value="87"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.37turn);
        -ms-transform: rotate(.37turn);
        transform: rotate(.37turn)
    }

    .progress-pie[data-value="88"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.38turn);
        -ms-transform: rotate(.38turn);
        transform: rotate(.38turn)
    }

    .progress-pie[data-value="89"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.39turn);
        -ms-transform: rotate(.39turn);
        transform: rotate(.39turn)
    }

    .progress-pie[data-value="90"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.4turn);
        -ms-transform: rotate(.4turn);
        transform: rotate(.4turn)
    }

    .progress-pie[data-value="91"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.41turn);
        -ms-transform: rotate(.41turn);
        transform: rotate(.41turn)
    }

    .progress-pie[data-value="92"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.42turn);
        -ms-transform: rotate(.42turn);
        transform: rotate(.42turn)
    }

    .progress-pie[data-value="93"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.43turn);
        -ms-transform: rotate(.43turn);
        transform: rotate(.43turn)
    }

    .progress-pie[data-value="94"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.44turn);
        -ms-transform: rotate(.44turn);
        transform: rotate(.44turn)
    }

    .progress-pie[data-value="95"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.45turn);
        -ms-transform: rotate(.45turn);
        transform: rotate(.45turn)
    }

    .progress-pie[data-value="96"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.46turn);
        -ms-transform: rotate(.46turn);
        transform: rotate(.46turn)
    }

    .progress-pie[data-value="97"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.47turn);
        -ms-transform: rotate(.47turn);
        transform: rotate(.47turn)
    }

    .progress-pie[data-value="98"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.48turn);
        -ms-transform: rotate(.48turn);
        transform: rotate(.48turn)
    }

    .progress-pie[data-value="99"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.49turn);
        -ms-transform: rotate(.49turn);
        transform: rotate(.49turn)
    }

    .progress-pie[data-value="100"]:before {
        background-color: #4CC9D8;
        -webkit-transform: rotate(.5turn);
        -ms-transform: rotate(.5turn);
        transform: rotate(.5turn)
    }