#content p.footnote{font-size:0.875rem;}
.hchart{display:table;position:relative;width:100%;margin-bottom:16px;}
.hchart label{font-size:1.063rem;color:#000;}
.hchart_item{display:table-row;}
.hchart_label{display:table-cell;vertical-align:middle;border-right:2px Solid #CCC;width:240px;padding:8px 0;text-align:right;}
.hchart_label label{display:block;margin-right:8px;}
.hchart_value{display:table-cell;vertical-align:middle;padding:4px 0;}
.hchart_value span{background-color:#000;height:24px;display:block;float:left;}
.hchart_value label{margin-left:8px;font-weight:normal;display:block;line-height:24px;float:left;font-size:1rem;}
.hchart_value span{transition:all 1s ease-in-out;width:0%;}

@media (max-width: 1024px) {	
	.hchart_label{width:120px;padding:8px 0;}
	.hchart_label label{font-size:0.938rem;}
}


/*FOR GROCERY CHART*/
.hchart.berry .hchart_value span{background-color:#A50050;}
.hchart_value span.gr78.animated, body.mobile .hchart_value span.gr78{width:78%;}
.hchart_value span.gr40.animated, body.mobile .hchart_value span.gr40{width:40%;}
.hchart_value span.gr28.animated, body.mobile .hchart_value span.gr28{width:28%;}
.hchart_value span.gr15.animated, body.mobile .hchart_value span.gr15{width:15%;}
.hchart_value span.gr11.animated, body.mobile .hchart_value span.gr11{width:11%;}
.hchart_value span.gr10.animated, body.mobile .hchart_value span.gr10{width:10%;}



/*FOR CIRCLE GRAPH*/
.graph{width:200px;height:200px;position:relative;margin:0 auto;margin-bottom:16px;}
.graph .percent{font-size:2.5rem;text-align:center;position:absolute;left:50%;top:50%;-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);font-weight:700;}
.percentge-class{display:none}
#svg{width:200px;height:200px;}


/*FOR CIRCLE2*/
/*DRAW CIRLCE*/
.circleDraw {
  width: 180px;
  height: 180px;
  margin: 0px auto;
  position: relative;
	box-sizing:content-box;
}

.circleWrap {
  width: 90px;
  height: 180px;
  position: absolute;
  top: 0;
  overflow: hidden;
		box-sizing:content-box;
}

.circleWrap.right {
  right: 0;
}

.circleWrap.left {
  left: 0;
}


.circleFull {
  width: 164px;
  height: 164px;
  border: 8px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
		box-sizing:content-box;
}

.circleFull.right {
  border-top: 8px solid #1f2b4a;
  border-right: 8px solid #1f2b4a;
  right: 1px;
}

.circleFull.left {
  border-bottom: 8px solid #1f2b4a;
  border-left: 8px solid #1f2b4a;
  left: 1px;
}

.circleDraw.animated .circleFull.right{
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-name:circleRight;
}

.circleDraw.animated .circleFull.left{
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	animation-name:circleLeft; 
}

@keyframes circleRight {
  0% {transform: rotate(-135deg);}
  50%,  100% {transform: rotate(45deg);}
}

@keyframes circleLeft {
	0%, 50% {transform: rotate(-135deg);}
	100% {transform: rotate(45deg);}
}


.circleDraw .nb{color:#1f2b4a;font-size:4rem;font-weight:bold;font-family:Montserrat;position:absolute;display:block;line-height:180px;text-align:center;width:100%;}
.circleDraw + p{margin-top:16px;}


.circleDraw.dkblue .nb{color:#1f2b4a;}
.circleDraw.yellow .nb{color:#db6300;}
.circleDraw.berry .nb{color:#A50050;}

.circleDraw.yellow .circleFull.right {border-top: 8px solid #db6300;border-right: 8px solid #db6300;}
.circleDraw.yellow .circleFull.left {border-bottom: 8px solid #db6300;border-left: 8px solid #db6300;}