.pie{background-color:#eee;background-image:linear-gradient(90deg,transparent 50%,#f16e00 0);border-radius:50%;font-size:1em;height:200px;margin:1em auto;position:relative;text-align:center;width:200px}.pie:after,.pie:before{background-color:inherit;border-radius:0 100% 100% 0/50%;content:"";display:block;height:100%;margin-left:50%;position:absolute;transform-origin:left;width:50%}.pie:after{background-color:#f16e00}.pie-percentage{font-size:3em}.pie-val{background-color:#fff;border-radius:50%;bottom:15px;left:15px;padding-top:25%;position:absolute;right:15px;top:15px;z-index:2}.pie[data-value="1"]:before{transform:rotate(3.6deg)}.pie[data-value="1"]:after{display:none}.pie[data-value="2"]:before{transform:rotate(7.2deg)}.pie[data-value="2"]:after{display:none}.pie[data-value="3"]:before{transform:rotate(10.8deg)}.pie[data-value="3"]:after{display:none}.pie[data-value="4"]:before{transform:rotate(14.4deg)}.pie[data-value="4"]:after{display:none}.pie[data-value="5"]:before{transform:rotate(18deg)}.pie[data-value="5"]:after{display:none}.pie[data-value="6"]:before{transform:rotate(21.6deg)}.pie[data-value="6"]:after{display:none}.pie[data-value="7"]:before{transform:rotate(25.2deg)}.pie[data-value="7"]:after{display:none}.pie[data-value="8"]:before{transform:rotate(28.8deg)}.pie[data-value="8"]:after{display:none}.pie[data-value="9"]:before{transform:rotate(32.4deg)}.pie[data-value="9"]:after{display:none}.pie[data-value="10"]:before{transform:rotate(36deg)}.pie[data-value="10"]:after{display:none}.pie[data-value="11"]:before{transform:rotate(39.6deg)}.pie[data-value="11"]:after{display:none}.pie[data-value="12"]:before{transform:rotate(43.2deg)}.pie[data-value="12"]:after{display:none}.pie[data-value="13"]:before{transform:rotate(46.8deg)}.pie[data-value="13"]:after{display:none}.pie[data-value="14"]:before{transform:rotate(50.4deg)}.pie[data-value="14"]:after{display:none}.pie[data-value="15"]:before{transform:rotate(54deg)}.pie[data-value="15"]:after{display:none}.pie[data-value="16"]:before{transform:rotate(57.6deg)}.pie[data-value="16"]:after{display:none}.pie[data-value="17"]:before{transform:rotate(61.2deg)}.pie[data-value="17"]:after{display:none}.pie[data-value="18"]:before{transform:rotate(64.8deg)}.pie[data-value="18"]:after{display:none}.pie[data-value="19"]:before{transform:rotate(68.4deg)}.pie[data-value="19"]:after{display:none}.pie[data-value="20"]:before{transform:rotate(72deg)}.pie[data-value="20"]:after{display:none}.pie[data-value="21"]:before{transform:rotate(75.6deg)}.pie[data-value="21"]:after{display:none}.pie[data-value="22"]:before{transform:rotate(79.2deg)}.pie[data-value="22"]:after{display:none}.pie[data-value="23"]:before{transform:rotate(82.8deg)}.pie[data-value="23"]:after{display:none}.pie[data-value="24"]:before{transform:rotate(86.4deg)}.pie[data-value="24"]:after{display:none}.pie[data-value="25"]:before{transform:rotate(90deg)}.pie[data-value="25"]:after{display:none}.pie[data-value="26"]:before{transform:rotate(93.6deg)}.pie[data-value="26"]:after{display:none}.pie[data-value="27"]:before{transform:rotate(97.2deg)}.pie[data-value="27"]:after{display:none}.pie[data-value="28"]:before{transform:rotate(100.8deg)}.pie[data-value="28"]:after{display:none}.pie[data-value="29"]:before{transform:rotate(104.4deg)}.pie[data-value="29"]:after{display:none}.pie[data-value="30"]:before{transform:rotate(108deg)}.pie[data-value="30"]:after{display:none}.pie[data-value="31"]:before{transform:rotate(.31turn)}.pie[data-value="31"]:after{display:none}.pie[data-value="32"]:before{transform:rotate(.32turn)}.pie[data-value="32"]:after{display:none}.pie[data-value="33"]:before{transform:rotate(.33turn)}.pie[data-value="33"]:after{display:none}.pie[data-value="34"]:before{transform:rotate(.34turn)}.pie[data-value="34"]:after{display:none}.pie[data-value="35"]:before{transform:rotate(126deg)}.pie[data-value="35"]:after{display:none}.pie[data-value="36"]:before{transform:rotate(.36turn)}.pie[data-value="36"]:after{display:none}.pie[data-value="37"]:before{transform:rotate(.37turn)}.pie[data-value="37"]:after{display:none}.pie[data-value="38"]:before{transform:rotate(.38turn)}.pie[data-value="38"]:after{display:none}.pie[data-value="39"]:before{transform:rotate(.39turn)}.pie[data-value="39"]:after{display:none}.pie[data-value="40"]:before{transform:rotate(144deg)}.pie[data-value="40"]:after{display:none}.pie[data-value="41"]:before{transform:rotate(.41turn)}.pie[data-value="41"]:after{display:none}.pie[data-value="42"]:before{transform:rotate(.42turn)}.pie[data-value="42"]:after{display:none}.pie[data-value="43"]:before{transform:rotate(154.8deg)}.pie[data-value="43"]:after{display:none}.pie[data-value="44"]:before{transform:rotate(.44turn)}.pie[data-value="44"]:after{display:none}.pie[data-value="45"]:before{transform:rotate(162deg)}.pie[data-value="45"]:after{display:none}.pie[data-value="46"]:before{transform:rotate(165.6deg)}.pie[data-value="46"]:after{display:none}.pie[data-value="47"]:before{transform:rotate(.47turn)}.pie[data-value="47"]:after{display:none}.pie[data-value="48"]:before{transform:rotate(172.8deg)}.pie[data-value="48"]:after{display:none}.pie[data-value="49"]:before{transform:rotate(.49turn)}.pie[data-value="49"]:after{display:none}.pie[data-value="50"]:before{transform:rotate(180deg)}.pie[data-value="50"]:after{display:none}.pie[data-value="51"]:after{transform:rotate(3.6deg)}.pie[data-value="51"]:before{display:none}.pie[data-value="52"]:after{transform:rotate(7.2deg)}.pie[data-value="52"]:before{display:none}.pie[data-value="53"]:after{transform:rotate(10.8deg)}.pie[data-value="53"]:before{display:none}.pie[data-value="54"]:after{transform:rotate(14.4deg)}.pie[data-value="54"]:before{display:none}.pie[data-value="55"]:after{transform:rotate(18deg)}.pie[data-value="55"]:before{display:none}.pie[data-value="56"]:after{transform:rotate(21.6deg)}.pie[data-value="56"]:before{display:none}.pie[data-value="57"]:after{transform:rotate(25.2deg)}.pie[data-value="57"]:before{display:none}.pie[data-value="58"]:after{transform:rotate(28.8deg)}.pie[data-value="58"]:before{display:none}.pie[data-value="59"]:after{transform:rotate(32.4deg)}.pie[data-value="59"]:before{display:none}.pie[data-value="60"]:after{transform:rotate(36deg)}.pie[data-value="60"]:before{display:none}.pie[data-value="61"]:after{transform:rotate(39.6deg)}.pie[data-value="61"]:before{display:none}.pie[data-value="62"]:after{transform:rotate(43.2deg)}.pie[data-value="62"]:before{display:none}.pie[data-value="63"]:after{transform:rotate(46.8deg)}.pie[data-value="63"]:before{display:none}.pie[data-value="64"]:after{transform:rotate(50.4deg)}.pie[data-value="64"]:before{display:none}.pie[data-value="65"]:after{transform:rotate(54deg)}.pie[data-value="65"]:before{display:none}.pie[data-value="66"]:after{transform:rotate(57.6deg)}.pie[data-value="66"]:before{display:none}.pie[data-value="67"]:after{transform:rotate(61.2deg)}.pie[data-value="67"]:before{display:none}.pie[data-value="68"]:after{transform:rotate(64.8deg)}.pie[data-value="68"]:before{display:none}.pie[data-value="69"]:after{transform:rotate(68.4deg)}.pie[data-value="69"]:before{display:none}.pie[data-value="70"]:after{transform:rotate(72deg)}.pie[data-value="70"]:before{display:none}.pie[data-value="71"]:after{transform:rotate(75.6deg)}.pie[data-value="71"]:before{display:none}.pie[data-value="72"]:after{transform:rotate(79.2deg)}.pie[data-value="72"]:before{display:none}.pie[data-value="73"]:after{transform:rotate(82.8deg)}.pie[data-value="73"]:before{display:none}.pie[data-value="74"]:after{transform:rotate(86.4deg)}.pie[data-value="74"]:before{display:none}.pie[data-value="75"]:after{transform:rotate(90deg)}.pie[data-value="75"]:before{display:none}.pie[data-value="76"]:after{transform:rotate(93.6deg)}.pie[data-value="76"]:before{display:none}.pie[data-value="77"]:after{transform:rotate(97.2deg)}.pie[data-value="77"]:before{display:none}.pie[data-value="78"]:after{transform:rotate(100.8deg)}.pie[data-value="78"]:before{display:none}.pie[data-value="79"]:after{transform:rotate(104.4deg)}.pie[data-value="79"]:before{display:none}.pie[data-value="80"]:after{transform:rotate(108deg)}.pie[data-value="80"]:before{display:none}.pie[data-value="81"]:after{transform:rotate(.31turn)}.pie[data-value="81"]:before{display:none}.pie[data-value="82"]:after{transform:rotate(.32turn)}.pie[data-value="82"]:before{display:none}.pie[data-value="83"]:after{transform:rotate(.33turn)}.pie[data-value="83"]:before{display:none}.pie[data-value="84"]:after{transform:rotate(.34turn)}.pie[data-value="84"]:before{display:none}.pie[data-value="85"]:after{transform:rotate(126deg)}.pie[data-value="85"]:before{display:none}.pie[data-value="86"]:after{transform:rotate(.36turn)}.pie[data-value="86"]:before{display:none}.pie[data-value="87"]:after{transform:rotate(.37turn)}.pie[data-value="87"]:before{display:none}.pie[data-value="88"]:after{transform:rotate(.38turn)}.pie[data-value="88"]:before{display:none}.pie[data-value="89"]:after{transform:rotate(.39turn)}.pie[data-value="89"]:before{display:none}.pie[data-value="90"]:after{transform:rotate(144deg)}.pie[data-value="90"]:before{display:none}.pie[data-value="91"]:after{transform:rotate(.41turn)}.pie[data-value="91"]:before{display:none}.pie[data-value="92"]:after{transform:rotate(.42turn)}.pie[data-value="92"]:before{display:none}.pie[data-value="93"]:after{transform:rotate(154.8deg)}.pie[data-value="93"]:before{display:none}.pie[data-value="94"]:after{transform:rotate(.44turn)}.pie[data-value="94"]:before{display:none}.pie[data-value="95"]:after{transform:rotate(162deg)}.pie[data-value="95"]:before{display:none}.pie[data-value="96"]:after{transform:rotate(165.6deg)}.pie[data-value="96"]:before{display:none}.pie[data-value="97"]:after{transform:rotate(.47turn)}.pie[data-value="97"]:before{display:none}.pie[data-value="98"]:after{transform:rotate(172.8deg)}.pie[data-value="98"]:before{display:none}.pie[data-value="99"]:after{transform:rotate(.49turn)}.pie[data-value="99"]:before{display:none}.pie[data-value="100"]:after{transform:rotate(180deg)}.pie[data-value="100"]:before{display:none}