/** Style 2 **/

.percentagebar
{
	position: relative;
	width: 100%;
	text-align: left;
	margin: 0 0 20px 0;
}

	.percentagebar ul li
	{
		position: relative;
		height: 20px;
		list-style-type: none;
		background: #333;
		margin: 0 !important;
		list-style-type: none !important;
		
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	
		.percentagebar ul li div
		{
			position: absolute;
			line-height: 20px;
			font-family: "Merriweather", Georgia, Times New Roman, Times, serif;
			font-size: 18px;
			color: #FFF;
		}
	
			.percentagebar ul li .expand
			{
				top: 0;
				height: 20px;
				text-align: right;
				background: #1ABC9C;
				
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
			}


/** CSS3 Animations **/

.percent0
{
	width: 0%;
	
	-webkit-animation: percent0 3s ease-out;
	-moz-animation: percent0 3s ease-out;
	-o-animation: percent0 3s ease-out;
	-ms-animation: percent0 3s ease-out;
	animation: percent0 3s ease-out;
}

	@-moz-keyframes percent0
	{
		0% { width: 0px; }
		100% { width: 0%; }
	}
	
	@-webkit-keyframes percent0
	{
		0% { width: 0px; }
		100% { width: 0%; }
	}

	@-ms-keyframes percent0
	{
		0% { width: 0px; }
		100% { width: 0%; }
	}

.percent10
{
	width: 10%;
	
	-webkit-animation: percent10 3s ease-out;
	-moz-animation: percent10 3s ease-out;
	-o-animation: percent10 3s ease-out;
	-ms-animation: percent10 3s ease-out;
	animation: percent10 3s ease-out;
}

	@-moz-keyframes percent10
	{
		0% { width: 0px; }
		100% { width: 10%; }
	}
	
	@-webkit-keyframes percent10
	{
		0% { width: 0px; }
		100% { width: 10%; }
	}

	@-ms-keyframes percent10
	{
		0% { width: 0px; }
		100% { width: 10%; }
	}
	
.percent20
{
	width: 20%;
	
	-webkit-animation: percent20 3s ease-out;
	-moz-animation: percent20 3s ease-out;
	-o-animation: percent20 3s ease-out;
	-ms-animation: percent20 3s ease-out;
	animation: percent20 3s ease-out;
}

	@-moz-keyframes percent20
	{
		0% { width: 0px; }
		100% { width: 20%; }
	}
	
	@-webkit-keyframes percent20
	{
		0% { width: 0px; }
		100% { width: 20%; }
	}

	@-ms-keyframes percent20
	{
		0% { width: 0px; }
		100% { width: 20%; }
	}
	
.percent30
{
	width: 30%;
	
	-webkit-animation: percent30 3s ease-out;
	-moz-animation: percent30 3s ease-out;
	-o-animation: percent30 3s ease-out;
	-ms-animation: percent30 3s ease-out;
	animation: percent30 3s ease-out;
}

	@-moz-keyframes percent30
	{
		0% { width: 0px; }
		100% { width: 30%; }
	}
	
	@-webkit-keyframes percent30
	{
		0% { width: 0px; }
		100% { width: 30%; }
	}

	@-ms-keyframes percent30
	{
		0% { width: 0px; }
		100% { width: 30%; }
	}
	
.percent40
{
	width: 40%;
	
	-webkit-animation: percent40 3s ease-out;
	-moz-animation: percent40 3s ease-out;
	-o-animation: percent40 3s ease-out;
	-ms-animation: percent40 3s ease-out;
	animation: percent40 3s ease-out;
}

	@-moz-keyframes percent40
	{
		0% { width: 0px; }
		100% { width: 40%; }
	}
	
	@-webkit-keyframes percent40
	{
		0% { width: 0px; }
		100% { width: 40%; }
	}

	@-ms-keyframes percent40
	{
		0% { width: 0px; }
		100% { width: 40%; }
	}
	
.percent50
{
	width: 50%;
	
	-webkit-animation: percent50 3s ease-out;
	-moz-animation: percent50 3s ease-out;
	-o-animation: percent50 3s ease-out;
	-ms-animation: percent50 3s ease-out;
	animation: percent50 3s ease-out;
}

	@-moz-keyframes percent50
	{
		0% { width: 0px; }
		100% { width: 50%; }
	}
	
	@-webkit-keyframes percent50
	{
		0% { width: 0px; }
		100% { width: 50%; }
	}

	@-ms-keyframes percent50
	{
		0% { width: 0px; }
		100% { width: 50%; }
	}
	
.percent60
{
	width: 60%;
	
	-webkit-animation: percent60 3s ease-out;
	-moz-animation: percent60 3s ease-out;
	-o-animation: percent60 3s ease-out;
	-ms-animation: percent60 3s ease-out;
	animation: percent60 3s ease-out;
}

	@-moz-keyframes percent60
	{
		0% { width: 0px; }
		100% { width: 60%; }
	}
	
	@-webkit-keyframes percent60
	{
		0% { width: 0px; }
		100% { width: 60%; }
	}

	@-ms-keyframes percent60
	{
		0% { width: 0px; }
		100% { width: 60%; }
	}
	
.percent70
{
	width: 70%;
	
	-webkit-animation: percent70 3s ease-out;
	-moz-animation: percent70 3s ease-out;
	-o-animation: percent70 3s ease-out;
	-ms-animation: percent70 3s ease-out;
	animation: percent70 3s ease-out;
}

	@-moz-keyframes percent70
	{
		0% { width: 0px; }
		100% { width: 70%; }
	}
	
	@-webkit-keyframes percent70
	{
		0% { width: 0px; }
		100% { width: 70%; }
	}

	@-ms-keyframes percent70
	{
		0% { width: 0px; }
		100% { width: 70%; }
	}
	
.percent80
{
	width: 80%;
	
	-webkit-animation: percent80 3s ease-out;
	-moz-animation: percent80 3s ease-out;
	-o-animation: percent80 3s ease-out;
	-ms-animation: percent80 3s ease-out;
	animation: percent80 3s ease-out;
}

	@-moz-keyframes percent80
	{
		0% { width: 0px; }
		100% { width: 80%; }
	}
	
	@-webkit-keyframes percent80
	{
		0% { width: 0px; }
		100% { width: 80%; }
	}

	@-ms-keyframes percent80
	{
		0% { width: 0px; }
		100% { width: 80%; }
	}
	
.percent90
{
	width: 90%;
	
	-webkit-animation: percent90 3s ease-out;
	-moz-animation: percent90 3s ease-out;
	-o-animation: percent90 3s ease-out;
	-ms-animation: percent90 3s ease-out;
	animation: percent90 3s ease-out;
}

	@-moz-keyframes percent90
	{
		0% { width: 0px; }
		100% { width: 90%; }
	}
	
	@-webkit-keyframes percent90
	{
		0% { width: 0px; }
		100% { width: 90%; }
	}

	@-ms-keyframes percent90
	{
		0% { width: 0px; }
		100% { width: 90%; }
	}


.percent100
{
	width: 100%;
	
	-webkit-animation: percent100 3s ease-out;
	-moz-animation: percent100 3s ease-out;
	-o-animation: percent100 3s ease-out;
	-ms-animation: percent100 3s ease-out;
	animation: percent100 3s ease-out;
}

	@-moz-keyframes percent100
	{
		0% { width: 0px; }
		100% { width: 100%; }
	}
	
	@-webkit-keyframes percent100
	{
		0% { width: 0px; }
		100% { width: 100%; }
	}

	@-ms-keyframes percent100
	{
		0% { width: 0px; }
		100% { width: 100%; }
	}