.bit-center {
	
	transform: translate( 0%, -25% );
}
@media (max-width: 500px) {
	.bit-center {
	
		transform: translate( 0%, -0% );
	}
}

/*===== The CSS =====*/
.progress{
	width: 100px;
	height: 100px;
	background: transparent;
}
	@media (max-width: 500px) {
		
		.progress{
			width: 80px;
			height: 80px;
			background: transparent;
		}
	}
.progress .track, .progress .fill{
	fill: rgba(0, 0, 0, 0);
	stroke-width: 6;
	transform: rotate(90deg)translate(0px, -80px);
}
.progress .track{
	stroke: rgb(239, 233, 216);
	stroke-width: 5;
}
.progress .fill {
	stroke: rgb(255, 255, 255);
	stroke-dasharray: 219.99078369140625;
	stroke-dashoffset: -219.99078369140625;
	transition: stroke-dashoffset 1s;
}
.progress.blue .fill {
	stroke: rgb(101, 174, 138);
}
.progress.green .fill {
	stroke: rgb(186, 223, 172);
}
.progress .value, .progress .text {
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	fill: rgb(0, 0, 0);
	text-anchor: middle;
	    font-size: 1rem;
		font-weight: 400;
		text-shadow: 0 0 0px black;
}
.progress .text {
	font-size: 8px;
	font-weight: 300;
	text-shadow: 0 0 0px black, 0 0 0px black;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
		cursor: default;
}