/*
    Table of contents
    1. General
    2. Header Styles
    3. Footer Styles
    4. Homepage Styles
    5. General static pages Styles
    6. Responsive Styles min width 768px
    7. Responsive Styles min width 992px
    8. Responsive Styles min width 1200px
    9. Responsive Styles max width 767px
    10. Responsive Styles max width 768px
    11. Responsive Styles max width 991px
*/
/*
    Styled mobile first, then using media queries to style up for larger screen sizes progressively

*/
/*///////////////////////////////////////////
//            1. General                   //
///////////////////////////////////////////*/

/* Definitely not a hack to remove extra white-space under the footer */
html {
    height: 0px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
    margin: 0;
    font-size: 14px;
    background-color: #fff;
}

button {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
}

a {
    color: #2196F3;
    text-decoration: none;
    background-color: transparent;
}

.apple-store-image {
    border-radius: 13px;
    width: inherit;
    height: inherit;
}

.apple-store-image-link {
    display: inline-block;
    overflow: hidden;
    border-radius: 13px;
    width: 150px;
    height: 50px;
}

.play-store-image {
    border-radius: 13px;
    width: inherit;
    height: inherit;
}

.play-store-image-link {
    display: inline-block;
    overflow: hidden;
    border-radius: 13px;
    height: 50px;
    margin-left: 15px;
}

@media only screen and (max-width: 767px) {
    .play-store-image-link {
        margin-left: 0;
    }
}

@media only screen and (max-width: 500px) {
    .play-store-image-link {
        width: 150px;
    }
}

.email-my-quote-button {
    font-size: 17px;
    letter-spacing: 1pt;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

#message {
    background-color: #f3e0e0;
    padding: 10px;
    border-bottom: 2px solid #a94442;
    line-height: 1.45;
    font-weight: 100;
}

.messageContent {
    margin: 0 auto;
    width: fit-content;
    font-size: 11px;
    padding: 0 15px;
    color: #a94442;
}

a:focus {
    box-shadow: none !important;
    text-shadow: none !important;
    outline-style: solid !important;
    outline-color: #f8be47 !important;
    outline-width: 3px !important;
}

#turbineContainer {
    display: none;
}

.meterReadingsPage .alert-warning p .fa-eye {
    margin-right: 5px !important;
    color: #66512c;
}

div#cookie-declaration {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1d427b;
    padding-top: 15px;
    border-top: 3px solid black;
    padding-bottom: 64px;
}

#cookie-declaration .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

#cookie-declaration .btn {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 0 0 3px 0 !important;
    box-shadow: 0 2px 0 #231f20;
    transition: padding .1s,box-shadow .1s,top .1s;
    border: 0;
    white-space: normal;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    line-height: 1.6;
    user-select: none;
}

    #cookie-declaration .btn.btn-default-inverse {
        color: #fff;
        background-image: url(/Content/Images/hatch-black.png);
        box-shadow: 0 2px 0 #fff;
    }

div#cookie-declaration p, div#cookie-declaration button {
    font-size: .9em;
}

div#cookie-declaration button {
    position: absolute;
    bottom: 15px;
}

#cookie-declaration .btn span:not(.sr-only) {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    display: block;
    padding: 5px 15px;
    border: 2px solid #231f20;
}

#cookie-declaration .btn.btn-default-inverse span {
    background-color: #222;
    border-color: #fff;
}

div#cookie-declaration p, div#cookie-declaration button {
    font-size: .9em;
}

div#cookie-declaration p {
    padding: 0;
    margin-bottom: 15px;
}

    div#cookie-declaration p, div#cookie-declaration p a {
        color: #fff;
    }

.centered-image {
    position: relative;
    margin-left: auto;
    width: min-content;
    width: fit-content;
    margin-right: auto;
}

.impersonateText {
    color: #2d8ecb;
}

/*///////////////////////////////////////////
//            About Page Styles             //
///////////////////////////////////////////*/

@media (min-width: 768px) {
    .aboutUs, .ourEnergy {
        font-size: 16px;
    }
}

@media (min-width: 1000px) {
    .aboutUs, .ourEnergy {
        font-size: 20px;
    }
}

@media (min-width: 1200px) {
    .aboutUs, .ourEnergy {
        font-size: 24px;
    }
}
.aboutUs img, .ourEnergy img {
    width: 100%;
}

.fox-bike-container {
    position: relative;
}

    .fox-bike-container #wind-turbines {
        width: 100%;
    }

    .fox-bike-container #fox-bicycle-stock-photo {
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 30%;
    }


.no-wrap {
    flex-wrap: nowrap !important;
}

.col-4 {
    flex: 33%;
    margin-left: 15px;
    margin-right: 15px;
}

.community-rou {
    position: relative;
}

.hearts-animation {
    width: 400px;
}

.community-fox {
    position: absolute;
    top: -150px;
    right: -57px;
}

#load-more {
    display: flex;
    justify-content: center;
}


/*///////////////////////////////////////////
//            2. Header Styles             //
///////////////////////////////////////////*/
#mainNavbar {
    position: relative;
    min-height: 300px;
    padding: 0 15px;
    background: linear-gradient( 180deg, rgba(27,48,92,1) 30%, rgba(45,142,203,1) 72%, rgba(255,255,255,1) 100%);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#altMainNavbar {
    min-height: 600px;
    position: relative;
    padding: 0 15px;
    background: linear-gradient( 180deg, rgba(27,48,92,1) 30%, rgba(45,142,203,1) 72%, rgba(255,255,255,1) 100%);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#mainNavContainer {
    margin: 0 auto;
    min-height: 70px;
    display: flex;
}

.headerGradient {
    background: linear-gradient( 180deg, rgba(29,66,123,1) 0%, rgba(45,142,203,1) 50%, rgba(255,255,255,1) 100%);
}

#logo-link {
    width: 65%;
    display: inline-flex;
    cursor: pointer;
    margin: 0 auto;
}

#logo {
    width: 100%;
    height: 100%;
    display: inline-flex;
    margin: 0 auto;
}

#headerMenuButton {
    padding: 0;
    text-align: center;
    cursor: pointer;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    transition: padding .1s,box-shadow .1s,top .1s;
    float: left;
    margin: 18px 0 18px 0;
    background-color: transparent;
    font-size: 20px;
    display: inline-flex;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    border: none;
    font-weight: bold;
}

    #headerMenuButton span {
        display: flex;
        align-items: flex-start;
        line-height: 1;
    }

    #headerMenuButton .fa {
        font-size: 28px;
        margin-right: 25px;
    }

#signInNav {
    font-weight: bold;
    text-align: center;
    margin: 18px 0 18px 0;
    float: right;
}

    #signInNav .fas {
        margin-left: 25px;
    }

.header-your-account {
    color: #f1c141;
}

.header-sign-in {
    color: white !important;
    font-size: 20px;
    line-height: 1;
    display: flex;
}

    .header-sign-in i {
        font-size: 28px;
    }

    .header-sign-in:focus {
        color: #f1c141;
    }

#heroContainer {
    color: #fff;
    background-color: #fff;
}

#heroContent {
    margin: 0 auto;
    padding: 65px 15px 30px 15px;
}

.heroContentSubPages #heroContent {
    padding-top: 50px;
}

#heroContent h1 {
    font-size: 21px;
    margin: 0 0 calc(52.5px / 2) 0;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.1;
}

#navbar {
    box-shadow: none;
    border: 0;
    margin: 0 -15px;
    /*overflow-y: auto;*/
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    position: absolute;
    top: 60px;
    background-color: #f1c141;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}

.navbarList {
    padding-top: 5px;
    padding-bottom: 15px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

    .navbarList li {
        position: relative;
        display: block;
    }

        .navbarList li a {
            color: white;
            white-space: normal;
            line-height: 26px;
            position: relative;
            display: block;
            padding: 10px 15px;
            text-decoration: none;
        }

            .navbarList li a:focus, .navbarList li a:hover {
                color: crimson;
            }

            .navbarList li a .fa, .navbarList li a .fas {
                margin-right: 5px;
                display: inline-block;
                /*font: normal normal normal 14px/1 FontAwesome;*/
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }

            .navbarList li a .fa-right {
                margin-right: 0;
                margin-left: 5px;
            }

.dropdownMenu {
    list-style: none;
    padding-left: 0;
}

.collapse {
    display: none;
}

#turbineContainer img.turbine {
    position: absolute;
    bottom: 0;
    pointer-events: none;
}

#turbineContainer img#turbine-left-1.turbine {
    height: 70%;
    left: 0;
}

#turbineContainer img#turbine-left-2.turbine {
    height: 100%;
    left: 10%;
}

#turbineContainer img#turbine-right-1.turbine {
    height: 70%;
    right: 0;
}

#turbineContainer img#turbine-right-2.turbine {
    height: 100%;
    right: 10%;
}

#heroContent h1.h1SubPages {
    text-align: left;
    padding-bottom: 45px;
    font-size: 32px;
}

.breadcrumb {
    list-style: none;
    background: 0;
    margin: 0 0 10px 0;
    padding: 0;
}

    .breadcrumb a {
        color: #ccc;
        text-decoration: underline;
    }

    .breadcrumb li {
        display: inline-block;
    }

        .breadcrumb li a {
            font-weight: 400;
            color: #fff;
        }

    .breadcrumb > li + li:before {
        content: "/ ";
        padding: 0 0 0 5px;
        color: #ccc;
    }

    .breadcrumb li:last-child a {
        opacity: .6;
        filter: alpha(opacity=60);
        text-decoration: none;
    }
/*///////////////////////////////////////////
//            3. Switched Styles             //
///////////////////////////////////////////*/

.switched {
    transform: translateY(-350px);
    padding: 30px;
}

.additional-background {
    display: inline-flex;
    flex: 1;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.switched-header > h1 {
    color: #1c427c;
    font-size: 60px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
}

.switched-image > img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.congrats-info {
    width: 100%;
    font-size: 30px;
    color: grey;
    display: inline-flex;
    justify-content: center;
    word-break: break-word;
}

@media only screen and (max-width: 500px) {
    .switched-header > h1 {
        font-size: 36px;
    }

    .congrats-info {
        font-size: 24px;
    }
}

/*///////////////////////////////////////////
//            3. Footer Styles             //
///////////////////////////////////////////*/
#footer {
    /*background-image: url(../Images/Animations/Footer-Animation_default_V7.jpg);*/
    background-image: url(../Images/Footer/footer.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1px;
    background-position: bottom !important;
    margin-top: 0;
}

#altFooter {
    /*background-image: url(../Images/Animations/Footer-Animation_default_V7.jpg);*/
    background-image: url(../Images/Footer/footer.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1px;
    background-position: bottom !important;
    margin-top: 0;
}

#footer-animation {
    background-image: url(../Images/Animations/Footer-Animation_default_V7.gif);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1px;
    background-position: bottom !important;
    margin-top: 0;
}

#altFooter-animation {
    background-image: url(../Images/Animations/Footer-Animation_default_V7.gif);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1px;
    background-position: bottom !important;
    margin-top: 0;
}

.footerContainer {
    margin: 0 auto;
    padding: 0 15px;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    display: flex;
    flex-direction: column;
    background: linear-gradient( 180deg, #154280 0%, rgba(45,142,203,1) 75%);
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
    transform: translateY(99%);
}

.altFooterContainer {
    transform: translateY(380px);
    background: linear-gradient( 180deg, #154280 0%, rgba(45,142,203,1) 75%);
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    justify-content: center;
}

.footerContainer #footer-logo {
    width: 50%;
}

.footerContainer h1 {
    margin-top: 0;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 2.5em;
    margin-bottom: 0;
    line-height: 0.8;
}

.footerContainer hr {
    border-top: 1px solid #eee;
    margin-top: 25px;
    margin-bottom: 20px;
}

.footerContainer address {
    font-size: 10px;
    color: #ffffff;
    font-style: normal;
    line-height: 1.6;
}

.footerContainer p {
    font-size: 0.9em;
    color: #ffffff;
    font-style: normal;
    line-height: 1.6;
    margin: 0 0 0 0;
}

.container-flex {
    display: flex;
}

.footerNav {
    color: #fff;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
}

    .footerNav .footerList {
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .footerNav .footerList li {
            padding: 0 10px;
        }

@media (max-width: 1024px) {
    .footerNav .footerList li {
        padding: 0 5px;
    }
}

.footerNav ul {
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    padding-left: 0;
    list-style: none;
}

    .footerNav ul li {
        display: inline-block;
    }

        .footerNav ul li a {
            font-weight: 900;
            font-size: 1em;
            text-decoration: none;
            color: #fff;
        }

.footerNav .footerList li:first-of-type {
    padding-left: 0;
}

.footerNav .footerList li:last-of-type {
    padding-right: 0;
}

.footerNav .footerSocialList {
    justify-content: center;
    margin-left: auto;
}

    .footerNav .footerSocialList li {
        padding: 0 10px;
        font-size: 1.4em;
        color: #fff;
        text-decoration: none;
    }

        .footerNav .footerSocialList li:first-of-type {
            padding-left: 0;
        }

        .footerNav .footerSocialList li:last-of-type {
            padding-right: 0;
        }

        .footerNav .footerSocialList li a {
            color: #fff;
        }

        .footerNav .footerSocialList li .fa {
            color: #fff;
            text-align: center;
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }


#footerCookieMessage {
    margin: 0 0 13px 0;
    font-size: .8em;
}

    #footerCookieMessage small {
        display: block;
        font-size: 1em;
        color: #ffffff;
    }

        #footerCookieMessage small a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

/*///////////////////////////////////////////
//            4. Homepage Styles           //
///////////////////////////////////////////*/

.startQuoteButtonContainer {
    margin: 15px 0 26px 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    display: block;
    text-align: center;
}

.popularTariffsRow {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

.startQuoteButtonContainer img {
    display: block;
    width: 100%;
}

#heroContent h2 {
    margin: 45px 30px 0 30px;
    opacity: .8;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#announcementsContainer {
    background-color: #f1c141;
    border-top: 5px solid #fff;
    display: block;
    padding: calc(22.5px / 2);
    text-align: center;
}

    #announcementsContainer p {
        font-size: 21px;
        margin: 0;
        font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
        color: white;
    }

#uspContainer {
    padding-top: calc(30px / 2);
    padding-bottom: calc(30px / 2);
    background-color: #fff;
    text-align: center;
    color: #706f6f;
}

    #uspContainer .row {
        margin: 20px 0 0 0;
    }

    #uspContainer .which-rated-header {
        width: 100%;
    }

    #uspContainer .which-rated-subtitle {
        width: 100%;
    }

    #uspContainer .rated-header {
        text-transform: uppercase;
        font-size: 60px;
        margin: 0;
    }

        #uspContainer .rated-header > span {
            background: -webkit-radial-gradient(ellipse farthest-corner at center center, #f8f29a 0%, #FBC103 35%);
            background: -moz-radial-gradient(ellipse farthest-corner at center center, #f8f29a 0%, #FBC103 35%);
            background: radial-gradient(ellipse farthest-corner at center center, #f8f29a 0%, #FBC103 35%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            overflow: visible !important;
            margin: -9px;
        }

    #uspContainer .which-rated-caption {
        font-size: 32px;
        width: 100%;
        font-weight: 100;
        letter-spacing: 2pt;
    }

    #uspContainer .which-rated-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

        #uspContainer .which-rated-text h1 {
            font-size: 50px;
            letter-spacing: 4px;
            margin: 0;
        }

#downloadAppContainer {
    display: flex;
    width: 100%;
    padding: 0 1em;
    margin-top: 50px;
}

    #downloadAppContainer div.appContainerItem {
        /*flex: 1;
        position: relative;*/
        width: 50%;
        display: flex;
        flex-direction: column;
        align-self: center;
    }

#phoneAndFoxImage {
    display: block;
    width: 100%;
}

.appContainerItem h3, .appContainerItem p {
    color: #706f6f;
    text-align: left;
}

.app-store-icons-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex: 1;
}

.appcontainerItemImage {
    display: block;
    width: 100%;
    margin: 20px 0;
}

#trustpilot {
    margin: 45px 0;
    border-top: 2px solid #51B17E;
    background-color: #fff !important;
    z-index: 1;
    position: relative;
}

    #trustpilot .container {
        margin: 50px auto 0 auto !important;
        margin: 0 auto;
        padding: 0 15px;
        width: 100%;
        transform: translateX(-12%) scale(.9);
        margin-top: 25px !important;
        width: 131%;
        transform: translateX(-12%) scale(.9);
        margin-top: 25px !important;
    }

#trustpilot {
    margin: 45px 0;
    border-top: 2px solid #51B17E;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: rgb(81, 177, 126);
    background-color: #fff !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

    #trustpilot .container {
        margin: 50px auto 0 auto !important;
        margin: 0 auto;
        padding: 0 15px;
        width: 100%;
        transform: none;
        margin-top: 25px !important;
    }


#popularTariffsContainer {
    display: flex;
    flex-direction: column;
    position: relative;
}

    #popularTariffsContainer #popularTariffsHeading {
        width: 100%;
        background-color: #D5E8F5;
        display: flex;
    }

#popularTariffsHeading p {
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #2D8ECB;
}

#popularTariffsContainer #popularTariffsDisclaimer {
    color: #706f6f;
    display: flex;
    justify-content: center;
}

