@charset "utf-8";

body { 
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif !important;
	background-color: #e6e6e6;	
}

h1 { font-size: 1.8rem; margin-bottom: 1em; }
h2 { font-size: 1.6rem; margin-bottom: 1em; }
h3 { font-size: 1.5rem; margin-bottom: 1em; }
h4 { font-size: 1.3rem; margin-bottom: 1em; }

div.topBorder { height: 10px; width: 100%; background-color: #7f7f7f; }

div#logo { 
	width: 220px;
	height: 190px;
	position: absolute; top: 25px; left: 24px; 
	background: url(../images/Elec-One-Logo-2024-Web.png) no-repeat; 
	z-index: 1;
	background-color: #000;
	background-size: contain;
}

div.container {
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	overflow: hidden;
	position: relative;	
}

header { 
	width: 100%; height: 155px; 
	background-color: #e6e6e6; overflow: hidden;
	position: relative;
}
p.family { text-align: right; padding: .75em .25em .75em 0; margin: 0; }
p.call { text-align: right; padding-right: .25em; }

/* Navigation */
nav { 
	float: right; 
	background-color: #e6e6e6; 
	position: relative;
}
nav a.mobile_menu {
	width: 32px; height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	position: absolute; top: 0px; left: 50%; margin-left: -16px;
	display: none;
}
nav ul { margin: 0; list-style: none; }

