/* Percentage Bar Animation */
.bar { width: 280px; height: 15px; }

.progressbars p{display: none; margin-bottom: -12px;}
 
@keyframes pulse { 0% { color: white; } 100% { color: black; } }
.progressbars{ margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; clear: both; }
.progress{ width: 0%; height: 100%; }
.progress-bar-1{ background: #4090f6;
	background: -moz-linear-gradient(left, #4090f6 0%, #5ec8f6 90%);
	background:-webkit-linear-gradient(left, #4090f6 0%, #5ec8f6 90%);
	background: linear-gradient(to right, #4090f6 0%, #5ec8f6 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4090f6', endColorstr='#5ec8f6',GradientType=1 );
	margin-top: 14px;
}
/*old 2nd color: #b6d5b1*/
.progress-bar-2{ background: #56a602;
	background: -moz-linear-gradient(left, #56a602 0%, #7cda76 90%);
	background:-webkit-linear-gradient(left, #56a602 0%, #7cda76 90%);
	background: linear-gradient(to right, #56a602 0%, #7cda76 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56a602', endColorstr='#7cda76',GradientType=1 );
	margin-top:14px; 
}
/*old 2nd color: #fad39f*/
.progress-bar-3{ background: #ca621b;
	background: -moz-linear-gradient(left, #ca621b 0%, #ff9c59 90%);
	background:-webkit-linear-gradient(left, #ca621b 0%, #ff9c59 90%);
	background: linear-gradient(to right, #ca621b 0%, #ff9c59 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca621b', endColorstr='#ff9c59',GradientType=1 );
	margin-top:14px; 
}
.progressbars{ display: inline-block; margin: 30px 0; }
.progressbars .bar{ float:left; } 
.percentage{ visibility: hidden; }
.progressbars .percentage small{ vertical-align: 15px; font-size: 30px; }
.progressbars .percentage{ font-size: 55px; float: left; margin: -20px 0 20px 30px; font-weight: 100;} 
.progressbars .percentage-1 { color:#4090f6; } 
.progressbars .percentage-2 { color:#56a602; } 
.progressbars .percentage-3 { color:#ca621b; } 


/* X-LARGE SCREENS (CASCADE TO LOWER SCREEN) */
@media only screen and (min-width: 1442px) {
	
} 

/*@media only screen and (min-width: 1070px) and (max-width:1227px) {
	.progressbars .percentage { margin-left: 300px; margin-top:-30px; }
	.bar { width: 65%; }
}*/




/* LARGE SCREENS (SPECIFIC) */
/*@media only screen and (min-width: 1228px) and (max-width:1441px) {
	.progressbars .percentage { margin-left: 310px; margin-top:-30px; }
	.bar { width: 65%; }
}*/
 
/* MEDIUM SCREENS (CASCADE TO LOWER SCREENS) */
@media only screen and (max-width: 1068px) {
	
	
}
 
/* MEDIUM SCREENS (SPECIFIC) */
/*@media only screen and (min-width: 783px) and (max-width:1068px) {
	.progressbars .percentage { margin-left: 60px; margin-top:-20px; }
	.bar { width: 200px; }
 	
}*/
/*@media only screen and (min-width: 633px) and (max-width:733px) {
	.progressbars .percentage { margin-left: 300px; margin-top:-25px; }
	.bar { width: 150px; }
}*/
/* SMALL SCREENS */

@media only screen and (min-width:613px) and (max-width:654px) {
	.progressbars .percentage { margin-left:40px; margin-top:-20px; }
	.bar { width: 220px; }
}







@media only screen and (max-width:612px) {
	/* Percentage Bar Animation */
/*	.progressbars .percentage{ font-size: 35px; float: left; margin-left: 300px; margin-top:-15px; } 
	.progressbars .percentage small{ vertical-align: 10px; font-size: 20px; }
	.bar { width: 270px; height: 10px; }*/
	.progressbars .percentage { margin-left: 260px; margin-top:-30px; }
	.bar { width: 220px; }
 
}
 
/* EXTRA SMALL SCREENS < 400px */
@media only screen and (max-width: 410px) {
	.progressbars .percentage { font-size:45px; }
	.progressbars .percentage small { font-size:25px; } 
	.progessbars { margin: 20px 0; }
}

/* EXTRA SMALL SCREENS < 400px */
@media only screen and (max-width: 375px) {
	.progressbars .percentage { font-size:35px; }
	.progressbars .percentage small { font-size:20px; } 
	.progessbars { margin: 20px 0; }
}

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) {
 
}