.progress-pie-chart {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #E5E5E5;
	position: absolute;
	left:370px;
	top:100px;
}
.progress-pie-chart.gt-50 {
	background-color: #6dc7d5;
}

.ppc-progress {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 100px);
	top: calc(50% - 100px);
	width: 200px;
	height: 200px;
	clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 100px);
	top: calc(50% - 100px);
	width: 200px;
	height: 200px;
	clip: rect(0, 100px, 200px, 0);
	background: #6dc7d5;
	transform: rotate(60deg);
}
.gt-50 .ppc-progress {
	clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
	clip: rect(0, 200px, 200px, 100px);
	background: #E5E5E5;
}

.ppc-percents {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 173.91304px/2);
	top: calc(50% - 173.91304px/2);
	width: 173.91304px;
	height: 173.91304px;
	background: #fff;
	text-align: center;
	display: table;
}
.ppc-percents span {
	display: block;
	font-size: 2.6em;
	font-weight: bold;
	color: #6dc7d5;
}

.pcc-percents-wrapper {
	display: table-cell;
	vertical-align: middle;
}

body {
	font-family: Arial;
	background: #f7f7f7;
}

.progress-pie-chart {
	margin: 50px auto 0;
}
canvas { width: 844px; height: 414px; }