* {
	box-sizing: border-box;
	font-family: 'Goudy Bookletter 1911', serif;
	margin: 0;
	padding: 0;
	list-style-type: none;
    
}

body {
	margin: 0;
	padding: 0;
}


.header-topContainer {
	width: 90%;
/*	height: 15%;*/
    height: auto;
	margin:  20px auto 0 auto;
	overflow: hidden;
}

.header-topLeft {
	height: 100%;
	width: auto;
	float: left;
	overflow: visible;
	box-shadow: 2px 2px 5px #363636;
	position: relative;
}

.float {
    float: left;
}

/* Logo */

.logo img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 10px;
	max-height: 200px;
	max-width: 300px;
	
}

.info ul {
	display: grid;
    grid-template-columns: auto auto;
	text-align: center;
	
}

.info li a {
	display: inline;
	color: #768CBB;
	text-decoration: none;
	font-size: 1.2em;
} 

.info a:hover {
	color: #363636;
	transition: 0.3s;
}

.sun {
    width: auto;
}

/* Bill4u */
 /* Bill4u */
.loadControl {
    float: left;
    width: 25%;
    margin-left: 15%;
    margin-right: 10%;
    margin-top: 0px;
    padding: 0 10px;
    text-align: center;
}

.loadControl > h3 {
    color: #768CBB;
    text-shadow: none;
}

.loadControl img {
    width: 60px;
}

.commercial {
    margin: 0 2%;
    float: left;
    width: 45%;
}

.residential {
    margin-right: 2%;
    width: 45%;
    float: right;
}



.bill4uContainer {
    display: flex;
    width: 25%;
    padding: 10px;
    margin-bottom: 25px;
    float: right;

}

.diggers {
    float: left;
    overflow: hidden;
}

#diggers img {
    width: 40%;
}

.bill4u {
    margin-left: 25px;
    padding-top: 0;
    float: right;
}

.bill4u2 {
    float: right;
    width: 100%;
}





/* Navigation */
.topNav {
    margin-top: 3%;
	width: 100%;
	float: right;
}

.topNav2 {
    border: 1px solid blue;
    padding: 0px;
    margin: 0px;
    width: 75%;
    text-align: right;
    position: relative;
        top: 140px;
        left: 5px;
    

}

.topNav ul li {
	font-weight: 600;
}


#wrapper {
	width: 100%;
	overflow: hidden;
}

.sub-wrapper {
	width: 100%;
    margin-left: -5px;
	background: #768CBB;
	overflow: hidden;
    position:absolute;
    z-index: 1;
}

nav, .sub-wrapper, #wrapper, .topNav, .grid-container {
	z-index: 5;
}



.grid-container {
	max-width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
	text-align: left;
}


.grid-item {
	padding-left: 20px;
	text-align: left;
    height: 100%;
}

.grid-container h3 {	
	color: #fff;
    width: 100%;
}

.grid-container li {
	text-transform: capitalize;
}

#holder li {
	text-decoration: none;
	transition: 5.0s;
}

h3 {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.1em;
	margin: 0;
	padding: 8px 0px;
	color: #fff;
	font-weight: 600;
	text-shadow: 2px 2px 5px #363636;
}

.h3 {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.1em;
	margin: 0;
	padding: 8px 0px;
	color: #fff;
	font-weight: 600;
	text-shadow: 2px 2px 5px #363636;
}

ul {
	margin: 0px;
	padding: 0px;
	text-align: left;
	
}

.sub-con a, .dropdown-header a, .ft-sub-hol a, .sub-wrapper {
	color: #fff;
	text-decoration: none;
	display: block;
	transition: 0.1s;
	text-shadow: 2px 2px 5px #363636;
	z-index: 6;
}


li.pad {
	text-transform: uppercase;
	font-size: 1em;
	float: right;
}

li.pad a {
	text-decoration: none;
	display: block;
	transition: 0.1s;
}

.pad span {
	color: #768CBB;
	font-size: 1em;
	text-shadow: none;
}


.pad a {
	padding: 5px 20px;
    width: 100%;
}

#holder ul {
	width: 100%;
}

.pad > a:hover, .using > li:hover > a {
	border-top: 2px solid #768CBB;
    -webkit-border-top: 2px solid #768CBB;
    -moz-border-top: 2px solid #768CBB;
	transition: 0.3s;
} 

.sub-wrapper {
	border-bottom: 5px solid #363636;
	z-index: 6;
}

.sub-wrapper a:hover {
	color: #363636;
	transition: 0.3s;
}

