p {
  font-size: 13px;
}
#bar-chart {
  width: 100%;
  height: 300px;
  position: relative;
}

#bar-chart::before, #line-chart::before {
  content: "";
  position: absolute;
  display: block;
  width: 240px;
  height: 30px;
  left: 155px;
  top: 254px;
  background: #FAFAFA;
  box-shadow: 1px 1px 0 0 #DDD;
}
  /*.pie{
      font-family: 'roboto',sans-serif;
      position:relative;
      width:5em;
      height:5em;
      float:left;
      margin:20px;
      border-radius: 5em;
      background-color: #eee;
      font-size: 2em;
      font-weight: 600;
      color:#f05;
    }
    .pie-l, .pie-r{
      overflow:hidden;
      width:5em;
      height:5em;
      top:0;
      left:0;
      position:absolute;
    }
    .pie-l:before, .pie-r:before{
      content:"";
      position:absolute;
      width:4em;
      height:4em;
      border: .5em solid #003A77;
      background-color:#eee;
      top:0;
      left:0;
      border-radius: 4em;
    }
    .pie-l, .pie-l:before{
      clip: rect(auto,2.5em,auto,auto);
      width: 100%;
      height: 100%;
    }
    .pie-r, .pie-r:before{
      clip: rect(auto,auto,auto,2.5em);
      width: 100%;
      height: 100%;
    }
    .label{
      position:absolute;
      height:5em;
      line-height: 4.3em;
      width:100%;
      text-align: center;
      color: #003A77;
      font-size: 100%;
      padding: none !important;
    }
    .to10perc .pie-l,
    .to20perc .pie-l,
    .to30perc .pie-l,
    .to40perc .pie-l,
    .to50perc .pie-l
    {display:none;}

    .to10perc .pie-r:before{
      -webkit-transform: rotate(-144deg);
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: animate10;
    }
    .to20perc .pie-r:before{
      -webkit-transform: rotate(-108deg);
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: animate20;
    }
    .to30perc .pie-r:before{
      -webkit-transform: rotate(-72deg);
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: animate30;
    }
    .to40perc .pie-r:before{
      -webkit-transform: rotate(-36deg);
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: animate40;
    }
    .to50perc .pie-r:before{
      -webkit-transform: rotate(0deg);
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: animate50;
    }

    .to60perc .pie-r:before,
    .to70perc .pie-r:before,
    .to80perc .pie-r:before,
    .to90perc .pie-r:before,
    .to100perc .pie-r:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-name: animateRight;
      -webkit-animation-timing-function: linear;
    }

    .to60perc .pie-l:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: rotate(-144deg);
      -webkit-animation-name: animate60;
    }
    .to70perc .pie-l:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: rotate(-108deg);
      -webkit-animation-name: animate70;
    }
    .to80perc .pie-l:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: rotate(-72deg);
      -webkit-animation-name: animate80;
    }
    .to90perc .pie-l:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: rotate(-36deg);
      -webkit-animation-name: animate90;
    }
    .to100perc .pie-l:before{
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease-out;
      -webkit-transform: rotate(0deg);
      -webkit-animation-name: animate100;
    }


     @-webkit-keyframes animateRight {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(0deg);  }
        100% { -webkit-transform: rotate(0deg);  }
      }
      @-webkit-keyframes animate10 {
        0%   { -webkit-transform: rotate(-180deg); }
        100% { -webkit-transform: rotate(-144deg);  }
      }
      @-webkit-keyframes animate20 {
        0%   { -webkit-transform: rotate(-180deg); }
        100% { -webkit-transform: rotate(-108deg);  }
      }
      @-webkit-keyframes animate30 {
        0%   { -webkit-transform: rotate(-180deg); }
        100% { -webkit-transform: rotate(-72deg);  }
      }
       @-webkit-keyframes animate40 {
        0%   { -webkit-transform: rotate(-180deg); }
        100% { -webkit-transform: rotate(-36deg);  }
      }
       @-webkit-keyframes animate50 {
        0%   { -webkit-transform: rotate(-180deg); }
        100% { -webkit-transform: rotate(0deg);  }
      }

      @-webkit-keyframes animate60 {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(-180deg);  }
        100% { -webkit-transform: rotate(-144deg);  }
      }
      @-webkit-keyframes animate70 {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(-180deg);  }
        100% { -webkit-transform: rotate(-108deg);  }
      }
      @-webkit-keyframes animate80 {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(-180deg);  }
        100% { -webkit-transform: rotate(-72deg);  }
      }
      @-webkit-keyframes animate90 {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(-180deg);  }
        100% { -webkit-transform: rotate(-36deg);  }
      }
      @-webkit-keyframes animate100 {
        0%   { -webkit-transform: rotate(-180deg); }
        50%  { -webkit-transform: rotate(-180deg);  }
        100% { -webkit-transform: rotate(0deg);  } 
      } */