@font-face {
    font-family: 'SRPsans-Black';
    src: url('../fonts/SRPSans-Black.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-Bold';
    src: url('../fonts/SRPSans-Bold.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-BoldItalic';
    src: url('../fonts/SRPSans-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-Italic';
    src: url('../fonts/SRPSans-Italic.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-Light';
    src: url('../fonts/SRPSans-Light.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-LightItalic';
    src: url('../fonts/SRPSans-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-Medium';
    src: url('../fonts/SRPSans-Medium.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-MediumItalic';
    src: url('../fonts/SRPSans-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-Regular';
    src: url('../fonts/SRPSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-SemiBold';
    src: url('../fonts/SRPSans-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'SRPsans-SemiBoldItalic';
    src: url('../fonts/SRPSans-SemiBoldItalic.woff') format('woff');
}

/***** Global styles *****/
html {
    --SRPsans-Black: SRPsans-Black, helvetica, arial, sans-serif;
    --SRPsans-Bold: SRPsans-Bold, helvetica, arial, sans-serif;
    --SRPsans-BoldItalic: SRPsans-BoldItalic, helvetica, arial, sans-serif;
    --SRPsans-Italic: SRPsans-Italic, helvetica, arial, sans-serif;
    --SRPsans-Light: SRPsans-Light, helvetica, arial, sans-serif;
    --SRPsans-LightItalic: SRPsans-LightItalic, helvetica, arial, sans-serif;
    --SRPsans-Medium: SRPsans-Medium, helvetica, arial, sans-serif;
    --SRPsans-MediumItalic: SRPsans-MediumItalic, helvetica, arial, sans-serif;
    --SRPsans-SemiBold: SRPsans-SemiBold, helvetica, arial, sans-serif;
    --SRPsans-SemiBoldItalic: SRPsans-SemiBoldItalic, helvetica, arial, sans-serif;
    /* input as rgb so that we can use alpha later if needed */
    --chart-dark-blue: 204, 231, 242; /* #cce7f2 */
    --chart-light-blue: 242, 249, 252; /* #f2f9fc */
    --chart-med-blue: 229, 243, 248; /* #e5f3f8 */
    --chart-yellow: 217, 167, 64; /* #d9a740 */
    --chart-very-dark-blue: 153, 207, 229; /* #99cfe5 */
    --dark-blue: 18, 85, 144; /* #125590 */
    --light-blue: 0, 134, 190; /* #0086be */
    --light-gray: 242, 242, 242; /* #f2f2f2 */
    --pale-blue: 217, 237, 245; /* #d9edf5 */
    --srp-red: 179, 58, 58; /* #b33a3a */
    --srp-yellow: 204, 138, 0; /* #cc8a00 */
    --very-dark-blue: 7, 44, 72; /* #072c48 */
    --very-light-blue: 78, 201, 253; /* #4ec9fd */
}

body {
    background: rgb(var(--very-dark-blue));
    font-family: var(--SRPsans-Medium);
  	margin-top: -24px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--SRPsans-Bold);
}

h1 {
    /*font-size: 2.5rem;*/
    line-height: 2.75rem;
}

h2 {
    color: rgb(var(--dark-blue));
    font-family: var(--SRPsans-SemiBold);
    margin: 45px 0 25px;
}

h3 {
    font-size: 1.7rem;
    line-height: 1.875rem;
    margin-bottom: 1.2rem;
    margin-top: 2rem;
}

p {
    font-size: 1.125rem;
}

    p a, .card a:not(.btn), .rss-link a, .col-md-8 li a:not(.on-this-page li a), .col-md-10 li a:not(.on-this-page li a), td a, form a {
        color: rgb(var(--dark-blue));
        text-decoration: underline;
    }

        p a:hover, .card a:not(.btn):hover, .col-md-8 li a:not(.on-this-page li a):hover, .col-md-10 li a:not(.on-this-page li a):hover, td a:hover, form a:hover {
            color: rgb(var(--light-blue));
        }

#QSIFeedbackButton-btn {
  bottom: 90px !important;
}

    #page-content ul li, #page-content ol li {
        font-size: 1.125rem;
        margin-bottom: 15px;
    }

.hidden {
    display: none;
}

strong {
    font-family: var(--SRPsans-Bold);
}

.disclaimer {
    color: rgb(var(--dark-blue));
    text-decoration: underline;
}

.external-link img {
    height: 10px;
    margin-left: 6px;
    width: 10px !important;
}

.tooltip-anchor img {
  cursor: pointer;
  margin-bottom: 2px;
    width: 1rem;
}

.x-l {
  fill: rgb(var(--light-blue));
}
.btn .x-l {
     fill: rgb(var(--white));
    }

.pdf-link img {
    height: 1rem;
    padding: 0 4px;
}

.eng-link img {
    height: 0.9rem;
    margin-top: -2px;
    margin-left: 10px;
}

/*.app-buttons .google img, .app-buttons .apple img {
    width: 200px;
}*/

#page-content p {
    color: #333;
}

/*#page-content .col-md-8 > p:not(.srp-lead):first-of-type {
    margin-top: 35px;
}

#page-content .col-md-8 > p:not(.srp-lead):last-child {
    margin-bottom: 50px;
}*/

/*#page-content .col-md-8.col-lg-6 > p:not(.srp-lead):first-of-type {
    margin-top: 35px;
}

#page-content .col-md-8.col-lg-6 > p:not(.srp-lead):last-child {
    margin-bottom: 50px;
}*/



.container {
    max-width: 1200px;
}

/*main #page-content {
	padding-bottom: 50px;
}*/

#page-content h1.page-header, main #page-content {
    background: #fff;
}

/* h1 for transactional pages */
.transactional-content h1.page-header {
    margin: 4rem 0 0 !important;
    padding: 1rem 0 !important;
}

#srp-emergency-alert {
    background: rgb(var(--srp-red));
    padding-bottom: 30px;
    padding-top: 30px;
}

    #srp-emergency-alert img {
        height: 90px;
    }

    #srp-emergency-alert, #srp-emergency-alert a {
        color: #fff;
    }

        #srp-emergency-alert h3 {
            font-size: 1.125rem;
        }

        #srp-emergency-alert a {
            font-family: var(--SRPsans-SemiBold);
            text-decoration: underline;
        }

/***** Main styles *****/
main .container {
    padding: 0 30px;
}

#breadcrumbs {
  font-size: .813rem;
  line-height: 15px;
  padding-top: 11px;
  padding-bottom: 6px;
}

    #breadcrumbs, #breadcrumbs a {
        color: rgb(var(--dark-blue));
    }

        #breadcrumbs a {
            display: inline-block;
            padding: 8px 2px;
        }

            #breadcrumbs a:hover {
                color: rgb(var(--very-light-blue));
            }

#page-content .srp-lead {
    font-family: var(--SRPsans-Light);
    font-size: 1.5rem;
    line-height: 2.375rem;
    margin-bottom: 35px;
}

.on-this-page > div {
    padding: 30px 35px;
}

    .on-this-page > div + div:last-child {
        background: rgb(var(--light-gray));
    }

.on-this-page {
    font-size: 1.125rem;
}

    .on-this-page a {
        color: rgb(var(--dark-blue))
    }

        .on-this-page a:hover {
            color: rgb(var(--light-blue))
        }

    /*.on-this-page li {
        padding: 7px 0;
    }*/

