@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700);

body {
	font-family: 'Roboto', sans-serif;
}

.bkg {
	background-image: url(../assets/bkg_xs.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left bottom;
}

.header {
	border-bottom: 1px solid #FFFFFF;
	margin-bottom: 20px;
}

h1 {
	font-weight: 900;
	color: #FDB626;
	text-align: center;
	font-size: 35px;
	text-shadow: 1px 1px 2px hsla(0,0%,0%,0.60);
}

h2 {
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 40px;
}

.chart {
	padding-top: 0px;
	margin-top: -122px;
	width: 100%;
	height: auto;
}

.graphHead h3 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
	color: white;
}

.graphHead p {
	font-size: 12px;
	color: white;
}

.graph {
	padding-top: 0px;
	margin-top: 0px;
	max-width: 200px;
}



.body {
	margin-top: 30px;
}

.body h4 {
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	color: white;
	line-height: 20px;
}

.quote {
	margin-top: 50px;
	font-weight: 700;
	font-size: 15px;
	line-height: 25px;
	font-style: italic;
	color: #5C5C5C;
}

.quoteFrom {
	text-align: right;
	font-weight: 700;
	color: #30548b;
	font-size: 13px;
	line-height: 17px;
}

.box {
	margin-top: 50px;
	margin-right: 10px;
	padding: 10px;
	border-radius: 10px;
	background-color: hsla(0,0%,100%,0.80);
	max-width: 500px;
}

.box h5 {
	color: #986f1b;
	font-weight: 700;
	font-size: 25px;
	text-align: center;
}

.box h6 {
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	font-size: 18px;
}

.box p {
	text-align: center;
	font-size: 13px;
	margin-top: -20px;
}

.click {
	margin-top: 50px;
}

.click p {
	text-align: right;
	color: #30548b;
	font-weight: 700;
	font-size: 25px;
	padding-right: 10px;
}

.logo img {
	width: 50vw;
	margin-top: 200px;
	margin-bottom: 0px;
	float: right;
	max-width: 250px;
}

.logo p {
	text-align: right;
	color: white;
	font-weight: 400;
	font-size: 8px;
	clear: both;

}

@media (min-width: 425px) and (max-width: 621px){
	
.bkg {
	background-image: url(../assets/bkg_sm.jpg);
}

.graph {
	margin-top: 0px;
}

.graphHead {
	margin-top: 20px;
}

}



@media (min-width : 508px ) and (max-width : 767px ){
	
h1 {
	font-size: 40px;
}

.graphHead p {
	font-size: 15px;
}

.click p {
	font-size: 30px;
}

.box {
	margin-right: 30px;
}

.logo {
	margin-top: 0px;
}
	
}

@media (min-width : 621px ){

.bkg {
	background-image: url(../assets/bkg_md.jpg);	
}
	
.graphHead {
	margin-top: 20px;
}

.graph {
	margin-top: 0px;
}

.body h4 {
	color: #30548b;
}


}

@media (min-width : 768px ) {

.click p {
	font-size: 3.5vw;
	padding-right: 0px;
}

.graphFacts {
	margin-top: 40px;
}

.logo img {
	padding: 0px;
	margin-right: 0px;
}

.logo p {
	text-align: center;
	padding: 0px;
}

}

@media (min-width : 768px) {
	
.graphFacts {
	margin-top: 25px;
}

.graphFacts h2 {
	font-size: 35px;
}

.graphHead {
	margin-top: 0px;
}

.body {
	margin-top: 40px;
}

.logo img {
	margin-top: 300px;
}

}

@media (min-width : 992px) {

.body h4 {
	text-align: left;
}

.body {
	margin-top: 0px;
	margin-right: 0px;
	padding-right: 0px;
}

.body h4 {
	font-size: 18px;
	line-height: 25px;
}

.quote {
	font-size: 20px;
	line-height: 30px;
}

.quoteFrom {
	font-size: 17px;
	line-height: 25px;
}

h1 {
	font-size: 50px;
}

.bkg {
	background-image: url(../assets/bkg_lg.jpg);	
}

.box h5 {
	font-size: 30px;
}

.box h6 {
	font-size: 25px;
	text-transform: capitalize;	
}

.box p {
	font-size: 15px;
}

}

@media (min-width : 1200px) {

.box {
	max-width: 3000px;
}

.click p {
	font-size: 40px;
}

}