.popularTariffsBlock {
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin-top: 30px;
    flex: 50%;
}

    .popularTariffsBlock img {
        max-width: 100px;
        margin: 0 auto;
        height: auto;
        max-height: 100px;
    }

        .popularTariffsBlock img.popularTariffsBlockImageOverride {
            width: 35%;
        }

    .popularTariffsBlock p {
        margin: 0 auto;
        padding: 20px 0;
        font-size: 22px;
        color: #51B17E;
    }

#reasonsToSwitchClosed {
    background-color: #2c8dc9;
    color: #fff;
    font-size: 31px;
    text-align: center;
    padding: 15px;
}

.popularTariffsBlock p span.popularTariffsBlockBoldText {
    font-weight: bold;
}

.popularTariffsBlock button {
    color: #fff;
    width: 140px;
    margin: 0 auto;
    height: 50px;
    border-radius: 25px;
    border: none;
    background-image: linear-gradient(to right, #ffbb3c, #f5db6b);
    font-size: 17px;
    letter-spacing: 2px;
}

    .popularTariffsBlock button:hover {
        cursor: pointer;
    }

    .popularTariffsBlock button span {
        font-size: 23px;
    }

#reasonsToSwitchSection {
    margin-top: 60px;
    color: #706f6f;
    position: relative;
    cursor: pointer;
}

#reasonsToSwitchBorderTop {
    top: 0;
    height: 7px;
    position: absolute;
    background-color: #2c8dc9;
    width: 100%;
}

    #reasonsToSwitchBorderTop img, #reasonsToSwitchBorderBottom img {
        display: inline-block;
        width: 100%;
    }

.downwards-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #2c8dc9;
    margin-left: auto;
    margin-right: auto;
}

.upwards-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #2c8dc9;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-13px);
}

#reasonsToSwitchBorderBottom {
    height: 7px;
    position: absolute;
    bottom: 0;
    background-color: #2c8dc9;
    width: 100%;
}

#reasonsToSwitchContent {
    background-color: #EAF3FA;
    display: flex;
    flex-direction: column;
    padding: 0 1em;
}

.reasonsToSwitchFox {
    margin-left: auto;
    position: relative;
    width: 0;
    height: 0;
    overflow: visible;
    margin-right: auto;
}

    .reasonsToSwitchFox > img {
        position: absolute;
        top: -86px;
        max-height: 100px !important;
        width: auto !important;
        left: -49px;
    }

#reasonsToSwitchHeading {
    font-size: 21px;
    margin: 40px auto;
    color: #706f6f;
}

    #reasonsToSwitchHeading span {
        font-weight: bold;
    }

.reasonsToSwitchReasonContainer {
    display: flex;
    flex-direction: column;
    width: 25%;
}

.reasonsToSwitchReasonsRow {
    display: flex;
    justify-content: space-evenly;
}

.reasonsToSwitchReasonContainer p {
    text-align: center;
    padding-top: 6px;
}

.reasonsToSwitchReasonsRowTwo {
    margin: 30px 0;
}

#reasonToSwitchTagline {
    margin-bottom: 50px;
}

#reasonToSwitchTagline, #reasonsToSwitchBottomImageContainer {
    padding: 0 1em;
}

#reasonsToSwitchBottomImageContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

#reasonsToSwitchVulnerabilityCommitmentIcon {
    width: 140px;
    margin: 10px;
}

#asFeaturdBySection, #HomeImageContainer {
    margin-top: 30px;
    color: #706f6f;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#asFeaturedBySectionHeading {
    font-size: 21px;
    margin: 0 auto;
}

#slider {
    position: relative;
    overflow: hidden;
    margin: 30px auto 0 auto;
    border-radius: 4px;
    width: 100%;
    margin-top: 0;
}

    #slider ul {
        position: relative;
        margin: 0;
        padding: 0;
        height: 200px;
        list-style: none;
        width: 90%;
    }

        #slider ul li {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            float: left;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 300px;
            text-align: center;
            align-items: center;
        }

.featured-by-content-container {
    flex: 33%;
}

a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    color: #575756;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}

.phoneAndFoxImage {
    /*display: block;
    width: 100%;
    transform: scale(2);
    z-index: 0;
    top: 33px;
    right: 30px;*/
}

a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}

a.control_prev {
    border-radius: 0 2px 2px 0;
}

a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

.asFeaturedByQuotes {
    display: flex;
    text-align: center;
    padding-left: 0;
    list-style: none;
}

    .asFeaturedByQuotes li {
        min-width: 33%;
    }

    .asFeaturedByQuotes > li::marker {
        display: none;
    }

    .asFeaturedByQuotes a:visited {
        color: #2196F3 !important;
        text-decoration: none;
        background-color: transparent;
    }

.sliderHeading {
    font-size: 30px;
    color: #575756;
    font-weight: bold;
    margin-bottom: 30px;
}

.sliderParagraphText {
    width: auto;
    margin: 0 auto;
    margin-left: 30px;
    margin-right: 30px;
    color: grey;
}

#fbContainerContent {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#HomeImageContainerContent {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

    #HomeImageContainerContent img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }

    #HomeImageContainerContent > div {
        min-width: 33%;
        display: flex;
        justify-content: center;
    }

/*    #HomeImageContainerContent #ScopeImage {
        max-height: 189px;
        max-width: 100%;
        width: auto;
        height: auto;
    }
@media screen and (min-width:600px) {
    #HomeImageContainerContent #ScopeImage {
        max-width: 300px;
        margin-top: 55px;
    }
}*/
/*    #VCImage {
        width: 300px;
        margin: 0 30px 0 30px;
    }

#ESGImage {
    height: 85px;
    margin: 100px 30px 30px 30px;
}*/

#fbJoinImage {
    margin: 0 auto;
}

#fbContainerContent h2 {
    color: #575756;
    font-size: 23px;
    text-align: center;
    font-weight: 400;
}

    #fbContainerContent h2 span {
        font-weight: bold;
    }

.fa-comment-dots {
    transform: scaleX(-1) !important;
}

#fbLinkButton, .contactUsLinkButton {
    color: #fff;
    width: 140px;
    margin: 20px auto 0 auto;
    height: 50px;
    border-radius: 25px;
    border: none;
    background-image: linear-gradient(to right, #ffbb3c, #f5db6b);
    font-size: 17px;
    text-align: center;
    line-height: 48px;
    flex: 50%;
    max-width: 215px;
    font-weight: 700;
}

    #fbLinkButton img {
        margin: 0 auto;
        display: block;
        max-height: 88px;
    }

#fbContainerContent a:focus {
    outline: 0 !important;
}

#fbContainerContent a:hover {
    color: #666 !important;
}

#fbContainer {
    padding: 0 1em;
    width: 100%;
    margin-top: 60px;
}

#contactUsSection {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 1em;
    margin: 60px 0;
    color: #706f6f;
}

    #contactUsSection img {
        width: 50%;
        margin: 0 auto 30px auto;
    }

#contactUsHeading {
    font-size: 21px;
    text-align: center;
    margin-bottom: 0 !important;
}

    #contactUsHeading span {
        font-weight: bold;
    }

#contactUsTagline {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}

#contactUsOpeningTimes {
    text-align: center;
}

#contactUsButtons {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.contactUsLinkButton {
    font-size: 15px;
    width: 200px;
    min-width: 200px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-inline {
    display: inline-block;
    display: inline;
    vertical-align: top;
    margin: 5px;
    float: right;
    max-width: 180px;
}

/*///////////////////////////////////////////
//     5. General static pages Styles      //
///////////////////////////////////////////*/
.pageContainer {
    margin: 0 auto 0 auto;
    padding: 0 15px;
}

.pageContent {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    /*-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);*/
    /*box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);*/
    /*border: 3px solid #ffe000;*/
    background-color: #fff;
    position: relative;
    padding: 15px;
    margin-bottom: calc(30px / 2);
}

h2, h3 {
    margin-top: .8em;
    margin-bottom: .4em;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: #1d427b;
    font-size: 26px;
}

.h5 {
    margin-top: .8em;
    margin-bottom: .4em;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: inherit;
    font-size: 14px;
}

p {
    margin: 0 0 13px;
}

.tariff h4 {
    border-bottom: 1px dashed #eee;
    padding-bottom: 6px;
    text-align: center;
}

#mainContainer .pageContent p a:not(.btn) {
    text-decoration: underline;
}

#mainContainer header#heroContainer p {
    margin-bottom: 26px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
}

    #mainContainer header#heroContainer p:first-of-type {
        margin-top: 15px;
    }

.block {
    margin-bottom: 15px;
}

    .block h2 {
        font-size: 21px;
        margin-bottom: .4em;
        font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
        line-height: 1.1;
    }

    .block p {
        margin: 0 0 13px 0;
    }

    .block.block-text h3 {
        font-size: 17px;
        margin-top: .8em;
        margin-bottom: .4em;
        font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
        line-height: 1.1;
    }

    .block p a {
        text-decoration: underline;
        color: #204d9c;
    }

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.underline-highlight {
    width: 75px;
    height: 10px;
    background-color: #2d8ecb;
    margin-bottom: 18px;
}

.rich-text .title-text {
    color: #2d8ecb;
}

.rich-text h2 > b {
    font-size: 30px;
}

.rich-text .sub-header, .rich-text .sub-header > a, .rich-text .sub-header > a:link, .rich-text .sub-header > a:hover {
    color: #1d427b;
    text-decoration: none !important;
}

.rich-text .sub-header-black, .rich-text .sub-header-black > a, .rich-text .sub-header-black > a:link, .rich-text .sub-header-black > a:hover {
    color: #000000;
    text-decoration: none !important;
}

.rich-text p.sub-header {
    color: #2d8ecb;
}

.rich-text ul, .rich-text ol {
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 13px;
}

.rich-text > :last-child {
    margin-bottom: 0 !important;
}


#about_us {
    margin-bottom: 100px;
}

#fox-bicycle-stock-photo {
    width: 100%;
}

#about-us-get-quote {
    width: 15%;
}

.block.block-image .thumbnail, .block.block-gallery .thumbnail {
    overflow: hidden;
    display: block;
    padding: 0;
    position: relative;
    background-color: #eee;
    margin-bottom: 0;
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 26px;
    line-height: 1.6;
    background-color: #1c4387;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

.block.block-image .thumbnail img, .block.block-gallery .thumbnail img {
    display: block;
    position: relative;
    margin: 0 auto;
}

.thumbnail > img, .thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.block.block-image .thumbnail span.zoom, .block.block-gallery .thumbnail span.zoom {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px 5px;
    background-color: #231f20;
    font-size: .8em;
    color: #fff;
}

.table-responsive {
    overflow-x: auto;
    min-height: .01%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: rgba(0,0,0,0);
}

td, th {
    padding: 0;
}

th {
    text-align: left;
}

.block.block-table table tbody {
    font-size: .95em;
}

.table, .block.block-table table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 26px;
}

.block.block-table table {
    margin-bottom: 0;
    width: 100%;
}

    .table > caption + thead > tr:first-child > th, .block.block-table table > caption + thead > tr:first-child > th, .table > caption + thead > tr:first-child > td, .block.block-table table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > th, .block.block-table table > colgroup + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .block.block-table table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > th, .block.block-table table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .block.block-table table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .block.block-table table thead tr th {
        line-height: 1.1;
    }

    .table > thead > tr > th, .block.block-table table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }

    .table > thead > tr > th, .block.block-table table > thead > tr > th, .table > thead > tr > td, .block.block-table table > thead > tr > td, .table > tbody > tr > th, .block.block-table table > tbody > tr > th,
    .table > tbody > tr > td, .block.block-table table > tbody > tr > td, .table > tfoot > tr > th, .block.block-table table > tfoot > tr > th, .table > tfoot > tr > td, .block.block-table table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.6;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }

.fancybox-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99993;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.fancybox-is-open .fancybox-bg {
    opacity: .87;
    transition-timing-function: cubic-bezier(0.22,0.61,0.36,1);
}

.fancybox-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.47,0,0.74,0.71);
}

.fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fancybox-toolbar {
    top: 0;
    right: 0;
}

.fancybox-infobar, .fancybox-toolbar, .fancybox-caption-wrap {
    position: absolute;
    direction: ltr;
    z-index: 99997;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s,visibility 0s linear .25s;
    box-sizing: border-box;
}

.fancybox-stage {
    overflow: hidden;
    direction: ltr;
    z-index: 99994;
    -webkit-transform: translate3d(0,0,0);
}

.fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fancybox-slide--image {
    overflow: visible;
}

.fancybox-is-sliding .fancybox-slide, .fancybox-slide--previous, .fancybox-slide--current, .fancybox-slide--next {
    display: block;
}

.fancybox-slide > * {
    display: inline-block;
    position: relative;
    padding: 24px;
    margin: 44px 0 44px;
    border-width: 0;
    vertical-align: middle;
    text-align: left;
    background-color: #fff;
    overflow: auto;
    box-sizing: border-box;
}

.fancybox-slide .fancybox-image-wrap {
    width: 60%;
    height: 70%;
    margin: 5% auto 0 auto;
    padding: 0;
    border: 0;
    z-index: 99995;
    background: transparent;
    cursor: default;
    overflow: visible;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fancybox-can-zoomIn .fancybox-image-wrap {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.fancybox-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    outline: 0;
    white-space: normal;
    box-sizing: border-box;
    text-align: center;
    z-index: 99994;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.fancybox-image, .fancybox-spaceball {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: scale(0.9);
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
}

.fancybox-caption-wrap {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 30px 0 30px;
    background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

.fancybox-button {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: transparent;
    color: #ddd;
    border-radius: 0;
    cursor: pointer;
    vertical-align: top;
    outline: 0;
}

.fancybox-infobar__body, .fancybox-button {
    background: rgba(30,30,30,0.6);
}

    .fancybox-button::before, .fancybox-button::after {
        content: '';
        pointer-events: none;
        position: absolute;
        background-color: currentColor;
        color: currentColor;
        opacity: .9;
        box-sizing: border-box;
        display: inline-block;
    }

.fancybox-button--close::before, .fancybox-button--close::after {
    content: '';
    display: inline-block;
    position: absolute;
    height: 2px;
    width: 16px;
    top: calc(50% - 1px);
    left: calc(50% - 8px);
}

.fancybox-button--close::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.fancybox-button--close::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar, .fancybox-show-caption .fancybox-caption-wrap {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s,visibility 0s
}

#fancybox-container-1 {
    display: none;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

.slick-initialized .slick-slide {
    display: block;
}

#hlh_logo_quote_container {
    display: inline-block;
}

#hlh_logo {
    max-width: 100%;
    float: left;
    margin-right: 65px;
}

#hlh_quote_body {
    color: red;
    font-weight: bold;
    font-size: 32px;
}

#hlh_quote_name {
    float: right;
    color: black;
    font-weight: bold;
    margin-top: -20px;
    font-size: 20px;
}

.block.block-table table tbody {
    font-size: .95em;
}

.block.block-gallery .slick-slide {
    margin: 3px;
}

.block.block-image .thumbnail span.zoom, .block.block-gallery .thumbnail span.zoom {
    background-color: #231f20;
    color: #fff;
}

.table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
}

table td[class*="col-"], table th[class*="col-"] {
    position: static;
    float: none;
    display: table-cell;
}

.thumbnail.slick-slide {
    width: 32%;
}

#transBlock {
    background-color: #1e1e1e;
    opacity: .87;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    display: none;
}

#transBlockModal {
    background-color: #1e1e1e;
    opacity: .87;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

#imgBlock {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99993;
    display: none;
}

#imgBlockImages img {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: auto;
}

#imgBlockButtons #imgBlockArrowLeft {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 99995;
    height: 100px;
    width: 54px;
    background: 0;
    border: 0;
}

    #imgBlockButtons #imgBlockArrowLeft:after, #imgBlockButtons #imgBlockArrowRight:after {
        content: '';
        position: absolute;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 24px 24px;
        background-color: rgba(30,30,30,0.8);
    }

#imgBlockButtons #imgBlockArrowRight {
    position: absolute;
    top: 50%;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 99995;
    height: 100px;
    width: 54px;
    background: 0;
    border: 0;
}

#imgBlockButtons #imgBlockArrowLeft:after {
    top: 36%;
    left: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=);
    transform: scaleX(-1);
    margin-left: 5px
}

#imgBlockButtons #imgBlockArrowRight:after {
    top: 56%;
    right: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=);
    margin-right: 5px;
}

#imgBlockClose {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(30,30,30,0.6);
    color: #ddd;
}

#imgBlockCloseButton {
    border: 0;
    background: 0;
}

    #imgBlockCloseButton:before {
        content: '';
        display: inline-block;
        position: absolute;
        height: 2px;
        width: 16px;
        top: calc(50% - 1px);
        left: calc(50% - 8px);
        transform: rotate(45deg);
        pointer-events: none;
        background-color: #ddd;
        color: #ddd;
        opacity: .9;
        box-sizing: border-box;
    }

    #imgBlockCloseButton:after {
        content: '';
        display: inline-block;
        position: absolute;
        height: 2px;
        width: 16px;
        top: calc(50% - 1px);
        left: calc(50% - 8px);
        transform: rotate(-45deg);
        pointer-events: none;
        background-color: #ddd;
        color: #ddd;
        opacity: .9;
        box-sizing: border-box;
    }

