.patrons > div {
    overflow: hidden;
    box-sizing: content-box;
}

    .patrons > div > div {
        margin: 0px;
        padding: 0px;
        float: left;
        text-align: center;
        box-sizing: content-box;
    }

        .patrons > div > div > span {
            display: inline-block;
            margin: 5%;
            padding: 0px;
            height: 90%;
            vertical-align: middle;
            box-sizing: content-box;
        }

        .patrons > div > div > img {
            vertical-align: middle;
            max-height: 100%;
            max-width: 100%;
            box-sizing: content-box;
        }

.gold > div {
    width: 50%;
    height: 200px;
}

.silver > div {
    width: 50%;
    height: 150px;
}

.bronze > div {
    width: 33%;
    height: 100px;
}

.special > div {
    width: 50%;
    height: 100px;
}

.noImage {
    color: #82592F;
    font-family: Georgia, Garamond, Palatino, Serif;
    font-weight: bold;
    font-size: 1.0em;
}

/* ****************************** */
/* ****** Media Queries ********* */
/* ****************************** */

/* Since older browsers can't handle media queries, these are applied to any browser that can handle media queries. These are the basic styles that make the site responsive.
    - Min-width value removed from frame.
    - Site Menu is in responsive mode
    - Side Menu is in responsive mode
    - search box and social media are below header.
    --- All patron levels to 1 across. */
@media only screen and (min-width:0em) {
    /* Move everything to 1 column when we get smaller */
    .gold > div {
        width: 100%;
        height: 200px;
    }

    .silver > div {
        width: 100%;
        height: 150px;
    }

    .bronze > div {
        width: 100%;
        height: 100px;
    }

    .special > div {
        width: 100%;
        height: 100px;
    }

    .patrons > div > div > span {
        margin: 0;
    }
}

/* very small.  Most phones will be around this size.
    - search box and social media are in header. */
@media only screen and (min-width:25em) /* 400px - 25em */
{
    .bronze > div {
        width: 50%;
        height: 100px;
    }
}

/* Small. Some phone in landscape mode and most tablets.
    - Side Menu is in normal mode.
    --- Silver level to 2 across.
    - */
@media only screen and (min-width:37.5em) /* 600px - 37.5em */
{
    .silver > div {
        width: 50%;
        height: 150px;
    }
}

/* Medium
    -- Bronze level to 3 across
    - */
@media only screen and (min-width:50em) /* 800px - 50em */
{
    .bronze > div {
        width: 33%;
        height: 100px;
    }
}

/* Standard desktop site size
    - Site Menu is in normal mode.
    - */
@media only screen and (min-width:60em) /* 960px - 60em*/
{
}

/* Very Large
    - */
@media only screen and (min-width:120em) /* 1920px - 120em */
{
}

/* ****************************** */
/* **** END Media Queries ******* */
/* ****************************** */