@charset "utf-8";
/* CSS Document */



.hiddenfix {
    display: none;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}


#content {
    background-size: cover;
    min-height: 0px;
    margin: -1px 0 0;
    position: relative;
}

#content.fluid-content {
    background-image: none;
    background-color: #ebecef;
    padding: 0;
}

#background {
    background: none center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#background .image {
    display: none;
    background: none center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 105%;
}

#background img {
    display: none;
}

#content .content-info {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #231f20;
    margin: 160px 0 0 0;
    padding: 15px 30px;
    float: left;
}

#content .page-container {
    padding-top: 20px;
    padding-bottom: 135px;
}

#content .page-banner {
    margin: 0 0 20px;
    position: relative;
}

#content .page-banner img {
    display: block;
    width: 100%;
}

#content .page-banner h1.title {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    top: 0;
    color: #005daa;
    font-family: 'DIN_1451_Std_Engschrift', Helvetica, sans-serif;
    font-size: 60px;
}

#content .page-banner h1.title span {
    position: absolute;
    left: 10%;
    bottom: 3.5px;
}

#content .page-banner .desc {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #005daa;
    font-size: 18px;
}

#content .page-banner .desc span {
    position: absolute;
    left: 10%;
    top: 3.5px;
}

#content .content-info h1.title {
    font-family: 'DIN_1451_Std_Engschrift', Helvetica, sans-serif;
    font-size: 42px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 5px;
}

#content #home-content .content-info {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

#content .content-info p.desc {
    font-size: 12px;
    text-align: center;
}

#content .highlight-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 120px 0 0 3.5%;
    float: right;
}

#content .highlight {
    margin: 0 0 10px 0;
    padding: 20px;
    position: relative;
}

#content .highlight.highlight-red {
    background-color: #e73d2e;
}

#content .highlight.highlight-blue {
    background-color: #125ea9;
}

#content .highlight h5 {
    font-family: 'DIN_1451_Std_Engschrift', Helvetica, sans-serif;
    font-size: 22px;
}

#content .highlight.two-col {
    width: 400px;
}

#content .highlight.two-col h5 {
    padding: 10px;
    width: 100%;
    text-align: center;
    color: #fdf002;
}

#content .highlight.two-col ul {
    width: 360px;
    padding-left: 15px;
    padding-bottom: 20px;
    float: left;
}

#content .highlight.two-col li {
    font-size: 11px;
    list-style-type: disc;
    list-style-position: inside;
    padding-bottom: 3px;
}

#content .highlight.two-col li .announcement_content {
    max-width: 245px;
    display: inline-block;
    vertical-align: top;
}

#content .highlight.two-col li .announcement_date {
    float: right;
    display: inline-block;
    vertical-align: top;
}

.btn_yellow {
    width: 30%;
    text-align: center;
    margin: 0 auto;
    background-color: #fdf002;
    padding: 15px;
}

#content .highlight .btn-view-all {
    color: black;
}

#content .highlight .btn-view-all .arrow {
    display: none;
}

#content .content-nav {
    font-size: 0;
    text-align: left;
    width: 93%;
    position: absolute;
    left: 5.5%;
    bottom: 40px;
    pointer-events: none;
}

#content .nav-group {
    font-size: 12px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.65);
    width: 22%;
    min-height: 85px;
    margin: 10px 2.5% 0 0;
    padding: 17.5px 15px;
    vertical-align: bottom;
    pointer-events: auto;
    border: 1px solid #fff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}


#content .nav-group:hover {
    border: 1px solid #fff;
    background-color: #720f11;
}


#content .nav-group.last {
    margin-right: 0;
}


#content .nav-group h6 {
    color: #fff;
    line-height: 1;
    padding-right: 0px;
    position: relative;
    font-size: 25px;
    font-weight: 300;
    margin-bottom: 2px;
    margin-top: 0px;
}

#content .nav-group h6 a {
    color: #fff;
}

#content .nav-group.active h6 {
}


#content .nav-group .desc {
    font-size: 9px;
}


#content .nav-group .btn-nav-toggle {
    background: url('../images/ico-plus.png') right center no-repeat;
    cursor: pointer;
    width: 19px;
    height: 18px;
    position: absolute;
    right: -24px;
    top: -27px;
}


#content .nav-group.active .btn-nav-toggle {
    background: url('../images/ico-minus.png') right center no-repeat;
}


#content.fluid-content .content-nav {
    position: fixed;
    bottom: 40px;
}


#content.fluid-content .content-nav-wrapper {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 135px;
    position: fixed;
    left: 0;
    bottom: 0;
}


#content nav {
    margin-top: 15px;
	padding-top: 10px;
	border-top: 1px solid #FFFFFF;
}