#imgBlockArrowRight:focus, #imgBlockArrowLeft:focus {
    outline: none;
}

#imgBlockCaptionContainer {
    display: none;
    position: absolute;
    direction: ltr;
    z-index: 99997;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s,visibility 0s linear .25s;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 30px 0 30px;
    background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

#imgBlockCaption {
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,0.4);
    font-size: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    line-height: 20px;
    -webkit-text-size-adjust: none;
}

#imgBlockCaptionContainer.imgBlockShowCaption {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s,visibility 0s;
}

.embed-wrapper {
    position: relative;
}

.fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

#fitvid0 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.h3 {
    font-size: 21px;
    margin-top: .8em;
}

h2#popular {
    margin-top: calc(60px / 2);
    margin-bottom: calc(30px / 2);
}

.row {
    margin: 0 -15px;
}

.col-sm-6, .col-md-7, .col-md-5,
.col-md-4, .col-md-8, .col-sm-12,
.col-sm-5, .col-sm-7 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.nav.nav-pills {
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

ul.nav-pills-alt {
    margin-bottom: 2px;
}

.nav.nav-pills > li {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.nav-pills > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

ul.nav-pills-alt li a {
    background-color: #1d427b;
    color: #fff;
    text-align: center;
}

    ul.nav-pills-alt li a:hover, ul.nav-pills-alt li a:focus, ul.nav-pills-alt li a:active, ul.nav-pills-alt li a.active {
        background-color: #f1c141;
        color: #1d427b;
        font-weight: bold;
    }

/*faq's*/
dl {
    margin-top: 0;
    margin-bottom: 26px;
}

dt, dd {
    line-height: 1.6;
}

dt {
    font-weight: bold;
}

dl.faqs dt {
    margin-top: calc(45px / 2);
    border-left: 3px solid #eee;
    padding-left: 15px;
}

dl.faqs dt {
    border-left: 0;
    padding-left: 0;
}

    dl.faqs dt:first-of-type {
        margin-top: 0;
    }

.h4 {
    font-size: 17px;
}

.font-family-default {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
}

dl.faqs dt h2, dl.faqs dt h3 {
    margin: 0;
    padding-bottom: 10px;
    font-weight: 700;
}

dt, dd {
    line-height: 1.6;
}

dd {
    margin-left: 0;
}

dl.faqs dd {
    margin-bottom: calc(45px / 2);
    border-left: 0;
    padding-left: 0;
}

hr {
    margin: 30px 0;
    border: 0;
    border-top: 3px solid #eee;
    box-sizing: content-box;
    height: 0;
}

.pageContent .content-footer {
    margin-top: calc(60px / 2);
    border-top: 3px solid #eee;
    padding-top: 15px;
}

    .pageContent .content-footer > :last-child {
        margin-bottom: 0;
    }

    .pageContent .content-footer .fa {
        margin-right: 5px;
    }

/* news */
#mainContainer .pageContainer .pageContent.newsContent {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

.newsContainer {
    background-color: #2d8ecb;
    padding: 50px;
}

#articles {
    background-color: #2d8ecb;
}

    #articles a {
        margin-bottom: calc(30px / 2);
        display: block;
        text-decoration: none;
        overflow: hidden;
        position: relative;
        background-color: #1c4387;
        -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.1);
        background-color: #fff;
    }

        #articles a img {
            width: 100%;
            -webkit-transition: all .25s ease;
            -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease;
        }

        #articles a .article-intro {
            position: relative;
            padding: 10px 16px 50px 16px;
            background-color: #fff;
        }

            #articles a .article-intro h2, #articles a h3 {
                margin-top: .8em;
                margin-bottom: .4em;
                font-weight: 400;
                line-height: 1.1;
            }

            #articles a .article-intro h2 {
                font-size: 17px;
                margin: 0;
                font-weight: bold;
            }

        #articles a:hover .article-intro h2 {
            color: #2d8ecb;
        }

        #articles a h3 {
            position: absolute;
            bottom: 15px;
            left: 16px;
            right: 16px;
            margin: 0;
            color: #2d8ecb;
            font-size: 14px;
            font-family: "maven-pro",Helvetica,Arial,sans-serif;
        }

#load-more-button {
    color: #2d8ecb;
    font-weight: bold;
    font-size: 30px;
    margin-left: -25px;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.modal {
    display: none;
    overflow: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #000000ad;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

    .fade.in {
        opacity: 1;
    }

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    background-clip: padding-box;
    outline: 0;
    padding: 20px;
}

.modal .modal-content .modal-header {
    border-bottom: 0;
    padding: 7.5px 15px 0 15px;
}

.close {
    float: right;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.modal-header .close {
    margin-top: -2px;
}

.modal .modal-content .modal-header .close {
    opacity: 1;
    color: red;
    font-size: 1em;
}

    .modal .modal-content .modal-header .close:hover {
        color: #204d9c;
    }

.modal-body {
    position: relative;
    clear: both;
}

.modal-header:after {
    clear: both;
}

#articleModal .modal-content .modal-body #main {
    text-align: left;
    border-top: 0;
}

#main header {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#articleModal .modal-content .modal-body #main header {
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    margin-bottom: calc(30px / 2);
    background-color: transparent;
    background-image: none;
    border: 0;
    color: #231f20;
}

#main h2 {
    margin-top: .8em;
    margin-bottom: .4em;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    font-size: 26px;
}

#articleModal .modal-content .modal-body #main header #articleModalLabel {
    margin: 0;
    font-weight: bold;
    color: #2d8ecb;
}

#articleModal .modal-content .modal-body #main header #articleModalDateLabel {
    font-weight: bold;
    font-size: 30px;
}

#main h3 {
    margin-top: .8em;
    margin-bottom: .4em;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.1;
}

#articleModal .modal-content .modal-body #main header h3 {
    font-size: 17px;
}

#articleModal .modal-content .modal-body #main header h3 {
    margin: 15px 0 0 0;
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}

#main header ul {
    margin: 15px 0 0 0;
}

.list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

#main .label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label-default {
    background-color: #aaa;
}

body:not(.with-banner) #main header a:not(.btn) {
    color: #fff;
}

#articleModal .modal-content .modal-body #main .block:last-child {
    margin-bottom: 0;
}

#main .block.block-lead > :last-child, #main .block.block-text > :last-child {
    margin-bottom: 0;
}

#main figure {
    margin: 0;
}

#main .block figcaption {
    color: #aaa;
    font-size: .9em;
    font-weight: 400;
    margin-top: .7em;
}

/* connect */
section#form {
    margin-top: calc(30px / 2);
}

.well, .form-wrapper {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    text-align: left;
}

    .well > :first-child, .form-wrapper > :first-child {
        margin-top: 0;
    }

section#form form {
    margin-top: calc(30px / 2);
}

.well > :last-child, .form-wrapper > :last-child {
    margin-bottom: 0;
}

#form label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

strong, b, label, .checkbox label, .bold {
    font-weight: 700;
}

input.form-control, textarea.form-control {
    font: inherit;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #675b5e;
    font-size: 14px;
}

form .help-block {
    margin-top: 6px;
    margin-bottom: 0;
}

form p.help-block {
    font-size: .9em;
}

textarea.form-control {
    height: auto;
}

.radio, .checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

form .form-group .checkbox {
    margin: 0;
}

.radio label, .checkbox label {
    min-height: 26px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

#heroContent hr {
    margin: 15px 0;
    border-top: 15px solid #2d8ecb;
    max-width: 100px;
}

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    height: 20px;
    width: 20px; /* the checkboxes have to have width and height, or when validation fails, the popup won't appear*/
    margin-top: 4px \9;
}

#form form .form-group .checkbox label {
    font-weight: 400;
}

#form .btn, form#quote .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#form .btn-primary, form#quote .btn-primary {
    color: #231f20;
    background-color: #fff;
    border-color: #ccc;
}

.hatch-btn, #form .btn, form#quote .btn {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
    position: relative;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 0;
    white-space: normal;
    display: inline-block;
}

    .hatch-btn, #form .btn.btn-default, #form .btn.btn-primary,
    form#quote .btn.btn-primary {
        color: white;
        background-image: linear-gradient(to right, #f1c141 0%, #fac611 51%, #f5de57 100%);
        border-radius: 50px;
    }

.submit-button-container {
    display: flex;
    justify-content: center;
}

.select-tariff-container {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.wintersummer {
    display: flex;
    justify-content: center;
}

#confirmDetailsModal .wintersummer {
    justify-content: center;
}

.divider {
    width: 10px;
    background-color: #19519f;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

#confirmDetailsModal .wintersummer .divider {
    margin-left: 20px;
    margin-right: 20px;
    width: 5px;
}

.quote-animation {
    background-image: url(../Images/Animations/Button-Animation_V1.gif);
}

#form .btn span:not(.sr-only), form#quote .btn span {
    display: block;
    padding: 15px 60px;
    letter-spacing: 1.5pt;
    font-size: 20px;
}

.reasonToSwitchTagline {
    text-align: center;
}

.hatch-btn span, #form .btn.btn-default span, #form .btn.btn-primary span,
form#quote .btn.btn-primary span {
    background-color: transparent;
}

#form form #google-recaptcha-inline-badge {
    padding-top: calc(30px / 2);
    margin: 30px 12px 12px 12px;
    border-top: 3px solid #eee;
}

#alt-contact-methods aside {
    margin-top: 30px;
}

    #alt-contact-methods aside h2 {
        margin-top: 0;
    }

.contactForm table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: rgba(0,0,0,0);
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    background-color: white;
    color: black;
}

.contactForm th {
    text-align: left;
}

.contactForm .table > thead > tr > th {
    padding: 8px;
    line-height: 1.6;
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.contactForm .table > thead:first-child > tr:first-child > th {
    border-top: 0;
}

.contactForm .table > tbody > tr > td {
    padding: 8px;
    line-height: 1.6;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

/* new quote */

form#quote {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

form fieldset {
    margin-bottom: 35px;
}

form#quote fieldset:first-of-type {
    margin-top: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 26px;
    font-size: 24px;
    line-height: inherit;
    color: #333;
    border: 0;
}

form fieldset legend {
    filter: alpha(opacity=50);
    margin-bottom: 0px;
    font-size: .9em;
    /* text-transform: uppercase; */
    color: #2d8dca;
    font-weight: 700;
}

form#quote .form-group {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    margin: 0;
}

form#quote fieldset .radio-inline:not(.active):not(.disabled):hover,
div#tariffs fieldset .radio-inline:not(.active):not(.disabled):hover {
    background-color: #eee;
}

.control-title-2 {
    text-transform: uppercase;
    font-size: 38px;
    color: grey;
    font-weight: 500;
    margin-top: 15px;
    text-align: center;
}

.control-description {
    width: 100%;
    margin-bottom: 20px;
    line-height: 2rem !important;
    margin-bottom: 20px !important;
    color: #757575;
}

.control-toggle {
    text-align: center;
    color: #2a8ecb;
    text-decoration: underline;
    font-weight: 800;
    cursor: pointer;
}

form#quote label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
}

    form#quote label.control-label {
        font-weight: 900;
        font-size: 1.8rem;
        color: #1c427c;
        margin-bottom: 0;
        line-height: 2rem !important;
        margin-left: 0;
    }

form#quote fieldset label {
    font-size: 1.1em;
    margin-bottom: 10px;
    margin-left: 0;
    color: #3a3a3a;
}

form#quote fieldset #id_postcode {
    text-transform: uppercase;
}

form#quote fieldset label .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

form#quote .fa-fw {
    width: 1.28571em;
    text-align: center;
}

form#quote .fa, form#quote .fas,
#confirmDetailsModal .fa {
    margin-right: 5px;
}

form#quote input[type="checkbox"], form#quote input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

form#quote .radio input[type="radio"], form#quote .radio-inline input[type="radio"],
form#quote .checkbox input[type="checkbox"], form#quote .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px \9;
}

form#quote fieldset .radio-inline input,
div#tariffs fieldset .radio-inline input {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    display: none;
}

form#quote div.field-help-block {
}

#billing-description > .field-help-block > p, #billing-description > .field-help-block > ul > li {
    color: grey;
    font-size: 15px;
}



.well, form#quote fieldset div#usage_low, form#quote fieldset div#usage_medium,
form#quote fieldset div#usage_high, .form-wrapper {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

form#quote fieldset div#usage_low, form#quote fieldset div#usage_medium,
form#quote fieldset div#usage_high {
    margin-bottom: calc(15px / 2);
    font-size: .9em;
}

    .well > :first-child, form#quote fieldset div#usage_low > :first-child,
    form#quote fieldset div#usage_medium > :first-child,
    form#quote fieldset div#usage_high > :first-child, .form-wrapper > :first-child {
        margin-top: 0;
    }

form#quote .btn .fa, .meterReadingsPage #readings-tabs .fa {
    display: inline;
}

form#quote .btn .fa-right {
    margin-right: 0;
    margin-left: 12px;
}

form#quote.disabled fieldset:not(.prevent-disable), form#quote.disabled button, form#quote.disabled fieldset.prevent-disable.allow-disable-fueltype {
    opacity: .4;
    filter: alpha(opacity=40);
}

form#quote.disabled fieldset.prevent-disable-fueltype {
    opacity: 100;
}

.usage-display {
    display: flex;
    flex-direction: column;
}

.household-info {
    width: 100%;
    background-color: #2d8dca !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    color: #fff;
    font-weight: 100;
    border: 0px solid #2d8dca !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding-left: 40px !important;
}

.household-additional-info {
    font-size: .9em;
    background-color: #2d8dca;
    width: 100%;
    color: #fff;
    padding: 15px;
    font-weight: 100;
    margin-top: 10px;
    padding: 20px 40px;
}

form div.field-help-block {
}

.tariff {
    min-height: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    position: relative;
    height: 100%;
}

.current-tariff.tariff-type-fixed .current-tariff-header {
    background-color: #f1c141;
}

.current-tariff.tariff-type-variable .current-tariff-header {
    background-color: #2a8ecb;
}

.current-tariff.tariff-type-smart .current-tariff-header {
    background-color: #72b089;
}

.current-tariff-header .current-tariff-title {
    color: #fff;
    padding: 10px;
    text-align: center;
}

.current-tariff-body {
    padding: 10px;
}

.current-tariff.tariff-type-fixed .current-tariff-body {
    border: 3px solid #f1c141;
    border-top: 0;
    border-bottom: 0;
}

.current-tariff.tariff-type-variable .current-tariff-body {
    border: 3px solid #2a8ecb;
    border-top: 0;
    border-bottom: 0;
}

.current-tariff.tariff-type-smart .current-tariff-body {
    border: 3px solid #72b089;
    border-top: 0;
    border-bottom: 0;
}

.current-tariff-body #tils {
    display: flex;
    flex-flow: row wrap;
}

.current-tariff-body .current-tariff-title {
    color: #1d427b;
    padding: 10px;
    text-align: center;
}

.current-tariff-body .current-tariff-rate {
    color: #1d427b;
}
.current-tariff-body .current-tariff-rate:last-of-type {
    padding-bottom: 10px;
}

.current-tariff-footer {
    padding: 10px;
    display: flex;
    justify-content: center;
}

.current-tariff.tariff-type-fixed .current-tariff-footer {
    border: 3px solid #f1c141;
}

.current-tariff.tariff-type-variable .current-tariff-footer {
    border: 3px solid #2a8ecb;
}

.current-tariff.tariff-type-smart .current-tariff-footer {
    border: 3px solid #72b089;
}

.current-tariff-footer .current-tariff-annual-cost {
    color: #1d427b;
    padding: 10px;
    text-align: center;
}
.current-tariff-footer img {
    vertical-align: middle;
}

.tariff-container:hover {
    /*    cursor: pointer;*/
}

.header-1 {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
}

.big-number {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    color: #fff;
    line-height: 0.7;
    font-weight: 500;
}

.cost-container {
    flex: 33%;
}

.medium-number {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    color: #fff;
    line-height: 0.7;
    font-weight: 500;
}

.tariff-container {
    flex: 50%;
}

.innovative-tariffs {
    width: 100%;
    padding-left: 20%;
    background-color: #EAF3FA;
    padding-right: 20%;
    padding-top: 40px;
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 60px;
}

    .innovative-tariffs > .top-bar {
        top: 0;
        height: 3px;
        position: absolute;
        background-color: #2c8dc9;
        width: 100%;
        left: 0;
    }

.top-bar > .top-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2c8dc9;
    margin-left: auto;
    margin-right: auto;
}

.innovative-tariffs > .bottom-bar {
    bottom: 0;
    height: 3px;
    position: absolute;
    background-color: #2c8dc9;
    width: 100%;
    left: 0;
}

.bottom-bar > .bottom-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #2c8dc9;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-7px);
}

.tariff-info-box-container {
    border: 3px solid #f1c141;
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    margin-top: -3px;
    z-index: 2;
    overflow: hidden;
}

.alternate-tariff-info-box {
    width: unset !important;
    background-color: white;
    border-top: 0;
}

.tariff-alt {
    margin-bottom: 0;
}


.innovative-tariffs > .tariff-container {
    margin-bottom: 20px;
}