.on-this-page-gray {
    background: rgb(var(--light-gray));
}

#page-content .call-out div {
    margin: 3.125rem;
    padding-bottom: 0.7rem;
    padding-top: 0.7rem;
}

    #page-content .call-out div.text-center {
        border-bottom: 1px solid rgb(var(--light-blue));
        border-top: 1px solid rgb(var(--light-blue));
        margin: 2rem 0;
        padding: 3.7rem 2.1rem;
        padding-top: 3.7rem;
    }

    #page-content .call-out div p, #page-content .media-callout :not(.modal-body) > p:not(.callout-title) {
        color: rgb(var(--light-blue));
        font-family: var(--SRPsans-Italic);
        font-size: 1.5rem;
    }

#page-content .call-out a {
    color: rgb(var(--dark-blue));
    text-decoration: underline;
}

#page-content .call-out strong {
    font-family: var(--SRPsans-BoldItalic);
}

#page-content .call-out .call-out-name, #page-content .call-out .call-out-title, #page-content .call-out .call-out-dept {
    color: #333;
    display: block;
    font-size: 1.125rem;
    line-height: 1.2;
}

    #page-content .call-out span.call-out-name {
        font-family: var(--SRPsans-Black);
    }

#page-content .call-out .text-center span:not(.call-out-name) {
    display: inline-block;
    padding: 0 5px
}

#page-content .call-out .text-center span.call-out-title {
    border-right: 1px solid;
}

#related-topics {
    background: rgb(var(--light-gray));
    background-clip: content-box;
}

    #related-topics h5 {
        background: rgb(var(--dark-blue));
        color: #fff;
        font-family: var(--SRPsans-Black);
        font-size: 1.125rem;
    }

    #related-topics .topic {
        background-clip: content-box;
        background-color: #fff;
    }

    #related-topics h6 {
        color: rgb(var(--dark-blue));
        border-bottom: 1px solid;
        font-family: var(--SRPsans-SemiBold);
        font-size: 1.125rem;
        padding: 15px 0 20px;
    }

    #related-topics p {
        font-size: 1.125rem;
    }

.back-to-top {
    margin-top: 50px;
}

    .back-to-top a:hover p {
        color: rgb(var(--dark-blue));
    }

    .back-to-top p {
        font-family: var(--SRPsans-Black);
        font-size: 0.625rem;
    }

    .back-to-top img {
        width: 40px;
        transition: all .5s ease-out;
    }

    /* slides the arrow up when hovered */
    .back-to-top a:hover img {
        transform: translate(0, -10px) scaleX(0.9);
    }

/**** Forms and buttons ****/
/*#page-content .btn.btn-primary {
    background-color: rgb(var(--light-blue));
    width: min(350px, 100%);
}

    #page-content .btn.btn-primary:hover {
        background-color: rgb(var(--dark-blue));
    }*/

    .btn.btn-primary {
        background-color: rgb(var(--light-blue));
    }

        .btn.btn-primary:hover {
            background-color: rgb(var(--dark-blue));
        }

button.btn.btn-primary {
    width: min(350px, 100%);
}

form .btn.btn-primary {
    width: initial;
}

.btn.btn-outline-primary {
    border-color: rgb(var(--light-blue));
    color: rgb(var(--light-blue));
}

    .btn.btn-outline-primary:hover {
        background-color: rgb(var(--light-blue));
        color: #fff;
    }

input:required {
    border: 1px solid;
}

    /*input:required:valid {
        border-color: green;
    }*/

    input:required:invalid {
        border-color: rgb(var(--srp-red));
    }