.sub-wrapper a:hover > #banner h1 {
	visibility: hidden;
}

.dropdown-header {
	font-size: 1.2em;
	z-index: 6;
}

.dropdown-header:hover {
	color: #363636;
	transition: 0.3s;
	z-index: 6;
}

#holder ul li > ul {
	position: absolute;
	left: -9000px;
}

#holder ul li:hover ul {
	left: 5px;
}

.grid-container ul li a {
	padding: 2PX 15px;
	font-size: 1em;
	transition: 0.5s;
}

.sub-con {
	max-width: 100%;
	margin: 0px auto;
	z-index: 6;
}


.cvec {
	border-top: 25px solid #768CBB;
	border-bottom: 25px solid #768CBB;
	background-color: #768CBB;
	background-image: url("../images/CVEC/CVEC_BuildingImage_1263x270.png");
	background-size: cover;
	background-repeat: no-repeat;
	height: 354px;
	text-align: center;
	color: #fff;
	z-index: 1;
}

#cvec {
	color: #fff;
	margin: 0px auto;
	font-size: 20px;
	text-align: center;
}

.banner {
	opacity: .8;
	height: 50px;
	overflow: hidden;
	width: 100%;
	height: 250px;
	position: absolute;
	margin-top: 160px;
	z-index: 2;
}

.banner h1 {
	background-color: #768CBB;
	opacity: 1.0;
	color: #fff;
	font-size: 2em;
	overflow: hidden;
	margin: auto 0px;
	text-shadow: 2px 2px 5px #363636;
}

.cvec2 {
	border-top: 2px solid #000;
	height: 100px;
	text-align: center;
}

.banner2 {
	clear: both;
	z-index: -1;
	overflow: hidden;
	border-top: 5px solid orange;
	border-bottom: 5px solid orange;
	background-color: #768CBB;
	width: 100%;
	height: 100px;
	box-shadow: 2px 2px 5px #363636;
}

.banner2 h1 {
	background-color: #768CBB;
	color: #fff;
	font-size: 2em;
	overflow: hidden;
	margin-top: 25px;
	text-shadow: 2px 2px 5px #363636;
}


.container {
	max-width: 90%;
	height: auto;
	margin: 1% auto;
	padding: 1% 0px;
	overflow: hidden;
    position: relative;
}

.container-full {
    width: 100%;
	height: auto;
	margin: 1% auto;
	padding: 1% 0px;
	overflow: hidden;
    position: relative;
    background-color: darkgrey;
}

.middle-container a {
	color: #768CBB;
	font-weight: 700;
	display: inline;
}

.leftContainer {
	float: left;
	width: 70%;
	height: 100%;
    overflow: hidden;
    margin-bottom: 5%;
}

.inner {
    float: left;
    width: 35%;
}

.inner2 {
    float: right;
    width: 65%;
}

.inner2 p {
    text-align: center;
    width: 90%;
    line-height: 1.5;
    font-size: 1.2em;
}

.infoBoxes-grid {
	background-color: #A5B6D9;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-row-gap: 50px;
	text-align: center;
    padding: 50px 0;
}

.infoBoxes {
	margin: 10px 10px;
}

.banner-ad {
    width: 100%;
    margin-top: 10px;
    margin-left: auto; 
    margin-right: auto;
    padding: 20px 0;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin-bottom: 10%;
    overflow: hidden;
}

.banner-ad a {
    vertical-align: top;
    display: block;
    zoom: 1;
}

