* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out
}

.ranking {
    position: relative;
    height: 0;
    top: 0;
    left: 0
}

.promoLogo {
    margin: -50px 1.2em .6em;
    z-index: 999
}

.mod-logo {
    margin: -50px 1.2em 0 !important
}

.badgeOverLay {
    background: rgba(0,0,0,.5);
    z-index: 999;
    width: 100%;
    padding: .6em 1.2em;
    margin-top: -40px
}

.mod-overlay {
    width: 97% !important;
    height: 41px !important
}

.topSpotText {
    color: white;
    font-size: 1.7em;
    text-shadow: 3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important;
}

.BannerSpot {
    width: 100%;
    padding-top: 33.33%
}

.TopSpot {
    margin-top: -20%
}

.SecondarySpot {
    width: 97%;
    margin-top: -80px;
    border-radius: .5em 0 0 .5em
}

.ribbon-container {
    position: absolute;
    top: 45px;
    left: -29px;
    overflow: visible;
    font-size: 18px;
    line-height: 18px
}

    .ribbon-container a {
        display: block;
        padding: 20px;
        position: relative;
        background: #3a57a3;
        overflow: visible;
        height: 58px;
        margin-left: 29px;
        color: #fff;
        text-decoration: none;
        border-radius: 0 0 0 2px
    }

        .ribbon-container a:after {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            bottom: -15px;
            left: 0;
            border-top: 15px solid #3a53a1;
            border-left: 15px solid transparent
        }

        .ribbon-container a:before {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            top: 0;
            right: -29px;
            border-top: 29px solid #3a57a3;
            border-bottom: 29px solid #3a57a3;
            border-right: 29px solid transparent;
            border-left: 29px solid transparent
        }

.ribbon-container2 {
    position: absolute;
    top: 5px;
    left: -29px;
    overflow: visible;
    font-size: 14px;
    line-height: 14px
}

    .ribbon-container2 a {
        display: block;
        padding: 13px;
        position: relative;
        background: #3a57a3;
        overflow: visible;
        height: 40px;
        margin-left: 29px;
        color: #fff;
        text-decoration: none;
        border-radius: 0 0 0 2px
    }

        .ribbon-container2 a:after {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            bottom: -15px;
            left: 0;
            border-top: 15px solid #3a53a1;
            border-left: 15px solid transparent
        }

        .ribbon-container2 a:before {
            content: "";
            height: 0;
            width: 0;
            display: block;
            position: absolute;
            top: 0;
            right: -20px;
            border-top: 20px solid #3a57a3;
            border-bottom: 20px solid #3a57a3;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent
        }

@media only screen and (max-width:992px) {
    .topSpotText { 
        font-size: 1.5em;
    }

    .ribbon-container {
        font-size: 14px;
        line-height: 14px
    }

        .ribbon-container a {
            padding: 13px;
            height: 40px;
            margin-left: 29px
        }

            .ribbon-container a:after {
                bottom: -15px;
                left: 0
            }

            .ribbon-container a:before {
                top: 0;
                right: -20px;
                border-top: 20px solid #3a57a3;
                border-bottom: 20px solid #3a57a3;
                border-right: 20px solid transparent;
                border-left: 20px solid transparent
            }
}


/*--- Badges ---*/

.search-result-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
}

    .search-result-logo img {
        display: block;
        max-height: 58px; /* Adjust as needed */
        width: auto;
        height: auto;
    }

    /* Base badge styling: position and size the badge area, no background set here */
    .search-result-logo.badge::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 15px; /* Adjust size as needed */
        height: 15px; /* Adjust size as needed */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* Specific badge images based on the class */
    .search-result-logo.gold-badge::after {
        background-image: url('/Images/Badges/LargeGoldSponsor.gif');
    }

    .search-result-logo.silver-badge::after {
        background-image: url('/Images/Badges/LargeSilverSponsor.gif');
    }

    .search-result-logo.bronze-badge::after {
        background-image: url('/Images/Badges/LargeBronzeSponsor.gif');
    }


.badges-container {
    margin-top: 10px; /* some spacing above the badges */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px; /* spacing between badges */
    padding-left: 6px;
}

/* Base badge styling */
.supporter-badge {
    display: inline-block;
    width: 20px; /* Adjust width as needed */
    height: 20px; /* Adjust height as needed */
    font-size: 16px; /* Adjust font size for the emoji */
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}

    /* Insert the appropriate medal emoji */
    .supporter-badge.gold-badge::after {
        content: "🥇";
    }

    .supporter-badge.silver-badge::after {
        content: "🥈";
    }

    .supporter-badge.bronze-badge::after {
        content: "🥉";
    }


/* Optional: If you want badges to be even smaller on mobile, use a media query */
@media (max-width: 576px) {
    .badge {
        width: 16px;
        height: 16px;
    }
}