/* CMSF Main style sheet */

@import url(reset.css);

/* Begin Media Queries */
@media screen and (max-width: 600px) {
    /* Header */
    .home-hero-box {
        font-size: 1.75rem;
    }
    
    /* Performance */
    .performance-performers,
    .performance-program {
        width: 95%;
    }

    .performance-main-text {
        width: 95%;
    }
}

@media screen and (max-width: 840px) {
    /* Home */
    .home-city-cards a {
        width: 95%;
    }
}

@media screen and (max-width: 870px) {
    /* Home */
    .home-action-tile {
        width: 100%;
    }
}

@media screen and (max-width: 994px) {
    /* Home */
    .home-current-card {
        width: 99%;
    }
    /* Performances */
    .performances-performance-item {
        width: 99%;
    }
    /* Support Us */
    .support-us-block {
        width: 99%;
    }
}

@media screen and (max-width: 1000px) {
    /* Header */
    .photo-hero-box {
        display: none;
    }
}

@media screen and (min-width: 601px) {
    /* Header */
    .home-hero-box {
        font-size: 2.5rem;
    }

    /* Performance */
    .performance-performers,
    .performance-program {
        width: 400px;
    }

    .performance-main-text {
        width: 75%;
    }

        .performance-text-box {
            max-width: 75%;;
        }
}

@media screen and (min-width: 841px) {
    /* Home */
    .home-city-cards a {
        width: 400px;
    }
}

@media screen and (min-width: 995px) and (max-width: 1444px) {
    /* Home */
    .home-current-card {
        width: 470px;
    }
    /* Performances */
    .performances-performance-item {
        width: 470px;
    }
    /* Support Us */
    .support-us-block {
        width: 405px;
    }

}

@media screen and (min-width: 871px) {
    /* Home */
    .home-action-tile-strip {
        display: flex;
        flex-wrap: wrap;
    }

        .home-action-tile {
            width: 33.33%;
        }
}

@media screen and (min-width: 1001px) {
    .performance-image {
        display: none;
    }
}

@media screen and (min-width: 1445px) and (max-width: 1665px) {
    /* Home */
    .home-current-card {
        width: 690px;
    }
    /* Performances */
    .performances-performance-item {
        width: 690px;
    }
    /* Support Us */
    .support-us-block {
        width: 45%;
    }
}

@media screen and (min-width: 1666px) {
    /* Home */
    .home-current-card {
        width: 800px;
    }
    /* Performances */
    .performances-performance-item {
        width: 800px;
    }
    /* Support Us */
    .support-us-block {
        width: 45%;
    }
}
/* End Media Queries */

/* Variables */
:root {
  --brand-red: rgb(210, 35, 51);
  --brand-brick-red: rgb(122, 16, 46);
  --brand-dark-blue: rgb(12, 77, 119);
  --brand-light-blue: rgb(146, 197, 235);
  --brand-gray: rgb(88, 89, 91);
  --brand-slate: rgb(117, 126, 142);
  --brand-yellow: rgb(255, 236, 169);
  --brand-peach: rgb(254, 219, 180);
  --brand-red-transparency: rgb(210, 35, 51, 0.5);
  --brand-brick-red-transparency: rgb(122, 16, 46, 0.5);
  --brand-dark-blue-transparency: rgb(12, 77, 119, 0.5);
  --brand-light-blue-transparency: rgb(146, 197, 235, 0.5);
  --brand-slate-transparency: rgb(117, 126, 142, 0.5);
  --brand-peach-arrow: url('images/cmsf-peach-arrow.svg') no-repeat;
  --brand-dark-blue-arrow: url('images/cmsf-dark-blue-arrow.svg') no-repeat;
  --main-font: "Gelasio", serif;
  --heading-font: "Urbanist", sans-serif;
}

/* General Styles */
html {
	font-family: var(--main-font);
	font-size: 16px;
}

h1 {
    font-family: var(--heading-font);
    font-weight: bold;
}

h2 {
    font-family: var(--heading-font);
    font-weight: bold;
}

h3 {
    font-family: var(--heading-font);
}