.stretch {
    width: 80%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.banner-h2 {
    color: #768BCC;
    margin-bottom: 0 10% 10% 10%;
}

.banner-ad img {
   width: 50%;
}

.banner-ad img:hover {
    opacity: .5;
}

.top-box {
    height: auto;
    margin: 1% 6%;
    overflow: hidden;    
}

.fb-live {
    height: 170px;
    
    background-color: midnightblue;
    
    background-image: linear-gradient(to right, #2f406c 0%, #151d30 55%,  #ccc 100%);
  
    background-position: left;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 10vh;
}

.current {
    margin-bottom: 10%;
}


a {
    text-decoration: none;
}

.infoBoxes h3 {
	color: #768CBB;
	width: 350px;
    height: 200px;
	border: 1px solid #363636;
}

.infoBoxes img {
	/*padding: 20px auto; -*/
	max-width: 90%;
    height: 200px;
	box-shadow: 2px 2px 5px #363636;
}

.logo img:hover, .nTera img:hover, .infoBoxes img:hover, .diggers img:hover, .bill4u img:hover, .bylaws img:hover {
	opacity: .5;
    -webkit-animation: fadeTop 1s 1 cubic-brezier(.77, 0, .175, 1);
    -moz-animation: fadeTop 1s 1 cubic-brezier(.77, 0, .175, 1);
    -o-animation: fadeTop 1s 1 cubic-brezier(.77, 0, .175, 1);
    animation: fadeTop 1s 1 cubic-brezier(.77, 0, .175, 1);
}

.rightContainer {
    position: absolute;
        top: 20px;
        left: 75%;
	float: right;
	text-align: center;
	max-width: 25%;
	overflow: hidden;
	padding: 15px;
    margin-top: 20px;
    background-color: lightgray;
    height: auto;
}

/* FACEBOOK */

.fb-page {
    width: 100%;
    margin-bottom: 50px;
    border: 1px solid #768CBB;
    -webkit-border: 1px solid #768CBB;
    -moz-border: 1px solid #768CBB;
}

.facebook {
    float: right;
    margin: 0 auto;
    text-align: center;
}

.facebook-h3 {
	background-color: #768CBB;
	text-shadow: 2px 2px 5px #363636;
    padding: 5px;
}

#fb-container {
	height: auto;
	text-align: center;
	overflow: visible;
}



section {
    overflow: hidden;
}


/* FOOTER */

footer {
	color: #fff;
	border-top: 5px solid orange;
	background-color: #768CBB;
	max-width: 100%;
	text-shadow: 2px 2px 5px #363636;
	box-shadow: 2px 2px 5px #363636;
}

.ft-container {
	width: 100%;
	height: auto;
	margin: auto;
	overflow: hidden;
}

#copyright {
	color: #fff;
	background-color: #363636;
	padding-right: 20px;
	text-align: right;
}

.ft-sub-hol {
	display: grid;
	grid-template-columns: 25% 18% 18% 18% 18%;
	grid-column-gap: 5px;
	max-width: 100%;
	margin: 10px auto;
}

.contact {
	float: left;
	text-align: center;
	padding-left: 25px;
	padding-right: 25px;
}

.ft-sub-hol li a {
	color: #fff;
}



.ft-sub-hol li a:hover {
	color: #363636;
	
}

/* CONTACT FORM */

.contact-form-container {
	margin: 15px auto;
	width: 80%;
}

.contact-form {
	margin-bottom: 20px;
}

.left-container {
	color: #fff;
	background-color: #768CBB;
	margin: 0px 40px 0px 10px;
	padding: 0px 20px 20px 20px;
	float: left;
	width: 40%;
	overflow: hidden;
}

.middle-container {
	width: 80%;
	margin: auto;
}

.right-container {
	margin: 0px 10px 0 40px;
	padding-left: 20px;
	overflow: hidden;
	width: 40%;
}



.hours p {
	margin-top: 0px;
}

.map {
	background-color: #fff;
	height: 375px;
	padding: 10px;
    overflow: hidden;
}

.contact-form h3 {
	padding-bottom: 10px;
}

.contact-form label {
	color: #363636;
	font-size: 18px;
	font-weight: 200;
}

.contact-form input.form-control{
	border-radius: 0px;
	font-size: 14px;
	height: 30px;
	width: 95%;
	margin: 5px 0;
	padding: 2px;
	font-weight:normal;	
}

#input-messagearea{
	height: 50px;	
	resize: none;
	margin: 10px 0;
	padding: 5px;
}

.form-control::-moz-placeholder {
    color: #ababab;
    opacity: 1;
}

.form-control:focus {   
	border-color: rgba(70, 173, 212, 1.0);
	box-shadow: none;
	outline: 0 none;
}

.submit-button{
	background-color: #46add4;
	font-family: 'montserratregular';
	color: #fff;	
	border: none;
	width: 175px;
}

.error {
	color: darkorange;
	font-weight: 700;
	text-align: center;
	font-size: 18px;
}

.success {
	color: darkorange;
	text-align: center;
}

.submit-button:hover, .submit-button:focus{
	background-color: #2e87a9;
	color: #fff;	
}


.bill {
    height: 1200px;
    /*border: 5px solid red; */
    overflow: hidden;
}

.samplebill {
    margin: 20px 10px;
}

.samplebill li {
    list-style-type: decimal;
    display: list-item;
    margin-left: 1em;
}

.billCorner-div-top {
    margin: 10px 0 60px 0;
}

.billCorner-div-top h1 {
    margin: 10px 0;
    color: #768BCC;
}

