/*# Font Families #*/
@font-face {
    font-family: Prometo;
    src: url('/_content/SJIndustries.Shared/SharedContent/Fonts/Prometo%20Regular.otf')
}

@font-face {
    font-family: Din-Regular;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/DIN-Regular_F.otf)
}

@font-face {
    font-family: Din-Bold;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/DIN-Bold.otf)
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-ExtraLight.ttf);
    font-weight: 200;
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: Barlow;
    src: url(/_content/SJIndustries.Shared/SharedContent/Fonts/Barlow-Bold.ttf);
    font-weight: 700;
}

.NewsletterSubscription {
    margin-top: -21px;
}

.nav-item.dropdown .nav-link.dropdown-toggle .fa {
    color: #f16609;
}

.utilitynav > ul {
    display: inline-block;
}

/*# Top Nav #*/
@media (min-width: 768px) {
    .navbar-nav {
        margin: 0px;
    }

    .utility-nav {
        margin: 0px !important;
        float: none !important;
    }

    .nav > li > a.phoneTopNav,
    .nav > li > a.TopNavList {
        display: inline-block;
        padding: 10px 4px 10px 0px;
        line-height: 2em;
    }

    .nav > li > span.callBeforeYouDig {
        border: 1px solid #cbcbcb;
        line-height: initial !important;
        padding: .5em 1em;
        border-width: 0px 1px;
        margin: 0px 10px 0px 0px;
    }

        .nav > li > span.callBeforeYouDig a {
            color: #5e5e5e;
        }

            .nav > li > span.callBeforeYouDig a:hover, .nav > li > span.callBeforeYouDig a:focus {
                color: #999;
                text-decoration: none;
            }

    #aboutUs,
    #Language {
        margin-left: 20px;
    }

    #customerContact {
        margin-right: 1em;
    }

    .nav > li {
        background: transparent;
    }

    .utility-nav > li > a {
        line-height: 2em !important;
    }

    #loginButton,
    #createAccount {
        list-style-type: none;
        padding-left: 20px;
    }

    #searchBox {
        float: right !important;
        width: 140px;
        vertical-align: top;
    }

    #keywordSearch {
        position: relative;
        top: -2px;
        left: 2px;
    }

    .LoginBTN {
        height: 32px;
    }
}

@media only screen and (max-width:1200px) and (min-width:990px) {

    #createAccount,
    .navbar-right {
        font-size: .95em !important;
    }

    #customerContact,
    #gasLeakContact,
    #aboutUs,
    #Language {
        font-size: .9em !important;
    }

    /*# gasLeakContact #*/
    #aboutUs,
    #Language {
        margin-left: 10px;
    }

    #gasLeakContact {
        margin-right: 8px !important;
    }

    .LoginBTN {
        font-size: .9em;
        height: auto;
        width: auto;
    }

    .search-block {
        width: 80% !important;
        font-size: .8em !important;
    }

    #loginButton,
    #createAccount {
        padding-left: 10px !important;
        font-size: .8em !important;
    }
}

