#budgetLeft, #budgetUsed, #totalBudget, #timeEnd {
	font-size:3rem;
	margin-left:10%;
	max-width:90%;
}

#budgetLeft {
	color: #005689;
}

#budgetUsed {
	text-align: left;
	color: #197caa;
}

#totalBudget {
	color:#7d0068;
}

#timeEnd {
	color:#767676;
}

.chartWrapper {
	width:90%;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:20px;
	border-bottom:5px solid #7d0068;
}

#barChart {
	width:100%;
	background:#197caa;
	height:50px;
	position:relative;

}

#remainingBar {
	position: absolute;
	height:50px;
	z-index:1;
	background:#005689;
	width:50%;
}

#remainingText, #usedTextContainer {
	position: absolute;
	height:50px;
	line-height:50px;
	z-index:2;
	color:#FFF;
	font-size:30px;
}


.subText {
	margin-left: 10%;
	max-width:60%;
}


@media (max-width: 780px) {

#budgetLeft, #budgetUsed, #totalBudget, #timeEnd {
font-size:2rem;
margin-left:5%;
}

#remainingText, #usedText {
	font-size:20px;
}

#usedText {
	margin-left:-20px;
}

.subText {
	margin-left:5%;
	max-width:90%;
}

}