p {
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/* Begin styling and transition of the <details> <summary> elements */
summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .plan-your-visit-theatres-box summary::after,
    .theater-directions-box summary::after {
        content: '';
        width: 18px;
        height: 10px;
        background: var(--brand-peach-arrow); /* Up and Down arrow */
        background-size: cover;
        margin-left: 15px;
        transition: 0.5s;
    }

    .news-and-reviews-details-box summary::after {
        content: '';
        width: 18px;
        height: 10px;
        background: var(--brand-dark-blue-arrow); /* Up and Down arrow */
        background-size: cover;
        margin-left: 15px;
        transition: 0.5s;
    }

details[open] > summary::after {
    transform: rotate(180deg);
}

summary::-webkit-details-marker {
    display: none;
}

/* Code for fade-in effects */
details[open] .inner-details {
    animation: fadeIn 2s linear forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* End styling and transition of the <details> <summary> elements */

/* Head */
.header-container {
}

    .top-header-box {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 30px;
    }

        .logo-box {
            width: 300px;
            margin-right: 50px;
        }

            .logo-box img {
                max-width: 100%;
            }

        .main-nav-box {
            display: flex;
            gap: 10px 25px;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: center;
        }

            .main-nav-box a {
                font-size: 1.15rem;
                color: var(--brand-brick-red);
                font-family: var(--heading-font);
                font-weight: bold;
            }

                .active-nav {
                    border-bottom: 2px solid var(--brand-brick-red);
                }

    .head-newsletter-box {
        width: 86px;
        height: 86px;
        border-radius: 70px;
        background: var(--brand-dark-blue);
        text-align: center;
        margin: 0 auto;
    }

        .head-newsletter-box a {
            font-family: var(--heading-font);
            color: #fff;
            position: relative;
            top: 22px;
        }

/* Hero */
.hero-container {
    display: flex;
    height: 300px;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

    .bio-hero-box,
    .home-hero-box,
    .general-hero-box {
        margin: 0 auto;
        width: 70%;
        color: #fff;
        font-weight: bold;
        font-family: var(--heading-font);
        text-align: center;
    }

        .bio-hero-box  h1,
        .general-hero-box h1 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
        }

    .photo-hero-box {
        width: 30%;
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

        .photo-hero-box img {
            display: block;
            height: 100%;
        }

/* Foot */
.foot-container {
    margin-top: 40px;
    padding: 30px 0 3px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

    .foot-top-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 125px;
    }

        .foot-contact-box {
            width: 100%;
            text-align: center;
        }

            .foot-org-box {
                color: #fff;
                font-family: var(--heading-font);
                font-size: 1.35rem;
                margin-bottom: 5px;
            }

            .foot-address-box {
                color: #fff;
            }

                .foot-address-box p {
                    line-height: 23px;
                }

        .foot-newsletter-box {
            width: 110px;
            height: 110px;
            border-radius: 70px;
            background: var(--brand-dark-blue-transparency);
            text-align: center;
        }

            .foot-newsletter-box a {
                color: #fff;
                font-family: var(--heading-font);
                font-size: 1.2rem;
                position: relative;
                top: 30px;
            }

    .foot-identity-box {
        text-align: center;
        margin-top: 30px;
        color: var(--brand-gray);
    }

    .foot-social-links {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 25px;
    }

        .foot-social-links img {
            width: 42px;
        }

    .foot-photo-credits {
        font-size: 0.8rem;
        color: var(--brand-slate);
        text-align: center;
        margin-top: 20px;
    }

/* Home */
.home-top-notification {
    text-align: center;
    margin-top: 40px;
}

    .home-top-notification p,
    .home-top-notification a {
        font-size: 1.4rem;
        font-weight: 500;
        font-family: var(--heading-font);
        color: var(--brand-slate);
        margin-bottom: 10px;
    }

        .home-top-notification a {
            font-style: italic;
        }

.home-current-season-cards-container {
    width: 99%;
    margin: 50px auto 0 auto;
}

    .home-current-season-grid-header {
        font-size: 2rem;
        font-weight: bold;
        color: var(--brand-brick-red);
        font-family: var(--heading-font);        
        text-align: center;
        margin: 40px 0 10px 0;
        padding-top: 10px;
        border-top: 2px solid var(--brand-light-blue);
    }

    .home-current-season-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

        .home-current-card {
            position: relative;
        }

            .home-current-card-photo {
                width: 100%;
            }

                .home-current-card-photo img {
                    max-width: 100%;
                    max-height: 100%;
                }

            .home-current-dates {
                font-family: var(--heading-font);
                position: absolute;
                top: 0;
                right: 0;
                background: var(--brand-brick-red-transparency);
                padding: 5px;
                color: #fff;
                font-weight: bold;
                line-height: 25px;
            }

            .home-current-info-box {
                color: #fff;
                position: absolute;
                bottom: 5px;
                width: 100%;
                padding: 10px 0;
                text-align: center;
                background: var(--brand-dark-blue-transparency);
            }

                .home-current-info-box a {
                    color: #fff;
                }

                .home-current-info-box h2 {
                    font-size: 2rem;
                }

.home-city-cards {
    margin-top: 50px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    .home-city-card {
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: end;
    }

        .home-city-card-details {
            background-color: var(--brand-brick-red-transparency);
            text-align: center;
            margin: 0 auto;
            padding: 10px;
            width: 100%;
        }
    
            .home-city-card-title {
                font-size: 1.3rem;
            }

                .home-city-card-title h2 {
                    color: #fff;
                }

    .home-action-tile-strip {
        margin: 75px 0;
    }

        .home-action-tile {
            min-height: 350px;
            padding: 20px 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
        }

            .home-action-tile-title {
                font-family: var(--heading-font);
                font-size: 2rem;
                font-weight: bold;
                color: var(--brand-light-blue);
            }

            .home-action-tile-main-text {
                font-style: italic;
                font-size: 1.5rem;
                text-align: center;
                color: #fff;
                padding: 0 35px;
                margin: 12px 0 25px 0;
            }

            .home-action-tile-action {
                text-align: center;
            }

                .home-action-tile-action a {
                    background: var(--brand-peach);
                    color: var(--brand-dark-blue);
                    padding: 5px;
                    font-family: var(--heading-font);
                    font-weight: bold;
                    font-size: 1.3rem;
               }

/* Theaters Top */
.plan-your-visit-container {
    width: 95%;
    margin: 0 auto;
}

    .plan-your-visit-intro-box {
        margin: 30px 0;
        font-family: var(--heading-font);
        text-align: center;
        font-weight: 500;
        font-size: 1.5rem;
        color: var(--brand-slate);

    }

    .plan-your-visit-cities-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px 20px;
    }

        .plan-your-visit-city-tile {
            background: var(--brand-dark-blue);
            color: #fff;
            width: 400px;
        }
                
        .plan-your-visit-city-info {
            height: 300px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: end;
        }

            .plan-your-visit-city-inner-info {
                background: var(--brand-brick-red-transparency);
                color: #fff;
                text-align: center;
                padding: 5px;
                width: 100%;
            }

                .plan-your-visit-city-inner-info h2 {
                    color: #fff;
                    font-size: 1.5rem;
                }
            
        .plan-your-visit-theatres-box {
            padding: 20px 10px;
        }

            .plan-your-visit-theatres-box details {
                color: var(--brand-peach);
                font-size: 1.2rem;
            }

            .plan-your-visit-theatre-details {
                border: 1px solid var(--brand-peach);
                padding: 10px;
                margin-top: 12px;
                width: 94%;
            }

            .plan-your-visit-theatre-address {
                margin-top: 5px;
            }

            .plan-your-visit-theatre-box-office {
                margin-top: 5px;
            }

            .plan-your-visit-theatre-link {
                margin-top: 20px;
            }

                .plan-your-visit-theatre-link a {
                    color: #fff;
                }

            .plan-your-visit-driving-parking {
                margin-top: 25px;
            }

                .plan-your-visit-driving-parking details {
                    color: var(--brand-peach);
                    font-size: 1.2rem;
                }

                .plan-your-visit-driving-parking-details {
                    border: 1px solid var(--brand-peach);
                    padding: 10px;
                    margin-top: 12px;
                    width: 94%;
                }

                    .plan-your-visit-driving-parking-details h2 {
                        color: #fff;
                        font-size: 1.3rem;    
                    }

                    .plan-your-visit-driving-parking-details p {
                        margin-bottom: 10px;
                    }

                    .plan-your-visit-driving-parking-details a {
                        color: #fff;
                    }

                    .plan-your-visit-driving-parking-details ul {
                        margin: 0 0 20px 10px;
                    }

                        .plan-your-visit-driving-parking-details ul li {
                            list-style: disc;
                            margin-left: 10px;
                        }

        .plan-your-visit-subscription-options {
            margin-top: 20px;
        }

            .plan-your-visit-subscription-options p {
                margin: 15px 0;
                border: 1px solid var(--brand-peach);
                padding: 7px;
            }

            .plan-your-visit-subscription-options a {
                color: #fff;
            }

/* Performances */
.performances-container {
    width: 99%;
    margin: 0 auto;
}

    .performances-intro-text {
        margin: 30px 0;
        font-family: var(--heading-font);
        text-align: center;
        color: var(--brand-slate);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .performances-sub-nav {
        margin-bottom: 20px;
        padding: 10px 0;
        text-align: center;
        border-top: 1px solid var(--brand-peach);
        border-bottom: 1px solid var(--brand-peach);
    }

        .performances-sub-nav-heading {
            font-weight: bold;
            font-size: 1.4rem;
            font-family: var(--heading-font);
            margin-bottom: 5px;
        }

        .performances-sort-choices {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

            .performances-sort-choices a {
                padding: 3px;
                color: var(--brand-red);
                font-size: 1.2rem;
                font-family: var(--heading-font);
            }

            .performances-sort-choices a:hover,
            .active-perf-sub-nav {
                background: var(--brand-red);
                color: #fff !important;
                padding: 3px;
            }

        .performances-sort-sub {
            display: flex;
            gap: 20px;
        }

    .performances-current-season-grid-header {
        font-size: 2rem;
        font-weight: bold;
        color: var(--brand-brick-red);
        font-family: var(--heading-font);        
        text-align: center;
        margin: 40px 0 10px 0;
        padding-top: 10px;
        border-top: 2px solid var(--brand-light-blue);
    }

    .performances-display-container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

        .performances-performance-item {
            border: 1px solid var(--brand-peach);
            background: var(--brand-dark-blue);
        }

            .performances-performance-photo {
                display: block;
            }

                .performances-performance-photo img {
                    width: 100%;
                    display: block;
                }

            .performances-performance-details-box {
                padding: 10px;
                text-align: center;
            }

                .performances-performance-sub-title {
                    margin: 3px 0 15px 0;
                }

                    .performances-performance-sub-title h3 {
                        font-size: 1.2rem;
                        font-weight: bold;
                        color: #fff;
                        font-style: italic;
                    }

                .performances-performance-icon {
                    margin-top: 20px;
                }

                    .performances-performance-icon img {
                        width: 150px;
                    }

                .performances-performance-title {
                }

                    .performances-performance-title h2,
                    .performances-performance-title h2 a {
                        font-size: 2rem;
                        font-weight: bold;
                        color: #fff
                    }

                .performances-performance-info-box {
                }

                    .performances-performance-info-group {
                        margin-top: 20px;
                    }

                        .performances-performance-dates {
                            color: #fff;
                        }

                            .performances-performance-dates a {
                                color: #fff;
                            }

                        .performances-performance-theater {
                            color: var(--brand-red);
                        }

                            .performances-performance-theater a {
                                color: #fff;
                                font-size: 1.3rem;
                            }

                        .performances-performance-city {
                            color: #fff;
                        }

                            .performances-performance-city a {
                                color: #fff;
                            }

    .performances-policies {
        font-size: 0.8rem;
        font-weight: bold;
        max-width: 400px;
        margin: 30px auto 0 auto;
    }

    .performances-policies ul {
        margin-left: 30px;
    }

        .performances-policies ul li {
            list-style-type: disc;
        }

/* Performance */
.performance-container {
    width: 95%;
    margin: 0 auto;
}

    .performance-title {
        font-size: 3rem;
        font-family: var(--heading-font);
        font-weight: bold;
        text-align: center;
        margin: 35px auto 10px auto;
        color: var(--brand-dark-blue);
    }

    .performance-sub-title {
        font-size: 2rem;
        font-family: var(--heading-font);
        font-style: italic;
        color: #fff;
        text-align: center;
    }

    .performance-top-container{
        /* width: fit-content; */
        margin: 50px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
    }

        .performance-details-grouping {
            padding: 10px;
            border: 1px solid var(--brand-light-blue);
            width: fit-content;
        }

            .performance-date {
                font-size: 1.5rem;
                margin-bottom: 10px;
            }

            .performance-theater {
            }

                .performance-theater-title {
                    font-weight: bold;
                }

                .performance-theater-box-office {
                    margin-top: 5px;
                }

            .performance-ticket-information {
                display: flex;
                gap: 25px 12px;
                flex-wrap: wrap;
                margin: 25px 0 10px 0;
            }

                .performance-ticket-information p {
                    margin-bottom: 0;
                }

                .performance-ticket-information a {
                    font-family: var(--heading-font);
                    color: #fff;
                    padding: 10px;
                    background: var(--brand-dark-blue);
                }

    .performance-middle-container {
    }

        .performance-image {
            width: 95%;
            margin: 0 auto 50px auto;
        }

            .performance-image img {
                width: 100%;
                border-radius: 15px;
                display: block;
            }

    .performance-lower-container {
        margin-top: 20px;
    }

        .performance-lower-top-box {
            border: 2px solid var(--brand-peach);
            width: fit-content;
            display: flex;
            gap: 35px 100px;
            flex-wrap: wrap;
        }

            .performance-performers,
            .performance-program {
                padding: 10px;
                width: fit-content;
            }

                .performance-performers-head,
                .performance-program-head {
                    color: var(--brand-brick-red);
                    font-size: 1.45rem;
                    font-weight: bold;
                    font-family: var(--heading-font);
                }

                .performance-performers-list,
                .performance-program-list {
                    line-height: 25px;
                    margin-top: 5px;
                }

                .performance-performers-list p,
                .performance-program-list p {
                    margin-bottom: 0;
                }

            .performance-program-notes {
                margin: 20px 0 15px 0;
            }

                .performance-program-notes a {
                    font-family: var(--heading-font);
                    color: #fff;
                    padding: 10px;
                    background: var(--brand-dark-blue);
                }

        .performance-main-text {
            font-size: 1.3rem;
            margin-top: 30px;
            color: var(--brand-gray);
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

            .performance-main-text p {
                line-height: 30px;
                margin-bottom: 30px;
            }

            .performance-icon-box {
            }

            .performance-text-box {
            }

        .performance-photo-credits {
            font-size: 0.8rem;
            font-style: italic;
            color: var(--brand-slate);
        }

            .performance-photo-credits p {
                margin-bottom: 5px;
            }

    .performance-more-info-container {
    }

        .performance-more-info-header {
            margin: 45px 0 15px 0;
            padding-top: 10px;
            font-size: 1.5rem;
            color: var(--brand-brick-red);
            font-family: var(--heading-font);
            font-weight: bold;
            text-align: center;
            border-top: 2px solid var(--brand-light-blue);
        }

        .performance-more-info-videos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }

            .performance-video-box {
                width: 400px;
            }

                .performance-video-box iframe {
                    width: 100%;
                }

        .performance-more-info-links {
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
        }

            .performance-more-info-links a {
                color: var(--brand-dark-blue);
                font-weight: bold;
                font-size: 1.2rem;
            }

        .performance-more-info-streams {
        }

            .performance-stream-box {
                width: 70%;
                margin: 0 auto 15px auto;
            }

                .performance-stream-box iframe {
                    width: 100%;
                }

/* Contact */
.contact-container {
    width: 95%;
    margin: 0 auto;
}

    .contact-main-text {
        margin-top: 20px;
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
        justify-content: center;
    }

        .contact-block {
            line-height: 23px;
            background: var(--brand-light-blue-transparency);
            padding: 10px;
            max-width: 400px;
        }

            .contact-block h2 {
                margin-bottom: 20px;
                font-size: 1.5rem;
            }

            .contact-block a {
                color: var(--brand-red);
            }

/* About */
.about-container {
    width: 95%;
    margin: 0 auto;
}

    .about-main-text {
        margin: 30px 0;
        text-align: center;
        font-family: var(--heading-font);
        font-size: 1.5rem;
        color: var(--brand-slate);
    }

    .about-roles-container {
    }

        .bio-role-header {
            margin-bottom: 15px;
        }

            .bio-role-header h2 {
                font-size: 2rem;
                margin-bottom: 10px;
                color: var(--brand-dark-blue);
            }

        .about-bio-list {
            margin-bottom: 30px;
        }

            .about-bio-list-box {
                margin-bottom: 10px;
            }

                .about-bio-list-details,
                .about-bio-list-details a {
                    font-family: var(--heading-font);
                    color: var(--brand-dark-blue);
                }

        .about-past-artists-link {
            padding-top: 10px;
            font-size: 1.5rem;
            font-family: var(--heading-font);
            font-weight: bold;
        }

            .about-past-artists-link h2 a {
                font-size: 2rem;
                color: var(--brand-dark-blue);
                font-weight: bold;
            }

/* About, Past Artists */
.about-past-artists-container {
    width: 95%;
    margin: 0 auto;
}

    .about-past-artists-intro-text {
        margin: 25px auto;
        font-family: var(--heading-font);
        text-align: center;
        color: var(--brand-slate);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .about-past-artists-main-text {
        font-size: 1.3rem;
        margin-top: 30px;
        color: var(--brand-gray);
    }

        .about-past-artists-main-text p {
            line-height: 30px;
            margin-bottom: 30px;
        }

/* Bio */
.bio-container {
    width: 95%;
    margin: 0 auto;
}

    .bio-main-box {
        width: 75%;
        margin-top: 40px;
    }

        .bio-main-text {
        }

            .bio-main-text p {
                line-height: 25px;
                margin-bottom: 15px;
                font-size: 1.2rem;
            }

/* Support Us */
.support-us-container {
    width: 95%;
    margin: 0 auto;
}

    .support-us-intro-text {
        margin: 25px auto;
        font-family: var(--heading-font);
        text-align: center;
        color: var(--brand-slate);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .support-us-actions {
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

        .support-us-block {
            padding: 20px;
            background: var(--brand-light-blue-transparency);
        }

            .support-us-block-text {
                font-size: 1.35rem;
            }

                .support-us-block-text h2 {
                    margin-bottom: 20px;
                    font-size: 1.5rem;
                }

            .support-us-block-link {
                margin-top: 30px;
            }

                .support-us-block-link a {
                    background: var(--brand-light-blue);
                    padding: 10px;
                    font-size: 1.2rem;
                    font-family: var(--heading-font);
                    color: #fff;
                    cursor: pointer;
                }

                .support-us-block-link a:hover {
                    background: var(--brand-dark-blue);
                }

    .support-us-status {
        text-align: center;
        color: var(--brand-slate);
        margin-top: 20px;
    }

/* *******************************
/* Styles to Delete
/* *******************************

/* Theater
.theater-container {
    width: 95%;
    margin: 0 auto;
}

    .theater-intro-text {
        margin: 25px auto;
        font-family: var(--heading-font);
        text-align: center;
        color: var(--brand-red);
        font-size: 1.5rem;
    }

    .theater-seating-chart-box {
        background: var(--brand-dark-blue-transparency);
        display: table;
        padding: 20px;
        margin: 50px auto;
    }

        .theater-seating-chart-box a {
            color: #fff;
            font-size: 1.3rem;                
        }

    .theater-location-container {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        justify-content: center;
        align-items: center;
    }

        .theater-location {
        }

            .theater-location-head {
                font-size: 1.25rem;
            }

            .theater-location-address {
                font-size: 1.1rem;
            }

            .theater-map-box {
                text-align: center;
            }

                .theater-map-box img {
                    width: 400px;
                }

    .theater-directions-container {
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 50px auto;
    }

        .theater-directions-box {
            width: 400px;
            height: fit-content;
            border: 1px solid var(--brand-peach);
            padding: 10px;
        }

            .theater-directions-box summary {
                font-size: 1.2rem;
                font-weight: bold;
                margin-bottom: 7px;
            }

            .theater-directions-box p {
                margin-bottom: 10px;
            }

            .theater-directions-box ul {
                margin: 0 0 15px 25px;
            }

            .theater-directions-box ul li {
                list-style-type: disc;
            }

/* Cities Top
.cities-top-container {
    width: 95%;
    margin: 0 auto;
}

    .cities-top-intro-box {
        margin: 30px 0;
        font-family: var(--heading-font);
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        color: var(--brand-red);
    }

    .cities-top-cities-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px 20px;
    }

        .cities-top-city-tile {
            background: var(--brand-dark-blue);
            color: #fff;
            width: 400px;
        }
                
        .cities-top-city-info {
            background-repeat: no-repeat;
            width: 100%;
            height: 300px;
            display: flex;
            align-items: end;
        }

            .cities-top-city-inner-info {
                font-size: 1.5rem;
                background: var(--brand-brick-red-transparency);
                color: #fff;
                text-align: center;
                padding: 5px;
                width: 100%;
            }

                .cities-top-city-inner-info h2 a {
                    font-size: 1.5rem;
                    color: #fff;
                }
            
        .cities-top-theaters-box {
            padding: 20px 10px;
        }

            .cities-top-theaters-box details {
                color: var(--brand-peach);
                font-size: 1.2rem;
            }

            .cities-top-theater-details {
                border: 1px solid var(--brand-peach);
                padding: 10px;
                margin-top: 12px;
                width: 94%;
            }

                .cities-top-theater-details h2 a {
                    color: #fff;
                    font-size: 1.3rem;    
                }

            .cities-top-theater-address {
                margin-top: 5px;
            }

            .cities-top-theater-box-office {
                margin-top: 5px;
            }

        .cities-top-subscription-options {
            margin-top: 20px;
        }

            .cities-top-subscription-options p {
                margin: 15px 0;
                border: 1px solid var(--brand-peach);
                padding: 7px;
            }

            .cities-top-subscription-options a {
                color: #fff;
            }

/* City
.city-container {
}

    .city-intro-text {
        margin: 30px 0;
        font-family: var(--heading-font);
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        color: var(--brand-red);
    }

    .city-current-performance-list {
        margin-top: 50px;
    }

        .city-current-performances-head {
            font-size: 2rem;
            font-family: var(--heading-font);
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
        }

        .city-performance-item {
            padding: 30px;
        }

        .city-performance-item:nth-child(even) {
            padding: 30px;
        }

            .city-performance-item-inner {
                width: 75%;
                margin: 0 auto;
            }

                .city-performance-sub-title {
                    margin: 3px 0 15px 0;
                }

                    .city-performance-sub-title h3 {
                        font-size: 1.3rem;
                        color: var(--brand-red);
                    }

                .city-performance-title {
                    margin-bottom: 10px;
                }

                    .city-performance-title h2 {
                        font-size: 2rem;
                        font-weight: bold;
                        color: var(--brand-dark-blue);
                    }

                .city-performance-main-box {
                    display: flex;
                    gap: 20px;
                    flex-wrap: wrap;
                    align-items: center;
                }

                    .city-performance-photo {
                        width: 400px;
                    }

                        .city-performance-photo img {
                            max-width: 100%;
                            display: block;
                        }
                        
                    .city-performance-details-box {
                    }

                        .city-performance-dates {
                            color: var(--brand-red);
                            font-size: 1.2rem;
                        }

                        .city-performance-info-box {
                            margin-top: 10px;
                        }

                            .city-performance-theater {
                                font-size: 1.25rem;
                                font-weight: bold;
                                margin-top: 15px;
                            }

                                .city-performance-theater a {
                                    color: var(--brand-dark-blue);
                                }

                            .city-performance-city {
                                margin-top: 15px;
                                font-size: 1.1rem;
                                font-weight: bold;
                            }

                            .city-performance-box-office {
                                margin-top: 5px;
                                font-size: 1.1rem;
                                font-weight: bold;
                            }

                            .city-full-event-link {
                                margin-top: 15px;
                            }

                                .city-full-event-link a {
                                    font-weight: bold;
                                    font-family: var(--heading-font);
                                    color: var(--brand-dark-blue);
                                    padding: 2px;
                                    background: var(--brand-peach);
                                }

                        .city-performance-subscription-options {
                            margin-top: 20px;
                            display: flex;
                            gap: 10px;
                            flex-wrap: wrap;
                        }

                            .city-performance-subscription-options p {
                                padding: 5px 6px 6px 6px;
                                background: var(--brand-dark-blue-transparency);
                                font-size: 1.1rem;
                                font-family: var(--heading-font);
                            }

                            .city-performance-subscription-options a {
                                color: #fff;
                            }

    .city-past-performance-list {
    }

        .city-past-performances-head {
        }

        .city-past-performance-item {
            padding: 20px;
        }

        .city-past-performance-item:nth-child(even) {
            padding: 20px;
        }

            .city-past-performance-item-inner {
            }

                .city-past-performance-title {
                }

                    .city-past-performance-title h2 {
                    }

                .city-past-performance-main-box {
                }

                    .city-past-performance-photo {
                    }

                        .city-past-performance-photo img {
                        }
                        
                    .city-past-performance-details-box {
                    }

                        .city-past-performance-dates {
                        }

                        .city-past-performance-info-box {
                        }

                            .city-past-performance-theater {
                            }

                            .city-past-performance-city {
                            }