/* High Shoals Electric styles */
body,html { 
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #414897; 
	box-sizing: border-box; 
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

.container { padding-left: 45px; padding-right: 45px; width: 100%; box-sizing: border-box; }

/* Header */
header { 
	background-color: #012168; 
	color: #ffffff;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	overflow: auto;
	background-image: linear-gradient(180deg, #012161 0%, #00003D 100%); 
	padding: 0 0 50px 0;
}

header #logo, header #banner { 
	width: 100%; max-width: 1200px; margin: 0px auto; padding: 60px 0px 0; display: block; clear:  both;
}
header #logo .logo-image a { width: 172px; height: 60px;text-indent: -9999px; background-image: url('/static/assets/highshoalselectric-logo-rev.svg'); background-size: 100%; background-repeat: no-repeat; display: block;  }

header .header-fine-print { 
	font-family: 'Oswald', sans-serif;
	font-weight: 400;;
	font-size: 12.8px;
	color: #414897;
	text-align: center; 
	text-transform:  uppercase;
	margin-top: 20px;
}

header #banner .banner-content p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: #FFFFFF;
}

#logo .logo-image { width: 50%; float:left; clear: left; }
#logo .header-fine-print { width:50%; float:left; clear: right; text-align: right;}


/* Footer */
#footer .footer { width: 100%; max-width: 630px; margin: 0 auto; padding: 30px 45px 50px; text-align: center; }
#footer .footer .footer-logo { margin-bottom: 20px; }
#footer .footer .footer-logo a { width: 129px; height: 45px; text-indent: -9999px; background-image: url('/static/assets/highshoalselectric-logo-rev.svg'); background-size: 100%; background-repeat: no-repeat; display: block; margin: 0 auto;}
footer { color: #ffffff; background: #012168; }
footer .above-footer { 
	background: #77BC1F;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 30px; 
}
footer .above-footer p {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 30px;
	width:  100%;
	max-width: 760px;
	padding: 12px 45px;
	text-align: center;
	margin: 0 auto;
	font-weight: 400;
}
footer .footer .footer-content p { 
	font-family: 'Oswald', sans-serif;
	font-size: 12.8px;
	color: #414897;
	color: #FFFFFF;
	text-align: center;
	line-height: 19.2px;
	font-weight: 400;
}

footer .footer .footer-content p.copyright {
	font-family: 'Oswald', sans-serif;
	font-weight:  400;
	font-size: 12.8px;
	line-height: 19.2px;
	color: #414897;
	margin-top:  10px;
	text-transform:  uppercase;
}

/* COMMON ELEMENTS H1-H3, P, A */
h1 { 
	font-family: 'Oswald';
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: #ABEF56;
	text-transform: uppercase; 
	margin-bottom: 0;
	margin-top: 0;
}
h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 48.83px;
	color: #FFFFFF;
	line-height: 58.6px; 
	font-weight: 400;
	margin-top: 15px;

}
h3 {
	font-family: 'Oswald';
	font-weight: 600;
	font-size: 31.25px;
	line-height: 37.5px;
	color: #012168;
	text-align: center;
}

h4 { 
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size:  25px;
	line-height: 30px;
}

p{
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #414897; margin: 0;
}
a {

}
a.button.btn {
	border: 4px solid #ABEF56;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #FFFFFF;
	text-decoration: none;
	display: inline-block;
	margin-top: 20px;
	padding: 15px;
}
a.button.btn.white {
	color: #ffffff;
}
a.button.btn.regular {
	color: #012168;
}

a.button.btn:hover, a.button.btn:focus {
	background-color:  #ABEF56;
	color: #012168;

	transition: all 1s ease-out; 
	-webkit-transition: all 1s ease-out; 
	-moz-transition: all 1s ease-out; 
	-o-transition: all 1s ease-out;
}

