/* ---------------------------------------------------
                      AGC 2022
----------------------------------------------------*/

/* ----------------------------
            BANNER
-----------------------------*/

#agc22.archive section#banner {
    background-image: url("../img/agc22/slider-slim.jpg");
}

#agc22.event section#banner, 
#agc22.recap section#banner {
    background-image: url("../img/agc22/slider.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    background-color: black;
    padding: 2em;
    padding-bottom: 10em;
    height: calc(100vh - var(--nav-bar-height));
}

@supports (background-image: -webkit-image-set(url("../img/agc22/webp/slider.webp") 1x)) {
    #agc22.event section#banner,
    #agc22.recap section#banner {
        background-image: -webkit-image-set(url("../img/agc22/webp/slider.webp") 1x) 
    }
}

#agc22.recap section#banner > img, 
#agc22.event section#banner > img {
    display: block;
    position: relative;
    width: auto;
    height: 16.5em;
    padding-top: 2.7em;
    padding-bottom: 1.5em;
    -webkit-filter: drop-shadow(0 0 1em rgba(255, 255, 255, 0.4));
    filter: drop-shadow(0 0 1em rgba(255, 255, 255, 0.4));
}

#agc22.recap section#banner > h3, 
#agc22.event section#banner > h3 {
    display: block;
    position: relative;
    color: white;
    font-weight: bold;
    font-size: 2em;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
    text-shadow : 1px 1px 10px #1c1c1c, 1px 1px 5px rgba(255,255,255,0.1);
}

#agc22.recap section#banner > p, 
#agc22.event section#banner > p {
    display: block;
    position: relative;
    color: white;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 0.75em;
    margin: 0;
    text-shadow: 2px 2px 3px black;
}

/* ----------------------------
            OVERRIDES
-----------------------------*/

.recap section#sessions #background-shape-red-box {
    top: 536px;
}

@media only screen and (min-width: 1080px) {
    .recap section#sessions #background-shape-red-box {
        top: 288px;
    }
}