.tariff-tile-active > .tariff {
    border: 3px solid #f1c141;
    border-bottom: 0 !important;
    z-index: 3;
}

    .tariff-tile-active > .tariff::after {
        content: ' ';
        background-color: transparent;
        height: 55px;
        width: 75px;
        position: absolute;
        top: -39px;
        right: -15px;
        background-image: url('../Images/Tariffs/Tariff Corner Fox.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .tariff-tile-active > .tariff > .tariff-title {
        background-color: #f1c141;
    }

.tariff-tile-alternate-active > .tariff {
    border: 3px solid #f1c141;
    z-index: 3;
    border-bottom: 0;
}

    .tariff-tile-alternate-active > .tariff::after {
        content: ' ';
        background-color: transparent;
        height: 50px;
        width: 50px;
        position: absolute;
        top: -25px;
        right: -10px;
        background-image: url('../Images/Tariffs/Tariff Corner Fox.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .tariff-tile-alternate-active > .tariff > .tariff-title {
        background-color: #f1c141;
    }


.tariff-tile-smart-active > .tariff {
    border: 3px solid #72b089;
    z-index: 3;
    border-bottom: 0;
}

    .tariff-tile-smart-active > .tariff::after {
        content: ' ';
        background-color: transparent;
        height: 50px;
        width: 50px;
        position: absolute;
        top: -25px;
        right: -10px;
        background-image: url('../Images/Tariffs/Tariff Corner Fox.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .tariff-tile-smart-active > .tariff > .tariff-title {
        background-color: #72b089;
    }


.controls {
    position: relative;
}

.corner-fox {
    width: initial;
    position: absolute;
    top: -46px;
    right: 0px;
    z-index: 1;
    display: flex !important;
    display: block;
    overflow: hidden;
}

    .corner-fox > img {
        width: 75px;
    }

.tariff-info-box {
    padding: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.tariff-toggle-container {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-bottom: 30px;
}

.tariff-toggle-container-alt {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-bottom: 30px;
    padding-left: 15px;
}

tariff-toggle {
}

.tariff-toggle-text {
    font-size: 30px;
    line-height: 2.25rem;
    font-weight: 700;
    color: #656a70;
}

.tariff {
    background-color: #fff !important;
    border: 3px solid #2a8ecb;
    margin-left: 10px;
    margin-right: 10px;
}


.tariff-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.tariff-pricing {
    margin: -15px;
    background-color: #f1c141;
    margin-bottom: -20px;
    padding: 10px;
    display: flex;
    padding-bottom: 0;
}

#email-my-quote-input::placeholder {
    font-size: 18px !important;
    font-weight: 100;
    color: #8e8e8e;
}

#confirmDetailsModal .tariff-pricing {
    margin: -3px;
    background-color: #2a8ecb;
}

#confirmDetailsModal .tariff-tile-alternate-active .tariff-pricing {
    background-color: #f1c141;
}

#confirmDetailsModal .tariff-tile-smart-active .tariff-pricing {
    background-color: #72b089;
}

.annual-cost {
    flex: 33%;
    display: flex;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

#confirmDetailsModal .annual-cost {
    margin-left: 23%;
    margin-right: 23%;
    padding-left: 20px;
    background-color: #2a8ecb;
}

#confirmDetailsModal .tariff-tile-alternate-active .annual-cost {
    background-color: #f1c141;
}

#confirmDetailsModal .tariff-tile-smart-active .annual-cost {
    background-color: #72b089
}

.annual-cost-icon {
    width: auto;
    height: 66px;
    margin-left: auto;
    margin-top: 15px;
    margin-bottom: 20px;
}

.monthly-cost {
    flex: 33%;
    display: flex;
    align-items: center;
}

.summer-cost {
    flex: 33%;
    display: flex;
}

.summer-cost-icon {
    height: 66px;
    margin-top: auto;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: -50px;
}

.winter-cost {
    flex: 33%;
    display: flex;
}

.energy-switch {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

    .energy-switch > img {
        height: auto;
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }

.button-input, .button-input-PC {
    border-radius: 50px;
    padding: 5px;
    background-color: #fff;
    display: flex;
    border: 1px solid #51b17f;
    max-height: 77px;
}

.email-message {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.button-input > button, .button-input-PC > button {
    width: 50%;
}

.button-input > input, .button-input-PC > input {
    height: 50px;
    border: 0;
    color: darkgrey;
    font-size: 20px;
    background-color: transparent;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1pt;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    width: 50%;
}

    .button-input > input::placeholder, .button-input-PC > input::placeholder {
        color: darkgrey;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1pt;
        text-align: center;
    }

#postcodeSubmitButton > span {
    font-size: 20px;
    padding: 20px;
    letter-spacing: 1pt;
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 724px) {

    #ESGImage {
        height: 85px;
        margin: 30px;
    }
}

@media (max-width: 540px) {

    .button-input > input {
        font-size: 12px;
    }

        .button-input > input::placeholder {
            font-size: 12px;
        }

    #postcodeSubmitButton > span {
        font-size: 12px;
    }
}

.cost-footer {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tariff > :first-child {
    margin-top: 0;
}

.tariff .tariff-img-container img {
    width: 160px;
    margin: 0 auto 15px auto;
}

.tariff-title {
    background-color: #2a8ecb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    height: 30%;
    align-items: center;
    text-align: center;
}

.tariff-title-subtitle {
    display: flex;
    font-size: 14px;
}

.onoffswitch {
    position: relative;
    width: 75px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
}

.onoffswitch-label-disabled {
    cursor: default;
}

#confirmDetailsModal .onoffswitch-label {
    cursor: default;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 35px;
        padding: 0;
        line-height: 37px;
        font-size: 12px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "OFF";
        padding-left: 13px;
        background-color: #6F6F6E;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: "ON";
        padding-right: 10px;
        background-color: #51B07F;
        color: #FFFFFF;
        text-align: right;
    }

.onoffswitch-switch {
    display: block;
    width: 30px;
    margin: 5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 34px;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.pageContent.pageContentTariff {
    border: 0;
    background: transparent;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

#heroContent h2.tariffHeroH3 {
    font-size: 21px;
    margin: 15px 0 48px 0;
    opacity: 1;
    text-align: left;
}

.tariffHeroLink {
    color: #fff;
}

#actualUsageModal .lead, #actualOverUsageModal .lead {
    /*    margin-bottom: 26px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;*/
}

#actualUsageModal h3, #actualOverUsageModal h3 {
    margin-top: calc(30px / 2);
    margin-bottom: 15px;
}

#actualUsageModal button#switch-to-actual-usage-btn,
#actualUsageModal button#continue-with-estimate-btn,
#actualOverUsageModal button#reenter-actual-usage-btn,
#actualOverUsageModal button#actual-usage-contact-us-btn,
#tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn,
#tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn,
#tariffChangeFixedTariffModal button.tariff-change-close-modal-btn,
#tariffChangeFixedTariffModal button.tariff-change-contact-us-btn,
#tariffChangeNotInBulkModal button.tariff-change-close-modal-btn,
#tariffChangeNotInBulkModal button.tariff-change-contact-us-btn,
#priceChangePostcodeNoMatchModal button.price-change-close-modal-btn,
#priceChangePostcodeNoMatchModal button.price-change-contact-us-btn,
#priceChangeFixedTariffModal button.price-change-close-modal-btn,
#priceChangeFixedTariffModal button.price-change-contact-us-btn,
#meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn,
#meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn,
#smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn,
#smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn,
#smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn,
#smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn,
#smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn,
#smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn,
#smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn,
button.standard-button {
    border: 0;
    padding: 10px 16px;
    background-color: #1d427b;
    color: white;
    margin: 0 1% 1.5% 0;
    position: relative;
    width: 100%;
}

    #actualUsageModal button#switch-to-actual-usage-btn:last-of-type,
    #actualUsageModal button#continue-with-estimate-btn:last-of-type,
    #actualOverUsageModal button#reenter-actual-usage-btn:last-of-type,
    #actualOverUsageModal button#actual-usage-contact-us-btn:last-of-type,
    #tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn,
    #tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn,
    #tariffChangeFixedTariffModal button.tariff-change-close-modal-btn,
    #tariffChangeFixedTariffModal button.tariff-change-contact-us-btn,
    #tariffChangeNotInBulkModal button.tariff-change-close-modal-btn,
    #tariffChangeNotInBulkModal button.tariff-change-contact-us-btn,
    #priceChangePostcodeNoMatchModal button.price-change-close-modal-btn,
    #priceChangePostcodeNoMatchModal button.price-change-contact-us-btn,
    #priceChangeFixedTariffModal button.price-change-close-modal-btn,
    #priceChangeFixedTariffModal button.price-change-contact-us-btn,
    #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn,
    #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn,
    #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn,
    #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn,
    #smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn,
    button.standard-button {
        margin-right: 0;
    }

        #actualUsageModal button#switch-to-actual-usage-btn:hover, #actualUsageModal button#switch-to-actual-usage-btn:active,
        #actualUsageModal button#switch-to-actual-usage-btn:focus, #actualUsageModal button#continue-with-estimate-btn:hover,
        #actualUsageModal button#continue-with-estimate-btn:active, #actualUsageModal button#continue-with-estimate-btn:focus,
        #actualOverUsageModal button#reenter-actual-usage-btn:hover, #actualOverUsageModal button#reenter-actual-usage-btn:active,
        #actualOverUsageModal button#reenter-actual-usage-btn:focus, #actualOverUsageModal button#actual-usage-contact-us-btn:hover,
        #actualOverUsageModal button#actual-usage-contact-us-btn:active, #actualOverUsageModal button#actual-usage-contact-us-btn:focus,
        #tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn:hover, #tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn:active,
        #tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn:focus, #tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn:hover,
        #tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn:active, #tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn:focus,
        #tariffChangeFixedTariffModal button.tariff-change-close-modal-btn:hover, #tariffChangeFixedTariffModal button.tariff-change-close-modal-btn:active,
        #tariffChangeFixedTariffModal button.tariff-change-close-modal-btn:focus, #tariffChangeFixedTariffModal button.tariff-change-contact-us-btn:hover,
        #tariffChangeFixedTariffModal button.tariff-change-contact-us-btn:active, #tariffChangeFixedTariffModal button.tariff-change-contact-us-btn:focus,
        #tariffChangeNotInBulkModal button.tariff-change-close-modal-btn:hover, #tariffChangeNotInBulkModal button.tariff-change-close-modal-btn:active,
        #tariffChangeNotInBulkModal button.tariff-change-close-modal-btn:focus, #tariffChangeNotInBulkModal button.tariff-change-contact-us-btn:hover,
        #tariffChangeNotInBulkModal button.tariff-change-contact-us-btn:active, #tariffChangeNotInBulkModal button.tariff-change-contact-us-btn:focus,
        #priceChangePostcodeNoMatchModal button.price-change-close-modal-btn:hover, #priceChangePostcodeNoMatchModal button.price-change-close-modal-btn:active,
        #priceChangePostcodeNoMatchModal button.price-change-close-modal-btn:focus, #priceChangePostcodeNoMatchModal button.price-change-contact-us-btn:hover,
        #priceChangePostcodeNoMatchModal button.price-change-contact-us-btn:active, #priceChangePostcodeNoMatchModal button.price-change-contact-us-btn:focus,
        #priceChangeFixedTariffModal button.price-change-close-modal-btn:hover, #priceChangeFixedTariffModal button.price-change-close-modal-btn:active,
        #priceChangeFixedTariffModal button.price-change-close-modal-btn:focus, #priceChangeFixedTariffModal button.price-change-contact-us-btn:hover,
        #priceChangeFixedTariffModal button.price-change-contact-us-btn:active, #priceChangeFixedTariffModal button.price-change-contact-us-btn:focus,
        #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn:hover, #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn:active,
        #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn:focus, #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn:hover,
        #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn:active, #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn:focus,
        #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn:hover, #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn:active,
        #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn:focus, #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn:hover,
        #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn:active, #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn:focus,
        #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn:hover, #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn:active,
        #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn:focus, #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn:hover,
        #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn:active, #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn:focus,
        #smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn:hover, #smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn:active,
        #smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn:focus,
        #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn:hover, #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn:active,
        #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn:focus, #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn:hover,
        #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn:active, #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn:focus,
        button.standard-button:hover, button.standard-button:focus {
            background-color: #f1c141;
            color: #1d427b;
            font-weight: bold;
        }

/* form validation */
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #675b5e;
}

form .help-block {
    margin-top: 6px;
    margin-bottom: 0;
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox,
.has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label,
.has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a94442;
}

.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox,
.has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label,
.has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
    color: #3c763d;
}

.postcode-error, .postcode-success, .email-error, .email-success {
    display: none;
}

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

form .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.text-warning {
    color: #8a6d3b;
}

form .form-group.has-error {
    margin-bottom: calc(15px / 2);
}

.bedrooms-button {
    margin-bottom: 0 !important;
}

form#quote fieldset .radio-inline.active,
div#tariffs fieldset .radio-inline.active {
    background-color: #2d8dca;
    color: #fff;
    border-color: #204d9c;
    border: 0;
}

@media (min-width: 992px) {
    .actual-usage {
        margin-left: 20px !important;
    }
}

form#quote fieldset .radio-inline,
div#tariffs fieldset .radio-inline {
    padding: 16px 16px;
    margin: 0 9px 0px 0;
    position: relative;
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #1c427c;
    color: #639ac4;
    /* border: 1px solid; */
    border-radius: 0;
}


    form#quote fieldset .radio-inline:last-of-type,
    div#tariffs fieldset .radio-inline:last-of-type {
        margin-right: 0;
    }

form#quote fieldset div#meter_standard .alert, form#quote fieldset div#meter_smart .alert,
form#quote fieldset div#meter_prepay .alert, form#quote fieldset div#meter_e7 .alert,
form#quote fieldset div#fuel_type_unavailable .alert {
    font-size: .9em;
    border: 0;
    color: #32569a;
}

form#quote .btn.disabled, form#quote .btn[disabled], form#quote fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}


form#quote fieldset .radio-inline.disabled-e7 {
    opacity: .3;
    filter: alpha(opacity=30);
    color: #8a6d3b;
}

.radio-inline.disabled, fieldset[disabled] .radio-inline,
.checkbox-inline.disabled, fieldset[disabled] .checkbox-inline {
    cursor: not-allowed;
}

.form-control[disabled], fieldset[disabled] .form-control {
    cursor: not-allowed;
}

.row.tariffRow {
    display: flex;
    flex-wrap: wrap;
}

#confirmDetailsModal .matchHeight {
    width: 50%;
    padding: 0 15px;
    margin-bottom: 30px;
}

.tariffRow .matchHeight {
    width: 50%;
    padding: 0 10px;
    margin-bottom: 30px;
}

.badge {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

    .badge label {
        background-color: #c7e9f3;
        padding: 10px 25px;
        color: #2f94cf;
        font-size: 26px;
        text-transform: uppercase;
        line-height: 0.9;
    }

.badge-placeholder {
    height: 43px;
    margin-top: 20px;
}

.tariff #monthly-price p {
    font-weight: 900;
    font-size: 2.8em;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 15px;
}

.btn-sharp {
    border-radius: 0 !important;
}

.label-1 {
    color: #66b6de;
    text-align: center;
    font-size: 12px;
}

.label-2 {
    color: ##66b6de;
}

.label-3 {
    font-size: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: grey !important;
    line-height: 1.5 !important;
    padding-left: 40px !important;
    font-size: 15px !important;
    color: grey !important;
}

    .label-3 input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .label-3 .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .label-3:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .label-3 input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .label-3::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .label-3 > input:checked ~ .checkmark::after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .label-3 > .checkmark::after {
        left: 8px;
        top: 4px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate( 45deg );
        -ms-transform: rotate(45deg);
        transform: rotate( 45deg );
        content: "";
        position: absolute;
    }


.tariffRow p {
    margin: 0 0 13px 0;
}

.tariff .row div > :last-child {
    margin-bottom: 0 !important;
}

.tariff .switch-now {
    margin-bottom: 30px;
    text-align: center;
}

.tariff .btn.btn-warning {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    font-size: 16px;
    line-height: 1.6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ffe000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    font-family: "maven-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 0 0 3px 0 !important;
    box-shadow: 0 2px 0 #231f20;
    transition: padding .1s,box-shadow .1s,top .1s;
    border: 0;
    white-space: normal;
    color: #231f20;
    background-image: url(../Images/hatch-black.png);
}

    .tariff .btn.btn-warning span {
        background-color: #ffe000;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px;
        display: block;
        padding: 5px 15px;
        border: 2px solid #231f20;
        text-transform: uppercase;
    }

.tariff .btn .fa {
    display: inline;
    margin-right: 0;
    margin-left: 12px;
}

.tariff .switch-now {
    margin-bottom: 30px;
    text-align: center;
}

.tariff > :last-child {
    margin-bottom: 0;
}

.tariff .tariff-info {
    opacity: 1;
    filter: alpha(opacity=70);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
}

.viewTariffPage .tariff-info p {
    margin: 0 0 13px;
}

.tariff .tariff-info > :last-child {
    margin-bottom: 0;
}

/*
====================================================================================================
====================================================================================================
    REFER A FRIEND GENERAL START
====================================================================================================
====================================================================================================
*/

/* / */
#referral-intro p {
    margin-bottom: 0px;
}


#referral-info {
    margin-top: 3rem;
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
}


#referral-label {
    font-size: 19px;
    margin-right: 1.6rem;
}

/* / */
#referral-generate-container {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

