/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(../images/hero.jpg) no-repeat 0 0;
	background-size: 189.72%;
}


/* custom CSS on a per project basis
================================*/

.container { text-align: center; color: #808080;}
.container .intro { padding: 20px 0; font-weight: bold; line-height: inherit;  }
.container .first3 { padding: 50px 0; }
.container .first3 h3 { padding: 12px; border: #fff solid thin; border-radius: 25px; width: 50px; text-align: center; margin-right: auto; margin-left: auto; background: #002559; color: #fff; }
.container .first3 p { font-size: 16px; padding: 20px 0 }
.container .second h2 { padding: 20px 0; font-weight: bolder; color: #c32c3f; }
.container .second h4 { padding-bottom: 30px;}
.container .third { padding: 50px 0;}
.container .third img {margin-right: auto; margin-left: auto; padding: 15px;}
.container .third h4 {font-weight: bold; padding: 15px 0; color: #c32c3f}

/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	.container .intro { padding: 20px 0; font-weight: bold; line-height: 65px;  }

}