/* CSS Percentage Circle * Based on CSS provided by Andre Firchow */
.prog-circle .slice{
  position : absolute;
  width    : 1em;
  height   : 1em;
  clip     : rect(0em, 1em, 1em, 0.5em);
}
.prog-circle .slice.clipauto {
  clip : rect(auto, auto, auto, auto);
}
.prog-circle .fill, .prog-circle .bar{
  position              : absolute;
  border                : 0.08em solid #b8d147;
  width                 : 0.84em;
  height                : 0.84em;
  clip                  : rect(0em, .5em, 1em, 0em);
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  -webkit-transform     : rotate(20deg);
  -moz-transform        : rotate(20deg);
  -ms-transform         : rotate(20deg);
  -o-transform          : rotate(20deg);
  transform             : rotate(20deg);
  -webkit-box-sizing	: content-box;
  -moz-box-sizing		: content-box;
  box-sizing			: content-box;
}
.prog-circle {
  position              : relative;
  font-size             : 120px;
  width                 : 1em;
  height                : 1em;
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  margin                : 5px auto 10px;
  background-color      : #e9e9e9;
  float:right;
}
.prog-circle .percenttext{
  position                           : absolute;
  width                              : 100%;
  height                             : 1em;
  z-index                            : 1;
  margin                             : auto;
  top                                : 0;
  left                               : 0;
  right                              : 0;
  bottom                             : 0;
  font-size                          : 15px;
  color                              : #666;
  display                            : block;
  text-align                         : center;
  white-space                        : nowrap;
  line-height                        : 100%;
  -webkit-transition-duration        : 0.2s;
  -moz-transition-duration           : 0.2s;
  -o-transition-duration             : 0.2s;
  transition-duration                : 0.2s;
  -webkit-transition-timing-function : ease-out;
  -moz-transition-timing-function    : ease-out;
  -o-transition-timing-function      : ease-out;
  transition-timing-function         : ease-out;
}
.prog-circle .numtext{
	 position                           : absolute;
  width                              : 100%;
  height                             : 1em;
  z-index                            : 1;
  margin                             : auto;
  top                                : 0;
  left                               : 0;
  right                              : 0;
  bottom                             : 0;
  font-size                          : 15px;
  color                              : #666;
  display                            : block;
  text-align                         : center;
  white-space                        : nowrap;
  line-height                        : 100%;
  -webkit-transition-duration        : 0.2s;
  -moz-transition-duration           : 0.2s;
  -o-transition-duration             : 0.2s;
  transition-duration                : 0.2s;
  -webkit-transition-timing-function : ease-out;
  -moz-transition-timing-function    : ease-out;
  -o-transition-timing-function      : ease-out;
  transition-timing-function         : ease-out;
}

.prog-circle .after{
  position              : absolute;
  top                   : 0.08em;
  left                  : 0.08em;
  display               : block;
  content               : " ";
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  background-color      : #FFF;
  width                 : 0.84em;
  height                : 0.84em;
  box-shadow			: 0 1px 2px rgba(0,0,0,0.2);
}
.prog-circle .fill:after /*.prog-circle .bar:before*/{
	content:'';
	width:8px;
	height:8px;
	background:url(../img/bb.png) no-repeat #b8d147;
	display:block;
	margin:-8px 0 0 9px;
	display:none;
	}
	
/*.prog-circle .fill:after{ margin:34px 0 0 9px;}*/