#referral-generate {
    margin-bottom: 1.5rem !important;
    width: 333px;
    text-align: center;
    padding-bottom: 5px !important;
    font-size: 19px;
}

#referral-code {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* / */
.referral-code h3.h3 {
    font-size: 21px !important;
    margin-bottom: 0.8rem;
    padding: 10px 15px;
    border: 1px solid;
}

.ref-container {
    display: flex;
    align-items: center;
}

/* / */
#referral-share-container {
    align-self: flex-end;
}

#share-button a {
    line-height: 0;
}

#share-button {
    height: 3.1rem;
    margin-left: 0.438rem;
    margin-bottom: 0.6rem;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
}

    /* / */
    #share-button:hover {
        padding: 1px;
        /* margin: 0; */
    }

#fb-info {
    display: flex;
    align-items: center;
}

    #fb-info a {
        line-height: 0;
    }

#fb-icon {
    /* margin-right: auto; */
    width: 3.5rem;
}

/* / */
#fb-tagline {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    margin-left: 3.34rem;
}

    /* / */
    #fb-tagline p {
        margin-bottom: 0px;
    }

@media (max-width: 729px) {
    #referral-info {
        margin-top: 1rem;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    #referral-label {
        font-size: 19px;
        margin-bottom: 1.6rem;
        margin-right: 0;
    }

    /* / */
    #referral-share-container {
        align-self: auto;
    }

    #share-button {
        height: 3rem;
        margin-left: 0;
        margin-bottom: 0.6rem;
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
        /* margin-bottom: 0.313rem; */
        /* background: black url("/Content/Images/fb-icon.png") no-repeat scroll 0 0 transparent; */
        /* cursor: not-allowed; */
    }
}
/*
====================================================================================================
====================================================================================================
    REFER A FRIEND GENERAL END
====================================================================================================
====================================================================================================
*/

.form-group label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    color: rgb(29, 66, 123);
    font-size: 20px;
    margin-left: 20px;
}

#register .col-sm-4, #register .col-sm-6 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

#register .form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.6;
    color: #1d427b;
    background-color: #fff;
    background-image: none;
    border: 1px solid #2d8ecb;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.selectedTariffPage .label.label-warning {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    background-color: #f1c141;
    padding: 10px;
}

#confirmDetailsModal button#edit-details-btn,
#confirmDetailsModal button#confirm-details-btn,
#confirmDetailsModal button#duplicate-ok-btn,
#confirmDetailsModal button#duplicate-login-btn {
    padding: 10px 16px;
    border: none;
    margin: 0 1% 1.5% 0;
    position: relative;
    width: 100%;
    color: white;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4em;
    padding: 15px 15px 15px 15px;
}

#confirmDetailsModal button#edit-details-btn {
    background: rgb(232,231,126);
    background: linear-gradient(90deg, rgba(232,231,126,1) 0%, rgba(241,193,65,1) 50%);
}

#confirmDetailsModal button#duplicate-login-btn {
    background-color: #2d8ecb;
}

#confirmDetailsModal button#confirm-details-btn {
    background-color: #51b17f;
    background-image: linear-gradient(to right, #51b17f, #51b17fa8 51%, #51b17f8a 100%);
}

    #confirmDetailsModal button#edit-details-btn:last-of-type,
    #confirmDetailsModal button#confirm-details-btn:last-of-type,
    #confirmDetailsModal button#duplicate-ok-btn:last-of-type,
    #confirmDetailsModal button#duplicate-login-btn:last-of-type {
        margin-right: 0;
    }

#confirmDetailsModal .table-responsive,
#confirmDetailsModal .table-responsive th,
#confirmDetailsModal .table-responsive td {
    border-color: #2d8ecb;
}

    #confirmDetailsModal .table-responsive th {
        color: #1d427b;
    }

form#register div#div_id_date_of_birth select#id_date_of_birth_day,
form#register div#div_id_date_of_birth select#id_date_of_birth_month {
    margin-bottom: 6px;
}

#register form input[readonly="True"] {
    cursor: not-allowed;
}

#register .form-control[disabled],
#register .form-control[readonly],
#register fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}

form#register #id_postcode,
form#register #id_billing_postcode {
    text-transform: uppercase;
}

form#register div.field-help-block {
    margin-left: 12px;
    margin-right: 12px;
}

form#register #direct-debit-guarantee {
    min-height: 20px;
    border-radius: 4px;
}

    form#register #direct-debit-guarantee > :first-child {
        margin-top: 0;
    }

    form#register #direct-debit-guarantee p {
        font-size: .9em;
    }

    form#register #direct-debit-guarantee img {
        margin-top: calc(15px / 2);
        height: 40px;
    }

    form#register #direct-debit-guarantee > :last-child {
        margin-bottom: 0;
    }

form#register .form-group .checkbox label {
    font-weight: 400;
}

form#register button[type="submit"] {
}

.hatch-btn span:not(.sr-only), #register .btn span:not(.sr-only) {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
    display: block;
    padding: 5px 15px;
}

#confirmDetailsModal h3 {
    margin-top: calc(30px / 2);
    margin-bottom: 15px;
    font-weight: bold;
}

.modal .modal-content .modal-body .modal-body-title {
    margin-top: 0;
}

.modal-body-title {
    text-transform: uppercase;
    color: #204d9c;
    font-weight: 900;
    letter-spacing: 0.5pt;
    font-size: 35px;
    margin-bottom: 30px;
}

.modal-body > p {
    font-weight: 400;
    color: black;
}

#id_postcode:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline-style: solid !important;
    outline-color: #f8be47 !important;
    outline-width: 3px !important;
}

.viewTariffPage #heroContent h1.h1SubPages,
.signInPage #heroContent h1.h1SubPages,
.pageNotFoundPage #heroContent h1.h1SubPages {
    padding: 0;
    margin: 0;
}

.viewTariffPage #heroContent .rm-external {
    color: #fff;
}

.viewTariffPage #heroContent {
    padding-bottom: 40px;
}

    .viewTariffPage #heroContent h2.h3 {
        margin: 15px 0 0 0;
        font-size: 21px;
        text-align: left;
        opacity: 1;
    }

.viewTariffPage .pageContainer {
    margin-top: -25px;
}

.selectedTariffPage #heroContent h1.h1SubPages {
    padding-bottom: 0;
}

#register h2 {
    margin-top: .8em;
    margin-bottom: .4em;
    font-family: "maven-pro","Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: inherit;
}

form input[readonly="True"] {
    cursor: not-allowed;
}

h2.nm {
    text-align: center;
    margin: 0 !important;
}

.block.block-lead * {
    margin-bottom: 26px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
}

.block.block-text > :last-child {
    margin-bottom: 0;
}

.signInPage form div.password-wrapper {
    position: relative;
}

small, .small, .block.block-quote blockquote cite {
    font-size: .8em;
}

.fa-center, .glyphicons-center, .halflings-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.signInPage form div.password-wrapper input[type="password"] + .fa,
.signInPage form div.password-wrapper input[type="text"] + .fa {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 12px;
    cursor: pointer;
}

#welcome-aboard-img {
    max-height: 400px;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

input:focus, textarea:focus, select:focus,
button:focus, a:focus, .thumbnail:focus span.zoom {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
}

.btn:not(.disabled):hover {
}

#account-info dl.account-info {
    margin-bottom: 15px;
}

#tariff-info dl.account-info {
    border-left: none;
}

#billing-info #bill-date {
    margin-top: 0.3125rem;
    word-break: break-word;
}

#account-info #account-overview-tils-link,
#account-info #account-overview-dfs-link {
    text-decoration: underline;
    /* add margin top when screen small*/
}

#tariff-info #tariff-second-row {
    margin-bottom: 3px;
}

#tariff-info #tariff-recent-statement .row {
    align-items: baseline;
}

#tariff-info #tariff-recent-statement #download-invoice {
}

#tariff-info #tariff-recent-statement {
    margin-top: 2rem;
}
/*/////////////////////////////////////////////////////////////
//     Overview Page Tariff Information Label CSS (TILS)     //
/////////////////////////////////////////////////////////////*/

#account-info #tils-container {
    /* margin: auto; */
    width: 70%;
    /* add drop shadow stuff */
    /* display: none; */
    transform: translateY(-50%);
    /* position: absolute; */
    /* overflow: auto; */
    background-color: white;
    box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 56%);
    z-index: 1;
    transition: 0.5s;
}

#account-info .modal-body h2 {
    font-size: 24px;
}

#account-info #tils-heading {
    padding: 0% 0px 0px 0%;
}

#account-info #tils-sub-heading {
    padding: 35px 0px 1rem 1rem;
    font-weight: bold;
    font-family: inherit;
}

#account-info #tils {
    display: flex;
    flex-flow: row wrap;
}

#tils .tils-column {
    position: relative;
    min-height: 1px;
    min-width: 250px;
    margin: 0 0.6rem;
    flex: 1;
}

    #tils .tils-column:nth-of-type(2) {
    }

#account-info .tils-table {
    font-size: small;
    width: 100%;
    border-collapse: collapse;
}

    #account-info .tils-table tr {
        border-bottom: 2px solid black;
    }

    #account-info .tils-table td {
        padding: 5px 0px;
        border-bottom: 2px solid black;
    }

    #account-info .tils-table tr > td:nth-of-type(1) {
        padding-left: 5px;
    }

    #account-info .tils-table tr > td:nth-of-type(2) {
        text-align: right;
        border-left: 2px solid black;
        padding-right: 3px;
    }

#directDebitModal .close,
#tilsModal .close, #homeModal .close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    z-index: 100;
}

    #directDebitModal .close:hover,
    #tilsModal .close:hover, #homeModal .close:hover {
        opacity: 1;
    }

    #directDebitModal .close:before, #directDebitModal .close:after,
    #tilsModal .close:before, #tilsModal .close:after,
    #homeModal .close:before, #homeModal .close:after {
        position: absolute;
        left: 16px;
        top: 0px;
        content: ' ';
        height: 32px;
        width: 2px;
        background-color: #333;
    }

    #homeModal .close:before, #homeModal .close:after {
        top: -20px;
    }

    #directDebitModal .close:before,
    #tilsModal .close:before, #homeModal .close:before {
        transform: rotate(45deg);
    }

    #directDebitModal .close:after,
    #tilsModal .close:after, #homeModal .close:after {
        transform: rotate(-45deg);
    }

/*/////////////////////////////////////////////////////////////
//     Overview Page Tariff Information Label CSS (TILS) END    //
/////////////////////////////////////////////////////////////*/

.account-info .row {
    display: flex;
    flex-wrap: wrap;
}

    .account-info .row .col-xs-4 {
        width: 33.3333%;
        flex: 33.3333%;
    }

    .account-info .row .col-xs-8 {
        width: 66.6666%;
    }

.portalMainContainer #heroContent > :last-child {
    margin-bottom: 0 !important;
}

.portalMainContainer #heroContent .h1SubPages {
    padding-bottom: 0;
}

.portalMainContainer #current-account {
    margin-bottom: 7.5px;
    margin-top: 7.5px;
}

#account-nav .nav-stacked > li + li,
#account-nav li.dropdown ul > li + li {
    margin: 2px 0 0 0;
}

#side-update-account-details {
    display: none;
}

a.text-danger {
    color: red;
    background-color: white;
    border: solid 1px red;
    font-weight: bold;
}

    a.text-danger:hover, a.text-danger:focus {
        color: white;
        background-color: red;
    }

#accountNav .nav-pills > li.activeNav > a {
    color: white !important;
    background-color: #2d8ecb;
}

#accountNav .nav-pills > li > a {
    color: black;
    background-color: #eee;
}

#accountNav .nav > li > a:hover,
#account-nav li.accountNavDropdown ul > li > a:hover {
    text-decoration: none;
    background-color: #2d8ecb;
    color: white;
}

#accountNav .nav > li.active > a:hover {
    color: #231f20;
    background-color: #ffe000;
}

#account-nav li.accountNavDropdown ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

    #account-nav li.accountNavDropdown ul li:first-child {
        margin-top: 2px;
    }

    #account-nav li.accountNavDropdown ul > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
        color: black;
        background-color: #c0ddef;
    }

#accountNav .nav > li a.text-danger {
    color: red;
    background-color: white;
    border: solid 1px red;
    font-weight: bold;
}

    #accountNav .nav > li a.text-danger:hover, #accountNav .nav > li a.text-danger:focus {
        color: white;
        background-color: red;
    }

#accountNav .nav > li a.text-primary {
    color: #fff;
    background-image: linear-gradient(to right, #f1c141 0%, #fac611 51%, #f5de57 100%);
    border-color: #ccc;
    font-weight: bold;
}
/*
    #accountNav .nav > li a.text-primary:hover, #accountNav .nav > li a.text-primary:focus {
        color: #2d8ecb;
    }
*/
#directDebitModal.modal .modal-body img {
    margin-top: calc(30px / 2);
    height: 50px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: .5;
    display: none;
}

#direct-debit-guarantee a:focus {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    background-color: #f8be47 !important;
    border-radius: 0 !important;
    outline-offset: 0 !important;
    color: #1b4080 !important;
}

#direct-debit-guarantee a:hover {
    color: #231f20;
}

/* account meter readings styles */

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

#readings-tabs .tab-pane .usage .usageChart {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding-top: calc(15px / 2);
    padding-bottom: calc(15px / 2);
    margin-bottom: 15px;
    width: 100%;
}

#readings-tabs #electricity.tab-pane .usage .usageChart {
    background-color: #0a2730;
}

#readings-tabs #gas.tab-pane .usage .usageChart {
    background-color: #3a2405;
}

#readings-nav {
    padding-left: 0;
    list-style: none;
}

    #readings-nav > li {
        position: relative;
        display: inline-flex;
        width: 48%;
    }

.meterReadingsPage .nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

    .meterReadingsPage .nav-tabs > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
        border-radius: 4px 4px 0 0;
        margin-right: 2px;
        line-height: 1.6;
    }

    .meterReadingsPage .nav-tabs > li.active > a,
    .meterReadingsPage .nav-tabs > li.active > a:hover,
    .meterReadingsPage .nav-tabs > li.active > a:focus {
        color: #555;
        background-color: #1c4387;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
    }

#readings-nav .fa-fw {
    width: 1.28571em;
    text-align: center;
}

#readings-tabs .tab-pane {
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    padding: calc(30px / 2);
    border: 1px solid #eee;
}

#readings-tabs #electricity.tab-pane {
    border-color: transparent;
}

#readings-tabs #gas.tab-pane {
    border-color: transparent;
}

#readings-tabs .tab-pane .usage {
    margin-bottom: calc(30px / 2);
    padding-bottom: calc(30px / 2);
    border-bottom: 3px solid #eee;
}

    #readings-tabs .tab-pane .usage h2 {
        margin-top: 0;
    }

    #readings-tabs .tab-pane .usage p:last-of-type {
        margin-bottom: 0;
    }

    #readings-tabs .tab-pane .usage + .readings {
        margin-top: calc(30px / 2);
    }

#readings-tabs .tab-pane section.meter {
    margin-top: calc(30px / 2);
    margin-bottom: calc(30px / 2);
}

    #readings-tabs .tab-pane section.meter:last-of-type {
        margin-bottom: 0;
    }

    #readings-tabs .tab-pane section.meter h3 {
        margin: 0 0 15px 0;
    }

#readings-tabs .tab-pane #electricity-readings .meter h3 {
    color: #5bc0de;
}

#readings-tabs .tab-pane #gas-readings .meter h3 {
    color: #f0ad4e;
}

#readings-tabs h3 .fa, .meterReadingsPage #readings-tabs .fa {
    margin-right: 12px;
}

#readings-tabs .tab-pane section.meter .well, #readings-tabs .tab-pane section.meter .form-wrapper {
    padding: calc(30px / 2);
    margin: 0;
}

#readings-tabs .tab-pane section.meter .block.block-table {
    margin-top: 15px;
    margin-bottom: 0;
}

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
}

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc,
    table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled,
    table.dataTable thead .sorting_desc_disabled {
        cursor: pointer;
        position: relative;
    }

.meterReadingsPage .table > thead > tr > th, .meterReadingsPage .block.block-table table > thead > tr > th,
.meterReadingsPage .table > thead > tr > td, .meterReadingsPage .block.block-table table > thead > tr > td,
.meterReadingsPage .table > tbody > tr > th, .meterReadingsPage .block.block-table table > tbody > tr > th,
.meterReadingsPage .table > tbody > tr > td, .meterReadingsPage .block.block-table table > tbody > tr > td,
.meterReadingsPage .table > tfoot > tr > th, .meterReadingsPage .block.block-table table > tfoot > tr > th,
.meterReadingsPage .table > tfoot > tr > td, .meterReadingsPage .block.block-table table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.6;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.meterReadingsPage .table > thead > tr > th, .meterReadingsPage .block.block-table table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.meterReadingsPage .block.block-table table thead tr th {
    line-height: 1.1;
}

.meterReadingsPage .block.block-table table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

    .meterReadingsPage .block.block-table table.dataTable thead th.sorting,
    .meterReadingsPage .block.block-table table.dataTable thead th.sorting_asc,
    .meterReadingsPage .block.block-table table.dataTable thead th.sorting_desc {
        padding-right: 20px;
    }

