.pie-chart__pie::after,.pie-chart__pie::before,.slice span{border-radius:50%;display:block}.slice,.slice span{clip:rect(0,200px,200px,100px)}@-webkit-keyframes bake-pie{from{transform:rotate(0) translate3d(0,0,0)}}@keyframes bake-pie{from{transform:rotate(0) translate3d(0,0,0)}}.pie-chart{font-family:"Open Sans",Arial}.pie-chart--wrapper{width:400px;margin:30px auto;text-align:center}.pie-chart__pie,.slice,.slice span{width:200px;height:200px}.pie-chart__legend,.pie-chart__pie{display:inline-block;vertical-align:top}.pie-chart__pie{position:relative;margin:10px auto 35px}.pie-chart__pie::before{content:"";position:absolute;z-index:1;width:100px;height:100px;background:#eee;top:50px;left:50px}.pie-chart__pie::after{content:"";width:120px;height:2px;background:rgba(0,0,0,.1);box-shadow:0 0 3px 4px rgba(0,0,0,.1);margin:220px auto}.slice{position:absolute;-webkit-animation:1s bake-pie;animation:1s bake-pie}.slice span{position:absolute;top:0;left:0;background-color:#000}.pie-chart__legend{display:block;list-style-type:none;padding:.75em .75em .05em;margin:0 auto;background:#fff;font-size:13px;box-shadow:1px 1px 0 #ddd,2px 2px 0 #bbb;text-align:left;width:65%}.pie-chart__legend li{height:1.25em;margin-bottom:.7em;padding-left:.5em;border-left:1.25em solid #000}.pie-chart__legend em{font-style:normal}.pie-chart__legend span{float:right}.pie-charts{display:flex;flex-direction:row}@media (max-width:500px){.pie-charts{flex-direction:column}}