#content nav a {
    display: block;
    margin-bottom: 10px;
    position: relative;
    color: #ffffff;
    font-size: 15px;
}


#content nav a:hover, #content nav a.selected {
    color: #ffd400;
    text-decoration: none;
}


#content ul.float-list li {
    display: block;
    margin: 0 20px 20px 0;
    float: left;
}


#content ul.float-list li.last {
    margin-right: 0;
}


#content ul.breadcrumb {
    color: #010101;
    font-size: 16px;
    margin-bottom: 20px;
    text-transform: uppercase;
}


#content ul.breadcrumb li {
    margin: 0 10px 0 0;
}
#content ul.breadcrumb li.separator {
    letter-spacing: -3px;
}


#content ul.breadcrumb li.active {

}


#content .inner-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #dde3e6;
    color: #010101;
    font-size: 16px;
    width: 80%;
    padding: 30px 50px;
}


#content .inner-content ul {
    margi-top: 2.5px;
    padding-left: 20px;
}


#content .inner-content ul.no-list-style {
    margi-top: 2.5px;
    padding-left: 0;
}


#content .inner-content ul li {
    list-style-type: disc;
}


#content .inner-content ul.no-list-style li {
    list-style-type: none;
}


#content .inner-content h1.title {
    color: #e63e2e;
    font-size: 42px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}


#content .inner-content .page-desc {
    margin-bottom: 20px;
}


#content .inner-content h4.subtitle {
    color: #055ea8;
    line-height: 1;
    margin: 0 0 5px;
    padding-left: 40px;
    position: relative;
}


#content .inner-content h4.subtitle.no-style {
    padding-left: 0;
}


#content .inner-content h4.subtitle .decimal {
    position: absolute;
    left: 0;
    top: 0;
}


#content .inner-content .list-content>.list-content {
    margin: 5px 0 0 40px;
}


#content .inner-content .list-content {
}


#content .inner-content .list-content p, #content .inner-content .list-content .paragraph {
    margin-bottom: 20px;
}


#content .inner-content .lvl-first>p {
    margin-left: 40px;
}


#content .inner-content hr.separator {
    display: block;
    margin-bottom: 20px;
}


#content #read-meters li {
    width: 200px;
}


#content #read-meters li img {
    display: block;
    margin-bottom: 5px;
}


#content #read-meters li p {
    color: #055ea8;
    margin-bottom: 0;
}


#content #manage-account li {
    background-color: #eceded;
    width: 265px;
    margin: 0 30px 30px 0;
}


#content #manage-account li .header {
    background: url('../imgs/ico-arrow-right.png') 10px center no-repeat #125ea9;
    color: #fff;
    font-size: 16px;
    line-height: 44px;
    height: 44px;
    padding-left: 38px;
}


#content #manage-account li p {
    height: 150px;
    padding: 15px;
}


#content .announcement {
    background: url('../imgs/float-announcement.png') right 0 no-repeat transparent;
    width: 105px;
    height: 525px;
    position: absolute;
    top: 20px;
    right: 0;
}


#content .announcement .btn-toggle {
    background: url('../imgs/btn-toggle.png') 0 0 no-repeat transparent;
    width: 29px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 248.5px;
}


#container.no-bg footer .copyright {
    color: #232323;
}


#container.page-home {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 0%;
    min-height: 0px;
    position: absolute;
    left: 0;
    top: 102%;
    z-index: 1000;
}


#container.page-home #content {
    width: 100%;
    height: 0%;
    padding-top: 0;
    position: absolute;
    left: 0;
    top: 0;
}


#container.page-home #home-content {
    width: 100%;
    height: 0%;
    position: absolute;
    left: 0;
    top: 0;
}





@media (max-width: 1024px)  {

    #top .socials {
}

#top .socials label, #top .socials .ico-social span {
}

#top .socials .ico-better-brighter {
}

header nav .search {
    display: none;
}

.search-bar {
    display: block;
}

#searchClick {
    color: red;
    width: 100px!important;
    height: 10px!important;
}

#content {
    padding-top: 20px;
}

#container.page-home #content {
    padding-top: 0;
}

#content .content-info, #content .highlight-container {
    margin-top: 20px;
}

#content .nav-group {
    padding: 10px !important;
}

#content.fluid-content {
    padding-top: 0;
}

#content .announcement {
    top: 78px;
}

#container.page-home .search-bar {
    margin-top: 120px;
}

#billBox {
    width: 100%;
}

#bill-accordion {
    width: 100%;
}

}


@media (max-width: 850px)  {
    #container {
    padding-top: 61px;
}

header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
}

#top {
    display: none;
}

header .main-nav {
    background-size: 1px 100%;
    height: 61px;
    position: relative;
    top: 0px;
}