.meterReadingsPage .table > caption + thead > tr:first-child > th, .meterReadingsPage .block.block-table table > caption + thead > tr:first-child > th,
.meterReadingsPage .table > caption + thead > tr:first-child > td, .meterReadingsPage .block.block-table table > caption + thead > tr:first-child > td,
.meterReadingsPage .table > colgroup + thead > tr:first-child > th, .meterReadingsPage .block.block-table table > colgroup + thead > tr:first-child > th,
.meterReadingsPage .table > colgroup + thead > tr:first-child > td, .meterReadingsPage .block.block-table table > colgroup + thead > tr:first-child > td,
.meterReadingsPage .table > thead:first-child > tr:first-child > th, .meterReadingsPage .block.block-table table > thead:first-child > tr:first-child > th,
.meterReadingsPage .table > thead:first-child > tr:first-child > td, .meterReadingsPage .block.block-table table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-bordered {
    border: 1px solid #ddd;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

html:not(.no-js) .no-js-only {
    display: none;
}

.readings label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input, #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input, #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-separator {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    border-radius: 0px;
    border: 2px solid transparent;
    float: left;
    text-align: center;
    color: #1d427b;
    width: 35px;
    padding: 10px 0;
    margin-right: 2px;
    font-size: 1.3em;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input {
    background-color: transparent;
    border-color: #2d8ecb;
    -moz-appearance: textfield;
}
#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input.error {
    border-color: #F00;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container.digits-6 input.meter-reading-input,
#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container.digits-6 span.meter-reading-input {
    max-width: calc(calc(100% / 8) - 2px - calc(7px / 8));
    line-height: inherit;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container.digits-4 input.meter-reading-input {
    line-height: inherit;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input.disabled {
    background-color: transparent;
    border-color: #2d8ecb;
    color: #1d427b;
    caret-color: #fff;
    -webkit-text-fill-color: #1d427b;
    -webkit-opacity: 1;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-separator {
    width: auto !important;
    color: #1d427b;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input {
    background-color: transparent;
    border-color: orange;
    cursor: not-allowed;
}

    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input:last-of-type {
        margin-right: 0;
    }

    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input.disabled {
        background-color: transparent;
        border-color: orange;
        color: #1d427b;
        -webkit-text-fill-color: #1d427b;
        -webkit-opacity: 1;
    }

#readings-tabs .radio label, #readings-tabs .checkbox label {
    min-height: 26px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.clearfix:after, form .form-group:after {
    clear: both;
}

.clearfix:before, #main .content .content-footer:before, #main .content:before,
.block.block-video:before, .block:not(.align-left):not(.align-right):before,
form div.field-help-block:before, form .form-group:before, .clearfix:after,
#main .content .content-footer:after, #main .content:after, .block.block-video:after,
.block:not(.align-left):not(.align-right):after, form div.field-help-block:after,
.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

form .form-group:after {
    content: " ";
    display: table;
}

.meterReadingsPage #readings-tabs p small .fa {
    margin-right: 5px;
}

.nav:before, #account-nav li.dropdown ul:before, #header-main .navbar #navbar > .navbar-nav ul:before,
.nav:after, #account-nav li.dropdown ul:after, #header-main .navbar #navbar > .navbar-nav ul:after {
    content: " ";
    display: table;
}

.nav:after, #account-nav li.dropdown ul:after, #header-main .navbar #navbar > .navbar-nav ul:after {
    clear: both;
}

.meterReadingsPage .h4 small, .meterReadingsPage h3 small {
    font-size: 75%;
    font-weight: normal;
    line-height: 1;
    color: #1d427b;
}

.btn .fa-right {
    margin-right: 0 !important;
    margin-left: 12px;
}

.block.block-table table thead tr th {
    line-height: 1.1;
}

* .fa {
    margin-right: 5px;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

    .input-group-addon, .input-group-btn, .input-group .form-control {
        display: table-cell;
    }

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle,
    .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

        .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn,
        .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle,
        .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

    .input-group-addon:first-child {
        border-right: 0;
    }

form .input-group .input-group-addon {
    background-color: #f2f2f2;
    font-weight: 700;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}

form .help-block p, form .help-block li {
    font-size: .9em;
}

form div.help-block {
    padding-left: 12px;
    padding-right: 12px;
}

form .help-block label {
    color: #231f20;
}

form#update-personal fieldset#marketing_preferences .form-group {
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 30px;
}

form div.password-wrapper input[type="password"], form div.password-wrapper input[type="text"] {
    padding-right: 32px;
}

    form div.password-wrapper input[type="password"] + .fa, form div.password-wrapper input[type="text"] + .fa {
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: 12px;
        cursor: pointer;
    }

form div.password-wrapper {
    position: relative;
}

.g-recaptcha {
    padding-top: 30px;
    margin: 30px 12px 12px 12px;
    border-top: 3px solid #eee;
}

.grecaptcha-badge {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
}

#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input::-webkit-outer-spin-button,
#readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

/* account meter readings styles */

.status h3 small, .status .h4 small {
    font-weight: normal;
    line-height: 1;
    color: #aaa;
    font-size: 75%;
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
}

.status {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding: calc(30px / 2);
    margin-bottom: calc(30px / 2);
    border: 1px solid #eee;
}

#ElectricityStatus.status {
    border-color: #5bc0de;
}

#GasStatus.status {
    border-color: #f0ad4e;
}

    #GasStatus.status h3 {
        color: #f0ad4e;
    }

#ElectricityStatus.status h3 {
    color: #5bc0de;
}

.status h3 {
    margin: 0 0 15px 0;
}

.status .switch-container {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9f9f9;
}

.status .alert + .switch-container {
    margin-top: 30px;
}

.status .switch-container .switch-label {
    text-align: center;
}

.ClassyCountdown-wrapper > div {
    display: inline-block;
    position: relative;
    width: calc(25% - 20px);
    margin: 10px;
}

.ClassyCountdown-wrapper .ClassyCountdown-value {
    width: 100%;
    line-height: 1em;
    position: absolute;
    top: 50%;
    text-align: center;
    left: 0;
    display: block;
}

.status .switch-container .ClassyCountdown-value {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

.status .switch-container small {
    opacity: .5;
    filter: alpha(opacity=50);
    margin-top: 15px;
    text-align: center;
    display: block;
}

.updateBold {
    color: #231f20;
    font-weight: bold;
    font-size: 14px;
}

#joinFbImage {
    position: relative;
    display: block;
    margin: -35px auto 0 auto;
    z-index: -1;
}

#readings-tabs .tab-pane section.meter .well + .alert {
    margin-top: calc(30px / 2);
}

#readings-tabs .tab-pane section.meter + section.meter {
    margin-top: calc(60px / 2);
}

#readings-tabs .tab-pane section.meter:last-of-type {
    margin-bottom: 0;
}

#mainContainer #heroContainer {
    background-color: #fff;
}

#footer a:hover {
    text-decoration: underline;
}

.detailsOpen {
    border-radius: 4px;
    background-color: #eee;
}

    .detailsOpen li.activeNav > a, .detailsOpen li.activeNav > a:hover {
        color: white !important;
        background-color: #2d8ecb !important;
    }

/* image hover zoom */

.imageZoomTransform {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.imageZoomTransition {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

.imageZoomTransitionInPopup {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.6;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 14px;
    margin-top: -3px;
    padding: 5px 0;
    opacity: .9;
    filter: alpha(opacity=0);
    width: 140px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}

.pageNotFoundPage .lead, .pageNotFoundPage .nmbottom {
    margin-bottom: 0;
}

.pageNotFoundPage .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.pageNotFoundPage p#error-code {
    color: #fff;
    font-size: .9em;
    margin: 0;
}

.pageNotFoundPage code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family: "maven-pro", Monaco, Consolas, "Courier New", monospace;
}

.rich-text > :first-child {
    margin-top: 0 !important;
}

#mainContainer .pageContent #articles a .article-intro h2 {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
}

#articleModal .modal-content .modal-body #main header h3, #articles a .article-intro h2, .block.block-text h3 {
    font-size: 17px;
}

.block.align-left {
    float: left;
    margin-right: 30px;
    width: 45%;
}

.block.align-right {
    float: right;
    width: 45%;
    margin-left: 30px;
}

.block.block-text h2, #main .block.block-text h2 {
    font-size: 21px;
}

#articleModal .block p a {
    text-decoration: none;
}

    #articleModal .block p a:hover {
        text-decoration: underline;
    }

/* tablesorting */
.block.block-table table.dataTable thead th.sorting:after, .block.block-table table.dataTable thead th.sorting_asc:after, .block.block-table table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 6px;
    bottom: 8px;
    display: block;
    font-family: FontAwesome !important;
    opacity: 1 !important;
}

.block.block-table table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #aaa;
}

.block.block-table table.dataTable thead th.sorting:after, .block.block-table table.dataTable thead th.sorting_asc:after, .block.block-table table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 6px;
    display: block;
    font-family: FontAwesome !important;
    opacity: 1 !important;
}

.block.block-table table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
    color: #204d9c;
}

.block.block-table table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
    color: #204d9c;
}

.btn:not(.disabled):active {
    top: 4px;
    padding-bottom: 0;
    box-shadow: 0 1px 0 #231f20;
}

.pageNotFoundPage #heroContent h1.h1SubPages {
    padding-bottom: 45px;
}

.faq #heroContent h1.h1SubPages {
    padding-bottom: 0;
}

.quotePage .alert-heading {
    font-family: "maven-pro",Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 400;
    line-height: 1.1;
    font-size: 17px;
}

.quotePage .alert-block ul {
    margin-top: 15px;
}

#main .align-full:after {
    content: " ";
    display: table;
    clear: both;
}

.tariffText {
    color: #19519f;
    text-align: center;
}

.notb {
}

.tariffUsageStatementText {
    font-size: 1.1em;
    color: #848484;
    margin: 0;
    font-weight: 100;
}

#confirmDetailsModal .tariffUsageStatementText {
    font-weight: normal;
    padding: 10px;
}

#footer .footerNav .footerNavItem a:hover {
    border-left-color: #ffe000;
}

#footer .footerNav .footerNavItem a:focus {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    background-color: #f8be47 !important;
    border-radius: 0 !important;
    outline-offset: 0 !important;
    color: #1b4080 !important;
}

#switchGuaranteeLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 205px;
}

#selectedTariffPageButtonContainer {
    width: 100%;
}

    #selectedTariffPageButtonContainer button {
        vertical-align: top !important;
    }

#announcement {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid;
    /*font-size: 11px;*/
	font-size: 16px;
    font-weight: 100;
}

    #announcement p {
        width: fit-content;
        margin: 0 auto;
		color: #FFF;
    }

/* Styling for the announcement banner */
.announcement-banner {
    /*background-color: #ffe000;*/
    color: #000000;
    background-color: #7100F1;
}

    .announcement-banner a, .announcement-banner a:visited, a:hover, a:active {
        color: inherit;
    }

.termsAndConditionsPage .rich-text ol {
    padding-inline-start: 23px;
}

    .termsAndConditionsPage .rich-text ol.singleOl {
        padding-inline-start: 15px;
    }

/*///////////////////////////////////////////
//  6. Responsive Styles min width 768px   //
///////////////////////////////////////////*/
@media (min-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.536;
    }

    #footer {
    }

    #navbarLogin {
        display: none;
    }

    #contactUsSection img {
        width: 20%;
    }

    #MobileContent {
    }

    #heroContent {
        width: 750px;
        padding-left: 45px;
        padding-right: 45px;
    }

        #heroContent h1.h1SubPages, .homePage #heroContent h1 {
            font-size: 38px;
        }

        #heroContent h2 {
            margin: 75px auto 0 auto;
            max-width: 50%;
        }

    #mainContainer header#heroContainer p {
        font-size: 24px;
    }

    #mainContainer header a:not(.btn) {
        /*color: #fff;*/
    }

    .startQuoteButtonContainer {
        margin: 0 auto;
        width: fit-content;
        width: -moz-fit-content;
    }

    #popularTariffsContainer #popularTariffsHeading {
        width: 95%;
        margin: 0 auto;
    }

    .reasonsToSwitchReasonContainer img {
        width: 70%;
    }

    #reasonsToSwitchBottomImageContainer {
        justify-content: space-evenly;
    }

    h2 {
        font-size: 30px;
    }

    .h3, .viewTariffPage #heroContent h2.h3,
    .ourPoliciesPage .h3, .warmHomeDiscountPage .h3 {
        font-size: 24px;
    }

    .h5 {
        font-size: 15px;
    }

    .footerContainer h2 {
        font-size: 15px;
    }

    #uspContainer .row {
        display: flex;
        justify-content: space-evenly;
        align-content: center;
        padding: 0 1em;
    }

    .appcontainerItemImage {
        width: 100%;
    }

    #uspContainer .which-rated-text {
        width: 50%;
    }

    .uspImages {
        display: inline-block;
        margin-left: -2px;
        margin-right: -2px;
    }

    .block.block-text h2 {
        font-size: 24px;
    }

    .block.block-text h3 {
        font-size: 19px;
    }

    .heroContentSubPages #heroContent {
        padding-top: 55px;
    }

    #imgBlockImages img {
        left: 15%;
        width: 70%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
    }

        #categories .row .col-sm-6,
        .row.ourPolicies .col-sm-6,
        .row.WHD .col-sm-6,
        .row.aboutUs .col-sm-6,
        .row.ourEnergy .col-sm-6 {
            flex: 1;
        }

    #articles .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        grid-row-gap: 30px;
    }

    .h4 {
        font-size: 19px;
    }

    #articles a {
        height: 100%;
        margin-bottom: 0;
    }

    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }

    .modal .modal-content .modal-header {
        padding: 15px 30px 0 30px;
    }

    .modal .modal-content .modal-body {
        padding: 15px 60px 50px 60px;
    }

    .modal #main h2 {
        font-size: 30px;
    }

    .modal #main h3 {
        font-size: 19px;
    }

    .tariff .tariff-img-container img {
        width: 140px;
        margin: 0;
        float: left;
    }

    .tariff .tariff-img-container .row {
        margin-left: 160px;
    }

    .tariff .matchHeight {
        width: 33.33333%;
    }

    .tariff .switch-now {
        text-align: right;
    }

    .viewTariffPage #heroContent h2.h3 {
        max-width: 100%;
    }

    /* connect */
    .contactForm #form .h3 {
        font-size: 24px;
    }

    .row.contactForm {
        display: block;
    }

    #register #div_id_date_of_birth .controls {
        display: flex;
    }

    #register #div_id_date_of_birth .form-control {
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #register .ddContainer {
        position: relative;
        min-height: 1px;
        padding-left: 20px;
        padding-right: 22px;
        width: 33.3333%;
    }

    #register #ddContainerFirst.ddContainer {
        padding-left: 12px;
        padding-right: 31px;
    }

    #register #ddContainerLast.ddContainer {
        padding-right: 12px;
        padding-left: 32px;
    }

    #register .col-sm-6 {
        width: 50%;
        float: left;
    }

    #register .col-sm-push-6 {
        /* left: 50%; */
    }

    #register .col-sm-pull-6 {
        /* right: 50%; */
    }

    #div_id_date_of_birth {
        padding-left: 0;
        padding-right: 0;
    }

        #div_id_date_of_birth label {
            padding-left: 12px;
        }

    .nameFields {
        width: 33.3333%;
    }

    #actualUsageModal .lead, #actualOverUsageModal .lead {
        /*   font-size: 24px;*/
    }

    .block.block-lead * {
        font-size: 24px;
    }

    #tariff-info, #billing-info {
        width: 50%;
    }

    #current-account {
        display: none;
    }

    #billingRow {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
    }

        #billingRow .col-sm-6 {
            flex: 1;
        }

        #billingRow #billing_address_fields {
            flex: 0 0 100%;
        }

    #billing_address_fields {
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #register #billingPostcode.col-sm-6 {
        flex: unset;
    }

    #readings-tabs .col-sm-12 {
        width: 100%;
    }

    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input,
    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input,
    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-separator {
        width: 40px;
        padding: 15px 0;
        margin-right: 3px;
        font-size: 1.1em;
    }

    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container.digits-6 input.meter-reading-input,
    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container.digits-6 span.meter-reading-input {
        max-width: calc(calc(100% / 8) - 3px - calc(8px / 8));
    }

    .updateBold {
        font-size: 15px;
    }

    .signInPage .col-sm-8 {
        width: 66.6666%;
    }

    #confirmDetailsModal .col-sm-4 {
        width: 33.33333%;
    }

    .pageNotFoundPage .container {
        width: 750px;
    }

    #joinFbImage {
        margin: -52px auto 0 auto;
        max-height: 525px;
    }

    #fbLinkButton img {
        max-height: 114px;
    }

    .cookiePolicyPage .rich-text > :first-child {
        margin-top: 0 !important;
    }

    #articleModal .modal-content .modal-body #main header h3, #articles a .article-intro h2, .block.block-text h3 {
        font-size: 19px;
    }

    .block.block-text h2, .modal #main .block.block-text h2 {
        font-size: 24px;
    }

    #cookie-declaration .container {
        width: 750px;
    }

    #articles a h3 {
        font-size: 15px;
    }

    .quotePage .alert-heading {
        font-size: 19px;
    }

    .termsAndConditionsPage .rich-text ol {
        padding-inline-start: 24px;
    }

        .termsAndConditionsPage .rich-text ol.singleOl {
            padding-inline-start: 17px;
        }

    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >=768px START
