/* bannerCMS.css */
/* Darker overlay behind CTA */
body #banner header {
    background: rgba(27, 27, 27, 0.9); /* was ~0.75 in main.css */
    color: #fff;
}


body #banner {
    position: relative;
    overflow: hidden;
}

    body #banner img.banner-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    body #banner header {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }

/* media-query heights */
@media screen and (max-width: 1680px) {
    body #banner {
        height: 24em;
    }
}

@media screen and (max-width: 1280px) {
    body #banner {
        height: 20em;
    }
}

@media screen and (max-width: 840px) {
    body #banner {
        height: 20em;
    }
}

@media screen and (max-width: 736px) {
    body #banner {
        height: 18em;
    }
}

@media screen and (max-width: 480px) {
    body #banner {
        height: 20em;
    }
        body #banner header {
            background: rgba(15, 15, 15, 0.95);
        }
}