header .main-nav a.nav-item, header .main-nav .contact, header .main-nav .search {
    display: none;
}

header .main-nav .logo {
    display: block;
    height: auto;
    margin: 5px 0;
}

header .main-nav .logo img {
    height: 50px;
}

header .main-nav .btn-menu {
    display: block;
}

.search-bar {
    display: block;
}

#container.page-home .search-bar {

    margin-top: 0px;
}

#content .content-info {
    text-align: center;
    width: 90%;
    max-width: 440px;
    margin: 5% auto;
    float: none;
}

#content .content-info h1.title {
    font-size: 48px;
}

#content .content-info p.desc {
    font-size: 12px;
}

#content .highlight-container {
    float: none;
    width: 90%;
    max-width: 440px;
    margin: 5% auto;
}

#content .highlight {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px;
}

#content .highlight.two-col {
    width: auto;
    display: block!important;
}

#content .highlight.two-col h5 {
    font-size: 22px;
    padding: 10px;
}

#content .highlight.two-col ul {
    padding-top: 0!important;
    padding-bottom: 0!important;
    width: auto;
    float: none;
}

#content .highlight.two-col li {
    font-size: 14px;
    padding-bottom: 8px;
}

#content .highlight.two-col li .announcement_date {
    padding-right: 20px;
}

#content .highlight .btn-view-all {
    font-size: 18px;
    width: auto;
    margin: 0;
}

#content .highlight .btn-view-all .arrow {
    display: inline;
}

#content .content-nav, #content.fluid-content .content-nav {
    width: auto;
    position: relative;
}

#content .nav-group {
    display: block;
    width: 440px;
    max-width: 440px;
    margin: 0 auto 10px auto;
    padding: 20px 40px;
}

#content .nav-group.last {
    margin-right: auto;
    margin-bottom: 60px;
}

#content .nav-group h6 {
    font-size: 30px;
}

#content .nav-group .desc {
    font-size: 12px;
}

#content .nav-group.active h6 {
    background: url('../imgs/ico-minus.png') right center no-repeat;
}

#content .nav-group.active .btn-nav-toggle {
    cursor: pointer;
}

#content .search-bar {
    width: 90%;
}

#content .inner-content {
    width: 90%;
    margin: 20px auto;
}

#content.fluid-content {
    padding: 0 3.5%;
}

#content .announcement {
    display: none;
}

#content #manage-account li {
    width: 100%;
    float: none;
    margin: 0 0 20px 0;
}

#content #manage-account li p {
    height: auto;
}
#content .breadcrumb {
    width: 90%;
    margin: 0 auto;
}

.mobile-nav {
    overflow: scroll;
}

footer {
    bottom: 20px;
}

#content .page-container {
    padding-bottom: 40px;
}

.page-header .page-thumbnail, .page-header .page-info {
    width: auto;
    float: none;
    margin-bottom: 20px;
    position: relative;
}

.page-header .page-info .desc {
}

.page-content {
    background-color: transparent;
    padding: 0;
}

.page-content .page-nav, .page-content .page-childs {
    background-color: #d1d1d1;
    width: 100%;
    float: none;
}

.page-content .page-nav {
    margin: 0 auto 20px;
    padding: 30px 3.5%;
}

.page-content .page-childs {
    margin: 0 auto;
    padding: 40px 0 0;
}

.page-child {
    padding-left: 0;
    padding-right: 0;
}

.page-child .page-child-header {
    padding: 0 20px;
}

.page-child .page-child-title {
    width: auto;
    float: 0;
    margin: 0 0 10px;
    padding: 0;
}

.page-child .page-child-desc {
    width: 100%;
    float: 0;
    padding: 0;
}

.page-child .btn-read-more {
    display: block;
    text-align: right;
}

.page-child-content {
    padding: 50px 20px 75px;
}

.white-bg-container {
    padding-left: 0;
    padding-right: 0;
}
.page-child-content-single {
    padding-left: 3.5%;
    padding-right: 3.5%;
}

#container.page-home {
    width: auto;
    /*height: auto;*/
    position: relative;
}

#container.page-home #content {
    width: auto;
    height: auto;
    padding-top: 0px;
    position: relative;
}

#container.page-home #home-content {
    width: auto;
    height: auto;
    position: relative;
}

#sitemap ul>li {
    float: none;
    width: 90%;
    margin: 0 auto;
}

}


@media (max-width: 719px)  {

}
@media (max-width: 480px)  {
    #content .content-info h1.title {
    font-size: 34px;
}
#content .content-info p.desc {
    font-size: 9px;
}
#content .highlight.two-col {
    padding: 20px;
}
#content .highlight.two-col h5 {
    font-size: 22px;
}
#content .highlight.two-col li {
    font-size: 12px;
    padding-top: 5px;
}
#content .highlight .btn-view-all {
    font-size: 12px;
    right: 20px;
    top: 90%}
