* {
	box-sizing:bover-box;
}
.piechart-flatmin {
	position: relative;
	width: 100%;
}
.piechart-flatmin .piehole {
position: absolute;
width: 70%;
height: 70%;
top: 15%;
z-index: 2;
border-radius: 50%;
left: 15%;
overflow: hidden;
text-align: center;
padding: 2em;
}
.piehole .piehole-text {
	font-weight: 300;
	display: none;
	position: absolute;
	left: 15%;
	top: 30%;
	width: 70%;
}
.piechart-flatmin.m .piehole-text {
	font-size: 70%;
}
.piechart-flatmin.s .piehole-text {
	top:22%;
	font-size: 70%;
}


.piechart-flatmin .piehole-text p {
	line-height: 1;
	margin: 0;
	font-weight: 300;
}
.piehole-text .flatmin-percentage {
	font-size:4em;
}
.piehole-text .flatmin-percentage:after {
	content: '%';
	font-size: 0.4em;
	vertical-align: top;
	line-height: 1.5;
}
.piehole-text .flatmin-value {
	font-size:1.2em;
	font-weight:400;
}
.piehole-text .flatmin-title {
	font-size:1.2em;
	font-weight:400;
}
.piechart-flatmin.m .piehole-text .flatmin-title,.piechart-flatmin.m .piehole-text .flatmin-value,.piechart-flatmin.s .piehole-text .flatmin-title,.piechart-flatmin.s .piehole-text .flatmin-value {
	font-size: 1.4em;
}
.piechart-flatmin.s .piehole-text .flatmin-percentage {
	font-size: 3em;
}

.piechart-flatmin .ratio {
	padding-top: 100%;
}

.piechart-flatmin .sector {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
}
.sector.hover .sector-s {
	border:0.5em rgba(255,255,255,0.5) solid;
}
.sector-f {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	border-radius: 50%;
	left: 0;
}
.sector-s {
	cursor: pointer;
	pointer-events: auto;
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.example {
	width: 50%;
	padding: 1em;
	margin: auto;
}