/**
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
	
.circle-chart {
	margin: 30px auto 20px auto;
}

.circle-chart__circle--negative {
  transform: rotate(-90deg); /* 1, 2, 3 */
}

.circle-chart__circle {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transform: rotate(-90deg) scale(1); /* 2, 3 */
	transform-origin: center; /* 4 */
}

	.circle-chart__circle.appear {
		-webkit-opacity: 1;
		-moz-opacity: 1;
		-o-opacity: 1;
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
		animation: circle-chart-fill 2s reverse; /* 1 */
	}

.circle-chart__info {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	/*transform: translateY(0.3em);*/
}

	.circle-chart__info.appear {
		animation: circle-chart-appear 2s forwards;
	}

g text {
	font-size: 11px;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
    /*transform: translateY(0);*/
  }
}

@media (min-width: 992px) {
	
	.circle-chart {
		margin: 0 auto;
	}
	
	.circle-chart__circle, .circle-chart__background {
		transform: rotate(-90deg) scale(0.75); /* 2, 3 */
		transform-origin: center; /* 4 */
	}

	g text {
		font-size: 9px;
	}
	
}