/* ---------------------------------------------------
                      AGC 2020
----------------------------------------------------*/
/* ----------------------------
            BANNER
-----------------------------*/

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

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

#agc20 section#banner > img {
    display: block;
    position: relative;
    width: auto;
    height: 20em;
    padding-bottom: 1.25em;
}

#agc20 section#banner > p {
    display: block;
    position: relative;
    color: white;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}

#agc20 section#banner > div.overlay-circle-thin {
    width: 300px;
    height: 300px;
    top: 0;
    bottom: -1376px;
    left: 0;
    right: -980px;
}

#agc20 section#banner > div.overlay-slash {
    width: 200px;
    height: 200px;
    top: -695px;
    bottom: 0;
    left: 0;
    right: -944px;
}

#agc20 section#banner > div.overlay-slash ~ div.overlay-slash{
    width: 200px;
    height: 200px;
    top: -520px;
    bottom: 0;
    left: 0;
    right: -1070px;
}

@media only screen and (min-width: 1080px) {
    
    #agc20 section#banner > div.overlay-circle-thin {
        width: 200px;
        height: 200px;
        top: 0;
        bottom: -682px;
        left: 0;
        right: -360px;
    }
    
    #agc20 section#banner > div.overlay-slash {
        width: 150px;
        height: 150px;
        top: 0;
        bottom: -600px;
        left: 0;
        right: -864px;
    }
    
    #agc20 section#banner > div.overlay-slash ~ div.overlay-slash{
        width: 150px;
        height: 150px;
        top: 0;
        bottom: -600px;
        left: 0;
        right: -1050px;
    }
}