input.form-control:not(.disabled), textarea.form-control, select.form-control {
    border: solid 1px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-group label {
    font-family: var(--SRPsans-Bold);
}

.form-check + .form-check {
    margin-top: 0.4rem;
}

.form-check label {
    padding-left: 1.5rem;
}

.stepReview {
    margin-bottom: 70px;
}

/**** Adds spacing around "Optional" tag ****/
form .form-group label i {
    margin: 0 3px;
}

/* https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
/*input[type=checkbox] {
    border-radius: 10%;
}

input[type=radio] {
    border-radius: 50%;
}

input[type=radio], input[type=checkbox] {*/
/*height: 1.25rem;
    margin-top: 0.1rem;
    width: 1.25rem;*/
/* Add if not using autoprefixer */
/*-webkit-appearance: none;
    appearance: none;*/
/* For iOS < 15 to remove gradient background */
/*background-color: #fff;*/
/* Not removed via appearance */
/*margin: 0;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid;
    transform: translateY(0.125em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    border-radius: 10%;
}

input[type="radio"]::before {
    border-radius: 50%;
}*/

/*input[type="radio"]::before, input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em rgb(var(--srp-red));*/
/* Windows High Contrast Mode */
/*background-color: CanvasText;
}*/

/*input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:focus, input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid rgb(var(--srp-red));
    outline-offset: max(2px, 0.15em);
}*/

.srp-progress-bar {
    border-bottom: 3px solid #eee;
    border-left: 3px solid #eee;
    border-right: 3px solid #eee;
    position: relative;
}

    .srp-progress-bar::before, .srp-stats .stat::before {
        background: rgb(var(--light-blue));
        content: "";
        height: 3px;
        position: absolute;
        top: 0;
    }

    .srp-progress-bar::before {
        left: -3px;
        width: calc(100% + 6px);
    }

.srp-stats .stat::before {
    left: 0;
    width: 100%;
}

.progresss-bar-title {
    font-family: var(--SRPsans-Bold);
    font-size: 1.5rem;
}

.progress-bar-percentage {
    float: right;
    font-family: var(--SRPsans-Black);
    font-size: 4.688rem;
    line-height: 1;
}

.srp-progress-bar .progress {
    border: solid 1px;
    border-radius: 0;
    background-color: #fff;
}

.srp-progress-bar.count-down .progress-bar {
    background-color: rgb(var(--srp-yellow));
}

.srp-progress-bar.count-up .progress-bar {
    background-color: rgb(var(--light-blue));
}

.image-gallery .col-12.col-md-6 + .col-12.col-md-6 {
    margin-bottom: 2rem;
}

.image-gallery p {
    color: #000;
    font-family: var(--SRPsans-LightItalic);
    font-size: .875rem;
    margin-top: 1rem;
}

.image-gallery .col-12.col-md-6:last-child:not(:nth-child(even)), .srp-cards .col-lg-6:last-child:not(:nth-child(even)) {
    max-width: 100%;
    flex: 0 0 100%;
}

.image-gallery .col-12.col-md-6:last-child p {
    width: clamp(65%, 600px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.logo-pond .col-sm-6.col-md-4 + .col-sm-6.col-md-4 {
    margin-bottom: 0;
    margin-top: 40px;
}

.logo-pond p {
    font-family: var(--SRPsans-Bold);
    text-align: center;
}

.srp-stats .stat {
    background: #f2f2f2;
    border-bottom: solid 6px #fff;
    border-left: solid 3px #fff;
    border-right: solid 3px #fff;
}

.srp-stats .stat-number {
    line-height: 1;  
}

.stat-number {
    font-family: var(--SRPsans-Black);
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    letter-spacing: -0.08rem;
}

.srp-stats .stat-details {
    font-family: var(--SRPsans-SemiBold);
    font-size: 1rem;
}

.srp-stats .col-12 .stat-number {
    font-size: min(4.688rem, 18vw);
}

.srp-table thead {
    background: rgb(var(--pale-blue));
    border-bottom: 3px solid rgb(var(--light-blue));
    color: #000;
    font-family: var(--SRPsans-Bold);
    font-size: 1.125rem;
    text-transform: uppercase;
}

    .srp-table thead th {
        border: none;
    }

.srp-table th, .srp-table td {
    border-bottom: 1px solid #333;
}

.callout-gray.media-callout > .col {
    background: #eee;
    background-clip: content-box;
}

.media-callout img {
    width: 100%;
}

.media-callout .callout-title {
    color: rgb(var(--dark-blue)) !important;
    font-family: var(--SRPsans-Bold);
    text-transform: uppercase;
}

/*.media-callout :not(.modal-body) > p {
    color: rgb(var(--light-blue)) !important;
    font-family: var(--SRPsans-Italic);
}*/

.media-callout a:not(.btn) {
    color: rgb(var(--dark-blue));
    text-decoration: underline;
    font-size: 1.5rem;
}

.large-modal.media-callout, .small-modal.media-callout > div {
  border-bottom: 5px solid #fff;
  border-top: 5px solid #fff;
}

.large-modal.media-callout > div, .small-modal.media-callout > div {
    background-size: cover;  
    height: 500px;
}

	/*.small-modal.media-callout > div {
        border: 3px solid #fff;
    }*/

    .large-modal.media-callout :not(.modal-body) > button.btn, .small-modal.media-callout :not(.modal-body) > button.btn {
        background-color: rgb(0,0,0,0.6);
        border: 1px solid;
        color: #fff;
        width: min(350px, 100%);
    }

/*.media-callout .modal.show {
    position: absolute;
}*/

.large-modal.media-callout .modal.show + button, .small-modal.media-callout .modal.show + button {
    display: none;
}

.media-callout .modal-header {
    padding: 15px 0 0;
    border: none;
}

    .media-callout .modal-header button {
        color: #fff;
    }

.media-callout .modal-content {
    background-color: rgb(var(--very-dark-blue), 0.9);
    color: #fff;
}

.media-callout .modal img {
    height: 50px;
    margin-bottom: 20px;
}

.lakes-things-to-do {
    margin-top: 2rem;
    padding-top: 0.5rem;
}

    .lakes-things-to-do span {
        display: block;
        position: relative;
        text-transform: uppercase;
    }

        .lakes-things-to-do span:before, .lakes-things-to-do span:after {
            position: absolute;
            top: 47%;
            margin-left: 3%;
            overflow: hidden;
            width: 33%;
            height: 1px;
            content: '\a0';
            background-color: #fff;
        }

        .lakes-things-to-do span:before {
            margin-left: -35%;
            text-align: right;
        }

.media-callout .lakes-things-to-do img {
    height: 50px;
    margin: 0 7px;
    width: initial;
}

#page-content .media-callout .modal-content p {
    color: #fff;
}

.modal-backdrop.fade.show {
    background-color: #fff;
}

.srp-cards .card {
    border: none;
    border-radius: 0;
    margin-bottom: 2rem;
}

.srp-cards .card-header {
    padding: 5px;
    background-color: rgb(var(--light-blue));
    color: #fff;
    border-radius: 0;
    border: none;
}

.srp-cards .card-body {
    border-right: 2px solid #eee;
    border-bottom: 2px solid #eee;
    border-left: 2px solid #eee;
    padding: 35px;
}

.srp-cards .card button {
    max-width: 260px;
    margin: 0 auto;
}

.srp-cards.no-headers .card {
    border-top: 5px solid rgb(var(--light-blue));
}

.srp-cards img.icon {
    height: 175px;
    margin: -20px;
}
.srp-cards .img-fluid {
    border-right: 2px solid #eee;
    border-left: 2px solid #eee;
}
  
.srp-clock {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: rgb(var(--pale-blue));
    margin: 0 auto;
    position: relative;
}

.accordion {
    border-bottom: 2px solid rgb(var(--light-blue));
}

    .accordion > * {
        border: none;
    }

    .accordion .card-header, .accordion .card-body, .accordion .card-header button {
        padding: 0;
    }

    .accordion .card-header {
        background: none;
        border: none;
        border-top: 2px solid rgb(var(--light-blue));
        font-family: var(--SRPsans-SemiBold);
    }

        .accordion .card-header img {
            float: right;
            position: absolute;
            right: 0;
            top: calc(50% - 7px);
            transform: rotate(180deg);
            transition: transform .25s linear;
            width: 27px;
        }

        .accordion .card-header button[aria-expanded="true"] img {
            transform: rotate(0);
        }

        .accordion .card-header button {
            color: #000;
            font-size: 1.2rem;
            padding-right: 35px;
            position: relative;
        }

.icon-divider {
    margin-top: 55px;
}

    .icon-divider > div {
        border-top: 3px solid rgb(var(--light-blue));
        border-bottom: 3px solid rgb(var(--light-blue));
    }

    .icon-divider .icon {
        background: #fff;
        height: 150px;
        left: 50%;
        padding: 0 40px;
        top: -75px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

.graphic-comparison .stat-number {
    line-height: 1;
    margin: 10px;
}

.graphic-comparison .stat-number span {
    margin-top: 10px;
}

.graphic-comparison .icon {
    background: rgb(var(--chart-light-blue));
}

    .graphic-comparison .icon img {
        height: 150px;
    }

#page-content .comparison-title {
    background: rgb(var(--chart-med-blue));
    border-bottom: 1px solid;
    height: 64px;
    padding: 0 0.4rem;
}

    #page-content .comparison-title p {
        color: rgb(var(--dark-blue));
        font-family: var(--SRPsans-Black);
        font-size: 1rem;
        line-height: 1.2;
        text-transform: uppercase;
    }

.graphic-comparison .comparison-stat {
    background: rgb(var(--chart-dark-blue));
    padding: 5px 0 15px;
}

.stat-number span {
    display: block;
    font-family: var(--SRPsans-Medium);
    font-size: 0.8rem;
    letter-spacing: normal;
    line-height: 1;
}

.equation > div {
    background: rgb(var(--chart-dark-blue));
}

.equation-numbers > div {
    padding: 3px;
}

.equation .equation-text {
    background-color: rgb(var(--chart-med-blue));
}

#page-content .equation .equation-text p {
    color: rgb(var(--dark-blue));
    font-family: var(--SRPsans-Bold);
    font-size: 1rem;
    line-height: 1;
}

.math-symbol.stat-number {
    color: #fff;
}

.comparison-chart thead {
    color: rgb(var(--dark-blue));
}

.comparison-chart .table tbody tr:nth-of-type(1), .comparison-chart .table tbody tr:nth-of-type(3) {
    background-color: rgba(0,0,0,.05);
}

.comparison-chart .season-start {
    border-top: 2.3px solid;
}

.comparison-chart .season-info {
    font-family: var(--SRPsans-SemiBold);
}

.comparison-chart th, .comparison-chart td:not(.season-info) {
    text-align: center;
}

    .comparison-chart td:not(.align-middle, .checked-cell, .on-peak, .off-peak, .super-off-peak) {
        padding-top: 20px;
    }

.comparison-chart .checked-cell, .comparison-chart .on-peak, .comparison-chart .off-peak, .comparison-chart .super-off-peak {
    vertical-align: middle;
}

