@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Bitter:700,italic,regular|Open+Sans:300,300italic,600,600italic,700,700italic,800,800italic,italic,regular|Raleway");

@import url(/assets/css/icons/font-awesome/css/fontawesome.css);
@import url(/assets/css/icons/font-awesome/css/brands.css);
@import url(/assets/css/icons/font-awesome/css/solid.css);

html, body {height:100%;}
body, .container-fluid, .row {margin: 0; padding: 0;}

.white {background-color: rgba(255, 255, 255, 0.8);}
p.rev, a.rev {color: #fff;}
.blue, .bg-blue {background-color: #132538;}
.green {background-color: #249b48;}
.gray, .bg-gray {background-color: #e7e7e7;}
.drkgray {background-color: #2a2b2c; border-top: 3px solid #606263;}
.orange {background-color: #e77204;}
.drkblue {background-color: #0e253a;}
.fl-left {float: left;}
.fl-right {float: right;}
.hide {display: none;}

html { font-size: 62.5%; } 
body { font-size: 1.5rem; }
h1   { font-size: 2.5rem; margin-bottom: 1.5rem; color: #e77204; font-family: "Raleway"; font-weight: bold;} 
h2   { font-size: 2.0rem; font-family: "Raleway"; font-weight: bold; color: #132538; margin-top: 1.0rem; margin-bottom: 1.0rem;} 
h3 	 { font-size: 1.8rem; color: #e77204; font-family: "Raleway"; font-weight: bold;}
h4   { font-size: 1.5rem; color: #132538; font-family: "Raleway"; font-weight: bold;}
p.contact {color: #000; font-size: 15px; }
p, li {color: #2F3B37;}
a {color: #e77204; text-decoration: none;}
a:hover {color:#e77204; text-decoration: underline;}

h2 a {color: #132538; text-decoration: none;}
h2 a:hover {color:#132538; text-decoration: underline;}

p.highlighted {font-style: italic; color: #2F3B37; font-size: 1.6rem; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
.firstcharacter {
  float: left;
  font-size: 50px;
  line-height: 33px;
  padding-top: 5px;
  padding-right: 4px;
  padding-left: 3px;
}
.closer {text-transform: uppercase; font-weight: bold; letter-spacing: 2px;}
.visit {font-size: 2rem;}

/* Blue Bar: Search - Logo - Top Nav - Footer - Icons */
#topnav {padding:10px 0;}
#topnav, #searchbar, #footer, #footer_nav, #icon_nav {color: #fff;}
#topnav a {color: #fff; text-decoration: underline;}

#searchbar {background-color: #132538; padding:10px 0;}
#searchbar a {color: #fff; text-decoration: underline;}
#searchbar .sign {}

#logoContainer { 
  max-width: 1200px; 
  margin: auto;
}

#banner_container {width: 100%; border-bottom: 3px solid #e77204;}
#banner_container img {width: 100%;}

/* Header */
#header img {margin-bottom: 20px;}
#header {padding:10px 0;} /* was 25px */

/*Main Navigation */
#MainNav a {color: #FFF;}
#MainNav img {margin-top: -50px !important;}

#MainNav .navTop {margin-top: 0;}
#MainNav .dropdown-menu {
	background-color: #132538;
	color: #fff;
	font-size: 1.25rem;
}
#MainNav .dropdown-menu > li > a {
		color: #FFF;
}
#MainNav .dropdown-menu > li > a:hover {
    background-color: #e77204;
    background-image: none;
	color: #fff;
	text-decoration:none;
}

.navbar-dark {--bs-navbar-toggler-border-color: rgb(255, 255, 255);}

@media (min-width: 1024px) {
	#MainNav .navbar-brand {margin-right: 60px; margin-left: 0px;}
	#MainNav .navTop {margin-top: 10px;}  /* 80px */
	#MainNav li {margin-left: 50px;}
	#MainNav li {margin-left: 50px;}
	#MainNav .dropdown-item {margin-left: -50px;}
	#MainNav .dropdown-menu {min-width: 275px;}	
    #MainNav .dropdown-menu > li > a:hover {min-width: 268px;}	
 }
 
 @media (min-width: 1290px) {
 	#MainNav .navbar-brand {margin-right: 140px; margin-left: 60px;}
	#MainNav .dropdown-menu {min-width: 275px;}
 	#MainNav .dropdown-menu > li > a:hover {min-width: 268px;}
 }

/* STEPS Section (Home Page) START */
#steps-box {background-color: #e77204; padding: 20px; margin-bottom: 15px;}
#steps-box p {color: #fff; margin-bottom: 0; line-height: 1.7em;}
#steps-box p + p {margin-top: 12px;}
#content #steps-box a {color: #fff;}
#content #steps-box li {list-style: none;}
#content #steps-box ul {padding-left: 0;}

#text {margin-bottom: 25px;}

/*  Roll over Image */
#icon-map {display: block; width: 339px; height: 172px; background: url("../imgs/icon-interactive_map-2.png") no-repeat 0 0;}
#icon-providers {display: block; width: 339px; height: 172px; background: url("../imgs/icon-providers_pricing.png") no-repeat 0 0;}

/*  icon-providers_pricing.png  */

#icon-map:hover, #icon-providers:hover {background-position: 0 -172px;}
#icon-map span, #icon-providers span {position: absolute; top: -999em;}

@media only screen and (max-width: 450px) {
  #orange_box .WIIFF {display: none;} 
  #orange_box .box-icon {display: none;}
  #steps-box {
      max-height: 30px !important;
      padding-top: 5px !important;
      padding-bottom: 5px !important;    
  }

  .CircleNav {width: 60px; margin-left: 0px; margin-right: 5px; overflow: hidden; position: relative;}
  .CircleNav a img {width: 120px;}

  #Circles a img {margin-left: -7px;}
  #Circles a.selected img {margin-left: -67px;}	
  #Circles a:hover img {margin-left: -67px;}	
  #Circles {margin-bottom: 20px;}
}

@media only screen and (max-width: 810px) and (min-width: 451px) {
  #orange_box .WIIFF {display: none;} 
  #orange_box .box-icon {display: none;}
  #steps-box {
      max-height: 30px !important;
      padding-top: 5px !important;
      padding-bottom: 5px !important;    
  }
  .CircleNav {width: 80px; margin-left: 5px; margin-right: 35px; overflow: hidden; position: relative;}
  .CircleNav a img {width: 160px;}
  #Circles a img {margin-left: -7px;}
  #Circles a.selected img {margin-left: -87px;}	
  #Circles a:hover img {margin-left: -87px;}	
  #Circles {margin-bottom: 20px;}
}

@media (min-width: 1100px) {
  #steps #box {margin-top: -180px;}
  #steps #steps-box {margin-top: -180px;}
  #steps #text {margin-top:-50px;}
  #content #box {margin-top: 20px;}
  #content #steps-box {margin-top: 20px;}
  #content #text {margin-top: 20px;}
  
  
  .CircleNav {width: 90px; margin-left: 0px; margin-right: 42px; overflow: hidden; position: relative;}
  .CircleNav a img {width: 180px;}
  #Circles a img {margin-left: -7px;}
  #Circles a.selected img {margin-left: -97px;}
  #Circles a:hover img {margin-left: -97px;}
  .no-sm {display: inherit;}
}
/* STEPS Section (Home Page) END */

.no-sm {display: none;}

/* Modal Box Changes */
.modal-header {
	border-bottom: 1px solid #132538;
    border-bottom-color: rgb(231, 114, 4);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.modal-footer {
    border-top: 1px solid #132538;
    border-top-color: rgb(231, 114, 4);
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom: 1px solid #e9ecef;
    border-bottom-color: rgb(233, 236, 239);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}


/* Table Modifications */
.table .thead-blue th {
    color: #fff;
    background-color: #249b48;
    border-color: #249b48;
}


/* FAQ btn - May Effect other pages on site */
#FAQ .btn {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    text-align: left !important;
}


/* Left Nav */
a.selected {color:#00FF15 !important;}
ul.leftnav li {
    list-style: none;
    border-bottom: solid 1px;
    border-bottom-color: currentcolor;
    border-bottom-color: #ECECEC;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
ul.leftnav li ul li {
    list-style-type: none;
    padding-left: 20px;
    margin-left: 0;
    position: relative;
    border: none;
    margin-bottom: 0;
    font-weight: normal;
}
ul.leftnav ul {font-size: 85%;}

#Article img {
  border: #132538 1px solid;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  margin-right: 5px;
  max-width: 350px;
}

.text p {margin-bottom: 0;}
.text p a {
	position: absolute;
	padding-left: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	opacity: 1;
	bottom: 0;
	color: #fff;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 0px;
	display: block;
	width: 100%;
	background: rgba(119,119,119,1.00); /* Fall-back for browsers that don't support rgba */
    background: rgba(119,119,119,.6);
}
.text p a:hover {
	background: rgb(13,37,58); /* Fall-back for browsers that don't support rgba */
    background: rgba(13,37,58, .7);
}
.text p a.selected {
	background: rgb(13,37,58); /* Fall-back for browsers that don't support rgba */
    background: rgba(13,37,58, .7);
}
.control {position: relative; overflow: hidden;}

.nav-tabs {
	font-family: Raleway;
	color: #132538;
	font-weight: bold;
}

.btn-sample {
	font-family: Raleway;
	font-weight: bold;
	background-color: #249b48;
	font-size: 1.2em;
	padding: 0px, 5px, 0, 5px;
	border:none;
	color: #FFF;
}


.btn {
	font-family: Raleway;
	font-weight: bold;
	background-color: #249b48;
	font-size: 1.2em;
	padding: 15px;
	border:none;
}
.btn:hover {background-color: #132538 !important;}

#btn-outage .btn-lg {width:100%;}
#btn-outage a:hover {text-decoration: none;}

#box ul li:hover {color: #249b48;}
#box {background-color: #e77204; padding: 20px; margin-bottom: 15px;}
#box p {color: #fff; margin-bottom: 0; line-height: 1.7em;}
#box p + p {margin-top: 12px;}
#content #box a {color: #fff;}
#content #box li {list-style: none;}
#content #box ul {padding-left: 0;}

/* Form Items */
.btn-frm {
	font-family: Raleway;
	font-weight: bold;
	background-color: #249b48;
	font-size: 1.0em !important;
	padding: 5px !important;
	border: 0;
}

.form-control{font-size: 1.5rem;}

.cell /* honeypot for form */
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

.buttonRemark {
	color:#FF0004 !important;
	font-weight: normal;
	font-style: italic;
}


/* Home Styles */
.bg_home_rate {background-color: #A2C7E3;}

#news_box {
	padding-top: 3%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 0%;
	border: 1px solid #dee2e6 !important;

}

#text {margin-bottom: 25px;}
.bitter {font-family: "Raleway"; font-weight: bold;}

.homeIcon {
  display: block;
  text-decoration: none !important;
}


.homeIconPay.homeIcon:link, .homeIconOutages.homeIcon:link, .homeIconEnergy.homeIcon:link {
	background-color: #0e253a;	
	padding-top: 3.25em;
	padding-bottom: 3.25em;	
	-webkit-border-top-left-radius: 10px;
	-moz-border-top-left-radius: 10px;
	-khtml-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-bottom-left-radius: 10px;
	-khtml-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
    max-height: 200px;
    min-width: 210px;
    margin: 0 auto;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.0);
    transition: all .3s ease-in-out;
}


.homeIconPay.homeIcon:link {
	background-image: url('/assets/imgs/icon-paybill_2023.png');
	background-repeat: no-repeat;	
	background-position: center 0 ;	
}

.homeIconOutages.homeIcon:link {
	background-image: url('/assets/imgs/icon-outages_2023.png');
	background-repeat: no-repeat;	
	background-position: center 0 ;	
}

.homeIconEnergy.homeIcon:link {
	background-image: url('/assets/imgs/icon-energy_efficiency_2023.png');
	background-repeat: no-repeat;	
	background-position: center 0 ;	
}

/* background color on hover */
.homeIconPay.homeIcon:hover, .homeIconPay.homeIcon:focus, .homeIconPay.homeIcon:active, .homeIconOutages.homeIcon:hover, .homeIconOutages.homeIcon:focus, .homeIconOutages.homeIcon:active, .homeIconEnergy.homeIcon:hover, .homeIconEnergy.homeIcon:focus, .homeIconEnergy.homeIcon:active  {
	background-color: #163e60;
	background-repeat: no-repeat;
	background-position: center -0.5em;
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.4);
}

/* space between icon and green line */
.icon_text {margin-top: 7.5em;}

.homeIcon .text{
	color: #ffffff;
	font-size: 1.2em;
	font-family: "Raleway";
	font-weight: 700;	
	padding-top: 6.35em;
	padding-bottom: .5em;
	padding-right: .5em;
	padding-left: .5em;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left center;
    line-height: 1.1;
    position: relative;
    text-transform: uppercase;
}

/* makes text underline */
.homeIcon .text::after {
content: '';
position: absolute;
width: 70%;
max-width: 6em;
border-top: 3px solid #e77204;
top: 5.5em;
left: 50%;
transform: translateX(-50%);
transition: all .3s ease-in-out;
}


.homeIcon:hover .text, .homeIcon:focus .text, .homeIcon:active .text, .homeIcon.hover .text{
	text-decoration: underline;
	background-repeat: no-repeat;
	background-position: left top;
}

/* makes green line grow */
.homeIcon:hover .text::after, .homeIcon:focus .text::after, .homeIcon:active .text::after {width: 90%;}

/* Footer */
#footer {padding: 25px 0;}
#footer H2 {font-size: 1.8rem; font-weight: normal; color: #ffffff; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
#footer a, #footer p {font-size: 1.3rem;}
#footer p {color: #fff; text-decoration: none;}
#footer a {color: #A2C7E3; text-decoration: none;}
#footer a:hover {text-decoration: underline;}

#footer a.whiteLnk {color: #FFF;}

/* --- 2023 Changes --- */
#footerMain {
  background: rgb(19,37,56);
  background: linear-gradient(0deg, rgba(19,37,56,1) 0%, rgba(53,123,176,1) 100%);
  border: 0 none;
}
#footer_nav, #icon_nav {
  border-top: 3px solid #e77204;
  background-color: #132538;
  width: 100%;
}

#footer_nav {padding: 5px 0;}
#footer_nav ul {text-align: center; padding-left: 0; font-size: 1em;}
#footer_nav li {display: inline; list-style: none;}
#footer_nav li a {color: #fff; padding-right: 2%; padding-left: 2%;}
#footer_nav p {font-size: 0.8em; font-style: italic;}

#icon_nav a {color: #fff;}
#icon_nav a:hover {color: #e7e7e7;}
#icon_nav {font-weight: bold;}


/*  Changes to Bootstrap Styles */
#header .dropdown-menu {font-size: .5 rem !important;}
#header .dropdown-menu {
    padding-left: 15px;
    padding-right: 10px;
    background-color: #132538;
    top: 16px !important;
    }

#header .dropdown-item { color: #FFF !important;}
#box .dropdown-item:hover { color: #e77204 !important; background-color: transparent !important;}

.nav-tabs {margin-bottom: 10px;}
.nav-tabs .nav-link {border-color:#DEE2E6;}
.nav-tabs .nav-link.active {
	border-top-color: rgb(255,255,255);
	border-right-color: rgb(255,255,255);
	border-bottom-color: rgb(222,226,230);
	border-left-color: rgb(255,255,255);
	background-color: #e77204;
	color: #FFF;
}
.nav-tabs .nav-link:hover {border-color:#e77204; background-color: #e77204; color:#FFF}

.nav-tabs a, .nav-tabs button {color:#000;}




/* Bread Crumb */
.breadcrumb-item {font-size: 1.2rem !important;}
.breadcrumb a {color: #e77204; text-decoration: none;}
.breadcrumb {margin-bottom: 15px;}

#search {
    text-align: right;
    padding-right: 30px;
}

.social img {padding-left: 5px; vertical-align: baseline;}

#accordionRates .accordion-button  {font-size: 2.0rem; font-family: "Raleway"; font-weight: bold; color: #FFF; border: 1px solid rgba(255,255,255,1.00);}
#accordionRates .accordion-button:not(.collapsed), #accordionRates .accordion-button {background-color: #e77204;}
#accordionRates .accordion-button:focus {border-color: #e77204; box-shadow: 0 0 0 0;}

#accordionRates h2 {margin-top: 0rem; margin-bottom: 0rem;}

#accordionFAQ .accordion-button  {font-size: 1.5rem; font-family: "Raleway"; color: #e77204;}


.Vid2col-lg {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0px !important;
    padding-left: 0px!important;
}

@media (max-width: 428px) {
  #content {padding-top: 0px;}

  #search {
    text-align: center !important;
    /* display: none; */
    padding-right: 10px;
    }

  #MainNav {padding-bottom: 0px !important;}
  #MainNav .navbar {
      margin-top: 0px !important;
      background-color: #132538 !important;
  }

#logoWrapper {background-color: #e7e7e7;}
#logoContainer img {margin-right: auto !important; margin-left: auto !important; display:block !important;}


  #banner_container {
    margin-top: -33px;
    left: -552.615px;
    right: 0px;
    overflow: hidden;
    z-index: -999999;
    padding: 0px;
  }

  #banner_container img {width: 100%; margin-top: 30px;}
} 

@media only screen and (max-width: 1279px) and (min-width: 429px) {
  #search {
    text-align: right !important;
    padding-right: 10px;
    }

  #logoWrapper {background-color: #e7e7e7;}
  #logoContainer img {margin-right: auto !important; margin-left: auto !important; display:block !important;}

  #MainNav .navbar {
      margin-top: 0px !important;
      background-color: #132538 !important;
  }

  #MainNav {padding-bottom: 0px !important;}

}

@media (min-width: 1280px) {
  #topnav, #searchbar, #header, #footer, #content, #home_banner, #home_content, #home_video  {width: 1200px; margin:auto;}
  #header img {margin-bottom: 0px;}  
  #content #box {margin-top: 20px;}
  #content #text {margin-top: 20px; padding-left: 25px;}
  .no-sm {display: inherit;}
  #banner_container img {width: 100%;}
}

@media only screen and (max-width: 1439px) and (min-width: 1280px) {
  
  #logoWrapper {background-color: #132538; border-bottom: 3px solid #e77204;}
  
  #logoContainer img {background-color: #e7e7e7; margin-bottom: -40px; margin-top: -50px; padding: .5em; z-index: 9998 !important; position: relative;}
  
  #navbarMain {margin-left: 175px;}

  #logoContainer img {margin-right: 0 !important; margin-left: 0 !important; display: inherit !important;}

  #MainNav {
      font-size: 1em;
      font-family: "Raleway";
      font-weight: 700;
      text-decoration: none;
      margin-top: -75px;
      padding-bottom: 23px;
      text-transform:uppercase;
      letter-spacing: 2px;
  }

}

@media (min-width: 1440px) {
  #logoWrapper {background-color: #132538; border-bottom: 3px solid #e77204;}  
  #logoContainer img {background-color: #e7e7e7; margin-bottom: -40px; margin-top: -50px; padding: .5em; z-index: 9998 !important; position: relative;}  
  #navbarMain {margin-left: 300px;}
  #logoContainer img {margin-right: 0 !important; margin-left: 0 !important; display: inherit !important;}
  #MainNav {
      font-size: 1em;
      font-family: "Raleway";
      font-weight: 700;
      text-decoration: none;
      margin-top: -75px;
      padding-bottom: 23px;
      text-transform:uppercase;
      letter-spacing: 2px;
  }

}