.percircle.dark {
	background-color:#777
}
.percircle.dark .bar, .percircle.dark .fill {
	border-color:#c6ff00
}
.percircle.dark>span {
	color:#777
}
.percircle.dark:after {
	background-color:#555
}
.percircle.dark:hover>span {
	color:#c6ff00
}
.percircle.red .bar, .percircle.red .fill {
	border-color:#dd5454
}
.percircle.red:hover>span {
	color:#dd5454
}
.percircle.red.dark .bar, .percircle.red.dark .fill {
	border-color:#f84a4a
}
.percircle.red.dark:hover>span {
	color:#f84a4a
}
.percircle.blue .bar, .percircle.blue .fill {
	border-color:#82cefa
}
.percircle.blue:hover>span {
	color:#82cefa
}
.percircle.blue.dark .bar, .percircle.blue.dark .fill {
	border-color:#20cceb
}
.percircle.blue.dark:hover>span {
	color:#20cceb
}



.percircle.green .bar, .percircle.green .fill {
	border-color:#75c78b;
}
.percircle.green span{
	color:#0B882D;
}
.percircle.green:hover>span {
	color:#0B882D;
}
.percircle.green.dark .bar, .percircle.green.dark .fill {
	border-color:#75c78b;
}
.percircle.green.dark:hover>span {
	color:#75c78b;
}



.percircle.orange .bar, .percircle.orange .fill {
	border-color:#e88239
}
.percircle.orange:hover>span {
	color:#e88239
}
.percircle.orange.dark .bar, .percircle.orange.dark .fill {
	border-color:#dc5b00
}
.percircle.orange.dark:hover>span {
	color:#dc5b00
}
.percircle.pink .bar, .percircle.pink .fill {
	border-color:#ff8ed0
}
.percircle.pink:hover>span {
	color:#ff8ed0
}
.percircle.pink.dark .bar, .percircle.pink.dark .fill {
	border-color:#ff58b9
}
.percircle.pink.dark:hover>span {
	color:#ff58b9
}
.percircle.purple .bar, .percircle.purple .fill {
	border-color:#aa7eff
}
.percircle.purple:hover>span {
	color:#aa7eff
}
.percircle.purple.dark .bar, .percircle.purple.dark .fill {
	border-color:#7a38f7
}
.percircle.purple.dark:hover>span {
	color:#7a38f7
}
.percircle.yellow .bar, .percircle.yellow .fill {
	border-color:#dcbd00
}
.percircle.yellow:hover>span {
	color:#dcbd00
}
.percircle.yellow.dark .bar, .percircle.yellow.dark .fill {
	border-color:#ffdb00
}
.percircle.yellow.dark:hover>span {
	color:#ffdb00
}
.percircle.gt50 .slice, .rect-auto {
	clip:rect(auto,auto,auto,auto)
}
.gt50 .fill, .percircle .bar, .pie {
	position:absolute;
	border:.08em solid #307bbb;
	width:.84em;
	height:.84em;
	clip:rect(0,.5em,1em,0);
	border-radius:50%;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg)
}
.bar {
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden
}
.gt50 .bar:after, .gt50 .fill, .pie-fill {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg)
}
.percircle {
	position:relative;
	font-size:110px;
	width:1em;
	height:1em;
	border-radius:50%;
	margin:0 auto;
	background-color:#f9f9fb;
	box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.5);
}
.percircle *, .percircle :after, .percircle :before {
	box-sizing:content-box
}
.percircle.animate:after, .percircle.animate>span {
-webkit-transition:-webkit-transform .2s ease-in-out;
transition:transform .2s ease-in-out
}
.percircle.animate .bar {
-webkit-transition:-webkit-transform .6s ease-in-out;
transition:transform .6s ease-in-out
}
.percircle.center {
	float:none;
	margin:0 auto
}
.percircle.big {
	font-size:240px
}
.percircle.small {
	font-size:80px
}
.percircle>span {
	position:absolute;
	z-index:1;
	width:100%;
	top:50%;
	top:calc(50% - .1em);
	transform:translateY(-50%);
	height:1em;
	font-family: 'Montserrat', sans-serif;
	font-size:.2em;
	font-weight:bold;
	color:#ccc;
	display:block;
	text-align:center;
	white-space:nowrap
}
.perclock>span {
	font-size:.175em
}
.percircle:after {
	position:absolute;
	top:.08em;
	left:.08em;
	display:block;
	content:" ";
	border-radius:50%;
	background-color:#f5f5f5;
	width:.84em;
	height:.84em
}
.percircle .slice {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(0,1em,1em,.5em)
}
.percircle:hover {
	cursor:default
}
.percircle:hover>span {
	-webkit-transform:scale(1.1) translateY(-50%);
	transform:scale(1.1) translateY(-50%);
	color:#307bbb
}
.percircle:hover:after {
	-webkit-transform:scale(1.1);
	transform:scale(1.1)
}