.comparison-chart td:not(.season-info) span:nth-of-type(2), .comparison-chart span:nth-of-type(4), .comparison-chart .col span:nth-of-type(2), .basic-mpower.col span:nth-of-type(3) {
    font-family: var(--SRPsans-Bold);
    font-size: 1.125rem;
}

.comparison-chart .on-peak {
    background-color: rgb(var(--chart-yellow));
}

.comparison-chart .off-peak {
    background-color: rgb(var(--chart-med-blue));
}

.comparison-chart .super-off-peak {
    background-color: rgb(var(--chart-very-dark-blue));
}

.comparison-chart table :not(thead) tr, .comparison-chart .rate-row {
    height: 80px;
}

.comparison-chart td {
    padding: 10px;
    width: 160px;
}

.comparison-chart td, .comparison-chart .col span {
    font-size: 0.875rem;
    line-height: 1.2;
}

    .comparison-chart td img {
        width: 50px;
    }

.price-plan h3 {
    border-top: 3px solid #333;
    padding-top: 15px;
}

.price-plan p, .price-plan ul {
    font-size: .875rem;
}

.price-plan .season {
    border-top: 1px solid;
    padding-top: 10px;
}

.price-plan ul {
    padding-left: 20px;
}

.price-plan + .price-plan {
    margin-top: 60px;
}

.basic-mpower {
    background-color: rgb(var(--light-gray));
}

    .basic-mpower span:first-of-type {
        display: block;
    }

.bill-description h5 {
    color: rgb(var(--dark-blue));
    font-family: var(--SRPsans-SemiBold);
    font-size: 1.125rem;
}

#page-content .bill-description p {
    color: #000;
    font-size: 1rem;
}

.read-bill .mobile > div p {
    max-width: 500px;
}

.read-bill .mobile hr {
    margin: 15px 0 30px;
}

.read-bill .active.number {
    color: #fff;
    background-color: rgb(var(--dark-blue));
}

.timeline > div {
    position: relative;
}

    /* vertical line down the middle */
    .timeline > div:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border-left: 2px solid rgb(var(--light-gray));
        transform: translate(-50%);
    }

.timeline .form-group {
    margin-bottom: 6rem;
    max-width: 250px;
    position: relative;
    z-index: 1;
}

/* horizonal line under the years */
.timeline .col-md-6:nth-of-type(even):before {
    content: '';
    position: absolute;
    top: 75px;
    left: 0;
    border-top: 1px solid rgb(var(--light-blue));
    width: 100%;
    transform: translateY(-50%);
}

/* circle on the horizontal line */
.timeline .circle {
    background: rgb(var(--light-blue));
    border-radius: 50%;
    height: 10px;
    left: -5px;
    position: absolute;
    top: 70px;
    width: 10px;
    z-index: 1;
}

.timeline .years {
    font-family: var(--SRPsans-Black);
    font-size: 3.025rem;
}

.timeline-btt p {
    background: #fff;
    font-family: var(--SRPsans-Black);
    font-size: .875rem;
    margin-bottom: 0;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.timeline-btt a {
    color: rgb(var(--light-blue)) !important;
    text-decoration: none;
}

.timeline img {
    border: 10px solid #fff;
    -webkit-box-shadow: -5px 2px 13px 0 rgba(00,00,00,.4);
    box-shadow: -5px 2px 13px 0 rgba(00,00,00,.4);
}

.rss-feed .topic {
    background-color: rgb(var(--light-gray));
    background-clip: content-box;
}

.rss-image {
    height: 180px;
    object-fit: cover;
    width: 100%;
}

.rss-date, .rss-link {
    font-size: .875rem;
}

.rss-feed .topic > div + div p {
    border-top: 1px solid rgb(var(--light-blue));
    padding-top: 1rem;
}

.mobile-tile-buttons .col {
    background: rgb(var(--light-blue));
}

    .mobile-tile-buttons .col + .col {
        border-left: 3px solid #fff;
    }

    .mobile-tile-buttons .col a {
        color: #fff;
        padding: .9rem;
    }

@media (min-width: 576px) {
    .logo-pond .col-sm-6.col-md-4 + .col-sm-6.col-md-4 {
        margin-bottom: 40px;
        margin-top: 0;
    }

    .comparison-chart table {
        border-bottom: 1px solid;
    }

    .comparison-chart th + th, .comparison-chart td:not(.season-info) {
        border-left: .8px solid #333;
    }
}

@media (min-width: 768px) {
    #breadcrumbs, #breadcrumbs a {
        color: #fff;
    }

    h1 {
        font-size: 3.125rem;
        line-height: 3.75rem;
    }  

#page-content ul, #page-content ol, .comparison-chart .season-info .font-smaller, .comparison-chart td, .comparison-chart .col span, .basic-mpower, .accordion .card-body, #related-topics p {
    font-family: var(--SRPsans-Light);
}

    .on-this-page > div {
        border-bottom: 1px solid rgb(var(--light-blue));
        border-top: 1px solid rgb(var(--light-blue));
    }

    #page-content .call-out div.float-right, #page-content .call-out div.float-left {
        width: clamp(260px, 40vw, 485px);
    }

    #page-content .call-out .float-right {
        border-left: 1px solid rgb(var(--light-blue));
        margin-right: -16vw;
        padding-left: 1.5rem;
        padding-right: 70px;
    }

    #page-content .call-out .float-left {
        border-right: 1px solid rgb(var(--light-blue));
        margin-left: -16vw;
        padding-left: 70px;
        padding-right: 1.5rem;
    }

    .media-callout .col-md-6 > div {
        width: 90%;
    }

    .callout-right.media-callout .col-md-6 > div {
        float: right;
    }

    .comparison-chart span {
        display: block;
    }

    .timeline > div:after {
        left: 50%;
    }
  
.small-modal.media-callout > div:first-of-type {
  border-right: 5px solid #fff;;
}

.small-modal.media-callout > div:last-of-type {
  border-left: 5px solid #fff;
}
}

@media (min-width: 768px) and (max-width: 875px) {
    .timeline .col-md-6:nth-of-type(even):before {
        top: 62px;
    }

    .timeline .circle {
        top: 57px;
    }

    .timeline .years {
        font-size: 2.525rem;
    }
}

@media (min-width: 800px) {
  /* Makes sure there is a space between the two bills */
  .read-bill + .read-bill {
    margin-top: 60px;
}
  
    .read-bill .mobile {
        display: none;
    }

    .bill .number {
        background-color: #fff;
        border: 2px solid;
        border-radius: 20px;
        color: rgb(var(--light-blue));
        font-family: var(--SRPsans-Black);
        font-size: 1.125rem;
        padding: 4px 0px;
        position: absolute;
        width: 40px;
    }

        .bill .number.left {
            left: -5px;
        }

        .bill .number.right {
            right: -5px;
        }

        .bill .number.one, .bill .number.two {
            top: 3%;
        }

        .bill .number.three {
            top: 19%;
        }

        .bill .number.four {
            top: 33%;
        }

        .bill .number.five, .bill .number.eight, .version-two .bill .number.seven {
            top: 42%;
        }

        .bill .number.six, .version-two .bill .number.five {
            top: 84%;
        }

        .bill .number.seven, .version-two .bill .number.six {
            top: 56%;
        }

        /* eight is with five, as is version-two's seven*/

        .bill .number.nine, .version-two .bill .number.eight {
            top: 24%;
        }

        .bill .number.ten, .version-two .bill .number.nine {
            top: 13%;
        }
  
  .bill .number.eleven, .version-two .bill .number.ten {
    top: 22%;
}

.bill .number.twelve, .version-two .bill .number.eleven {
    top: 30%;
}

.bill .number.thirteen, .version-two .bill .number.twelve {
    top: 38%;
}

.bill .number.fourteen, .version-two .bill .number.thirteen {
    top: 47%;
}

    .bill-description:first-of-type > div {
        margin-left: 3rem;
    }
}