@media (min-width: 769px) {

    .topBlock .navbar-inverse .container,
    .topBlock .navbar-inverse .container > div {
        padding: 0;
    }

        .topBlock .navbar-inverse .container .utilitynav {
            padding-left: initial;
        }

    .utilitynav > ul:first-child {
        width: 68%;
    }

    .utilitynav ul#searchBox input[type="text"] {
        padding: 5px;
    }

    .utilitynav {
        height: 49px;
    }

    .navbar-collapse .navbar-nav {
        width: 48%;
    }

        .navbar-collapse .navbar-nav > .dropdown {
            width: 25%;
        }

    .navbar-default .navbar-nav > li > a {
        min-height: 0;
        padding-bottom: 29px;
        border-bottom: 1px solid #ffffff;
    }

    .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
        border-bottom: 1px solid #ffffff;
    }

    .navbar-default .navbar-nav > li.short > a {
        padding-top: 49px;
    }

    .dropdown-menu:not(.datepicker) {
        width: 580px;
    }

        .dropdown-menu > li > a {
            font-weight: 400;
            white-space: unset;
        }

        .dropdown-menu > li.heading > a {
            font-weight: 700;
        }

        .dropdown-menu li {
            width: 33%;
            display: block;
        }

    /*# MENU ADJUSTMENTS #*/
    .navbar-nav > li > .dropdown-menu {
        padding: 28px 7px;
        border-top: 1px solid #ffffff;
    }

    .navbar-nav li.nav-item.dropdown:nth-of-type(2) .dropdown-menu {
        height: 24em;
    }

    .navbar-nav li.nav-item.dropdown:nth-of-type(3) .dropdown-menu {
        height: 19.5em;
    }

    .navbar-nav li.nav-item.dropdown:nth-of-type(4) .dropdown-menu {
        height: 12em;
    }

    .navbar-default .navbar-nav > li.safety > a {
        padding-right: 19px;
    }

    .dropdown-menu li.firstcol {
        margin-left: 0;
    }

    .dropdown-menu li.secondcol {
        margin-left: 13em;
    }

    .dropdown-menu li.thirdcol {
        margin-left: 27em;
    }

    .dropdown-menu li.blank {
        text-indent: -9999px;
        pointer-events: none;
    }

        .dropdown-menu li.blank:hover {
            background-color: transparent;
        }

    .dropdown-menu li.heading {
        pointer-events: none;
    }

    .home .dropdown-menu li.heading.secondcol {
        margin-top: -20.2em;
    }

    .home .dropdown-menu li.heading.thirdcol {
        margin-top: -18.1em;
    }

    .business .dropdown-menu li.heading.secondcol {
        margin-top: -14.2em;
    }

    .business .dropdown-menu li.heading.thirdcol {
        margin-top: -14.2em;
    }

    .savings .dropdown-menu li.heading.secondcol {
        margin-top: -11.7em;
    }

    .savings .dropdown-menu li.heading.thirdcol {
        margin-top: -11.7em;
    }

    .safety .dropdown-menu li.heading.secondcol {
        margin-top: -8.8em;
    }

    .dropdown-menu > li > a {
        line-height: 20px;
        padding-bottom: 5px;
    }

    .dropdown-menu > li.heading > a {
        padding-bottom: 15px;
    }

    /* END OF ADJUSTMENTS */
}

.prefooter {
    background-color: #ffffff;
}

    .prefooter h2 {
        font-size: 18px;
        font-weight: 700;
        margin-top: 22px;
        color: #00457b;
        margin-bottom: 0;
        padding-bottom: .5em;
    }

    .prefooter p {
        line-height: 18px;
        margin-bottom: 20px;
    }

    .prefooter a {
        color: #f0641b;
    }

    .prefooter .col3 {
        width: 33%;
        padding-right: 50px;
        border-right: 1px solid #90949b;
        display: inline-block;
        vertical-align: top;
        padding-left: 11px;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 26px;
        padding-bottom: 35px;
    }

        .prefooter .col3:first-child {
            padding-left: 0;
        }

        .prefooter .col3:last-child {
            border-right: 0;
        }

    .prefooter a[role="button"] {
        display: block;
        position: absolute;
        bottom: 17px;
    }

@media (max-width: 768px) {
    .prefooter .col3 {
        width: 100%;
        padding-left: 0;
        border-right: 0;
    }
}

/*# Homepage #*/

.slick-track {
    top: -20px;
}

.homeCarousel {
    height: 351px;
    margin-bottom: 0;
}

.item .container {
    margin-top: 0;
    padding-top: 22px;
}
/*
.topcorner {
  right: 21%;
  top: 20px;
}*/

.pmb-box-1 {
    width: 270px;
    height: 100%;
    opacity: 0.9;
}

.PMBtex {
    color: #f0641b;
    font-size: 22px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 13px;
}

.btn-PMB {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 7px;
}

.PB10 {
    padding-left: 10px;
}

.AcctTXT {
    text-align: center;
}

    .AcctTXT a {
        text-decoration: underline;
    }

.bluebar {
    background-color: #02477c;
    text-align: center;
    max-width: 1170px;
    margin: 0 auto;
}

    .bluebar a {
        color: #ffffff;
        display: inline-block;
        width: 17%;
        padding: 15px;
        text-transform: uppercase;
        vertical-align: top;
    }

        .bluebar a:hover {
            color: #02477c;
            background-color: #ffffff;
            text-decoration: none;
        }

            .bluebar a:hover .icon {
                background-position: bottom;
            }

        .bluebar a .icon {
            width: 45px;
            height: 45px;
            display: block;
            margin: 0 auto;
        }

        .bluebar a .text {
            font-size: 14px;
            line-height: 17px;
        }

.marketing {
    padding-top: 60px;
}

@media (max-width: 768px) {
    .bluebar a {
        width: 25%;
    }
}

@media (max-width: 500px) {
    .bluebar a {
        width: 49%;
    }
}

.about.dropdown-menu > li {
    width: 100%;
}

@media (min-width: 769px) {
    #aboutUs ul.about {
        max-width: 337px;
    }
}