footer .above-footer p a { color: #ffffff !important; text-decoration: none; border-bottom: 1px solid #fff; }
footer .above-footer p a:hover, footer .above-footer p a:focus { text-decoration: none !important;
	border-bottom: 1px solid transparent;
  	transition: all 1s ease-out; 
	-webkit-transition: all 1s ease-out; 
	-moz-transition: all 1s ease-out; 
	-o-transition: all 1s ease-out;
}

/* MAIN CONTENT */
.container img { width: 100%; height: auto; max-width: 100%; }
.banner-image img { width: 100%; height: auto; max-width:100%; }
.generator-installation { 
	background-image: linear-gradient(180deg, #77BC1F 0%, #438B00 100%); 
	height:386px;
}

#content.main-content section { width: 100%; box-sizing: border-box; }

.image-anchor { position: relative; }
section.introduction .container { width: 100%; max-width: 1010px; margin: 0 auto; padding: 50px 45px; text-align: center; }
section.generator-installation .container { 
	width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; padding: 50px 45px; 
	display: flex; flex-direction: row; flex-wrap: wrap;
	position: relative; 
}

section.experience .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 100px 45px 50px 45px; overflow: auto; }
section.introduction .container p {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 20px;
	color: #241C15;
	text-align: center;
	line-height: 30px;
}
section.experience .container p {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 16px;
	color: #241C15;
	line-height: 24px;
}

#banner { clear: both; }
#banner .banner-content { width: 44%; float: left; box-sizing: border-box;  }
#banner .banner-image { width: 50%; float: right; box-sizing: border-box; padding-top: 20px;}

section.generator-installation .container .generator-content { width:44%;   }
section.generator-installation .container .generator-image { width:100%; flex-align:right; }
section.generator-installation .container .generator-image img { 
	position: absolute;
	top: 20px;
	right: 0;
	width: 100%;
	max-width: 50%;
	height: auto;
}


section.experience .container .experience-image { width: 44%; float:left; height: 100%; }
section.experience .container .experience-content { width: 50%; float:right; height: 100%; }
section.experience .container .experience-content h3 { text-align: left; }

@media screen and (max-width:  909px){
	section.generator-installation { height:auto; }
}


@media screen and (max-width: 768px){
	header #logo, header #banner { max-width: 1180px;	}
	.container { padding-left: 40px; padding-right: 40px; }
	#footer .footer { max-width: 610px; padding: 30px 40px 50px; }
	footer .above-footer p { width: auto; max-width: 740px; padding: 12px 40px; }
	section.introduction .container { max-width: 990px; padding: 50px 40px; }
	section.generator-installation { height: auto; }
	section.generator-installation .container { max-width: 1180px; padding: 50px 40px; }
	section.experience .container { max-width: 1180px; padding: 100px 40px 50px 40px;  }

	#banner { clear: both; display:flex; }
	#banner .banner-content { width: 100%; float: noe; box-sizing: border-box; flex-align:left; }
	#banner .banner-image { width: 100%; float: none; box-sizing: border-box; padding-top: 20px; flex-align: right; margin-top:20px; }
	#banner .banner-image img { margin-top: 40px; }

	section.experience .container .experience-image { width: 100%; float:none; height: 100%; }
	section.experience .container .experience-content { width: 100%; float:none; height: 100%; margin-top: 40px; }

	section.generator-installation .container .generator-content { width:100%;   }
	section.generator-installation .container .generator-image { width:100%; flex-align:right; position:relative; height:390px; }
	section.generator-installation .container .generator-image img { position: absolute; max-width:100%; }
}


@media screen and (max-width: 715px){
	section.generator-installation .container .generator-image { height: 350px; }
}

@media screen and (max-width:  672px){
	section.generator-installation { height:auto; }
	section.generator-installation .container .generator-image { height: 330px; }
}

@media screen and (max-width: 630px){
	section.generator-installation .container .generator-image { height: 305px; }
}

@media screen and (max-width: 599px){
	section.generator-installation .container .generator-image { height: 280px; }
}

@media screen and (max-width: 576px){
	body,html { font-size: 16px; line-height: 24px;  }

	header #logo, header #banner { max-width: 1150px; padding:25px 0px 0; }

	#logo .logo-image { width: auto; float:none; }
	#logo .header-fine-print { width: auto; float:none; text-align: left; }

	.container { padding-left: 25px; padding-right: 25px; }
	#footer .footer { width:  auto; max-width: 580px; padding: 30px 25px 50px; }
	footer .above-footer p { width: auto; max-width: 710px; padding: 12px 25px; }
	section.introduction .container { max-width: 960px; padding: 50px 25px; }
	section.generator-installation { height: auto; }
	section.generator-installation .container { max-width: 1150px; height: 100%; padding: 50px 25px; }
	section.experience .container { max-width: 1150px; padding: 100px 25px 50px 25px;  }

	#banner { clear: both; display:flex; }
	#banner .banner-content { width: 100%; float: noe; box-sizing: border-box; flex-align:left; }
	#banner .banner-image { width: 100%; float: none; box-sizing: border-box; padding-top: 20px; flex-align: right; margin-top:20px; }
	#banner .banner-image img { margin-top: 40px; }

	section.experience .container .experience-image { width: 100%; float:none; height: 100%; }
	section.experience .container .experience-content { width: 100%; float:none; height: 100%; margin-top: 40px; }

	section.generator-installation .container .generator-content { width:100%;   }
	section.generator-installation .container .generator-image { width:100%; flex-align:right; }

	a.button.btn { display:block; width: auto; text-align: center; }

	h1 { font-size: 20px; line-height: 30px; }
	
	h2 { font-size: 39.81px; line-height: 47.772px; }
	h3 { font-size: 27.65px; line-height: 33.18px; }
	h4 { font-size: 23.04px; line-height: 27.648px; }
}
@media screen and (max-width:  543px){
	section.generator-installation { height: auto; }
	section.generator-installation .container .generator-image { height: 240px; }
}
@media screen and (max-width:  487px){
	section.generator-installation { height: auto; }
	section.generator-installation .container .generator-image { height: 200px; }
}

@media screen and (max-width: 446px){
	section.generator-installation .container .generator-image { height: 170px; }
}


@media screen and (max-width: 406px){
	section.generator-installation .container .generator-image { height: 140px; }
}

@media screen and (max-width:  370px) { 
	section.generator-installation .container .generator-image { height: 110px; }
}

/* 525 */