/*
*
* Circle Progress Bars
*/

.progress-bar-circle {
	display: inline-block;
	position: relative;
	text-align: center;
	line-height: 1.2;

	canvas {
		vertical-align: middle;
	}

	span {
		position: absolute;
		top: 50%;
		left: 51%;
		font-size: 40px;
		line-height: 40px;
		transform: translate(-50%, -50%);
		color: $gray-1;
		font-weight: 300;
		font-family: $font-family-sec;
		letter-spacing: 0;

		&::after {
			content: "%";
		}
	}
}

.progress-bar-circle-title {
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-family: $font-family-sec;
}

* + .progress-bar-circle-title {
	margin-top: 20px;
}