ul li{
  list-style-type: none;
}

.chart {
  background-color: #cccccc;
  width: 120px;
  height: 120px;
  position: relative;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; }

.chart:before {
  content: "";
  width: 120px;
  height: 120px;
  background-color: #cccccc;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; }

.chart:after {
  content: "";
  width: 102px;
  height: 102px;
  background-color: inherit;
  position: absolute;
  top: 7.5%;
  left: 7.5%;
  z-index: 305;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-color: #fafafa; }

.progress {
  width: 120px;
  height: 120px;
  -webkit-transform-origin: "center" 50%;
  -moz-transform-origin: "center" 50%;
  -ms-transform-origin: "center" 50%;
  -o-transform-origin: "center" 50%;
  transform-origin: "center" 50%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; }

.progress:before {
  content: '';
  width: 60px;
  height: 120px;
  background-color: #d9534f;
  left: 0;
  top: 0%;
  position: absolute;
  z-index: 1;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px 0 0 120px;
  border-radius: 120px 0 0 120px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

.progress span {
  content: "";
  width: 60px;
  height: 120px;
  background-color: #d9534f;
  left: 0%;
  top: 0%;
  z-index: 3;
  position: absolute;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px 0 0 120px;
  border-radius: 120px 0 0 120px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

.percent {
  width: 120px;
  height: 60px;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 0;
  z-index: 400;
  text-align: center;
  font-size: 2em; }

.mask {
  width: 60px;
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  background-color: inherit;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px 0 0 120px;
  border-radius: 120px 0 0 120px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

.html {
  color: #e55126; }
  .html div:first-child {
    background-color: #ff8753; }
    .html div:first-child:before {
      background-color: #ff8753; }
    .html div:first-child .progress:before {
      background-color: #e55126; }
    .html div:first-child .progress span {
      background-color: #e55126; }