/*# 2020 Redesign #*/
/*# 2020 Redesign / Top Nav #*/
.navbar-inverse,
.nav > li > a.phoneTopNav,
.nav > li > a.TopNavList,
.nav > li > a.phoneTopNav:hover,
.nav > li > a.TopNavList:hover,
.nav > li > span > a.phoneTopNav:hover {
    background-color: #e9e9e9;
    border-color: #e9e9e9;
}

#searchBox {
    width: auto;
}

#p_lt_ctl00_TopNavZone_TopNavZone_zone_SmartSearchBox_pnlSearch.searchBox {
    display: none;
    position: absolute;
    top: 50px;
    width: 200px;
    z-index: 10000;
    border: 1px solid rgba(0,0,0,.15);
    padding: 15px;
    background-color: #ffffff;
    left: -17px;
}

#searchBox a.btn.LoginBTN {
    margin-top: 9px;
    background-color: #f06d2a;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 35px;
    width: auto;
    margin-right: 8px;
}

.accessibility {
    display: inline-block;
    text-indent: -9999px;
}

#searchBox .searchicon {
    padding: 0;
    margin-right: 55px;
    font-size: 16px;
}

.utilitynav > ul {
    vertical-align: top;
}
/*# 2020 Redesign / Home Carousel #*/
.homeCarousel {
    max-width: 1235px;
}

    .homeCarousel .item .container {
        width: 406px;
        padding: 25px;
        margin: 0;
        margin-left: 53px;
        color: #1f1f1f;
        background-color: rgba(255,255,255,.8);
        position: absolute;
        bottom: 39px;
    }

        .homeCarousel .item .container h1.carouselHeader {
            font-family: Barlow, 'Prometo', 'Roboto', sans-serif;
            font-size: 34px;
            font-weight: 600;
            margin-bottom: 7px;
        }

@media (max-width: 768px) {
    .homeCarousel .item {
        background-position-x: center !important;
    }

        .homeCarousel .item .container h1.carouselHeader {
            font-size: 1.5em;
        }
}

.homeCarousel .item .container .carouselTXT {
    font-size: 19px;
    line-height: 1.3em;
    margin-bottom: 14px;
}

.homeCarousel .item .container a.btn {
    background: transparent;
    color: #f37021;
    font-weight: 700;
    border: 0;
    padding: 0;
}

    .homeCarousel .item .container a.btn:before {
        content: "\f054";
        font-family: "FontAwesome";
        padding-right: 5px;
    }

    .homeCarousel .item .container a.btn:hover {
        text-decoration: underline;
    }

.homeCarousel .item .container .text {
    padding: 0;
    display: block;
}

.homeCarousel .slick-list {
    width: 95%;
    max-width: 1170px;
    margin: 0 auto;
}

.homeCarousel .slick-arrow {
    position: absolute;
    top: calc(50% - 20px);
    cursor: pointer;
}

    .homeCarousel .slick-arrow:first-child {
        left: 0;
    }

    .homeCarousel .slick-arrow:last-child {
        right: 0;
    }

.homeCarousel .item {
    background-position: top left;
}
/*# 2020 Redesign / My Account box #*/
.pmb-box-1 {
    width: 263px;
    margin-right: 3em;
    top: 0em;
    opacity: 1;
    padding-bottom: 1em;
}

.PMBtex {
    text-transform: uppercase;
    font-family: Barlow, 'Prometo', 'Roboto', sans-serif;
    font-size: 28px;
    margin-bottom: .9em;
    padding-top: 22px;
}

.topcorner label {
    margin-bottom: 0;
}

.topcorner input {
    height: 38px;
    border-radius: 3px;
    border: 1px solid #1f1f1f;
}

.topcorner .form-group {
    margin-bottom: 3px;
}

.topcorner input#remember {
    width: auto;
    height: auto;
    display: inline;
    border-radius: 0;
    margin-top: 0;
    margin-right: 5px;
}

.topcorner label[for="remember"] {
    font-weight: 500;
    line-height: 1em;
    vertical-align: text-top;
}

.topcorner .btn.btn-primary {
    margin-top: 20px;
    width: 100%;
    font-size: 21px;
    background-color: #f06d2a;
    border: 0;
}

    .topcorner .btn.btn-primary:hover {
        background-color: #1d2c48;
    }

.AcctTXT {
    margin-top: 19px;
}

    .AcctTXT a {
        text-decoration: none;
        display: block;
        font-size: 13px;
        text-transform: uppercase;
        margin-bottom: 7px;
    }

        .AcctTXT a:hover {
            font-size: 13px;
            text-decoration: underline;
        }

        .AcctTXT a:before {
            content: "\f054";
            font-family: "FontAwesome";
            padding-right: 5px;
        }
