﻿body.body {
    /*border-top: 5px solid #5A5A5A !important;*/
    padding-top: 0 !important;
}

.container {
    width: 100%;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}

.col-12 {
    width: 100%;
}

.col-11 {
    width: 91.66666667%;
}

.col-10 {
    width: 83.33333333%;
}

.col-9 {
    width: 75%;
}

.col-8 {
    width: 66.66666667%;
}

.col-7 {
    width: 58.33333333%;
}

.col-6 {
    width: 50%;
}

.col-5 {
    width: 41.66666667%;
}

.col-4 {
    width: 33.33333333%;
}

.col-3 {
    width: 25%;
}

.col-2 {
    width: 16.66666667%;
}

.col-1 {
    width: 8.33333333%;
}

.header, .navbar-main {
    display: block !important;
}

.navbar-mob {
    display: none !important;
}

#mainContentDiv {
    /*width: 1200px;*/
    width: 94%;
    margin: 0 auto;
}

.main-content-div-inner {
    width: 100%;
    margin: 0 auto;
}

/*.svg-container {
    transform-origin: top left;
    transition: transform 0.3s ease;
}*/

/* Scale based on screen width */
/*@media (max-width: 1920px) {
    .svg-container {
        transform: scale(1);
    }
}

@media (max-width: 1400px) {
    .svg-container {
        transform: scale(0.9);
    }
}

@media (max-width: 1200px) {
    .svg-container {
        transform: scale(0.85);
    }
}

@media (max-width: 768px) {
    .svg-container {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .svg-container {
        transform: scale(0.6);
    }
}*/

.svg-row {
    display: flex; /* put svgs in a row */
    gap: 1rem; /* spacing between svgs */
    /*justify-content: center;*/ /* center them horizontally */
    align-items: center;
    max-width: 1300px;
}

    .svg-row img {
        /*flex: 0 0 auto;*/ /* don't grow or shrink */
        flex: 1; /* each svg shares available space */
        /**max-width: 150px;*/ /* optional: cap their max width */
        width: 60%;
        /*height: auto;*/ /* keep aspect ratio */
    }

        .svg-row img.venue-options-logo {
            /*max-width: 300px;*/ /* optional: cap their max width */
            width: 140%;
            height: auto;
            /*max-height: 60px;*/ /* or whatever height matches the first page */
            flex: 0 0 auto; /* don’t stretch/shrink */
            /*width: 10%;*/
        }

.flex-spacer {
    flex: 1; /* takes up all remaining space */
    /* This pushes the logo to behave as if other elements were present */
}








.banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    /*border-style: solid;
    border-width: 1px;*/
    margin-left: 4%;
}

    /* Logo */
    .banner img.logo {
        width: 15vw; /* scales with viewport width */
        max-width: 250px; /* don’t get too big */
        min-width: 80px; /* don’t get too small */
        height: auto;
        flex-shrink: 1;
        /*border-style: solid;
        border-width: 1px;*/
    }    
    /* Link icons */
    .banner a img {
        width: 4vw; /* scale with viewport too */
        max-width: 80px; /* keep usable size */
        min-width: 40px;
        height: auto;
        flex-shrink: 1;
        /*border-style: solid;
        border-width: 1px;     */
    }

        .banner a img.wide-svg {
            width: 4.5vw; /* scale with viewport too */
            max-width: 90px; /* keep usable size */
            /*border-color: red;*/
        }

.banner-spacer {
    width: 2vw
}