.billCorner-div-top p {
    margin: 20px 0;
    color: #363636;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}


.billCorner-div-bottom {
    border-top: 2px solid #363636;
    margin: 20px 0;
    padding-top: 50px;
    overflow: hidden;
    
}


.billCorner-inst {
    width: 45%;
    margin-left: 50px;
    margin-right: 40px;
    overflow: hidden;
    float: left;
}



.billCorner img {
    width: 45%;
    margin-right: 50px;
    margin-top: 15px;
}


.billCorner-div-bottom h1, .home h1 {
    width: 100%;
    text-align: center;
    color: #768BCC;
    margin-bottom: 10px;
}

.billCorner-div-bottom li {
    list-style-type: decimal;
    display: list-item;
    margin-left: 1em;
    font-size: 1.2em;
}

#smarthub {
    margin: 20px 100px 20px 100px;
}

.home {
    width: 100%;
}

.home a {
    text-decoration: none;
}


.img {
	max-height: 100%;
	max-width: 100%;
}


/* Table */
table {
  margin: 40px auto;
}

.header th {
  background-color: #768CBB;
	border-bottom: 1px solid #003366;
	text-transform: uppercase;
	font-weight: 150;
  color: #fff;
	font-size: 20px;
	height: 35px;
	text-align: center;
    padding: 10px;
}



td {
  text-align: center;
	border-bottom: 1px solid #003366;
	padding: 10px 30px;
	border-spacing: 5px;
	
}

.desc, .price {
  background-color: #dddddd;
  color: #003366;
  font-size: 1.1em;
}

.seeMore {
	background-color: #cccccc;
	text-decoration: underline;
}

.seeMore a, .current a {
	color: #003366;
    text-decoration: none;
}


.tbl {
    width: 95%;
    max-width: inhert;
    margin: 0 auto;
}


.tbl2022, .tbl2021 {  
    table-layout: auto;
  width: 45%;
  float: left;
    
}





/* Rebates */
.rebates {
	width: auto;
}

.rebateName {
  background-color: #dddddd;
  color: #003366;
  font-size: 1em;
	text-align: left;
}

.rebates a {
	color: #003366;
}


/* Round Up */
#roundup {
	margin: 45px;
}

.roundup {
	font-size: 1.5em;
	font-weight: bold;
}

.roundupCenter {
    text-align: center;
}

#thanks {
	text-align: center;
	color: darkgreen;
	font-size: 1.5em;
	font-weight: bold;
}

#roundup2 {
	color: darkgreen;
	font-size: 3em;
	font-weight: bold;
}

#roundup3 {
	text-align: center;
	float: left;
	width: 49%;
	
}

#roundup4 {
	text-align: center;
	float: right;
	width: 49%;
} 


#roundup > p {
	color: black;
	text-align: left;
    padding-bottom: 10px;
}

#roundup a {
	border: 1px solid #aaaaaa;
	color: #363636;
	background-color: #eeeeee;
	margin: 5px auto;
	padding: 2px;
	width: 300px;
	text-align: center;
}

.roundupli {
    list-style:disc;
    margin: 10px 40px;
}

.autopay a {
	border: 1px solid #aaaaaa;
	color: #363636;
	background-color: #eeeeee;
	margin: 5px auto;
	padding: 2px;
	width: 300px;
	text-align: center;
}

embed:focus {
  outline: none;
}

embed[seamless] {
  display: block;
}

.embed {
   margin: 5% auto;
}


/* Rates */

.rates th, .serviceFees th, .grills th {
	background-color: #768CBB;
	border-bottom: 1px solid #003366;
	text-transform: uppercase;
	font-weight: 200;
    color: #fff;
	font-size: 20px;
	height: 35px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}

.rates-seeMore:last-child {
	background-color: #cccccc;
	text-decoration: underline;
}

.rates td, .serviceFees td, .grills td {
	background-color: #dddddd;
    font-size: 1em;
	text-align: left;
}

.rates-seeMore a {
	color: #003366;
}

.grills td:last-child {
	text-align: center;
}

.Rate::before {
  content:"$ ";
}


/* Payment Options */
.payment-grid {
	width: 90%;
	margin: auto;
    grid-gap: 20px;
}

.h2-blue {
    background-color: #dddddd;
	color: #768CBB;
	text-align: center;
	margin: 10px 0 20px 0;
    padding: 10px;
}

.payment a, .payment h4 {
	color: #768CBB;
	text-align: center;
	padding: 20px;
}

.payment {
	text-align: center;
    float: left;
    width: 25%;
}


.payment-grid2 {
	width: 90%;
	margin: auto;
}