/*# 2020 Redesign / Icons #*/
.bluebar {
    background: transparent;
    border-bottom: 1px solid #666666;
}

    .bluebar a {
        padding: 37px 15px;
        width: 16%;
        color: #1f1f1f;
    }

        .bluebar a .text {
            display: block;
            margin-top: 5px;
        }

        .bluebar a .icon {
            width: 40px;
            height: 40px;
        }
/*# 2020 Redesign / CTAs #*/
.marketing {
    padding-top: 36px;
    padding-bottom: 10px;
}

    .marketing a {
        color: #f06d2a;
    }

        .marketing a:hover {
            color: #00457b;
        }

        .marketing a:before {
            content: "\f054";
            font-family: "FontAwesome";
            padding-right: 8px;
        }

    .marketing .container {
        padding-bottom: 45px;
        border-bottom: 1px solid #666666;
    }
/*# 2020 Redesign / desktop only styles #*/
@media (min-width: 992px) {
    .topcorner {
        height: 444px;
        top: 0;
    }

        .topcorner .pmb-box-1 {
            width: 310px;
            margin-right: 0;
            padding-bottom: 0;
            background-color: #e9e9e9;
        }
}

@media (min-width: 769px) {
    .utilitynav > ul:first-child {
        width: 62%;
    }

    .nav.secondnav > li > a.phoneTopNav, .nav.secondnav > li > a.TopNavList {
        padding: 0 22px 0 0;
        border-right: 1px solid #cbcbcb;
        margin-top: 12px;
    }

    #aboutUs, #Language {
        margin-left: 16px;
    }

    .nav.secondnav > li > a.TopNavList:hover {
        color: #999999;
        border-right: 1px solid #cbcbcb;
    }

    .nav li.search-block a.searchicon:hover {
        color: #999999;
    }

    ul.CMSListMenuUL {
        width: auto;
        float: right;
    }

        ul.CMSListMenuUL.mobile {
            display: none;
        }
        /*  ul.CMSListMenuUL>li a, ul.CMSListMenuUL>li span, ul.CMSListMenuUL>li>ul>li.heading>a {
    padding: 54px 15px 20px 15px;
  }
*/
        ul.CMSListMenuUL > li a, ul.CMSListMenuUL > li span {
            padding: 54px 15px 20px 15px;
        }

        ul.CMSListMenuUL > li {
            width: auto;
        }

    .homeCarousel {
        height: 444px;
    }
}
/*# 2020 Redesign / mobile only styles #*/
@media (max-width: 1200px) {
    .search-block {
        width: auto !important;
    }

    .topcorner .pmb-box-1 {
        margin-right: 1.5em;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .utilitynav > ul:first-child {
        width: 55%;
    }

    .navbar-brand img {
        margin: 0 auto;
    }

    .navbar-header {
        width: 100%;
    }

    #menuElem {
        width: 100%;
    }

    ul.CMSListMenuUL > li {
        width: 25%;
    }

        ul.CMSListMenuUL > li a, ul.CMSListMenuUL > li span, ul.CMSListMenuUL > li > ul > li.heading > a {
            padding: 20px 15px;
        }
}

@media (max-width: 1000px) {
    .utilitynav > ul:first-child {
        width: auto;
    }

    .navbar-inverse .container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .homeCarousel .slick-list {
        width: 90%;
    }

    .bluebar a {
        width: 49%;
        padding: 15px;
    }

    .homeCarousel .item .container {
        width: auto;
        max-width: 300px;
        margin-left: 1%;
    }
}

/*# Mobile Login #*/
@media (max-width: 992px) {
    .topcorner .pmb-box-1 {
        float: none;
        width: 100%;
    }

    .topcorner .PMBtex {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .topcorner .btn.btn-primary {
        margin-top: 0;
    }

    .topcorner .AcctTXT {
        margin-top: 0;
    }
}

/*# Submit Meter Reading form #*/
.submitmeterreading #panMobile {
    display: none;
}

.submitmeterreading .control-group-inline {
    position: relative;
}

.submitmeterreading .form-group.phone input {
    width: 50px;
    display: inline;
}

    .submitmeterreading .form-group.phone input.input-width-20 {
        width: 60px;
    }

.submitmeterreading .icon-calendar:before {
    font-family: "FontAwesome";
    content: "\f073";
    font-style: normal;
}

.submitmeterreading button.btn[title="Calendar"] {
    position: absolute;
    right: 3px;
    top: 3px;
    line-height: 1em;
}

.service-form .submitmeterreading .form-control,
.service-form .submitmeterreading .control-group-inline {
    margin-bottom: 0;
}

.submitmeterreading .form-group {
    margin-bottom: 15px;
}

@media (max-width: 996px) {
    .submitmeterreading #panMobile {
        display: block;
    }
}