/* Container styles */
.chart{
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart .circle-bg{
    padding: 59px 34px;
    width: 100px;
    height: 50px;
    border: 2px solid #f0f0f0;
    border-radius: 100%;
    line-height: 50px;
    margin-top: 4px;
    margin-left: 4px;
}

.chart img{
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}

.css{
  top: 55px;
  left: 48px;
}

.css + svg .outer{
  stroke: url(#Gradient);
}

.chart svg{
  position: absolute;
  top: 0;
  left: 0;
}

.outer{
  fill: transparent;
  stroke: #333;
  stroke-width: 2;
  stroke-dasharray: 534;
  -moz-transition: none;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  /*-moz-transform: rotate(-89deg) translateX(-190px);*/
}

/* Set the initial values for the animation */
.chart[data-percent='100'] .outer{
  stroke-dashoffset: 0;
  animation: show100 800ms;
}

.chart[data-percent='75'] .outer{
  stroke-dashoffset: 134;
  animation: show75 800ms;
}

.chart[data-percent='50'] .outer{
  stroke-dashoffset: 267;
  animation: show50 800ms;
}

.chart[data-percent='25'] .outer{
  stroke-dashoffset: 401;
  animation: show25 800ms;
}

.chart[data-percent='0'] .outer{
  stroke-dashoffset: 535;
}
@media all and (-ms-high-contrast:none){
    /* for ie 11 */
    .outer{
        -ms-transition: stroke-dashoffset 800ms;
        transition: stroke-dashoffset 800ms;
    }
    .chart[data-percent='100'] .outer,
    .chart[data-percent='75'] .outer,
    .chart[data-percent='50'] .outer,
    .chart[data-percent='25'] .outer{
        stroke-dashoffset: 535;
    }
}
/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 0;
  }
}

@keyframes show100{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 134;
  }
}

@keyframes show75{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 134;
  }
}

@-webkit-keyframes show50{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 267;
  }
}

@keyframes show50{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 401;
  }
}

@keyframes show25{
  from{
    stroke-dashoffset: 537;
  }

  to{
    stroke-dashoffset: 401;
  }
}
/* END Keyframes for the initial animation */