.payment2 > h2, .payment2 a {
	color: #768CBB;
	text-align: center;
	padding: 20px;
}

.payment2 {
	text-align: center;
    float: left;
    width: 50%;
}

.payment2 > h2:hover, .payment2 a:hover, .payment a:hover {
	color: #363636;
}


 .annual{
    text-align: center;
     font-size: 2em;
}

.safety p {
    font-size: 1.5em;
    color: #768CBB;
    text-align: center;
    margin-bottom: 5%;
    margin-top: 5%;
}


.safety-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 2.5% 0;
}


.safety-img {
    flex: 1;
    width: 20%;
    margin-left: 20px;
    float: left;
    overflow: hidden;
}


.safety-ul {
    padding-left: 20px;
    float: right;
    width: 70%;
}


.safety-ul li {
    list-style: disc outside none;
    display: list-item;
    margin-left: 1em;
    color: #363636;
}

.safety-diggers {
    color: #768CBB;
    text-decoration: none;
}


.energy {
	width: 100%;
    display: flex;
}

.energy1 {
	margin: 20px;
	color: #768CBB;
	text-align: center;
	flex: 1;	
}

.energy2 {
	width: 50%; 
	float: left;
	padding: 50px; 
    flex: 1;
}

.energy2 h2 {
	color: #768CBB;
}

.energy2a {
	border: 1px solid #003366;
	padding: 50px;
	margin: auto;
}

.energy2 p {
	color: #003366; 
}

.energy3 {
	width: 50%; 
    margin-top: 50px;
	padding: 20px;
	overflow: hidden;
	
}

.energyTbl {
	margin: 30px auto;
}

.energyTbl th {
	background-color: #768CBB;
	border-bottom: 1px solid #003366;
	text-transform: uppercase;
	font-weight: 200;
    color: #fff;
	font-size: 20px;
	height: 35px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}


.energy3 td, .wiringdiagram td {
	background-color: #dddddd;
   font-size: 1em;
	text-align: center;
}

.energy3 p {
	color: #003366;
	text-align: center;
}

.capitalCredits {
	width: 100%;
	padding: 40px;
}

.capitalCredits article {
	width: 80%;
	margin: auto;
}

.capitalCredits h2, .capitalCredits h3 {
	color: #768CBB;
	text-shadow: none;
}

.capitalCreditsLower {
	width: 100%;
	margin: 20px auto;
	overflow: hidden;
}

.capitalCreditsImg {
	width: auto;
	float: left;
	overflow: hidden;
}

.capitalCreditsOL {
	width: auto;
}

.capitalCreditsOL ol {
	padding: 20px 0;
}

.capitalCreditsOL li {
	padding-top: 15px;
}

.products {
	padding: 0;
	margin: 20px 0;
}