@media (min-width: 992px) {
    #breadcrumbs, #breadcrumbs a {
        color: #fff;
    }

    #page-content h1.page-header {
        margin-left: -2rem;
        margin-right: -2rem;
        margin-top: -4rem;
        padding: 1rem 2rem;
    }

    .on-this-page > div {
        padding: 40px 50px;
    }

    #page-content .call-out .float-right {
        margin-right: max(-292px, -24vw);
    }

    #page-content .call-out .float-left {
        margin-left: max(-292px, -24vw);
    }

    #page-content .comparison-title {
        border-top: 1px solid;
    }

    .equation .equation-text {
        border-left: 1px solid;
    }
}

@media (max-width: 992px) {
    .page-header {
        margin-top: 40px;
    }

    .graphic-comparison .icon {
        border-right: 1px solid;
    }

        .graphic-comparison .icon img {
            height: 110px;
        }

    #page-content .equation .equation-text {
        border-top: 1px solid;
    }
}

@media (max-width: 800px) {
    .read-bill .desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    main .hero-image {
        padding: 0px;
        margin: 0px -15px;
    }

    .hero-image .col {
        padding: 0;
    }

    main .container {
        background: #fff;
    }

    .on-this-page {
        border-bottom: 1px solid rgb(var(--light-blue));
        border-top: 1px solid rgb(var(--light-blue));
    }

    #related-topics {
        padding: 0;
    }

    #page-content .call-out div.float-right, #page-content .call-out div.float-left {
        border-bottom: 1px solid rgb(var(--light-blue));
        border-top: 1px solid rgb(var(--light-blue));
        margin: 2rem 0;
        padding: 3.7rem 2.1rem;
        padding-top: 3.7rem;
    }

    .callout-gray.media-callout > .col .col-md-6:first-of-type {
        background: #fff;
    }

    .icon-divider > div {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .comparison-chart .season p span {
        font-family: var(--SRPsans-Bold);
    }
}

/***********************************************************************/
/***********************************************************************/
/*****************    Specific forms styles ONLY     *******************/
/***********************************************************************/
/***********************************************************************/

/* Map request form */
#mapSearch th, .mapList th, .step1GroupHeader, .map-form-header {
    background: rgb(var(--dark-blue));
    color: #fff;
}

/* Helps keep the dropdowns visible on mobile - fix this better later! */ 
#map-request-app table {
    min-width: 380px;
}

.step1GroupHeader, .map-form-header {
    margin-bottom: 10px;
    padding: 5px 10px;
}

.srp-map .embed-container {
    border-top: 1px solid rgb(var(--dark-blue));
}

/* Letter of Authorization - LOA */
#letter-of-auth-form .confirmTable {
    background-color: #FCF6AC;
    padding: 1rem;
}

    #letter-of-auth-form .confirmTable .row > div {
        margin-bottom: 1rem;
    }

/* Construction job timeline lookup - pizza tracker */
.progress-bar.job-timeline-projected {
    background: lightgray;
}

.job-timeline thead, .o-m-message {
    color: #fff;
}

.job-timeline :not(.all-tasks-visible) .job-timeline-table {
    padding: 0 1rem;
}

.job-timeline thead {
    background: rgb(var(--light-blue));
}

.o-m-message.good {
    background-color: rgb(99, 161, 3); /* Light green color */
}

.o-m-message.warning {
    background-color: rgb(245, 154, 35); /* Light orange */
}

.o-m-message.danger {
    background-color: rgb(217, 0, 27); /* Bright red */
}

.o-m-message, .job-timeline thead, .job-timeline-navigation {
    text-transform: uppercase;
}

.expand-tasks, .job-timeline-navigation {
    font-size: .75rem;
}

.job-timeline-navigation {
    font-family: var(--SRPsans-Bold);
    line-height: 1;
    position: relative;
    text-align: center;
    top: 130px;
}

    .job-timeline-navigation:last-of-type {
        text-align: right;
    }

    .job-timeline-navigation img {
        max-width: 50px;
    }

    .job-timeline-navigation span {
        display: block;
        margin-top: 10px;
    }

    .job-timeline-navigation a, .expand-tasks a {
        color: rgb(var(--light-blue));
    }

        .job-timeline-navigation a:hover, .expand-tasks a:hover {
            text-decoration: none;
        }

.all-tasks-visible .job-timeline-navigation {
    display: none;
}

.all-tasks-visible .active-task {
    background-color: rgb(215, 215, 215);
}

.bg-past {
    background-color: #00008B!important;
}

@media (max-width: 576px) {
    .job-timeline .progress {
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 130px);
    }
}

@media (min-width: 576px) {
    .job-timeline :not(.all-tasks-visible) .job-timeline-table {
        padding: 0 1rem;
    }

    .job-timeline .job-timeline-navigation {
        text-align: center;
    }

    /* Manually adding margin on top to make sure buttons are lined up */
    .job-timeline-navigation:first-of-type {
        margin-top: 10px;
    }
}

/***********************************************************************/
/***********************************************************************/
/*********************    Homepage style ONLY    ***********************/
/***********************************************************************/
/***********************************************************************/

.home-page .banner-and-login {
    background-clip: content-box;
    font-family: var(--SRPsans-SemiBold);
}

    .home-page .banner-and-login .login-header {
        font-size: 1.5rem;
    }

    .home-page .banner-and-login #loginForm {
        border-top: .188rem solid #fff;
        border-bottom: .188rem solid #fff;
    }

        .home-page .banner-and-login #loginForm input::placeholder {
            color: #333;
            font-family: var(--SRPsans-SemiBold);
            font-size: .875rem;
        }

    .home-page .banner-and-login :not(.quick-access-buttons) a:not(.btn) {
        color: rgb(var(--light-blue));
        text-decoration: underline;
    }

        .home-page .banner-and-login :not(.quick-access-buttons) a:not(.btn):hover {
            color: rgb(var(--dark-blue));
        }

    .home-page .banner-and-login #loginSubmit {
      height: auto;
      white-space: normal;
	}

    .home-page .banner-and-login .logged-in {
        background-image: url(assets/srpnet/components/logged-in-check.svg);
        background-repeat: no-repeat;
        background-size: 50px;
        background-position: 90% 30px;
    }

        .home-page .banner-and-login .logged-in .dashboard-link {
            color: rgb(var(--dark-blue)) !important;
            text-decoration: none !important;
            font-family: var(--SRPsans-SemiBold);
        }

        .home-page .banner-and-login .logged-in .logout-link {
            font-size: 1rem;
            font-family: var(--SRPsans-SemiBold);
        }

.home-page .banner-content .marketing-content h2 {
    color: rgb(var(--dark-blue));
    font-size: 2.625rem;
}

.home-page .banner-content .marketing-content p {
    color: #000 !important;
    font-size: 1.5rem;
}

.home-page .quick-access-buttons .btn {
    line-height: 1;
}