#content .nav-group {
    width: 90%!important;
}
#content .nav-group {
    padding: 20px;
}
#content .nav-group h6 {
    font-size: 22px;
}
#content .nav-group .desc {
    font-size: 9px;
}
#content .inner-content {
    font-size: 12px;
    padding: 20px 25px;
}
#content .inner-content h1.title {
    font-size: 32px;
}
#content .inner-content h4.subtitle {
    padding-left: 30px;
    margin: 0 0 2.5px;
}
#content .inner-content .list-content>.list-content {
    margin-left: 20px;
    margin-top: 0;
}
#content .inner-content .lvl-first>p {
    margin-left: 30px;
}
#content .inner-content .list-content p, #content .inner-content .list-content .paragraph {
    margin-bottom: 10px;
}
footer .socials .ico-social {
    vertical-align: middle;
}
footer .socials .ico-facebook, footer .socials .ico-twitter, footer .socials .ico-rss {
    width: 0;
    overflow: hidden;
}
footer .separator {
    display: none;
}
footer .copyright {
    font-size: 8px;
    margin-top: 10px;
    text-align: center;
}
}
@media(max-width: 850px) {
    
    .annual-block {
     width:  30% !important;
     margin:  0 1.5% 20px 1.5%;
 }

    .annual-block .overlayText {
     color:  black;
 }

    #content.fluid-content .content-nav-wrapper {
     padding-top:  20px;
      height:  auto;
     position:  relative;
 }


}

@media(max-width: 640px) {
    
    .annual-block {
     width:  100% !important;
 }
   
    .grid .cell-1,  .grid .cell-2 {
     max-width:  315px;
 }

    .grid {
     width:  auto !important;
 }

}

@media(max-width: 550px) {
    
    .grid .cell-1,  .grid .cell-2 {
     width:  100% !important;
     margin:  10px auto;
     float:  none;
 }

}

@media(min-width: 768px) {
    
    #content.fluid-content .content-nav-wrapper {
    
        bottom:  -110px;
    
}


    #content.fluid-content .content-nav {
    
        display: none;
    
}

}


.hidden_nav {
    
    display: none;
    
    width:  115px;
     
    height:  155px;
    
    position:  absolute;
          
    text-align:  left;
     
    left:  -6px;
      
    padding:  3px;
    
    padding-top:  8px;
    
}

.hidden_nav .nav_container {
    
    background-color:  rgba(0, 0, 0,  0.8);
    
}

.hidden_nav .nav_container div {
    
    padding:  3px;
    
}

@media only screen 
and (min-width :  320px) 
and (max-width : 480px) 
 {
    
    .btn_yellow {
    
        width:  35%;
    
}

    .page-info {
    
        height: auto !important;
    
        min-height:  150px;
    
}


    .page-header .page-info h1 {
    
        font-size: 30px !important;
    
}


    .page-header .page-info .desc  {
    
        float: left !important;
    
}


    #board-of-director .director .detail {
    
        width: 70% !important;
    
        background: #CCC !important;
    
        overflow-y: scroll;
    
        overflow-x: hidden;
    
        
}


    #board-of-director .director {
    
        width: 100% !important;
    
}


    #board-of-director .row  {
    
        margin:  0 auto;
    
}



}

@media(max-width:  1100px) {
    



}

@media(max-width:  640px) {
        

}

@media only screen and (min-width :  320px) and (max-width : 540px)  {
    

    
    /* accordion 320 */
    .bill-accordion-tab .accP tr  {
    
      /*width: 100%;
    */
}

    .bill-accordion-tab .accP td  {
    
      float: left;
    
      width: 100%;
    
}

}

@media only screen and (min-width :  320px) and (max-width : 540px)  {
    



}
@media(max-width:  580px) {
    


}
@media(max-width:  480px) {
    


    
    
}

#content .content-info h1.title  {
     color:  white;
 }

#content .content-info p.desc  {
     color:  white;
 }


img.findoutmore_img {
     max-height:  25px;
     vertical-align:  middle }
.blackfont {
     color:  black }

/*#content .highlight.highlight-red  {
    
background:  rgba(90, 30, 90,  0.5);
    
}

#content .highlight.two-col li  {
    
padding:  10px 4px;
    
background:  rgba(250,  60, 60, 0.5);
    
font-size:  11px;
    
list-style-type:  disc;
    
padding-bottom:  3px;
    
margin:  5px;
    
min-height:  28px;
    
}

#content .highlight.two-col li .announcement_content  {
    
max-width:  220px;
    
display:  inline-block;
    
vertical-align:  top;
    
}
*/

