body { font-family: Helvetica, sans-serif;}
/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img-1{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 550px;
	background: url(../images/hero.jpg) no-repeat 0 0;
	background-size: 189.72%;
}
.banner-1 { position:relative; padding-top: 76.3889%;
}

.pic { width:100%;}
.herobtn { position: absolute; top: 30%; right: auto; bottom: auto; left: 5%; width:160px; height:auto; display: block; z-index: 10; font-size:10px;}

.fl { float:left; width:100%;}
.fr { float:right; width:90%; padding-left:5%;}

h3 { font-size:3rem; color:#153987; font-weight:bold; padding-top:60px;}
h4 { font-size:2.2rem; color:#616161;}

/* custom CSS on a per project basis
================================*/
.clear{clear:both}

#hero2{width:90%;display:block;margin:0;padding:20px 5%;position:relative;color:#999;font-size:1.3em;}
#hero2 ul.rsec{width:100%;max-width:425px;margin:0 auto;padding:10px 0;display:block;background:none;list-style:outside disc;font-weight:300;color:#666}
#hero2 ul.rsec li{margin:0 0 10px 15px;}
#hero2 .lsec{width:100%;max-width:350px;margin:0 auto;padding:0 0 20px 0;display:block;background:none;text-align:center;border-bottom:double 5px #999;}
#hero2 .lsec img{width:75%;margin:10px auto;}
#hero2 .lsec p{width:100%;margin:0 auto;text-align:center;line-height:1.5;}

.PCarea-1{width:90%;max-width:450px;margin:20px auto 0 auto;border:#000764 solid 3px;border-radius:10px;text-align:center;padding:10px 0 20px 0;color:#000764;font-size:1.2em;}
.PCarea-2{display:none;}
.PCarea-1 a,
.PCarea-2 a{max-width:200px;font-size:.8em;margin-top:10px;}

#disclaimer{font-weight:400;font-size:1.1em;margin:0;padding:20px 5%;line-height:1.5;color:#333;display:block;width:90%;clear:both;}

#threecol{width:90%;padding:20px 5%;display:block;position:relative;text-align:center;}
#threecol .cat{width:100%;display:block;position:relative;clear:both;margin:10px 0;}
#threecol .cat h1{font-weight:400;color:#111;font-size:1.1em;width:50%;float:right;margin-bottom:10px;text-align:center;}
#threecol .cat img{width:50%;display:block;float:left;}
#threecol .cat a.cta{width:50%;max-width:130px;font-size:1em;}

#vcobox{width:90%;max-width:1366px;margin:0;max-height:500px;padding:30px 5%;background:url(../images/vco_bg.jpg) center;box-shadow:0 5px 20px #ccc;display:block;position:relative;text-align:center;}
#vcobox h2{width:100%;font-size:1.5em;color:#022b69;font-weight:400;margin:15px 0;} 

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

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
	h3 { font-size:2rem; padding-top:40px;}
	h4 { font-size:1.6rem; }
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
	h3 { font-size:2.5rem; padding-top:40px;}
	h4 { font-size:2rem; }
}
@media only screen and (min-width: 481px) {
	.PCarea-1{font-size:1.5em;}
	#threecol .cat{width:33.3%;display:inline-block;margin:0 0 20px -4px;box-sizing:border-box;padding:0 2.5%;}
	#threecol .cat h1{width:100%;}
	#threecol .cat img{width:100%;max-width:300px;margin:10px auto;display:block;float:none;}
	#threecol .cat a.cta{width:100%;max-width:170px;margin:0 auto;display:block;}
	
	h3 { font-size:3rem; padding-top:40px;}
	h4 { font-size:2.2rem; }
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.pic { width:50%;}
	.herobtn { top: 70%; right: auto; bottom: auto; left: 51%; width: 160px; height:auto; font-size:14px;}
	.fl { width:50%;}
	.fr { width:50%; padding-left:0%;}
	
	
	.banner-img-1 {
		background-position: 0 100%;
		background-size: 100%;
		max-height:450px;
	}
	.banner-1 { padding-top: 32.9428%;
	}
	
	#hero2{font-size:1.5em;}	
	#hero2 ul.rsec{width:49%;max-width:none;margin:20px 0;padding:0 0 0 5%;float:right;border-left:double 5px #999}
	#hero2 ul.rsec li{margin:0 0 10px 15px;}
	#hero2 .lsec{width:40%;max-width:none;margin:20px 0;padding:0;text-align:left;border-bottom:none;float:left;}
	#hero2 .lsec img{width:100%;max-width:300px;margin:0 auto 10px auto;display:block;}
	#hero2 .lsec p{width:100%;max-width:300px;margin:0 auto;display:block;padding-left:10px;text-align:left;line-height:1.5;}
	
	#disclaimer{font-weight:300;font-size:1.25em;}
	#vcobox h2{font-size:2.2em;margin:30px 0;} 
	
	h3 { font-size:2rem; padding-top:40px;}
	h4 { font-size:1.6rem; }
}
@media only screen and (min-width: 769px) {
	.PCarea-1{display:none;}
	.PCarea-2{display:block;position:absolute;top:67.5%;left:40.9%;width:50%;z-index:2;color:#fff;font-size:1.6em;text-shadow: 0px 2px 10px #65482a;}
	.PCarea-2 a{text-shadow:none;}
	h3 { font-size:3rem; padding-top:40px;}
	h4 { font-size:2.2rem; }
}
@media only screen and (min-width: 1025px) {
	#hero2{font-size:1.8em;}
	#hero2 ul.rsec{width:45%;padding:0 0 0 10%}
	#disclaimer{font-size:1.75em;line-height:1.8}
	#threecol .cat h1{font-weight:300;font-size:2em}
	#threecol .cat a.cta{font-size:1.4em;}
	#vcobox h2{font-size:3.75em;margin:50px 0;}
	.PCarea-2{font-size:2.3em}
	
	h3 { font-size:3.8rem; padding-top:60px;}
	h4 { font-size:2.8rem; }

}
@media only screen and (min-width: 1366px) {
	#vcobox{margin:20px auto 50px auto;}
}