.home-page .not-on-myaccount {
    color: rgb(var(--dark-blue));
}

.home-page .quick-access-buttons {
    background-color: #0a75a3;
    background-image: url(../images/homepage/Start_Stop_Transfer_BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.home-page .customer-links h3, .customer-links a {
    font-size: 1.125rem;
}

.home-page .customer-links h3 {
    color: rgb(var(--dark-blue));
    font-family: var(--SRPsans-Bold);
    margin: 0 0 0.5rem;
}

.home-page .customer-links li {
    margin-bottom: 0 !important;
}

.home-page .customer-links a {
    color: #000;
    display: block;
    font-family: var(--SRPsans-Medium);
}

.home-page .aerial-shot-bg {
    background-image: url(../images/homepage/Territory_Map_Aerial_Full.jpg);
    background-position-x: 75%;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.home-page .customer-links {
    padding: 1.5rem 1.5rem 0;
}

    .home-page .customer-links > .services {
        width: 100%;
    }

.home-page .territory-link {
    min-height: 150px;
}

    .home-page .territory-link a {
        background: rgb(0,0,0,0.7);
        color: #fff;
        font-family: var(--SRPsans-Bold);
        font-size: .938rem;
    }

    .home-page .territory-link img {
        top: 6px;
        width: 25px;
    }

.home-page .marketing-callouts > div {
    padding: 0;
}

.home-page .marketing-content h2 {
    font-family: var(--SRPsans-Black);
    font-size: 2.188rem;
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
}

.home-page .marketing-content p {
    font-family: var(--SRPsans-Medium);
    font-size: 1.125rem;
    line-height: 1.3;
}

.home-page .rss-feed .topic {
    background-color: rgb(var(--light-gray));
    background-clip: content-box;
}

.home-page .rss-date, .rss-link {
    font-size: .875rem;
}

.home-page .rss-feed .topic > div + div p {
    border-top: 1px solid rgb(var(--light-blue));
    font-family: var(--SRPsans-Medium);
    padding-top: 15px;
}

.home-page .rss-feed p > a {
    color: #000;
    text-decoration: none;
}

@media(min-width: 767px) and (max-width: 960px) {
  	.banner-and-login img {
    	position: relative;
    	left: 60px;
	}
}

@media(min-width: 576px) {
    .home-page .banner-and-login > div {
        overflow: hidden;
    }

    .home-page .quick-access-buttons .btn {
        padding: 15px;
        width: 25%;
    }

    .home-page .quick-access-buttons a {
        color: rgb(var(--dark-blue));
    }

        .home-page .quick-access-buttons a:hover {
            background-color: rgb(var(--light-blue));
            border-color: rgb(var(--light-blue));
            color: #fff;
        }

    .home-page .marketing-content {
        position: absolute;
    }

    .home-page .marketing-content {
        top: 35px;
        left: 50px;
    }

        .home-page .marketing-content h2, .home-page #page-content .marketing-content p {
            color: #fff;
        }

        .home-page .marketing-content h2 {
            width: 60%;
        }

        .home-page .marketing-content p {
  margin: .6rem 0 .8rem;
            width: 55%;
        }
  
  .home-page .marketing-callouts .marketing-content p {
  margin: .6rem 0 1rem;
            width: 50%;
        }
}

@media(min-width: 768px) {
  p {
    font-family: var(--SRPsans-Light);
}
  
    .home-page .banner-and-login > div {
        background-color: rgb(var(--light-gray));
    }

    .home-page .not-on-myaccount {
        position: absolute;
        top: 88px;
        width: 290px;
    }

    .home-page .banner-and-login .logged-in {
        background-position: 90% 55px;
    }

    /*** Sets each div to be one-third of the width minus the margin of the gutters ***/
    .home-page .customer-links > .services {
        width: calc((100% - 155px) / 3);
    }

    .home-page .divider-div {
        background: black;
        width: .05rem;
        margin: 0 2.3rem;
    }

    .home-page .aerial-shot-bg {
        background-size: contain;
    }

    .home-page .territory-link a {
        left: -10px;
    }

    .home-page .territory-link img {
        right: -25px;
        top: -25px;
        width: 40px;
    }

    .home-page .marketing-callouts > div:first-child {
        padding-left: 0;
        padding-right: 5px;
    }

    .home-page .marketing-callouts > div + div {
        padding-left: 5px;
        padding-right: 0;
    }
}

@media(min-width: 991px) {  
    .home-page .not-on-myaccount {
        top: 88px;
    }

    .home-page .customer-links {
        padding: 3rem 3rem 0;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .home-page .customer-links > .services {
        width: calc((100% - 90px) / 2);
        margin: 0 15px;
    }

    .home-page .marketing-callouts .col-md-6 {
        margin-bottom: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home-page .marketing-callouts .marketing-content {
        top: 20px;
        left: 30px;
    }

    .home-page .marketing-callouts h2 {
        font-size: 2.088rem;
        width: 90%;
    }

    .home-page .marketing-callouts p, .home-page .marketing-callouts .marketing-content p {
        width: 70%;
    }
}

@media (min-width: 768px) and (max-width: 850px) {
    .home-page .marketing-callouts .marketing-content {
        top: 10px;
    }

    .home-page .marketing-callouts p, .home-page .marketing-callouts .marketing-content p {
        width: 95%;
    }
}

@media(max-width: 576px) {
    .home-page .banner-content img {
        max-width: 100%;
        height: auto;
    }

    .home-page .quick-access-buttons .btn {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.188rem;
        padding-bottom: 25px;
        padding-top: 25px;
        width: 100%;
    }

    .home-page .marketing-content {
      padding: 30px;
      margin-bottom: 25px;
    }

        .home-page .marketing-content h2 {
            color: rgb(var(--dark-blue));
        }
  
  .home-page .marketing-callouts .marketing-content {    
        border-bottom: 1px solid silver;        
  }

    .home-page .mobile-quick-access-buttons {
    }
}

@media(max-width: 768px) {
    main .container.home-page {
        padding-left: 0;
        padding-right: 0;
    }

    .home-page .banner-and-login #loginForm {
        border-bottom: none;
        border-color: #000;
    }

    .home-page .banner-content {
        margin-top: 15px;
    }

    .home-page .customer-links > div {
        border-top: 1px solid;
        padding-top: 20px;
    }

    .home-page .territory-link a {
        width: 100%;
    }
}


/***********************************************************************/
/***********************************************************************/
/**    Edit with care, past this point is stuff from other sources    **/
/***********************************************************************/
/***********************************************************************/

/**** bar chart styles ****/
.srp-bar-charts .nav.nav-tabs .nav-item .nav-link {
    border: none;
    border-radius: 0;
    color: rgb(var(--light-blue));
    cursor: pointer;
    text-decoration: none;
}

    .srp-bar-charts .nav.nav-tabs, .srp-bar-charts .nav.nav-tabs .nav-item .nav-link:hover {
        border: none;
    }

        .srp-bar-charts .nav.nav-tabs .nav-item .active {
            background-color: rgb(var(--light-blue));
            color: #fff;
        }

.srp-bar-charts .tab-content {
    border-top: 3px solid rgb(var(--light-blue));
}

.lines {
    height: 100%;
    position: relative;
}

.line {
    height: inherit;
    width: 2px;
    position: absolute;
    background: rgba(238, 238, 238, 0.6);
}

    .line.l--0 {
        left: 0;
    }

    .line.l--25 {
        left: 25%;
    }

    .line.l--50 {
        left: 50%;
    }

    .line.l--75 {
        left: 75%;
    }

    .line.l--100 {
        left: calc(100% - 1px);
    }

.line__label {
    display: block;
    width: 100px;
    text-align: center;
    position: absolute;
    bottom: -20px;
    right: -50px;
}

    .line__label.title {
        text-transform: uppercase;
        font-weight: bold;
    }

.chart {
    font-family: var(--SRPsans-Light);
    margin: 30px 0 0;
}

    .chart:first-child {
        margin: 0;
    }

.chart__title {
    display: block;
    font-size: 0.7rem;
    margin: 10px 0 10px;
    opacity: 0;
    animation: 1s anim-lightspeed-in ease forwards;
}

.chart--prod .chart__title {
    animation-delay: 3.3s;
}

.chart--design .chart__title {
    animation-delay: 4.5s;
}

.chart--horiz {
    left: 15px;
    position: relative;
    width: 85%;
}

#page-content .srp-bar-charts .nav-item {
  margin-bottom: 0;
}

#page-content .chart__bar {
    animation: 1s anim-lightspeed-in ease forwards;
    background: rgb(var(--light-blue));
    font-size: .7rem;
    margin-bottom: 3px;
    opacity: 0;
    padding: 5px 10px;
}

.chart--dev .chart__bar:nth-of-type(13) {
    animation-delay: 3.1s;
}

.chart--dev .chart__bar:nth-of-type(12) {
    animation-delay: 2.9s;
}

.chart--dev .chart__bar:nth-of-type(11) {
    animation-delay: 2.7s;
}

.chart--dev .chart__bar:nth-of-type(10) {
    animation-delay: 2.5s;
}

.chart--dev .chart__bar:nth-of-type(9) {
    animation-delay: 2.3s;
}

.chart--dev .chart__bar:nth-of-type(8) {
    animation-delay: 2.1s;
}

.chart--dev .chart__bar:nth-of-type(7) {
    animation-delay: 1.9s;
}

.chart--dev .chart__bar:nth-of-type(6) {
    animation-delay: 1.7s;
}

.chart--dev .chart__bar:nth-of-type(5) {
    animation-delay: 1.5s;
}

.chart--dev .chart__bar:nth-of-type(4) {
    animation-delay: 1.3s;
}

.chart--dev .chart__bar:nth-of-type(3) {
    animation-delay: 1.1s;
}

.chart--dev .chart__bar:nth-of-type(2) {
    animation-delay: 0.9s;
}

.chart--dev .chart__bar:nth-of-type(1) {
    animation-delay: 0.7s;
}

.srp-bar {
    background: rgb(var(--dark-blue)) !important;
}

.chart__label {
    font-weight: 700;
    color: white;
}

    .chart__label > span {
        background: #fff;
        color: #333;
        font-family: var(--SRPsans-Bold);
        left: -45px;
        position: absolute;
        text-align: right;
        width: 38px;
    }

/* Animates the bar charts sliding in */
@keyframes anim-lightspeed-in {
    0% {
        transform: translateX(-200%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* End bar chart styles */

/* Image slider styles */
.icv {
    position: relative;
    overflow: hidden;
    cursor: row-resize
}

.icv__icv--vertical {
    cursor: row-resize
}

.icv__icv--horizontal {
    cursor: col-resize
}

.icv__img {
    pointer-events: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: none;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    top: 0;
    display: block
}

.icv__is--fluid .icv__img {
    display: none
}

.icv__img-a {
    height: auto;
    position: static;
    z-index: 1;
    left: 0px
}

.icv__img-b {
    height: 100%;
    position: absolute;
    z-index: 2;
    left: auto;
    right: 0px;
    width: auto
}

.icv__icv--vertical .icv__img-b {
    width: 100%;
    height: auto
}

.icv__imposter {
    z-index: 4;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%
}

.icv__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 3
}

.icv__is--fluid .icv__wrapper, .icv__icv--vertical .icv__wrapper {
    width: 100% !important
}

.icv__is--fluid .icv__wrapper, .icv__icv--horizontal .icv__wrapper {
    height: 100% !important
}

.icv__fluidwrapper {
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.icv__control {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    top: 0px;
    z-index: 5
}

.icv__icv--vertical .icv__control {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    left: 0;
    width: 100%
}

.icv__control-line {
    height: 50%;
    width: 2px;
    z-index: 6
}

.icv__icv--vertical .icv__control-line {
    width: 50%
}

.icv__theme-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    -webkit-transition: all 0.1s ease-out 0s;
    transition: all 0.1s ease-out 0s;
    z-index: 5
}

.icv__icv--vertical .icv__theme-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.icv__arrow-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.1s ease-out 0s;
    transition: all 0.1s ease-out 0s
}

.icv__arrow-a {
    -webkit-transform: scale(1.5) rotateZ(180deg);
    transform: scale(1.5) rotateZ(180deg);
    height: 20px;
    width: 20px;
    -webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.33));
    filter: drop-shadow(0px -3px 5px rgba(0,0,0,0.33))
}