.products th, .wiringdiagram th {
	background-color: #768CBB;
	border-bottom: 1px solid #003366;
	text-transform: uppercase;
	font-weight: 200;
  color: #fff;
	font-size: 18px;
	height: 35px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

.products td {
	text-align: center;
	padding: 10px 20px;
}


.safety, .energy {
	color: #768CBB;
}

.energyUL li, .dualfuel li {
	list-style-type: disc;
	margin-left: 20px;
}

.distributed article, .distributed2, .dualfuel article {
	width: 80%;
	margin: 20px auto;
}

.distributed h1, .dualfuel h1 {
	color: #769CBB;
}

.distributed img {
	margin: 40px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.dualfuel h3 {
	color: #768CBB;
	text-shadow: none;
}

.dualfuel p, .dualfuel div, .dualfuel a {
	margin-bottom: 40px;
    text-decoration: none;
}

.dualfuel a {
    color: #768BCC;
}

.dualfuel a:hover {
    color: #363636;
}

.dualfuel ul {
	margin-left: 20px;
}


.waterheater img {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wiringdiagram td {
	text-align: left;
}


.boilers h1 {
	background-color: #003366;
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
	margin-top: 40px;
	text-shadow: 2px 2px 5px #768CBB;
}

.boilers h1:not(:first-child) {
	margin-top: 100px;
}

.boilers h2 {
	text-align: center;
	color: #003366;
}


.scholarships {
    display: flex;
}

.scholarships a {
    float: left;
    margin: auto;
}

.scholarships h1 {
    color: #768CBB;
    font-size: 1.2em;
}

.contact-email {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.contact-email h2 {
    width: 100%;
    margin: 20px 0 0 0;
}

.contact-email h3 {
    color: #363636;
    text-shadow: none;
    text-transform: capitalize;
    margin-left: 50px;
}

.contact-email a {
    text-decoration: none;
    color: #768CBB;
}

.contact-email a:hover {
    color: #363636;
}

.bylaws {
    padding: 10px;
    color: #768BCC;
    text-decoration: none;
    text-shadow: none;
    background-color: #dddddd;
    box-shadow: 2px 2px 5px #363636;
    border-bottom: 1px solid #aaaaaa;
}

.bylaws-a {
    text-decoration: none;
}

.youth a:hover {
    color: #363636;
}

.button:hover {
    background-color: #fff;
    opacity: 0.5;
    transition: 0.3s;
}

.main-wrapper {
    width: 90%;
    margin: 2.5% auto;
    padding: 2.5%; 
    overflow: hidden;
    height: 100%;
}


.grid-2container {
    background-color: #768BCC;
    color: #fff;
	display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: auto;
    grid-gap: 1.5%;
    height: 100%;
    padding: 1.5%;
    overflow: scroll;
}

.map-item1 {
   /* border: 1px solid red;*/
    grid-column: 1;
    grid-row: 1;
}

.map-item2 {
    /* border: 1px solid green; */
    grid-column: 1/3;
    grid-row: 2;
    height: 100%;
    overflow: hidden;
    padding: 1.5%;
}


.map-item1 p {
    margin: 5%;
    font-size-adjust: .7;
}


.map-pic {
    display: block;
    width: 55%;
    margin: 5% auto;
}

.grid-3column {
    color: #fff;
	display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 2.5%;
    padding-right: 2.5%;
    margin:2.5% auto;
    height: 90%;
}

[class*='img-item'] {
    border: 1px solid white;
    padding: 10px;
    background-color: #fff;
    align-items: center;
    display: block;
    text-align: center;
}

[class*='img-item'] h2 {
    color: #1f3d7a;
    text-shadow: none;
}

[class*='img-item'] img {
    text-shadow: none;
    display: block;
    margin: 15px auto;
    
}

[class*='img-item'] p {
    color: #1f3d7a;
    margin: 15px;
    font-weight: 500;
    font-size-adjust: .5;
}

[class*='img-item'] a {
    color: #1f3d7a;
    padding: 20px;
    font-weight: 800;
    font-size-adjust: .6;
    text-decoration: none;
}


.director-pic {
	    width: 200px;
max-height: 200px;
}


.payment p {
    font-size: 1.1em;
    margin: 0 10px 10px 10px;
    padding: 20px;
    
}

.outage {
    width: 30%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background-color: #dddddd;
}

.outage a {
    text-decoration: none;
	color: #768CBB;
    font-size: 1.1em;
}

.outage h2 {
    padding: 5px;
}














@media only screen and (max-width: 750px) {
	
    * {
		font-size-adjust: 0.28;
	}
    
    .header-topLeft {
        width: 30%;
        overflow: hidden;
    }
    
    #logo {
        width: 70%;
    }

    
	#wrapper {
		width: 100%;
	}
	
	#holder {
		width: 100%;
	}
	
    #holder ul .pad {
		width: 25%;
		text-align: center;
	}
	

	.pad a {
		padding: 5px 5px;
	}
    
    	/* Bill4u */
    .bill4uContainer {
        margin: 0 auto;
        clear: both;
        width: 95%;
    }
    
    
    .diggers img {
        display: none;
	}
    
    
	.bill4u img {
		height: 40%;
		height: auto;       
	}
    
    .loadControl {
        float: left;
        width: 30%;
        margin: 0 2% 0 5%;
        padding: 0 10px;
        text-align: center;
    }

    .loadControl > h3 {
        color: #768CBB;
        text-shadow: none;
    }

    .loadControl img {
        width: 60px;
    }

    .commercial {
        margin: 0 2%;
        float: left;
        width: 40%;
    }

    .residential {
        float: right;
        margin: 0 2%;
        width: 40%;
    }

	
	.cvec {
		height: 60px;
		background-image: none;
		z-index: -4;
	}
	

	.banner {
		display: none;
	}
	
	.container {
		padding-top: 20px;
	}

	.infoBoxes-grid {
		grid-template-columns: auto auto;
		overflow: hidden;
	}
	
	.infoBoxes img {
		width: 100%;
		height: auto;
	}
	

	
	.ft-sub-hol {
		display: grid;
		grid-template-columns: 100%;
		max-width: 100%;
		margin: 10px auto;
	}

	.contact {
		text-align: center;
		font-size: 1.3em;
		padding-left: 25px;
		padding-right: 25px;
	}

	.ft-sub ul, .ft-sub li, .ft-sub h3 {
		display: none;
	}
    
    .energy {
        display: flex;
    }
	
	.energy2, .energy3 {
		width: 100%;
		clear: both;
        flex: 1;
        margin-top: 50px;
	}
	
	.banner2 h4, .banner2 h1{
		font-size-adjust: .2;
	}
	
	.energy1 h1 {
		font-size-adjust: .3;
	}
	
        
.tbl2022, .tbl2021 {  
    table-layout: auto;
   
}  

	
	
	
}




