/* Container styles */
.chart {
	position: relative;
	display: inline-block;
	color: #999;
	font-size: 20px;
	text-align: center;
	width: 100%;
	padding: 0px;
	vertical-align: top;
	transform: scale(0.7);
	margin: auto;
}
.chart figcaption {
  padding: 20% 25%;
  font-size: 30px;
  color: #7daa32;
  margin: 0 auto;
}
/* END Container styles */

/* Colors for the circles and positions for the graphics */
.html {top: 50px; left: 45px;}
.html + svg .outer {stroke: #12426e;}
.css {top: 55px;left: 48px;}
.css + svg .outer {stroke: #0d84ce;}
.javascript {max-width: 90px; max-height: 90px; top: 45px; left: 45px;}
.javascript + svg .outer {stroke: #f0e040;}
.node {width: 200px; height: 200px; top: 45px; left: 45px; left: 50%; margin-left: -95px;}
.node .outer {stroke: #83cd29;}
.chart svg {position: absolute; top: 0; left: 15%;}
.outer {fill: transparent; stroke:#7daa32; stroke-width: 20; stroke-dasharray: 534; transition: stroke-dashoffset 1s;  -webkit-animation-play-state: running; -moz-transform: rotate(-89deg) translateX(-190px);}

/* END Circle colors and graphic positions */


/* Set the initial values for the animation */
.chart[data-percent='25'] .outer {stroke-dashoffset: 401; -webkit-animation: show25 infinite 6s; animation: show25 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}
.chart[data-percent='95'] .outer {stroke-dashoffset: 27; -webkit-animation: show95 infinite 6s; animation: show95 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}
.chart[data-percent='100'] .outer {stroke-dashoffset: 0; -webkit-animation: show100 infinite 6s; animation: show100 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}
.chart[data-percent='80'] .outer {stroke-dashoffset: 107; -webkit-animation: show80 infinite 6s; animation: show80 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}
.chart[data-percent='30'] .outer {stroke-dashoffset: 376; -webkit-animation: show30 infinite 6s; animation: show30 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}
.chart[data-percent='65'] .outer {stroke-dashoffset: 188; -webkit-animation: show65 infinite 6s; animation: show65 infinite 6s; animation-delay: 2s; animation-iteration-count: 3;}

@media only screen and (max-width: 1300px) {
	.chart {
		/* width: 25%;
		margin: 50px 22px;
		padding: 0px;
		vertical-align: top; */
	}
	.chart svg {
		/* margin-left: 55px; */
	}	

}

@media only screen and (max-width: 1025px) {
	.chart svg {
		/* margin-left: 25px; */
	}

}
@media only screen and (max-width: 980px) {
	.chart {
		width: 36%;
		margin: 10px 22px;
		padding: 0px;
		vertical-align: top;
	}
	.chart svg {
		position: absolute;
		top: 0;
		left: 50%;
		/* margin-left: -95px; */
	}	
	
}
@media only screen and (max-width: 780px) {
	.chart {
		width: 100%;
		margin: 5px 22px;
		padding: 0px;
		vertical-align: top;
		font-size: 30px;
	}
	.chart svg {
    position: absolute;
    top: 0;
    left: 50% !important;
    margin-left: -120px;
	}
}

/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show25 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 401;}
}
@keyframes show25 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 401;}
}
@-webkit-keyframes show95 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 27;}
}
@keyframes show95 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 27;}
}
}
@-webkit-keyframes show100 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 0;}
}
@keyframes show100 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 0;}
}
@-webkit-keyframes show80 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 107;}
}
@keyframes show80 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 107;}
}
@-webkit-keyframes show30 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 376;}
}
@keyframes show30 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 376;}
}
@-webkit-keyframes show65 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 188;}
}
@keyframes show65 {
  from {stroke-dashoffset: 537;}
  to {stroke-dashoffset: 188;}
}
/* END Keyframes for the initial animation */