====================================================================================================
====================================================================================================
*/


    #share-button {
        height: 3rem;
        margin-left: 0.438rem;
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
        /* margin-bottom: 0.313rem; */
        /* background: black url("/Content/Images/fb-icon.png") no-repeat scroll 0 0 transparent; */
        /* cursor: not-allowed; */
    }

    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >=768 END
====================================================================================================
====================================================================================================
*/

    /* Overview page */

    /* Overview page End  */

}


/*///////////////////////////////////////////
//  7. Responsive Styles min width 992px   //
///////////////////////////////////////////*/
@media (min-width: 992px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    #footer {
    }

    #navWrapper {
        width: 972px;
        margin: 0 auto;
    }

    .pageContainer {
        width: 972px;
        margin: 0 auto;
    }

    #heroContent, #uspContainer, #popularTariffsContainer,
    #reasonsToSwitchHeading, #reasonsToSwitchReasons, #reasonToSwitchTagline,
    #reasonsToSwitchBottomImageContainer, #contactUsButtons {
        width: 775px;
    }

    .footerContainer {
        width: 100%;
    }

    #uspContainer, #popularTariffsContainer, #reasonsToSwitchReasons,
    #reasonToSwitchTagline, #reasonsToSwitchBottomImageContainer, #contactUsButtons {
        margin: 0 auto;
    }

        #uspContainer .row {
            justify-content: space-between;
        }

    .popularTariffsBlock {
        display: flex;
        flex-direction: column;
        padding: 1em;
        margin-top: 30px;
        width: 45%;
    }

        .popularTariffsBlock img.popularTariffsBlockImageOverride {
            width: 25%;
        }

    #reasonsToSwitchHeading {
        text-align: center;
    }

    #reasonsToSwitchBottomImageContainer {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    #popularTariffsHeading p, #reasonsToSwitchHeading, #asFeaturedBySectionHeading,
    #fbContainerContent h2, #contactUsHeading {
        font-size: 40px;
    }

    #asFeaturedBySectionHeading {
        margin-bottom: 40px;
    }

    .reasonsToSwitchReasonContainer img {
        width: 30%;
        margin: 0 auto;
    }

    #contactUsTagline {
        font-size: 24px;
    }

    #popularTariffsHeading p
    #contactUsButtons {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    #mainContainer {
        background-size: auto 175px;
        /*padding-bottom: 195px;*/
    }

    .select-a-tariff {
        text-align: center;
        margin-top: 35px;
        text-transform: uppercase;
        color: #1d427b;
        font-weight: 100;
    }

    .header-2 {
        text-align: left;
        margin-top: 35px;
        color: #1d427b;
        font-weight: 100;
        position: relative;
        margin-bottom: 60px;
    }

        .header-2::after {
            width: 8%;
            height: 10px;
            background-color: #2d8ecb;
            bottom: -25px;
            left: 0;
            position: absolute;
            content: ' ';
            z-index: 2;
        }

    .col-fill-12 {
        width: 100% !important;
        margin-bottom: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }

        .col-fill-12 > .form-group > .controls {
            width: 50%;
        }

    #mainContainer .pageContainer .pageContent {
        padding: 30px;
    }

    #mainContainer .pageContainer #register_container {
        padding: 0 !important;
    }

    #heroContent {
        width: 970px;
        padding-bottom: 60px;
    }

    .pageNotFoundPage #heroContent {
        padding-bottom: 90px;
    }

    h2 {
        font-size: 30px;
    }

    .h3, .viewTariffPage #heroContent h2.h3 {
        font-size: 28px;
    }

    .h5 {
        font-size: 16px;
    }

    .footerContainer h2 {
        font-size: 16px;
    }

    #navbar ul li a {
        font-size: 16px;
    }

    .navbarList ul.dropdownMenu li {
        float: none;
    }

        .navbarList ul.dropdownMenu li a {
            clear: both;
            white-space: nowrap;
        }

    .dropdownToggle.open, .dropdownToggle.open:hover, .dropdownToggle.open:focus {
        background-color: #ffe000;
        color: #222;
    }

    .dropdownToggle:focus {
        color: #ffe000;
        background-color: #090909;
    }

    .collapse {
        display: block;
    }

    #heroContent {
        padding-top: 45px;
    }

    .heroContentSubPages #heroContent {
        padding-top: 95px;
    }

    #heroContent h1.h1SubPages {
        font-size: 49px;
    }

    #heroContent h2 {
        font-size: 21px;
    }

    .startQuoteButtonContainer small {
        font-size: 1.1em;
        padding-top: 10px;
    }

    #turbineContainer {
        width: 970px;
        height: 200px;
        margin-top: -200px;
        overflow: hidden;
    }

    #announcementsContainer p {
        width: 940px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 28px;
        line-height: 1.1;
        margin: 0 auto;
    }

    #uspContainer h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .videoContainer {
        margin: 0 100px 30px 100px;
    }

    .block {
        margin-bottom: 30px;
    }

        .block.block-text h2, .modal #main .block.block-text h2 {
            font-size: 28px;
        }

        .block.block-text h3 {
            font-size: 21px;
        }

    #imgBlockImages img {
        left: 25%;
        width: 50%;
    }

    .h4 {
        font-size: 21px;
    }

    #articles .row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        grid-row-gap: 30px;
    }

    .hidden-gfb {
        display: none !important;
    }

    .modal-lg {
        width: 900px;
    }

    .modal .modal-content .modal-header {
        padding: 22.5px 45px 0 45px;
    }

    #articleModal .modal-content .modal-body #main header {
        margin-bottom: 30px;
    }

    .modal #main h2 {
        font-size: 37px;
    }

    .modal #main h3 {
        font-size: 21px;
    }

    /* connect */
    .contactForm #form .h3 {
        font-size: 28px;
    }

    .row.contactForm {
        display: flex;
    }

    .col-md-7 {
        width: 58.33333%;
    }

    .col-md-5 {
        width: 41.66667%;
    }

    #alt-contact-methods aside:first-child {
        margin-top: 0;
    }

    /* new quote */
    form#quote fieldset div#meter_standard .alert, form#quote fieldset div#meter_smart .alert,
    form#quote fieldset div#meter_prepay .alert, form#quote fieldset div#meter_e7 .alert .no-pre-payments,
    form#quote fieldset div#fuel_type_unavailable .alert {
        margin-bottom: 15px;
        margin-left: auto;
        padding: 0;
        /* padding-left: 10px; */
        margin-right: 2.5%;
    }

    .labelFlex {
        display: flex;
    }

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

    form#quote fieldset .radio-inline,
    div#tariffs fieldset .radio-inline {
        text-align: center;
    }

    form#quote fieldset div#meter_standard .alert, form#quote fieldset div#meter_smart .alert,
    form#quote fieldset div#meter_prepay .alert, form#quote fieldset div#meter_e7 .alert,
    form#quote fieldset div#fuel_type_unavailable .alert {
        margin-top: 30px;
        margin-bottom: 15px;
    }

    form#quote fieldset #div_id_meter_type .radio-inline,
    form#quote fieldset #div_id_energy_usage .radio-inline {
    }

    .tariff .tariff-img-container img {
        width: 130px;
    }

    .tariff .tariff-img-container .row {
        margin-left: 150px;
    }

    .tariff .matchHeight {
        width: auto;
    }

    .row.tariffRow {
        flex-wrap: unset;
        justify-content: space-between;
    }

    #actualUsageModal h3, #actualOverUsageModal h3 {
        margin-top: 30px;
    }

    #actualUsageModal button#switch-to-actual-usage-btn,
    #actualUsageModal button#continue-with-estimate-btn,
    #actualOverUsageModal button#reenter-actual-usage-btn,
    #actualOverUsageModal button#actual-usage-contact-us-btn,
    #tariffChangePostcodeNoMatchModal button.tariff-change-close-modal-btn,
    #tariffChangePostcodeNoMatchModal button.tariff-change-contact-us-btn,
    #tariffChangeFixedTariffModal button.tariff-change-close-modal-btn,
    #tariffChangeFixedTariffModal button.tariff-change-contact-us-btn,
    #tariffChangeNotInBulkModal button.tariff-change-close-modal-btn,
    #tariffChangeNotInBulkModal button.tariff-change-contact-us-btn,
    #priceChangePostcodeNoMatchModal button.price-change-close-modal-btn,
    #priceChangePostcodeNoMatchModal button.price-change-contact-us-btn,
    #priceChangeFixedTariffModal button.price-change-close-modal-btn,
    #priceChangeFixedTariffModal button.price-change-contact-us-btn,
    #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-close-modal-btn,
    #meterReadingsNoLoginPostcodeNoMatchModal button.meter-readings-no-login-contact-us-btn,
    #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityPostcodeNoMatchModal button.smart-meter-eligibility-contact-us-btn,
    #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityAlreadySmartModal button.smart-meter-eligibility-contact-us-btn,
    #smartMeterEligibilityNonEligibleModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-close-modal-btn,
    #smartMeterEligibilityEligibleModal button.smart-meter-eligibility-contact-us-btn,
    button.standard-button {
        width: 49%;
    }

    #actualUsageModal button, #actualOverUsageModal button {
        font-size: 16px;
    }

    #confirmDetailsModal button#edit-details-btn,
    #confirmDetailsModal button#confirm-details-btn,
    #confirmDetailsModal button#duplicate-ok-btn,
    #confirmDetailsModal button#duplicate-login-btn {
        width: 49%;
    }

    #accountNav {
        width: 33.3333%;
    }

    #account-nav li.divider {
        margin-top: 35px;
        margin-bottom: 35px;
    }

    .account-info .row .col-xs-4 {
        width: 41.66667%;
    }

    .account-info .row .col-xs-8 {
        width: 58.33333%;
    }

    #directDebitModal.modal .modal-body img {
        margin-top: 30px;
    }

    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container input.meter-reading-input,
    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-input,
    #readings-tabs .tab-pane section.meter form.submit-meter-reading .meter-readings-container span.meter-reading-separator {
        width: 50px;
    }

    #readings-tabs .tab-pane section.meter .well, #readings-tabs .tab-pane section.meter .form-wrapper {
        padding: 30px;
    }

    #readings-tabs .collapse {
        display: none;
    }

    .hideDesktop {
        display: none !important;
    }

    .updateBold {
        font-size: 16px;
    }

    #fbContainerContent {
        max-width: 1000px;
    }

    #fbContainer {
        padding: 22.5px;
    }

    #joinFbImage {
        margin: -52px auto 0 auto;
        max-height: 600px;
    }

    #readings-tabs .tab-pane section.meter .well + .alert {
        margin-top: 30px;
    }

    #heroContent h1.h1SubPages, .homePage #heroContent h1 {
        font-size: 49px;
        margin-bottom: 0;
    }

    .homePage #heroContent h1 {
        margin-bottom: 52.5px !important;
    }

    #announcementsContainer {
        padding: 22.5px;
    }

    .pageNotFoundPage .container {
        width: 970px;
        padding-top: 12px;
    }

    #articleModal .modal-content .modal-body #main header h3, #articles a .article-intro h2, .block.block-text h3 {
        font-size: 21px;
    }

    h2#popular {
        margin-bottom: 30px;
        margin-top: 60px;
    }

    div#cookie-declaration p, div#cookie-declaration button {
        font-size: .8em;
    }

    div#cookie-declaration button {
        position: relative;
        bottom: auto;
        float: right;
        margin-left: 5px;
    }

    #cookie-declaration .container {
        width: 970px;
    }

    div#cookie-declaration p {
        margin-right: 200px;
    }

    div#cookie-declaration {
        padding-bottom: 15px;
    }

    #articles a h3 {
        font-size: 16px;
    }

    .quotePage .alert-heading {
        font-size: 21px;
    }

    .row.tariffRow.wsTariff {
        flex-wrap: wrap;
    }

    .tariff .matchHeight.wsTariffPrice {
        width: 33.33333%;
    }

    .wsTariffPrice small {
        display: block;
        font-size: .4em;
        font-weight: 400;
    }

    .termsAndConditionsPage .rich-text ol {
        padding-inline-start: 26px;
    }

        .termsAndConditionsPage .rich-text ol.singleOl {
            padding-inline-start: 18px;
        }

    #navbar ul li a.jqSubLink {
        padding: 0px 10px 0px 10px;
    }


    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >=992px START
====================================================================================================
====================================================================================================
*/
    #referral-info {
        margin-top: 1rem;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    #referral-label {
        font-size: 19px;
        margin-bottom: 1.6rem;
        margin-right: 0;
    }

    /* / */
    #referral-share-container {
        align-self: auto;
    }

    #share-button {
        height: 3rem;
        margin-left: 0;
    }

    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >=992px END
====================================================================================================
====================================================================================================
*/

}

/*///////////////////////////////////////////
//  8. Responsive Styles min width 1200px  //
///////////////////////////////////////////*/
@media (min-width: 1200px) {
    body {
        font-size: 17px;
        line-height: 1.664;
    }

    #contactUsSection img {
        width: 200px;
    }

    #footer {
    }

        #footer address {
            font-size: 0.9em;
        }

    #navWrapper {
        width: 1170px;
        margin: 0 auto;
    }

    .pageContainer {
        width: 1170px;
        margin: 0 auto;
    }

    #announcementsContainer p {
        margin: 0 auto;
    }

    #navbar ul li a {
        font-size: 17px;
    }

    #heroContent h1.h1SubPages, .homePage #heroContent h1 {
        font-size: 60px;
        opacity: 1;
    }

    #heroContent h2 {
        font-size: 23px;
    }

    #accountNav {
        width: 25%;
    }

    #uspContainer {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .startQuoteButtonContainer small {
        font-size: 1.2em;
    }

    .block.block-text h2, .modal #main .block.block-text h2 {
        font-size: 45px;
    }

    .block.block-text h3 {
        font-size: 23px;
    }

    .heroContentSubPages #heroContent {
        padding-top: 150px;
    }

    #heroContent h1.h1SubPages {
        font-size: 60px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 44px;
    }

    .h3 {
        font-size: 32px;
    }

    .h4 {
        font-size: 23px;
    }

    .h5 {
        font-size: 17px;
    }

    .footerContainer h2 {
        font-size: 17px;
    }

    .modal #main h2 {
        font-size: 44px;
    }

    .modal #main h3 {
        font-size: 23px;
    }

    .tariff .tariff-img-container img {
        width: 150px;
    }

    .tariff .tariff-img-container .row {
        margin-left: 180px;
    }

    /* connect */
    .contactForm #form .h3 {
        font-size: 32px;
    }

    .col-md-7 {
        width: 66.66667%;
    }

    .col-md-5 {
        width: 33.33333%;
    }

    #actualUsageModal button, #actualOverUsageModal button {
        font-size: 17px;
    }

    .status {
        margin-bottom: 30px;
        padding: 30px;
    }

    .updateBold {
        font-size: 17px;
    }

    .pageNotFoundPage .container {
        width: 1170px;
    }

    #joinFbImage {
        margin: -41px auto 0 auto;
    }

    #articleModal .modal-content .modal-body #main header h3, #articles a .article-intro h2, .block.block-text h3 {
        font-size: 23px;
    }

    #heroContent {
        padding-bottom: 120px;
    }

    .homePage #heroContent {
        padding-bottom: 60px;
    }

    #cookie-declaration .container {
        width: 1170px;
    }

    #articles a h3 {
        font-size: 17px;
    }

    .quotePage .alert-heading {
        font-size: 23px;
    }

    .termsAndConditionsPage .rich-text ol {
        padding-inline-start: 28px;
    }

        .termsAndConditionsPage .rich-text ol.singleOl {
            padding-inline-start: 19px;
        }

    #navbar ul li a.jqSubLink {
        padding: 10px 10px 10px 10px;
    }


    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >=1200px START
