:root {
    --banner-offset: 0px;
}

/* reset */
html, body {
    margin: 0;
}
    


/* fixed top banner */
.banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    width: 100%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    padding: 16px 0;
    align-content: center;
}

.banner__inner {
    text-align: center;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 24px;
}

/* text */
.banner__text {
    text-align: center;
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    font-size: 0.8rem!important;
}

/* controls */
.banner__more, .banner__less {
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;    
}

/* push page/header down only when offset is active */
body.has-banner {
    padding-top: var(--banner-offset) !important;
}

    body.has-banner #siteHeader {
        top: var(--banner-offset) !important;
        bottom: auto !important;        
    }



/* ---------- MOBILE ONLY ---------- */
@media (max-width: 599px) {

    html body.has-banner #form1 > main,
    html body.has-banner main {
        padding-top: 60px !important;        
    }

    body.has-banner #siteHeader {
        position: absolute !important;
    }

    .banner__inner {
        padding: 0 48px;
    }

    .banner__line {
        position: relative;
    }

    .banner__text {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        padding-right: 92px;
    }

    .banner__more {
        position: absolute;
        right: 10px;
        bottom: 6px;
        padding-left: 8px;
    }

    .banner__less {
        display: none;
        margin-left: 6px;
    }

    .banner.expanded .banner__text {
        display: block !important;
        -webkit-line-clamp: initial !important;
        padding-right: 0;
    }

    .banner.expanded .banner__more {
        display: none;
    }

    .banner.expanded .banner__less {
        display: inline;
    }
}

/* ===== Tablet range: 600px to 1020px ===== */
@media (min-width: 600px) and (max-width: 1020px) {

    body.has-banner #siteHeader {
        top: 25px !important;
    }

    html body.has-banner #form1 > main,
    html body.has-banner main {
        margin-top: 25px !important;
    }

    .banner__more, .banner__less {
        display: none !important;
    }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 1021px) {

    body.has-banner #siteHeader {
        top: 0 !important;
    }

    .banner__more, .banner__less {
        display: none !important;
    }
}