@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Baumans);

* { box-sizing:border-box; }

#wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin:30px auto;
  border-radius:50%;
  border:10px solid white;
  box-shadow: 0 0 0 5px #C6C6C6;
}

.mask {
  border-radius:50%;
  background:white;
  width:180px;
  height:180px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-90px;
  margin-top:-90px;
  position:absolute;
  text-align:center;
  color:#cecece;
  font-size:30px;
  font-family:'Baumans';
}

.mask.clear {
  line-height:180px;
  opacity:0;
  animation-name: opa;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-delay: 9s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.mask p {
  padding:50px 0 20px;
}


.mask ul {
   list-style:none;
  position:relative;
  animation: percents 10s steps(101,end) 1;
}

.cell {
  height:25px;
  width:100%;
  overflow:hidden;
}

.mask li {
 	color:#ff6300;
  height:25px;
  line-height: 25px;
} 

.mask li:after {
 	content:"%"; 
}

.clear {
 	animation:opa 0.2s 10s 1; 
}

.hold {
  position:absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px,200px,200px,100px);
  background:#c6c6c6;
  border-radius:50%;
}

.pie {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px,100px,200px,0px);
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background:#ff6300;
}

.na {
	animation: rota 5s linear 1;
}

.fill {
	background:#ff6300;
  opacity:0;
  transform:rotate(180deg);
  animation-name: opa;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-delay: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  
}



.gt2 {
 	transform:rotate(180deg); 
}

.gt2 .na {
	animation: rota 5s 5s linear 1;  
  animation-name: rota;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@-moz-keyframes percents {
 	from { top:0; }
  to { top:-2525px; }
}

@-webkit-keyframes percents {
 	from { top:0; }
  to { top:-2525px; }
}

@-moz-keyframes rota {
  from { transform:rotate(0deg); }
  to { transform:rotate(180deg); }
}

@-webkit-keyframes rota {
  from { transform:rotate(0deg); }
  to { transform:rotate(180deg); }
}

@-moz-keyframes opa {
 	from { opacity:0; }
  to { opacity:1; }
}

@-webkit-keyframes opa {
 	from { opacity:0; }
  to { opacity:1; }
}