#hero { 
	background: url("/assets/images/HTbackground_1.png") 50% 0 no-repeat fixed;	
	height: 680px;  
	margin: 0 auto; 
    width: 100%;
    position: relative; 
}

/* Breakpoint styles large resolution */
@media screen and (min-width: 2000px) {
#hero{
background-size:100%;
}
}


#hero article {
background: url("/assets/images/ht-hero-bubbles.png") no-repeat scroll center top transparent;
height: 400px;
position: absolute;
top: 90px;
width: 100%;
}

#hero .intro-callout{
	background-color:#fff;
	background-color: rgba(255, 255, 255, 0.75);
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 10px;
    border-radius: 6px;
}



#hero .intro-callout p{
color: #007193;
font-size: 20px;
line-height: 30px;
padding: 0px;
margin: 0px;
letter-spacing: .03em;
font-family: 'Lato', sans-serif;
font-weight:300;
}

#hero article .btn{
	margin-top:20px;
	box-shadow: 1px 2px 2px rgba(0,0,0,1);
}


#hero .hero-bubble-2 {
background: url("/assets/images/ht-hero-bubble-2.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 150px;
right:-180px;
width: 100%;
}

#hero .hero-bubble-3 {
background: url("/assets/images/ht-hero-bubble-3.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 20px;
right:-300px;
width: 100%;
}

#hero article h1{
xposition:absolute;
padding-top:193px;

}

#hero-punch { 
	background: url("/assets/images/hero-parallax-1.jpg") 50% 0 no-repeat fixed; 
	height: 500px;
	margin: 0 auto; 
    width: 100%; 
    xmax-width: 1920px; 
    position: relative; 
    xbox-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#hero-punch article {
	position: absolute;
	top: 120px;
	width: 100%;
}

#hero-punch article h2{
	max-width:1100px;
	margin:0px auto;
	text-shadow: 2px 1px 1px #000;
	padding-bottom:50px;
}

#section-ht-index{
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px 30px 0px;
font-size: 18px;
color: #fff;
background-color: #007193;
border-bottom: 5px solid #fff;
}

#ht-center-spotlight{
background: url("/assets/images/bg-peeker-map-8color-400px.jpg") 50% 0 no-repeat fixed; 
	height: 585px;  
	margin: 0 auto; 
    width: 100%;
    position: relative; 
    xmargin-top:60px;
    padding:0px;
}
    
#ht-center-spotlight article {
background: url("/assets/images/bg-peeker-400px.png") no-repeat scroll center -2px transparent;
min-height: 600px;
position: absolute;
xtext-indent: -9999px;
background-size:100%;
xtop: 60px;
width: 100%;
}

#section-ht-index h2 {
	font-size: 60px;
	line-height: 70px;
	letter-spacing: .015em;
	/*font-family: "Bree Serif", sans-serif;*/
	font-family: 'Raleway', sans-serif;
	font-weight:700;
	color: #fff;
}

#section-ht-index h3 {
	font-size: 26px;
	line-height: 32px;
	letter-spacing: .015em;
	font-family: 'Lato', sans-serif;
	color: #fff;
	font-weight: 700;
}

#section-ht-index p{
	color:#fff;
	text-align:left;
	font-size:16px;
	line-height:26px;
	font-family: 'Lato', sans-serif;
	margin-top:20px;
	font-weight:300;
}

.nav-ht-helper {
padding:20px 0px;
}

.nav-ht-helper a {
	color: #fafafa;
	text-decoration: underline;
}

.nav-ht-helper a:hover {
	color: #fff;
	text-decoration: none;
}


#section-comparison-maps{
text-align: center;
margin-top: 50px;
margin-bottom: 100px;
padding: 30px 0px 30px 0px;
font-size: 18px;
color: #fff;
background-color: #fff;
}

#section-comparison-maps img, #section-ht-index img{
max-width:95%;
height:auto;
display: block;
margin: 0px auto;
}

#ht-map:hover a.btn, #fact-sheets:hover a.btn, .compare-affordability-container:hover a.btn, .compare-greenhouse-gas-container:hover a.btn{
xbox-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

#section-applications h2, #section-comparison-maps h2 {
	font-size: 60px;
	line-height: 70px;
	letter-spacing: .015em;
	font-family: 'Raleway', sans-serif;
	font-weight:700;
	color: #007193;
}

#section-comparison-maps h3 {
	font-size: 26px;
	line-height: 30px;
	letter-spacing: .015em;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color: #8a8a8a;
	margin-bottom:10px;
}

#section-comparison-maps p{
	text-align: left;
max-width: 400px;
margin: 0 auto;
margin-bottom: 20px;
font-size: 16px;
line-height: 26px;
color: #999;
font-family: 'Lato', sans-serif;
font-weight:300;
}


.compare-greenhouse-gas-container, .compare-affordability-container{
	padding:30px 0px;
	border-radius:8px;
	background-color:#fafafa;
	border:1px solid #eeeeee;
	min-height: 560px;
}

.compare-greenhouse-gas-container img, .compare-affordability-container img{
padding:10px;
background-color:#fff;
}

.compare-greenhouse-gas-container:hover, .compare-affordability-container:hover{

}

.applications-container p, .about-extended-container p, .about-extended-container p a{
	margin: 0px auto;
	padding: 20px 0px;
	font-size: 26px;
	line-height: 40px;
	letter-spacing: .03em;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color: #999;
	max-width:1120px;
}

.applications-container p{
max-width:1020px;
}

.applications-container a{
	color: #fff;
	background-color: #007193;
	border-color: #636363;
	-webkit-transition: .3s;
	transition: .3s;
	max-width: inherit;
	box-shadow: 1px 2px 2px rgba(0,0,0,1);
	padding: 10px 20px;
	font-family: 'Lato', sans-serif;
	font-weight:300;
}

.applications-container a:hover{
background-color:#0094C4;
color:#fff;
}

.about-extended-container p a{
color:#fff;
text-decoration:underline;
}

#hero-gas-price-tool { 
	background: url("/assets/images/gas-price-tool-bg.jpg") 50% 0 no-repeat fixed; 
	height: 550px;
	margin: 0 auto; 
    width: 100%; 
    xmax-width: 1920px; 
    position: relative; 
    xbox-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#hero-gas-price-tool article {
	position: absolute;
	top: 70px;
	width: 100%;
}

#hero-gas-price-tool article h2{
	max-width:1100px;
	margin:0px auto;
	text-shadow: 2px 1px 1px #000;
	padding-bottom:20px;
	font-size: 60px;
line-height: 70px;
color:#fff;
letter-spacing: .015em;
font-family: 'Raleway', sans-serif;
	font-weight:700;
}

.gas-price-teaser{
    max-width: 640px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    padding: 20px;
    margin-bottom: 20px;
    color: #666; 
    font-size: 20px; 
    line-height: 30px; 
    letter-spacing: .03em; font-family: 'Lato', sans-serif;
    border-radius: 5px;
    font-weight:300;
}