.hero 			 { margin-top: 2%; position: relative;}
.hero>img		 { width: 100%; }
.hero .container { position:absolute; top:3%; left:1%;  width: 98%; height: 92%;  overflow: hidden;  }
.hero .container { text-align: center;}
.hero .container .corner {position: absolute; z-index: 10; width: 3px; height:3px; padding: 0; margin: 0;}
.corner.top.left {top:0px; left:0px;}
.corner.top.right {top:0px; right:0px;}
.corner.bottom.left {bottom:0px; left:0px;}
.corner.bottom.right {bottom:0px; right:0px;}
.hero .container ul { padding: 0; margin: 0; list-style: none;}
.hero .container li { position: absolute; top:0px; left:0px; width: 100%; height:100%; }
.hero .container li h2 { position: absolute; top:5px; left:5px;	font-family: "interStateBlk", sans-serf; font-size: 2em;	color: #fff; color: #00456b;}
.hero .container li h2:before { content:""; display:inline-block; background:url(../img/build/h2_markL.png) no-repeat; background-size: 100% 100%; width: 15px; height: 15px; padding-right: 5px; }
.hero .container li h2:after { content:""; display:inline-block; background:url(../img/build/h2_markR.png) no-repeat; background-size: 100% 100%; width: 15px; height: 15px; padding-left: 5px; }
.hero .container li h3 { position: absolute; top:30px; left:26px; color: #fff; font-size: 1em; text-align: left; color: #00456b; max-width: 40%;}
.hero .container .lowerBar {position: absolute; height: 13%; width: 100%; bottom: 0px; background-color:#0f71a6; background-color: rgba(0,85,132,0.5);}
.hero .container li img { width: 100%; }
.hero .container li .cta { position: absolute; font-family: "interStateBlk", sans-serf; color: #00456b; text-shadow: 0px 1px rgba(0,0,0,0.12); font-size: 1.1em; bottom: 5%; right: 5%; text-transform: uppercase; padding: 1.8% 8% 1.7% 1.9%; background: url(../img/build/cta_yellowBg.png) no-repeat; background-size: 100% 100%;}
.hero .container li .midLink { position: absolute; width:70%; height: 100%; top:0px; left:15%; display: block;

}


.heroControl 	{ margin:0 auto; width: 100%;  height: 75px;  background:url(../img/build/all_div.png) repeat-x; background-position:center center; background-size: 100%; }
.heroControl ul	{ text-align: center; list-style: none; height: auto; padding: 0; margin: 0; margin-bottom: 5%;}
.heroControl li { display:inline-block; width:14px; height:13px; background:url(../img/build/hero/hero_indOff.png) no-repeat; margin: 10px 4px 0px 4px;  }
.heroControl li.active { background:url(../img/build/hero/hero_indOn.png) ; }
.heroControl a  { display:block; width:100%; height:100%;}

@media only screen and (min-width: 750px) {

.heroControl 	{ width:100%; position: relative; left:-7px; }

.hero .container li h2 {font-size: 5em; top:20px; left:20px; }
.hero .container li h3 { position: absolute; top:81px; left:80px; color: #fff; color: #00456b; font-size: 2em;  max-width: 80%;}

.hero .container li h2:before { width: 51px; height: 41px; padding-right: 5px;}
.hero .container li h2:after { width: 51px; height: 41px; padding-left: 5px;}

.hero .container li .cta { font-size: 1.6em; padding-right: 4%; }

}
@media only screen and (min-width: 934px) {

.heroControl 	{ width:934px; position: relative; left:-7px; }

}