@media only screen and (max-width: 560px) {
    h1, h2 {
        font-size: 1.3em;
    }
    
    .ft-sub {
        display: none;
        visibility: hidden;
    }
    
      html {
        -webkit-text-size-adjust : none;
        text-size-adjust         : none;
    }


    .header-topLeft {
		width: 100%;
		height: auto;
		clear: both;
		overflow: visible;
		box-shadow: 2px 2px 5px #363636;
		position: relative;
	}

	.cvec {
		display: none;
		background-image: none;
	}



	.logo img {
		display: block;
        margin-left: auto;
        margin-right: auto;
		width: 80%;
	}
    
    .container {
        position: static !important;
        overflow: hidden;
        margin-bottom: 5%;
        text-align: center;
    }
    
    .cvec2 {
        height: 10%;
        margin-top: 15%;
    }
    
    
    .banner2 {
        height: 50px;
    }
    
    .banner2 > h1 {
        font-size: 1.3em;
        margin-top: 2%;
    }
    
   
    
    .bottomContainer {
        margin: 5%;
        text-align: center;
        height: auto;
        overflow: hidden;
    }

	.info ul, .ft-sub ul {
		display: grid;
        grid-template-columns: auto auto;
		text-align: center;
		
	}

	.info li a {
		display: inline;
		color: #768CBB;
		text-decoration: none;
		font-size: 1em;
	} 

	.info a:hover {
		color: #363636;
		transition: 0.3s;
	}


	.topNav {
		max-width: 100%;
		width: 100%;
        height: 250px;
        overflow: visible;
	}
	
	
    #wrapper {
		width: 100%;
        height: 100%;
	}
	
	#holder {
		width: 100%;
	}
	
    #holder ul .pad {
		width: 100%;
		text-align: center;
	}
	
	
	.pad span {
		color: #fff;
		font-size: 1em;
		text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	}
	
	.topNav h3 {
		text-align: center;
		font-weight: 600;
	}

	
	#holder ul li {
		display: block;
		width: 100%;
		font-weight: 600;
		background-color: #768CBB;
		text-align: center;
	}
    
    .banner2 {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .banner h1 {
        font-size-adjust: 1.5;
    }

	.grid-container {
		max-width: 100%;
		display: grid;
		grid-template-columns: 100%;
		text-align: center;
	}


	.grid-item {
		text-align: left;
	}

	.grid-container h3 {	
		color: #fff;
	}

	.grid-container li {
		text-transform: capitalize;
	}
    
   #sub-menu {
        display: none;
    }
	
    .main:hover #sub-menu {
        display:block;
    }

	.payment-grid {
		width: 90%;
		margin: 5% auto;
        
	}

	.payment {
		text-align: center;
        clear: both;
        width: 90%;
        margin-bottom: 15%; 
	}

	.payment > a {
		color: #768CBB;
		text-align: center;
		padding: 2%;
        width: 90%;
	}
    
    .payment2 {
        width: 90%;
        padding: 0;
        font-size: .8em;
    }


	.contact {
		text-align: center;
		font-size: 1.3em;
		padding-left: 25px;
		padding-right: 25px;
	}
    
    .banner-ad img {
        width: 100%;
        float: none;
        clear: both;
    }
	
	.leftContainer, .facebook {
		width: 100%;
		clear: both;
	}
    
    .inner, .inner2 {
        width: 100%;
        float: none;
    }
    
    
	
    .rightContainer {
        clear: both;
        float: none;
        margin: 2% auto;
        padding: 0;
        max-width: 95%;
        width: 95%;
        position: static;
            left: 0;
    } 
    
    .inner2 p {
        text-align: center;
        width: 90%;
        line-height: 1.5;
        font-size: 1.2em;
    }
	
	.infoBoxes-grid {
		grid-template-columns: auto;
        overflow:hidden;
        padding: 10px;
	}
	
	.infoBoxes img {
		max-width: 90%;
        margin: 0 auto;
        padding: 0;
	}

    
 
        
    .fb-page {
        border: 1px solid #768CBB;
        width: 100%;
    }
    
    .fb-page img {
        max-width: 75%;
    }
    
     .facebook-h3 {
        background-color: #768CBB;
        text-shadow: 2px 2px 5px #363636;
    }

    
	.payment-grid {
		grid-template-columns: 100%;
	}	
	
	.energy2, .energy3 {
		width: 100%;
		clear: both;
		padding: 10px;
	}
	
	.banner2 h4, .banner2 h1{
		font-size-adjust: .2;
	}
	
	.energy1 h1, .energy2a h2, .energyTbl {
		font-size-adjust: .3;
	}
	
	.serviceFees td, th {
		padding: 0 5px;
	}
	
	.capitalCredits article {
		width: 100%;
	}

	.capitalCredits {
		width: 100%;
		padding: 40px 0;
	}
	
	.capitalCreditsImg {
		padding: 40px 0;
	}

	.capitalCreditsImg img {
		width: 100%;
	}
    
    .loadControl {
        width: 95%;
        margin: 2% 2% 5% 2%;
        text-align: center;
    }

    .loadControl > h3 {
        color: #768CBB;
        text-shadow: none;
    }

    .loadControl img {
        width: 60px;
    }

    .commercial {
        float: left;
        width: 40%;
        margin: 10px 5px;
    }

    .residential {
        float: right;
        width: 40%;
        margin: 10px 5px;
    }
    
        
    .bill4uContainer {
        margin: 2% 2% 5% 2%;
        display: block;
    }
    
    .bill4u  {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .bill4u #willie{
        display: none;
    }
    
    .sb {
        visibility: collapse;
    }
    
    .contact-form-container {
        width: 100%;
        margin: 5vh auto;
    }
    
    .left-container, .right-container {
        width: 98%;
        clear: both;
        padding: 0;
        margin: auto;
    }
    
    .map {
        height: auto;
        width: 90%;
        margin: 5% auto;
    }
        
    .contact-email > h3 {
        margin-left: 0;
    }
    
    .outage {
        width: 100%;
    }
    
    .MAL * {
        width: 100%;
        padding: 0;
        margin: 5% auto;        
        font-size: .9em;
    }
    
    .MAL table, .MAL tbody {
        width: 100%;
    }
    
    .img {
        width: 30%;
        padding: 0;
        margin: 0;
    }
    
    .MAL th {        
        font-size: .8em;
        width: auto;
        padding: 1%;
    }
    
    .MAL td {
        width: auto;
    }

    
    .tbl {
        width: 95%;
        margin: 0 auto;
    }
    