.icv__arrow-b {
    -webkit-transform: scale(1.5) rotateZ(0deg);
    transform: scale(1.5) rotateZ(0deg);
    height: 20px;
    width: 20px;
    -webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.33));
    filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.33))
}

.icv__circle {
    width: 50px;
    height: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 999px
}

.icv__label {
    position: absolute;
    bottom: calc(50% - 18px);
    z-index: 12;
    background: rgba(0,0,0,0.33);
    color: white;
    border-radius: 3px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
}

    .icv__label.vertical {
        bottom: auto;
        left: 1rem
    }

    .icv__label.on-hover {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: 0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22);
        transition: 0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22)
    }

.icv:hover .icv__label.on-hover {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.icv__label-before {
    left: 1rem
}

.icv__label-after {
    right: 1rem
}

.icv__label-before.vertical {
    top: 1rem
}

.icv__label-after.vertical {
    bottom: 1rem;
    right: auto
}

.icv__body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
/* End image slider styles */

/* Landing Page Hero Start */
#heroHeader {
  background-size: cover;
  height: 500px;
  position: relative;
}

#heroHeader .row {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  margin-right: 0;
}

#heroHeader .mobile-image {
  display: none;
}

#heroHeader .mobile-image img {
  height: auto;
  max-width: 100%;
}

#heroHeader .heading-wrap {
  background-color: #fff;
  padding: 30px;
}

#heroHeader .heading-wrap h1 {
  font-size: 40px;
  padding-bottom: 15px;
  font-family: var(--SRPsans-Bold);
  font-weight: 700;
  line-height: 2.75rem;
}

#heroHeader .heading-wrap p {
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  font-family: var(--SRPsans-Light);
}

@media only screen and (max-width: 991px) {
  #heroHeader .heading-wrap h1 {
    font-size: 30px;
  }

  #heroHeader .heading-wrap p {
    font-size: 18px;
  }
}

@media only screen and (max-width: 575px) {
  #heroHeader .mobile-image {
    display: block;
  }

  #heroHeader .container {
    padding: 0;
  }

  #heroHeader {
    height: auto;
  }

  #heroHeader .row {
    position: relative;
    top: auto;
    transform: none;
    margin-left: 0;
    margin-right: 0;
  }

  #heroHeader {
    background-image: none;
  }

  #heroHeader .row {
    margin-left: 0;
  }

  #heroHeader .row {
    width: 100%;
  }

  #heroHeader .heading-wrap {
    padding: 30px 0;
  }

  #heroHeader .heading-wrap h1 {
    font-size: 40px;
    text-align: center;
  }

  #heroHeader .heading-wrap p {
    font-size: 20px;
    text-align: center;
  }
}

