@charset "utf-8";
/* CSS Document */

.percircle.yellow .bar,.percircle.yellow .fill {
	border-color: #efba00;
	}
.percircle.green .bar,.percircle.green .fill {
	border-color: #77c61d;
	}
.percircle.blue .bar,.percircle.blue .fill {
	border-color: #00bde6;
	}
.percircle.gt50 .slice,.rect-auto {
	clip: rect(auto,auto,auto,auto)
	}
.gt50 .fill,.percircle .bar,.pie {
	position: absolute;
	border: 10px solid #307bbb;
	width: 90px;
	height: 90px;
	clip: rect(0,50px,120px,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 *,.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 {
	display:inline-block;
	vertical-align:middle;
	position: relative;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #ccc
	}
.percircle:after {
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	content: " ";
	border-radius: 50%;
	background-color: #f5f5f5;
	width: 90px;
	height:  90px;
	}
.percircle .slice {
	position: absolute;
	width: 110px;
	height: 110px;
	clip: rect(0,110px,110px,55px);
	}
.percircle>span {
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50%;
	left:0;
	top: calc(50% - 25px);
	height: 30px;
	font-size: 30px;
	text-align: center;
	font-weight:bold;
	font-family: 'Samsung Sharp Sans';
	}
.percircle.yellow span{color:#efba00;}
.percircle.green span{color:#77c61d;}
.percircle.blue span{color:#00bde6;}