/*
 * cssCharts v0.3.0
 * jquery plugin to create donut and bar charts with css
 * https://github.com/sultantarimo
 *
 * (c)2015 Sultan Tarimo - sultantarimo@me.com
 * Released under the MIT license
 */
h2{font-family: 'Roboto Slab', serif;font-size:18px;color:#333;}
/* page specific styles*/
.chart *, .chart{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
.chart{
  width:auto;
  display:block;
  position:relative;
  font-family:sans-serif;
  font-size:14px;
  margin: 0 auto;
}


/* donut chart */

.chart.donut{
  width:200px;
  height:200px;
}

.donut-chart{
  width:100%;height:100%;
  position:relative;

  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
}

.donut-chart.fill{
  background:rgb(241,127,73);
}

.donut-chart:after{
  content:"";
  position: absolute;
  width: 86%;
  height: 86%;
  background: #FFF;
  left: 50%;
  top: 50%;
  z-index: 400;
  margin: 0 auto;
  pointer-events: none;

  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;

  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.donut-chart h2{
  text-align:center;
  position: absolute;
  line-height: 140%;
  width: 100%;
  margin-top:-30px;
  top:50%;
  z-index:500;
  pointer-events: none;

  font-size:26px;
  font-weight:400;
  color:rgb(0,0,0);
	
}

.donut-chart h2 span{
  display:block;
  width:100%;
  font-size:14px;
  color:rgb(142,143,143);
  margin-top:-10px;
}

.donut-chart .spinner{
  z-index: 200;
  border-right: none;

  -webkit-border-radius: 100% 0 0 100% / 50% 0 0 50%;
  -moz-border-radius: 100% 0 0 100% / 50% 0 0 50%;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);

  -webkit-animation: rotateDonut 0.3s ease-in-out;
  -moz-animation: rotateDonut 0.3s ease-in-out;
  animation: rotateDonut 0.3s ease-in-out;

  -webkit-transition: all 160ms ease-in-out;
  -moz-transition: all 160ms ease-in-out;
  transition: all 160ms ease-in-out;
}

.spinner ~ .pie{
  pointer-events: none;
}

.donut-chart.fill .pie,
.pie-chart .pie{
  -webkit-box-shadow: 0 0 0 4px #bd380f;
  -moz-box-shadow: 0 0 0 4px #bd380f;
  box-shadow: 0 0 0 4px #bd380f;
}

@-webkit-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@-moz-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@keyframes rotateDonut {0% {transform: rotate(0deg);}}

.donut-chart .spinner.temp{display:none;}

.donut-chart .pie{
  width: 50%;
  height: 100%;
  position: absolute;
  background: #009900;

  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.donut-chart .mask{
  background:rgb(b2b2b2);
  z-index: 400;
  margin-left: -1px;
}

.pie-chart:after{
  display:none;
}
.chart.donut .pie-chart h2,
.chart.donut .pie-chart h2 span{color:#FFF;}


}