/* Styles for the dla animated banner on the front page */


div#banner-graphic {
    height: 225px;
}

p#slogan {
    position: absolute;
    top: 79px;
    }

div#banner-controls {
    position: absolute;
    top: 68px;
    right: 0px;
}

div#banner-controls button {
    width: 50px;
    position: absolute;
    visibility: visible;
    cursor: pointer;
}

div#banner-controls button#banner-run-button {
    top: 10px;
    right: 10px;
}

div#banner-controls button#about-the-banner-button {
    top: 10px;
    right: 65px;
}

div#banner-controls button
{
    opacity: 0.50;
}

div#banner-controls button:hover
{
    opacity: 1.0;
}



/* MEDIA QUERIES BLOCKS */

/* W  I  D  E  screens */

@media screen and (min-width: 940px)
{
    div#banner-content {
        width: 900px;
        height: 225px;
        position: relative;
    }
}




@media screen and (660px < width < 940px)
{
    div#banner-content {
        width: 640px;
        height: 225px;
        position: relative;
    }
}


@media screen and (width < 660px)
{
    div#banner-content {
        /* width: 100%; */
        height: 225px;
        position: relative;
    }

    div#flag,
    div#flag a,
    div#flag a:visited
    {
        font-family: var(--sans-fonts);
        font-size: 37px;
        line-height: 0px;
        margin: 0 0 30px 0;
        padding-top: 18px;
        color: var(--banner-gray);
        font-weight: bold;
        text-decoration: none;
    }

    div#banner-controls {
        top: 47px;
    }

}