/* Container styles */
.chart{
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}
.chart.rotate svg{
    -webkit-animation: rotateCircle 1s ease-in;
    animation: rotateCircle 1s ease-in;
}
@-webkit-keyframes rotateCircle{
    50%{
        -webkit-transform: rotate(720deg);
    }
    100%{
        -webkit-transform: rotate(0deg);
    }
}
@keyframes rotateCircle{
    50%{
        transform: rotate(720deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.chart .circle-bg{
    padding: 59px 34px;
    width: 100px;
    height: 50px;
    border: 2px solid #f0f0f0;
    border-radius: 100%;
    line-height: 50px;
}

.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: -4px;
  left: -4px;
}

.outer{
  fill: transparent;
  stroke: #333;
  stroke-width: 2;
  stroke-dasharray: 0;
  -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);*/
}

@media all and (-ms-high-contrast:none){
    /* for ie 11 */
    -webkit-transition: stroke-dashoffset 1s;
    transition: stroke-dashoffset 1s;
}

/* 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;
}*/
/* 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 */