/*.gmpc {
    position: relative;
}
.gmpc-percent-text {
    position: absolute;
    width: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}*/
body{
    background-color: #f0f0f0;
}
.progress{
    max-width:1000px;
    margin: 40px auto;
}


/* STYLES FOR PROGRESSBARS */

.progress-radial, .progress-radial * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
    margin-left: 68px;
    float: left;
    /*  margin-right: 4%;*/
    position: relative;
    width: 50%;
    border-radius: 50%;
}
.progress-radial:first-child {
    margin-left: 4%;
}
/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
    position: absolute;
    width: 80%;
    background-color: #f0f0f0;
    border-radius: 50%;
    font-size: 20px;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.progress-radial .overlay p{
    position: absolute;
    line-height: 40px;
    text-align: center;
    width: 100%;
    top:50%;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(0deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-5 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(342deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-10 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(324deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-15 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(306deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-20 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(288deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-25 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-30 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(252deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-35 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(234deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-40 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(216deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-45 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(198deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-50 {
    background-image: -webkit-linear-gradient(180deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-90deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-55 {
    background-image: -webkit-linear-gradient(162deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-72deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-60 {
    background-image: -webkit-linear-gradient(144deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-54deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-65 {
    background-image: -webkit-linear-gradient(126deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-36deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-70 {
    background-image: -webkit-linear-gradient(108deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-18deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-75 {
    background-image: -webkit-linear-gradient(90deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(0deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-80 {
    background-image: -webkit-linear-gradient(72deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(18deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-85 {
    background-image: -webkit-linear-gradient(54deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(36deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-90 {
    background-image: -webkit-linear-gradient(36deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(54deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-95 {
    background-image: -webkit-linear-gradient(18deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(72deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

.progress-100 {
    background-image: -webkit-linear-gradient(0deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #1e90ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #1e90ff 50%, #f0f0f0 50%, #f0f0f0);
}

