/*

*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.masthead {
	padding: 10px;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 0px solid #FFFFFF;
	background-color: #FFFFFF;
	margin-bottom: 15px;
}
.content-panel {
	padding: 10px;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 0px solid #FFFFFF;
	background-color: #FFFFFF;
	margin-top: 15px;
}
.shadow {
	-webkit-box-shadow: 10px 10px 14px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 14px -10px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 14px -10px rgba(0,0,0,0.75);
}
.redbox {
	background-color: #D2232A;
	padding: 0px;
	margin-bottom: 15px;
}
.logo img {
	max-width: 100%;
}
.branding img {
	max-width: 100%
}
.branding {
	padding-top: 15px;
	padding-bottom: 15px;
}
.greenbox {
	background-color: #207730;
	padding: 15px;
	color: #FFFFFF;
	text-align: center;
	margin-top: 15px;
}
.greenbox h3 {
	font-size: 2.7rem;
	line-height: 2.2rem;
	display: block;
	font-weight: 700;
	text-align: center;
	color: #FFFFFF;
	margin: 0px;
	padding-bottom: 5px;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.greenbox h4 {
	font-size: 2.0rem;
	line-height: 2.6rem;
	display: block;
	font-weight: 500;
	text-align: center;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;

}
.name-banner h4 {
	font-size: 2.6rem;
	line-height: 1.95rem;
	display: block;
	font-weight: 700;
	text-align: center;
	color: #207730;
	margin: 0px;
	padding-bottom: 10px;
	padding-top: 5px;
	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.phone-number {
	text-align: center;
}





.content-panel.shadow.typography div .25box {
}


  
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {
.redbox {
	padding: 45px;
}	
.logo img {
	max-width: 60%;
	text-align: center;
	margin: auto;
}
.typography div h1 {
}

 .25box {
	  float:left;
	 width:25%;

}

 
.logo {
	max-width: 100%;
	text-align: center;
	margin: auto;
}
.typography h1 {

	font-size: 2.5rem;

	min-width: 306px;

}
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
.redbox {
	padding: 45px;
}		
.logo img {
	max-width: 100%;
}

 .25box {
	  float:left;
	 width:25%;

}

.typography h1 {
	
	font-size: 2.5rem;
	
	min-width: 406px;

	
}
}
/* Larger than tablet */
@media (min-width: 750px) {
.redbox {
	padding: 45px;
}		
.logo img {
	max-width: 100%;
}
 .25box {
	  float:left;
	 width:25%;

}
.typography h1 {
	
	font-size: 2.5rem;
	
	min-width: 406px;
	
	
}
}
/* Larger than desktop */
@media (min-width: 1000px) {
.redbox {
	padding: 45px;
}		
.logo img {
	max-width: 100%;

}
 .25box {
	  float:left;
	 width:25%;

}
.typography h1 {
	
	font-size: 2.5rem;
	
	min-width: 406px;
	
	
}
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
.redbox {
	padding: 45px;
}		
.logo img {
	max-width: 100%;
}
 .25box {
	 float:left;
	 width:25%;

}	
.typography h1 {
	
	font-size: 2.5rem;
	
	min-width: 406px;

	
}
}