====================================================================================================
====================================================================================================
*/

    #referral-info {
        margin-top: 3rem;
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
    }

    #referral-label {
        font-size: 19px;
        margin-bottom: 1.6rem;
        margin-right: 1.8rem;
    }

    /* / */
    #referral-generate-container {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    #referral-generate {
        margin-bottom: 1.5rem !important;
        width: 333px;
        text-align: center;
        padding-bottom: 5px !important;
        font-size: 19px;
    }

    #referral-code {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* / */
        #referral-code h3.h3 {
            font-size: 21px !important;
            margin-bottom: 0.8rem;
            padding: 10px 15px;
            border: 1px solid;
        }

    #referral-info .ref-container, #fb-info .ref-container {
        display: flex;
    }

    /* / */
    #referral-share-container {
        align-self: flex-end;
    }

    #share-button {
        height: 3rem;
        margin-left: 0.438rem;
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
        margin-bottom: 0.6rem;
        /* background: black url("/Content/Images/fb-icon.png") no-repeat scroll 0 0 transparent; */
        /* cursor: not-allowed; */
    }

    #fb-info {
        display: flex;
        align-items: center;
    }

    #fb-icon {
        /* margin-right: auto; */
        width: 3.5rem;
    }

    /*
====================================================================================================
====================================================================================================
    REFER A FRIEND RESPONSIVE >1200px END
====================================================================================================
====================================================================================================
*/

}
/*///////////////////////////////////////////
//  9. Responsive Styles max width 767px   //
///////////////////////////////////////////*/
@media (max-width: 767px) {
    #mainNavbar {
        min-height: unset;
    }

    #trustpilot {
        margin: 45px 0;
        border-top: 2px solid #51B17E;
        background-color: #fff !important;
    }

        #trustpilot .container {
            margin: 50px auto 0 auto !important;
            margin: 0 auto;
            padding: 0 15px;
            width: 100%;
            transform: none;
            margin-top: 25px !important;
        }

    .table-responsive {
        width: 100%;
        margin-bottom: 19.5px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }

        .table-responsive > .table, .block.block-table .table-responsive > table {
            margin-bottom: 0;
        }

            .table-responsive > .table > thead > tr > th, .block.block-table .table-responsive > table > thead > tr > th,
            .table-responsive > .table > thead > tr > td, .block.block-table .table-responsive > table > thead > tr > td,
            .table-responsive > .table > tbody > tr > th, .block.block-table .table-responsive > table > tbody > tr > th,
            .table-responsive > .table > tbody > tr > td, .block.block-table .table-responsive > table > tbody > tr > td,
            .table-responsive > .table > tfoot > tr > th, .block.block-table .table-responsive > table > tfoot > tr > th,
            .table-responsive > .table > tfoot > tr > td, .block.block-table .table-responsive > table > tfoot > tr > td {
                white-space: nowrap;
            }

    .portalContent {
        border: 0 !important;
        border-radius: 0 !important;
    }

    .portalContainer {
        margin-top: 7.5px !important;
        padding-left: 0;
        padding-right: 0;
    }

    .portalMainContainer #current-account p {
        padding: 0 12px;
        color: #fff;
        margin-bottom: 0;
    }

    #readings-tabs .tab-pane section.meter .well, #readings-tabs .tab-pane section.meter .form-wrapper {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -15px;
        margin-right: -15px;
    }

    .table-responsive > .table-bordered {
        border: 0;
    }

        .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child,
        .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child,
        .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
            border-left: 0;
        }
}
/*///////////////////////////////////////////
//  10. Responsive Styles max width 500px aka. Mobile View  //
///////////////////////////////////////////*/
@media only screen and (max-width: 500px) {
    .tariff-toggle-text {
        font-size: 20px;
        line-height: 1.25rem;
        margin-left: 20px;
        font-weight: 700;
        color: #656a70;
    }

    .big-number {
        margin: 0;
        margin-left: auto;
        margin-right: auto;
        font-size: 40px;
        color: #fff;
        line-height: 0.7;
        font-weight: 500;
    }

    .annual-cost-icon {
        width: auto;
        height: 50px;
        margin-left: auto;
        margin-top: 5px;
        margin-bottom: 20px;
    }

    .annual-cost .col {
        margin-top: 5px;
    }

    .annual-cost .big-number {
        font-size: 22px;
        margin-top: 4px;
    }

    #confirmDetailsModal .wintersummer .divider {
        margin-left: 20px;
        margin-right: 20px;
        width: 5px;
        margin-bottom: 25px;
        margin-top: 20px;
    }

    .tariff #monthly-price p {
        font-size: 2.4em;
    }

    .tariff #monthly-price .h5 {
        font-size: 13px;
    }

    .medium-number {
        margin: 0;
        margin-left: auto;
        margin-right: auto;
        font-size: 40px;
        color: #fff;
        line-height: 0.7;
        font-weight: 500;
    }

    .summer-cost-icon {
        height: 50px;
        margin-top: auto;
        margin-bottom: 10px;
        margin-left: 20px;
        margin-right: 0;
    }

    .cost-footer {
        font-size: 14px;
        color: #fff;
        font-weight: 600;
        text-align: right;
        margin-right: 15px;
    }

    .tariff-pricing {
        padding-bottom: 10px;
    }

    .email-my-quote-button {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 15px;
    }

    .tariff {
        margin-left: 0;
    }

    .button-input, .button-input-PC {
        border-radius: 50px;
        padding: 5px;
        background-color: #fff;
        display: flex;
        border: 1px solid #51b17f;
        max-height: 65px;
    }
}

/*///////////////////////////////////////////
//  10. Responsive Styles max width 768px   //
///////////////////////////////////////////*/
@media only screen and (max-width: 768px) {
    #main .block.align-left, .block.align-right {
        margin-bottom: 30px;
    }

    .pageContent.pageContentTariff {
        flex-direction: column;
    }

    .tariff-tile-active > .tariff {
        border-bottom: 3px solid #f1c141 !important;
    }

    .tariff-pricing {
        flex-direction: column;
    }

    .cost-container {
        margin-bottom: 20px;
    }

    .asFeaturedByQuotes {
        flex-direction: column;
    }

        .asFeaturedByQuotes > li {
            margin-bottom: 20px;
        }

    .tariff-container {
        width: 100%;
    }

    .tariff {
        width: 100%;
    }

    .tariff-info-box-container {
        margin-left: 0;
    }
}
/*///////////////////////////////////////////
// 11. Responsive Styles max width 991px   //
///////////////////////////////////////////*/
@media only screen and (max-width: 991px) {
    .visible-gfb {
        display: none !important;
    }

    .hideMobile {
        display: none !important;
    }

    div#cookie-declaration button {
        top: auto !important;
    }

    .tariff-pricing {
        flex-wrap: wrap;
    }

    .annual-cost {
        flex: 100%;
    }

        .annual-cost .header-1 {
            font-size: 11px;
        }

    .annual-cost-icon {
        height: 30px;
        margin-left: -10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .innovative-tariffs {
        padding-left: 0;
        padding-right: 0;
    }

    .footerContainer {
        transform: translateY(199px);
    }

    #footer-logo {
        margin: 0px auto 0 auto !important;
    }

    .footerContainerContent {
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding-bottom: 100px;
        padding-top: 40px;
    }
}

@media only screen and (max-width: 991px) and (min-width: 501px) {
    .annual-cost .big-number {
        font-size: 30px;
    }
}

@media only screen and (max-width: 840px) {
    #footer {
        background-size: contain;
    }
}

@media only screen and (max-width: 992px) {
    #footer {
        height: 200px;
    }
}

@media only screen and (max-width: 1200px) {
    .innovative-tariffs {
        padding-left: 0;
        padding-right: 0;
    }
}

/*///////////////////////////////////////////
// 11. Responsive Styles min width 1400px   //
///////////////////////////////////////////*/
@media only screen and (min-width: 1400px) {
    #footer {
    }

    .pageContainer-90vw {
        width: 90%;
        margin: 0 auto;
    }

    .tariff-container
    .footerContainer {
        transform: translateY(99%);
        background: linear-gradient( 180deg, rgba(29,66,123,1) 0%, rgba(45,142,203,1) 50%, rgba(255,255,255,1) 100%);
        width: 100%;
    }

    .altFooterContainer {
        transform: translateY(380px);
        background: linear-gradient( 180deg, rgba(29,66,123,1) 0%, rgba(45,142,203,1) 50%, rgba(255,255,255,1) 100%);
        width: 100%;
    }
}

@media (min-width: 768px) {
    #uspContainer .which-rated-header {
        width: 50%;
    }

    #uspContainer .rated-header {
        font-size: 79px;
    }

    #uspContainer .which-rated-text h1 {
        font-size: 60px;
    }

    #uspContainer .which-rated-caption {
        font-size: 38px;
    }
}

@media (min-width: 992px) {
    .footerContainer {
        flex-direction: row;
    }

        .footerContainer #footer-logo {
            margin: 0 0 auto;
            width: 30%;
            margin-right: 100px;
        }

    .footerContainerContent {
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .altFooterContainer #footer-logo {
        margin: 0 0 auto;
        width: 30%;
    }
}

@media only screen and (min-width: 992px) {
    #account-info .modal-body h2 {
        font-size: 30px;
    }

    #account-info .tils-table {
        font-size: medium;
    }
}

@media only screen and (max-width: 500px) {
    #headerMenuButton {
        font-size: 16px;
    }

        #headerMenuButton .fa {
            font-size: 20px;
            margin-right: 10px;
        }

    .header-sign-in {
        font-size: 16px;
    }

    .header-your-account {
        font-size: 16px;
    }

    .header-sign-in i {
        font-size: 20px;
    }

    #signInNav .fas {
        margin-left: 10px;
    }
}

abbr.no-underline[title] {
    text-decoration: none;
    cursor: help;
}

#heroContent2 {
    flex-direction: row;
}

@media screen and (max-width:1000px) {
    #heroContent2 {
        flex-direction: column;
    }
}

.tariff-tile-active .tariff::after {
    top: -37px;
    right: -15px;
}

#tariff_types {
    display: flex;
    gap: 20px;
}

#tariff_types .tariff-type {
    zbackground: #d9d9d9;
    width: 100%;
}

#tariff_types .tariff-type.tariff-type-smart {
    display: none;
}

#tariffs.show-smart-tariff #tariff_types .tariff-type.tariff-type-smart {
    display: block !important;
}

#tariff_types .tariff-type h1,
#tariff_types .tariff-type h3 {
    text-align: center;
    text-transform: uppercase;
    color: #1d427b;
    font-weight: 100;
}

#tariff_types .tariff-type .tariff {
    border: 0;
    border-radius: 0;
    margin: 0;
    margin-bottom: 20px;
}

#tariff_types .tariff-type .tariff-details {
    border: 10px solid #bbb8b8;
}

#tariff_types #tariff_type_fixed .active .tariff-details {
    border: 10px solid #f1c141 !important;
}

#tariff_types #tariff_type_variable .active .tariff-details {
    border: 10px solid #2a8ecb !important;
}

#tariff_types #tariff_type_smart .active .tariff-details {
    border: 10px solid #72b089 !important;
}

#tariff_types .tariff-type .tariff-title {
    background-color: #bbb8b8;
    padding: 20px 10px 0 10px;
    align-items: start;
    text-align: left;
}

#tariff_types #tariff_type_fixed .active .tariff-title {
    background-color: #f1c141;
}

#tariff_types #tariff_type_variable .active .tariff-title {
    background-color: #2a8ecb;
}

#tariff_types #tariff_type_smart .active .tariff-title {
    background-color: #72b089;
}

#tariff_types .tariff-title .close {
    display: none;
}

#tariff_types .tariff-tile-active .tariff-title .close {
    color: #fff;
    display: block;
    opacity: inherit;
    position: absolute;
    right: 24px;
    top: 32px;
}

#tariff_types .tariff-type .tariff-title span {
    line-height: 1;
    margin-top: -5px;
}

#tariff_types .tariff-type .tariff-title-subtitle {
    line-height: 1;
    margin-top: 15px;
}

#tariff_types .tariff-type .badge {
    margin-top: 10px;
}

    #tariff_types .tariff-type .badge label {
        font-size: 14px;
        line-height: 1;
        padding: 5px;
        text-align: center;
        width: 70%;
    }

#tariff_types .tariff-type .badge-placeholder {
    height: 24px;
    margin-top: 10px;
}

#tariff_types .tariff-type .signmeup-placeholder {
    height: 26px;
}

#tariff_types .tariff-type .tariffText {
    color: #1d427b;
    margin-top: 0;
}

#tariff_types .tariff-type .label-1 {
    color: #2f94cf;
    font-size: 14px;
    line-height: 1;
    padding-top: 5px;
}

#tariff_types .tariff-type .select-tariff-container {
    gap: 20px;
    padding: 10px 0;
}

    #tariff_types .tariff-type .select-tariff-container button {
        width: 70%;
    }

        #tariff_types .tariff-type .select-tariff-container button span {
            font-size: 14px;
            line-height: 1;
            padding: 5px;
        }

#tariff_types .tariff-type .select-tariff-button {
    margin-bottom: 40px;
}

#tariff_types .tariff-type .sign-up-button {
    margin-top: 0;
    text-align: center;
}

#tariff_types .tariff-type .more-details {
    margin: 0 20px;
}

#tariff_types .tariff-type h4 {
    border: none;
    font-size: 14px;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: left;
}

#tariff_types .tariff-type label {
    font-weight: normal;
}

#tariff_types .tariff-type hr {
    border-top: 2px solid #eee;
    margin: 5px 0;
}

#tariff_types .tariff-type p {
    margin: 0;
}

#tariff_types .tariff-type ol,
#tariff_types .tariff-type ul {
    margin: 0;
    padding-left: 20px;
}

#tariff_types .tariff-type table {
    width: 100%;
}

    #tariff_types .tariff-type table td:last-of-type {
        text-align: right;
    }

#tariff_types .tariff-type .tariff-info-box {
    align-content: center;
    border-top: 10px solid #bbb8b8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

#tariff_types #tariff_type_fixed .active .tariff-info-box {
    border-top: 10px solid #f1c141 !important;
}

#tariff_types #tariff_type_variable .active .tariff-info-box {
    border-top: 10px solid #2a8ecb !important;
}

#tariff_types #tariff_type_smart .active .tariff-info-box {
    border-top: 10px solid #72b089 !important;
}

#tariff_types .tariff-type .tariff-info-box .tariffText {
    font-size: 50px;
}

#tariff_types .tariff-type .tariff-info-box .label-1 {
    font-size: 20px;
}

#tariff_types .tariff-type .tariff-info-box .annual-cost {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    text-align: center;
}

#tariff_types .tariff-type .tariff-info-box .inclusive-vat {
    color: #ccc;
    font-size: 10px;
}

#tariff_types .tariff-type .tariff-info-box .show-tandc,
#tariff_types .tariff-type .tariff-info-box .hide-tandc {
    background-image: linear-gradient(to right, #bbb8b87d 0%, #bbb8b8 51%, #bbb8b87d 100%);
}

@media (max-width: 650px) {
    #tariff_type_block {
        display: block;
    }

    #tariff_types {
        display: block;
    }

        #tariff_types .tariff-type {
            display: none;
        }

            #tariff_types .tariff-type h1,
            #tariff_types .tariff-type h3 {
                display: none;
            }

        #tariff_types .tariff-type {
            background: #fff;
        }

            #tariff_types .tariff-type .tariff {
                margin-left: 0;
                margin-right: 0;
            }

            #tariff_types .tariff-type .tariff-info-box {
                padding: 20px 0 0 0;
            }

    .tariff-tile-active > .tariff {
        border-bottom: 0 !important;
    }
}

@media (min-width: 651px) and (max-width: 1024px) {
    #tariff_type_block {
        display: none;
    }

    #tariff_types .tariff-type {
        display: block !important;
    }

        #tariff_types .tariff-type.tariff-type-smart {
            display: none !important;
        }

    #tariffs.include-smart-tariff #tariff_types .tariff-type.tariff-type-smart {
        display: block !important;
    }

    #tariff_types .tariff-type h1 {
        display: block;
    }
}

@media (min-width: 1025px) {
    #tariff_type_block {
        display: none;
    }

    #tariff_types .tariff-type {
        display: block !important;
    }

        #tariff_types .tariff-type.tariff-type-smart {
            display: none !important;
        }

    #tariffs.include-smart-tariff #tariff_types .tariff-type.tariff-type-smart {
        display: block !important;
    }

    #tariff_types .tariff-type h1 {
        display: block;
    }
}

.smart-tariff-interest hr {
    margin: 20px 0;
}

.form-group label {
    margin: 0;
}

.smart-step-container {
    display: flex;
    gap: 20px;
}

.smart-step {
    border: 3px solid #1c427c;
    font-size: 20px;
    padding: 30px 10px 10px 10px;
    position: relative;
    width: 100%;
}

    .smart-step .step-label {
        background-color: #2d8dca;
        color: #fff;
        height: 40px;
        left: 50%;
        line-height: 2;
        position: absolute;
        border-radius: 50%;
        text-align: center;
        top: 0px;
        transform: translate(-50%, -50%);
        width: 40px;
    }

    .smart-step p {
        margin-top: 20px;
    }

#id_id_smart_tariff_interest_3_label {
    display: none;
}

@media (max-width: 650px) {
    .show-smart-tariff #tariff_type_block,
    .show-smart-tariff #tariff_type_fixed,
    .show-smart-tariff #tariff_type_variable {
        display: none !important;
    }

    #id_id_smart_tariff_interest_2_label {
        display: none;
    }

    .show-smart-tariff #smart_tariff_interest label,
    .show-smart-tariff #id_id_smart_tariff_interest_1_label,
    .show-smart-tariff #id_id_smart_tariff_interest_2_label {
        display: none;
    }

    .show-smart-tariff #id_id_smart_tariff_interest_3_label {
        display: block !important;
    }

    .smart-step-container {
        flex-direction: column;
    }

    .smart-step {
        padding: 30px 10px 10px 10px;
    }

        .smart-step step-label {
            left: 0px;
            top: 50%;
            transform: translate(-50%, -50%);
        }
}

@media (min-width: 651px) and (max-width: 1024px) {
    .tariffs-outer {
        display: flex;
        justify-content: center;
    }

    .tariffs-inner.standard-only {
        width: 66%;
    }

    .show-smart-tariff .tariffs-inner.standard-only {
        width: 100%;
    }

    #div_id_smart_tariff_interest .controls {
        width: 66%;
    }
}

@media (min-width: 1025px) {
    .tariffs-outer {
        display: flex;
        justify-content: center;
    }

    .tariffs-inner.standard-only {
        width: 66%;
    }

    .show-smart-tariff .tariffs-inner.standard-only {
        width: 100%;
    }

    #div_id_smart_tariff_interest .controls {
        width: 66%;
    }
}