.tbl2022, .tbl2021 {  
    table-layout: auto;
    
}  

    
}
    
    
 @media screen and (max-width: 1024px) {

		
	* {
		font-size-adjust: 0.4;
	}
    

	.header-topLeft {
		margin-bottom: 20px;
        float: left;
	}
	
	/* Bill4u */
    .bill4uContainer {
        margin: 0 auto;
        float: right;
        flex: 1;
    }
    
    
	.bill4u img {
		height: 60%;
		height: auto;
	}
	
	.diggers img {
		width: 60%;
		width: auto;
	}

	
    .loadControl {
        margin-left: 10%;
        margin-right: auto;
    }
	.cvec {
		height: 60px;
		background-image: none;
		z-index: -4;
	}
	

	.banner {
		display: none;
	}
	
	.container {
		margin-top: 40px;
	}
	

	.infoBoxes-grid {
		grid-template-columns: auto auto;
		overflow: hidden;
	}
	
	.infoBoxes img {
		width: 100%;
		height: auto;
	}
	
	.payment-grid {
		grid-template-columns: 50% 50%;
	}
	
	.capitalCreditsImg {
		width: 60%;
	}
	
	.capitalCreditsImg img {
		width: 100%;
	}
	
	.capitalCreditsOL ol {
		padding: 0 5px;
	}
	
	.capitalCreditsOL li {
		padding-top: 10px;
	}
     
         
.tbl2022, .tbl2021 {  
    table-layout: auto;
    width: 45%;
    margin: 0 1%;
    
}  

	
}
    
       
    
    
    

@media only screen and (max-width: 1280px) {

	
	.logo img {
		margin-bottom: 5px;
	}
	
	/* Bill4u */
	.bill4uContainer {
		width: 50%;
		overflow: hidden;
		padding: 0;
	}
	
	.diggers a {
		font-size: 1em;
	}
    
        
.tbl2022, .tbl2021 {  
    table-layout: auto;
    width: 45%;
    margin: 0 1%;
    float: left;
    
}  

	
}