
.progress-bg, .progress-bg2 {
	margin: 0 auto;
	width: 75%;
	height: 78px;
	border-radius: 10px;
	text-align: right;
	padding-right: 10px;
	background-color: #808080; 

	background: #c0c0c0; 

	/* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0,), to(#c0c0c0)); 
	
	/* Safari 5.1, Chrome 10+ */ 
	background: -webkit-linear-gradient(top, #f0f0f0, #c0c0c0); 
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(top,  #f0f0f0, #c0c0c0); 
	
	/* IE 10 */ 
	background: -ms-linear-gradient(top, #f0f0f0, #c0c0c0); 
	
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(top,  #f0f0f0, #c0c0c0); 

	/* background: url("http://www.atsu.edu/stlclinic/images/progress-bar-bg.jpg") repeat; */
	-moz-box-shadow:    inset 0 0 10px #ccc;
	-webkit-box-shadow: inset 0 0 10px #ccc;
	box-shadow:         inset 0 0 10px #ccc;
}

.progress-bar, .progress-bar2 {
	height: 78px;
	border-radius: 10px;
	width: 50%;
	/* fallback */ 
	background-color: #1c314a; 
	
	/* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9ab8dc), to(#27425f)); 
	
	/* Safari 5.1, Chrome 10+ */ 
	background: -webkit-linear-gradient(top, #9ab8dc, #27425f); 
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(top, #9ab8dc, #27425f); 
	
	/* IE 10 */ 
	background: -ms-linear-gradient(top, #9ab8dc, #27425f); 
	
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(top, #9ab8dc, #27425f); 
}

.progress-bg h3.goal, .progress-bg h3.leftgoal, .progress-bg h3.raised, .progress-bg2 h3.goal, .progress-bg2 h3.leftgoal, .progress-bg2 h3.raised {
	font-family: Arial,sans-serif;
 	font-size: 1.5em;
	font-weight: 600;
	line-height: 78px;
	margin: 0;
	padding: 0;
	text-align: center;
	display: inline;
}

.progress-bg h3.raised, .progress-bg2 h3.raised {
	color: #fff;
	margin: 0px 25px 0 50px;
	padding: 0 25px 0 0;
	text-transform: none;
	letter-spacing: 0.0rem;
}

.progress-bg h3.goal, .progress-bg2 h3.goal,  .progress-bg2 h3.leftgoal,  .progress-bg h3.leftgoal  {
	color: #808080;
	text-transform: none;
	letter-spacing: 0.0rem;
	text-align: right;
	white-space: nowrap;
}



@media screen and (max-width: 736px) {

	.progress-bg h3.raised, .progress-bg2 h3.raised {
		font-size: 1.0em;
	}
	.progress-bg h3.goal, .progress-bg h3.leftgoal, .progress-bg2 h3.goal, .progress-bg2 h3.leftgoal  {
		font-size: 1.0em;
	}
}


body .progress-bg h3.raised, body .progress-bg2 h3.raised  {
    -webkit-animation: fadein 4s; /* Safari and Chrome */
       -moz-animation: fadein 4s; /* Firefox */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dummynothing, .progress-bg2 h3.goal, .progress-bg h3.goal  {
	display: inline;
	padding: 0 25px 0 0;
	padding-right: 10px;
	text-align: right;
}

.dummynothing, .progress-bg2 h3.leftgoal, .progress-bg h3.leftgoal {
	display: inline;
	padding: 0 25px 0 0;
	padding-left: 10px;
	text-align: left;
}


body .progress-bg div {
	-webkit-animation: progress-bar 3s ease forwards;
	-moz-animation: progress-bar 3s ease forwards;
	-o-animation: progress-bar 3s ease forwards;
	animation: progress-bar 3s ease forwards;
}

body .progress-bg2 div {
	-webkit-animation: progress-bar2 3s ease forwards;
	-moz-animation: progress-bar2 3s ease forwards;
	-o-animation: progress-bar2 3s ease forwards;
	animation: progress-bar2 3s ease forwards;
}


@-webkit-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-moz-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-o-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}


@-webkit-keyframes progress-bar2 {
    from { width: 0%; }
    to { width: 50%; }
}

@-moz-keyframes progress-bar2 {
    from { width: 0%; }
    to { width: 50%; }
}

@-o-keyframes progress-bar2 {
    from { width: 0%; }
    to { width: 50%; }
}

@keyframes progress-bar2 {
    from { width: 0%; }
    to { width: 50%; }
}

