.bookingBannerSubNav {
    background: #fff;
    border: none;
    border-radius: 0 0 5px 5px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5px;
    grid-template-areas: "header progressBar";
    /* IE Support*/
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr 5px 1fr;
}

#bannerHeaderMobile {
    display: none;
}

#bannerHeader {
    display: block;
    padding: 2px 20px 2px 20px;
    grid-area: header;
    font-family: var(--auro-font-family-default);
    color: var(--auro-color-text-primary-on-light);
    font-weight: 300;
    font-size: 28px;
    /* IE Support */
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}

#bannerProgressBar {
    padding-top: 5px; /** added from before */
    grid-area: progressBar;
    /* IE Support */
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
}

.containerx .statusBarCopy {
    width: 71px;
}

#bannerProgressLine {
    background: #dcdcdc;
    height: 1px;
    position: static;
    margin: 0px auto;
}

#bannerProgressBar {
    display: table;
    width: 100%;
    margin-top: 15px;
}

#bannerProgressBulletContainer {
    width: 100%;
    display: flex;
    margin-top: -5px;
    flex-direction: row;
}

#bannerProgressBar .statusItem {
    text-align: center;
    flex: 1;
    min-width: 60px;
}

#bannerProgressBar .dot {
    height: 8px;
    width: 8px;
    display: block;
    border-radius: 50%;
    background: #dcdcdc;
    margin: 0px auto;
}

    #bannerProgressBar .dot.on {
        background: #01426a;
    }

.containerx #bannerProgressBar .statusBarCopyOn,
.containerx #bannerProgressBar .statusBarCopyOff {
    margin: 0px;
    display: inline-block;
    padding: 0px;
    width: auto;
    float: none;
}

.bannerProgressBar.buyGiftCertificates .statusBarLine {
    width: 76px;
}

.bannerProgressBar.buyGiftCertificates .statusBarCopy {
    text-align: center;
    width: 86px;
    list-style: none;
}

@media only screen and (max-width: 660px) {
    .bookingBannerSubNav {
        grid-template-columns: 1fr;
        grid-template-areas: "progressBar" "header";
        /* IE Support */
        -ms-grid-columns: 1fr;
        -ms-grid-rows: auto;
    }

    #bannerProgressBar {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #bannerHeader {
        display: none;
    }

    #bannerHeaderMobile {
        display: block;
        padding: 0px 16px;
        font-family: var(--auro-font-family-default);
        color: var(--auro-color-text-primary-on-light);
        /* IE Support */
        -ms-grid-column-span: 1;
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
}

@media only screen and (max-width: 460px) {
    .bookingBannerSubNav {
        grid-template-columns: 1fr;
        grid-template-areas: "header";
        /* IE Support */
        -ms-grid-columns: 1fr;
        -ms-grid-rows: auto;
    }

    #bannerHeader {
        /* IE Support */
        -ms-grid-column-span: 1;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    
    #bannerProgressBar {
        display: none;
    }
}
/* seatmap page */
#seatsBannerHeader {
    display: block;
    padding: 0 var(--ds-size-300);
    grid-area: header;
}

#seatsBannerHeaderTablet {
    display: none;
}

#seatsBannerHeaderMobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    #seatsBannerHeader {
        display: none;
    }

    #seatsBannerHeaderTablet {
        display: block;
        padding: 0 var(--ds-size-200);
    }

    #seatsBannerHeaderMobile {
        display: none;
    }
}

@media only screen and (max-width: 576px) {
    #seatsBannerHeader {
        display: none;
    }

    #seatsBannerHeaderTablet {
        display: none;
    }

    #seatsBannerHeaderMobile {
        display: block;
        padding: 0 var(--ds-size-200);
    }
}