nav ul li:hover { background-color: #cecece; }
nav ul li { float: left; margin-left: 3em; }
nav ul li a { padding: 4px 6px; color: #c00000; display: inline-block; }
nav ul li a:visited { color: #c00000; }
nav ul li a:hover { background-color: #cecece; }

div.hero { width: 100%; height: auto; margin-bottom: 1.5em; }

/* Main Content */
section.main { width: 100%; margin-bottom: 1em;}
section.main h1, h2 { text-align: center; }
section.main p { margin-bottom: 2em; padding: 0 5em 0;}

section.areas { width: 90%; margin: 0 auto; padding-bottom: 3em; overflow: hidden; }
aside h3 { margin-bottom: .75em; color: #c00000; }
aside.institutional { width: 33.3%; float: left; text-align: center; }
aside.commercial { width: 33.3%; float: left; text-align: center; }
aside.residential { width: 33.3%; float: left; text-align: center; }
aside ul { list-style: none; margin: 0;}
aside ul li { padding-bottom: .75em; }

section.resume { 
	width: 84%;
	padding: 2em 8%; 
	background-color: #cecece; 
	clear: both;
}
section.resume p {  }

section.servicesList { 
	width: 84%; padding: 2em 8%;
	background-color: #7f7f7f; color: #fff; 
	overflow: hidden; 	
}
section.servicesList h2 { color: #fff; text-align: left; }
section.servicesList h4 { color: #fff; }
section.servicesList p { clear: both; }
section.servicesList span { font-size: 2em; vertical-align: middle; }
section.servicesList ul { list-style: none; margin-left: 30px; }

article.list1 { width: 60%; float: left; margin-left: 2%; }
article.list2 { width: 38%; float: left; }

section.aboutE1 { width: 84%; padding: 2em 8%; }
section.aboutE1 h2 { text-align: left; }
section.aboutE1 p {  }

/* Form */
section.reqQuote { width: 84%; padding: 2em 8%; background-color: #262626; color: #fff; overflow: hidden; }
section.reqQuote h4 { color: #fff; }

form { position: relative; }
div.form1 { width: 100%; float: left; }
div.form1 textarea { 
	padding: .25em .75em; 
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px;
	border-radius: 12px;
	position: absolute; top: 0; left: 320px;
}
div.form1 input { 
	margin-bottom: 1.35em; padding: .1em .25em;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
	border-radius: 8px;
	font-size: 1.2rem;
}
div.form1 input.submit { 
	background-color: #7f7f7f; 
	margin: .5em 0;  padding: 4px 12px; letter-spacing: 2px;
	font-size: 1em; 
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative; top: -40px; left: 440px;
}

/* Footer */
footer { width: 73%; padding: 2em 0 2.5em 27%; background-color: #0d0d0d; position: relative; clear: both; }
footer p.owned { 
	font-style: italic; color: #fff; font-size: 1.7em;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	margin-bottom: 0;
	padding-bottom: .5em;
	
}
footer p.email a { color: #c00000; font-size: 1.5rem;	margin: 0; padding-bottom: 1em }
footer p.email a:hover { color: #ff2727;}
footer span { font-size: 1.6rem; color: #fff; margin-left: 3.5em;  }
footer p.copy { 
	font-size: .95rem; color: #c00;
	text-align: right; padding-right: 2em;
	margin-bottom: 0; padding-bottom: 0;
}

footer div.logo { 
	width: 130px; height: 125px;
	position: absolute; top: 35px; left: 86px;
	background: url(../images/electric1_logo_sm.jpg) no-repeat;
	z-index: 2; 
}


/* -----------------------------------------------
                  Media queries 
 -----------------------------------------------*/
@media (max-width: 1000px) {
	
h1 { font-size: 1.7rem; margin-bottom: 1em; }
h2 { font-size: 1.5rem; margin-bottom: 1em; }
h3 { font-size: 1.4rem; margin-bottom: 1em; }
h4 { font-size: 1.3rem; margin-bottom: 1em; }

div#logo { 
	width: 175px;
	height: 168px;
	position: absolute; top: 25px; left: 24px; 
	background: url(../images/electric1_logo_med.gif) no-repeat; 
}

p.family { padding-right: .75em }
p.call { padding-right: .75em; }

nav { right: .75em; }
nav ul li { float: left; margin-left: 2em; }

section.main p { padding: 0 2em 0; }
section.resume { width: 90%; padding: 2em 5%; clear: both; }
section.servicesList { width: 90%; padding: 2em 5%; }
article.list1 { width: 64%; float: left; margin-left: 0;}
article.list2 { width: 36%; float: left; }
section.servicesList ul { margin-left: 0px; }
section.aboutE1 { width: 90%; padding: 2.25em 5%; }


/* Footer */
footer { width: 70%; padding: 2em 0 2em 30%;  }
footer p.email { font-size: 1.5rem; }
footer span { margin-left: 3em; }
footer div.logo { position: absolute; top: 35px; left: 65px; }

} /* End @media 1000 */

@media (max-width: 851px) {

p, ul { font-size: 1.2rem; }	
h1 { font-size: 1.4rem; margin-bottom: 1em; }
h2 { font-size: 1.3rem; margin-bottom: 1em; }
h3 { font-size: 1.3rem; margin-bottom: 1em; }
h4 { font-size: 1.2rem; margin-bottom: 1em; }

div#logo { 
	width: 130px;
	height: 125px;
	position: absolute; top: 12px; left: 12px; 
	background: url(../images/electric1_logo_sm.jpg) no-repeat; 
}

section.servicesList span { display: none; }
article.list1 { width: 100%; float: none; }
article.list2 { width: 100%; float: none;  }

/* Footer */
footer { width: 70%; padding: 2em 0 2em 30%;  }
footer p.owned { font-size: 1.8rem; }
footer p.email { font-size: 1.4rem; }
footer span { font-size: 1.4rem; margin-left: 3em; visibility: visible !important; }
footer div.logo { position: absolute; top: 24px; left: 30px; }

} /* End @media 851px */

@media (max-width: 768px) {	

div#logo { display: block; }

header { height: auto; min-height: 155px; }
nav { height: 0px; width: auto; float: none; right: 0; padding-top: 50px; }
nav ul { display: block; padding: 0; }
nav ul li { float: none; } 
nav a.mobile_menu { display: block; }
nav ul li { margin-left: 0; }
nav ul li a { 
	display: block; width: auto;
	margin: 8px 10px; padding: 8px 15px; 
	border: 1px solid rgba(0,0,0,.25);
}

/* Form */
section.reqQuote { width: 92%; padding: 2em 4% 9em; }
div.form1 textarea { position: absolute; top: 160px; left: 0;
		
}
div.form1 input { 
	margin-bottom: 1em;
	font-size: 1.1rem;
	
}
div.form1 input.submit { 
	background-color: #7f7f7f; 
	margin: .5em 0;  padding: 4px 12px; letter-spacing: 2px;
	font-size: 1em; 
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative; top: 148px; left: 0px;
}

/* Footer */
footer { width: 100%; padding: 2em 0;  text-align: center; }
footer p.owned { font-size: 1.4rem; letter-spacing: 2px;}
footer p.email { font-size: 1.3rem; }
footer span { font-size: 1.3rem; margin-left: .25em; }
footer p.copy { text-align: center; }
footer div.logo { display: none; }

}

@media (max-width: 480px){
	header span { display: none; }
	nav a.mobile_menu { left: 90%; }
	section.areas { padding-bottom: 1em; }
	section.main p { padding: 0 1em; }
	aside h3 { font-size: 1.5rem; }
	aside.institutional { width: 100%; float: none; margin-bottom: 1em; }
	aside.commercial { width: 100%; float: none; margin-bottom: 1em; }
	aside.residential { width: 100%; float: none; margin-bottom: 1em; }
	aside ul li { padding-bottom: .5em; }
	section.servicesList h2 { font-size: 1.6rem; color: #c00000; background-color: #fff; padding: 5px; text-align: center;}
    section.servicesList h4 { font-size: 1.4rem; margin-bottom: 1.25em;}
	section.servicesList ul li {  }
	section.servicesList ul li { padding-bottom: .65em; line-height: 1.2;}
	section.servicesList span { display: none; }
	
	/* Form */
	div.form1 textarea { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 80%;		
	}

	/* Footer */
	footer p.owned { font-size: 1.2rem; letter-spacing: 1px;}
	footer p.email { font-size: 1.1rem; }
	footer span { font-size: 1.1rem; display: block; }
	
} /* End @media 480px */ 

@media (max-width: 363px){
	h1 { font-size: 1.3rem; }

}