|  | @@ -1,3 +1,12 @@
 | 
	
		
			
			|  | 1 | +@-webkit-keyframes timebar
 | 
	
		
			
			|  | 2 | +{
 | 
	
		
			
			|  | 3 | +	0%{width: 100%;background-color: #57cc6b;}
 | 
	
		
			
			|  | 4 | +	30%{background-color: #57cc6b;}
 | 
	
		
			
			|  | 5 | +	40%{background-color: #e3a55c;}
 | 
	
		
			
			|  | 6 | +	60%{background-color: #e3a55c;}
 | 
	
		
			
			|  | 7 | +	70%{background-color: #cc5757;}
 | 
	
		
			
			|  | 8 | +	100%{width: 0;background-color: #cc5757;}
 | 
	
		
			
			|  | 9 | +}
 | 
	
		
			
			| 1 | 10 |  @keyframes timebar
 | 
	
		
			
			| 2 | 11 |  {
 | 
	
		
			
			| 3 | 12 |  	0%{width: 100%;background-color: #57cc6b;}
 | 
	
	
		
			
			|  | @@ -16,14 +25,17 @@
 | 
	
		
			
			| 16 | 25 |  
 | 
	
		
			
			| 17 | 26 |  .timer
 | 
	
		
			
			| 18 | 27 |  {
 | 
	
		
			
			|  | 28 | +	-webkit-animation: timebar 5s linear;
 | 
	
		
			
			| 19 | 29 |  	animation: timebar 5s linear;
 | 
	
		
			
			| 20 | 30 |  }
 | 
	
		
			
			| 21 | 31 |  
 | 
	
		
			
			| 22 | 32 |  .pause {
 | 
	
		
			
			|  | 33 | +	-webkit-animation-play-state: paused;
 | 
	
		
			
			| 23 | 34 |  	animation-play-state: paused;
 | 
	
		
			
			| 24 | 35 |  }
 | 
	
		
			
			| 25 | 36 |  
 | 
	
		
			
			| 26 | 37 |  .clearTimer {
 | 
	
		
			
			|  | 38 | +	-webkit-animation: none;
 | 
	
		
			
			| 27 | 39 |  	animation: none;
 | 
	
		
			
			| 28 | 40 |  }
 | 
	
		
			
			| 29 | 41 |  
 |