@media only screen and (max-width: 480px) {
  #heroHeader .heading-wrap h1 {
    font-size: 36px;
  }

  #heroHeader .heading-wrap p {
    font-size: 16px;
  }
}
/* Landing Page Hero End */

/* Steps Start */
.steps {
  padding: 50px 0;
  background: #ecf9ff;
}

.steps .col-md-4 {
  position: relative;
}

.steps .col-md-4 .col-inner {
  padding: 0 50px;
}

.steps .col-md-4 span {
  font-family: var(--SRPsans-Bold);
  display: block;
  font-size: 21px;
  font-weight: 700;
}

.steps .col-md-4 p {
  font-family: var(--SRPsans-Light);
  font-size: 18px;
}

.steps .col-md-4 img {
  height: 150px;
  width: 150px;
}

.steps .col-md-4 svg {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .steps .col-md-4 svg {
    display: none;
  }
}
/* Steps End */

/* Dynamic House Start */
#dynamicHouse {
  margin: 75px 0;
}

#dynamicHouse .row {
  position: relative;
  margin-left: 0;
  margin-right: 0;
}

#dynamicHouse .col-lg-6 {
  text-align: start;
  position: relative;
}

#dynamicHouse .col-lg-6 img {
  height: 240px;
  display: block;
  margin: auto;
  z-index: -1;
}

#dynamicHouse .nav-pills .nav-item button,
.mobile-row .col-wrap .number {
  border-radius: 25px;
  border: solid 1px #0c508e;
  font-size: 24px;
  width: 38px;
  height: 38px;
  padding: 0px;
  color: #0c508e;
  background: #fff;
}

#dynamicHouse .nav-pills .nav-item button.active,
.mobile-row .col-wrap .number.active {
  background-color: #0c508e;
  color: #fff;
}

#dynamicHouse .nav-pills .nav-item {
  z-index: 1;
}

#dynamicHouse .nav-pills .nav-1 {
  position: absolute;
  left: 0;
  top: 40px;
}

#dynamicHouse .nav-pills .nav-2 {
  position: absolute;
  left: 42%;
  top: 15px;
}

#dynamicHouse .nav-pills .nav-3 {
  position: absolute;
  right: 40px;
  top: 40px;
}

#dynamicHouse .nav-pills .nav-4 {
  position: absolute;
  left: 42%;
  bottom: -15px;
}

#dynamicHouse h4 {
  font-size: 18px;
  font-family: var(--SRPsans-Bold);
  color: rgb(18, 85, 144);
}

#dynamicHouse p {
  font-size: 16px;
  font-family: var(--SRPsans-Light);
}

#dynamicHouse .house-link {
  color: #0c508e;
}

/* Mobile */

.mobile-row {
  display: none;
}

.mobile-row .col-wrap {
  position: relative;
}

.mobile-row .col {
  border-bottom: 1px solid rgb(var(--light-gray));
  padding-right: 50px;
}

.mobile-row hr {
  width: 90%;
  margin: auto;
}

.mobile-row .col-wrap .number {
  position: absolute;
  left: 10px;
  bottom: 50%;
  display: none;
}

.mobile-row .col-wrap img {
  display: block;
  margin: auto;
  max-width: 150px;
}

.padding-left {
  padding-left: 25px;
}

@media only screen and (max-width: 1400px) {
  #dynamicHouse .nav-pills .nav-1 {
    left: 3%;
    top: 40px;
  }

  #dynamicHouse .nav-pills .nav-2 {
    top: 10px;
  }

  #dynamicHouse .nav-pills .nav-3 {
    top: 35px;
  }

  #dynamicHouse .col-lg-6 img {
    height: 240px;
  }
}

@media only screen and (max-width: 1199px) {
  #dynamicHouse .nav-pills .nav-1 {
    left: 5%;
    top: 45px;
  }

  #dynamicHouse .nav-pills .nav-2 {
    left: 43%;
    top: 20px;
  }

  #dynamicHouse .nav-pills .nav-3 {
    right: 35px;
    top: 40px;
  }

  #dynamicHouse .nav-pills .nav-4 {
    left: 43%;
  }

  #dynamicHouse .col-lg-6 img {
    height: 200px;
  }

  #dynamicHouse .nav-pills .nav-item button {
    font-size: 18px;
    width: 30px;
    height: 30px;
  }
}

@media only screen and (max-width: 991px) {
  #dynamicHouse {
    padding: 0 75px;
  }

  #dynamicHouse h4 {
    font-size: 16px;
  }

  #dynamicHouse p {
    font-size: 15px;
  }

  #dynamicHouse .col-lg-6 img {
    height: 225px;
  }

  #dynamicHouse .nav-pills .nav-1 {
    left: 10%;
    top: 50px;
  }

  #dynamicHouse .nav-pills .nav-2 {
    left: 44%;
    top: 20px;
  }

  #dynamicHouse .nav-pills .nav-3 {
    right: 12%;
  }

  #dynamicHouse .nav-pills .nav-4 {
    left: 44%;
  }

  #pills-tabContent {
    text-align: start !important;
  }
}

@media only screen and (max-width: 767px) {
  #dynamicHouse {
    padding: 25px 50px 0 50px;
  }

  #dynamicHouse .col-lg-3 {
    padding-top: 50px;
  }

  #dynamicHouse .col-lg-6 img {
    height: 150px;
  }

  #dynamicHouse .col-lg-9 {
    text-align: center;
  }

  #dynamicHouse .nav-pills .nav-1 {
    left: 13%;
    top: 25px;
  }

  #dynamicHouse .nav-pills .nav-2 {
    left: 45%;
    top: 10px;
  }

  #dynamicHouse .nav-pills .nav-3 {
    right: 13%;
    top: 25px;
  }

  #dynamicHouse .nav-pills .nav-4 {
    bottom: -25px;
  }

  #dynamicHouse .tab-content {
    text-align: start !important;
  }
  
  #ctaBar {
  padding-bottom: 60px;
}
}

@media only screen and (max-width: 575px) {
  .desktop-row {
    display: none;
  }

  .mobile-row {
    display: block;
  }

  #dynamicHouse {
    margin: 0;
    padding: 0;
  }
}

/* Dynamic House End */

/* Call to Action Bar Start */
#ctaBar {
  background: linear-gradient(180deg, #0086be -19.59%, #0c508e 100%), #0c508e;
}

#ctaBar .container {
  padding: 50px 0;
}

#ctaBar h2 {
  color: #fff;
  text-align: start;
  font-size: 30px;
  font-family: var(--SRPsans-Bold);
  margin: 45px 0;
}

#ctaBar .row {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

#ctaBar .btn-outline-primary {
  color: var(--light-blue);
  background: #fff;
  border-color: transparent;
}

#ctaBar .btn-outline-primary:hover {
  background: var(--light-blue);
  color: #fff;
  border-color: #fff;
}

@media only screen and (max-width: 767px) {
  #ctaBar h2 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 25px;
  }

  #ctaBar .btn.btn-primary {
    margin-bottom: 25px;
  }
}
/* Call to Action Bar End */