*{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:.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:.5em rgba(255,255,255,.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}