/* =========================================================
   ART LEADERSHIP
   GOLDFARB CENTER FOR PERFORMING ARTS
  ========================================================= */


/* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

#container_one,
#container_one *,
#container_one *::before,
#container_one *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#container_one {

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: #000;
    background: #fff;

    font-family:
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.05rem;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   TEXT
   ========================================================= */

#container_one p {

    width: 100%;

    margin: 0 0 1rem;
    padding: 0;

    color: #000;

    font-family:
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.05rem;

    font-weight: 400;

    line-height: 1.6;

    overflow-wrap: anywhere;
    word-wrap: break-word;
}


#container_one h3,
#container_one h4 {

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    overflow-wrap: anywhere;
}


#container_one a {

    color: #663399;

    overflow-wrap: anywhere;
}


#container_one img {

    display: block;

    max-width: 100%;
    height: auto;

    border: 0;
}


/* =========================================================
   HERO
   ========================================================= */

#container_one .gcp-hero {

    width: 100%;

    margin: 0;
    padding: 0;

    background: #663399;

    overflow: hidden;
}


#container_one .gcp-hero-image {

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


#container_one .gcp-hero-image-main {

    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;
    padding: 0;

    object-fit: cover;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

#container_one .gcpa-header {

    width: 100%;

    margin: 0;
    padding: 0;

    background: #fff;
}


#container_one .goldfarb-main-title {

    width: 100%;

    margin: 0;

    padding: .7rem 1rem .85rem;

    color: #663399 !important;

    background: #fff;

     border-bottom: 4px solid #B8860B;

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(1.8rem, 4vw, 3.5rem) !important;

    font-weight: 900 !important;

    line-height: 1.15;

    letter-spacing: .02em;

    text-align: center;
}


/* =========================================================
   FULL-WIDTH MENU
   ========================================================= */

#container_one .menu {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #663399;
    position: relative;
    z-index: 99999;
    overflow: visible;
}

#container_one .menu,
#container_one .menu * {
    box-sizing: border-box;
}




/* =========================================================
   MAIN CONTENT WRAPPER
   Same wide style as Music CSS
   ========================================================= */

#container_gcpa {

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0 30px 50px;

    background: #fff;
}


/* =========================================================
   CONTENT
   ========================================================= */

#container_one .gcpa-content {

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    background: #fff;
}


/* =========================================================
   ART LEADERSHIP FEATURE
   ========================================================= */

#container_one .vpa-container {

    display: flex;

    flex-direction: row;

    align-items: stretch;

    width: 100%;
    max-width: 100%;

    margin: 30px 0 45px;
    padding: 0;

    background: #fff;

    border: 2px solid #B8860B;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .12);

    overflow: hidden;
}


/* =========================================================
   ART LEADERSHIP TEXT
   ========================================================= */

#container_one .vpa-content {

    flex: 1 1 55%;

    min-width: 0;

    margin: 0;

    padding: 30px;

    background: #fff;
}


#container_one .vpa-content h3 {

    width: 100%;

    margin: 0 0 20px;

    padding: 0 0 12px;

    color: #663399;

    border-bottom: 2px solid #800000;

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(1.5rem, 3vw, 2.2rem);

    font-weight: 900;

    line-height: 1.2;

    text-align: left;
}


#container_one .vpa-content p {

    margin: 0 0 1rem;

    color: #000;

    font-size: 1.05rem;

    line-height: 1.6;
}


#container_one .vpa-content p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   ART LEADERSHIP IMAGE
   ========================================================= */

#container_one .vpa-image {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 45%;

    min-width: 0;

    margin: 0;

    padding: 20px;

    background: #F1F1F1;

    border-left: 1px solid #D8D9DA;
}


#container_one .vpa-image img {

    display: block;

    width: 100%;
    max-width: 600px;

    height: auto;

    margin: auto;

    border: 1px solid #D8D9DA;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, .12);
}


/* =========================================================
   SHOWCASE
   ========================================================= */

#container_one .showcase-container {

    width: 100%;
    max-width: 100%;

    margin: 0 0 45px;

    padding: 30px;

    background: #F1F1F1;

    border: 1px solid #D8D9DA;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .10);

    overflow: hidden;
}


/* =========================================================
   SHOWCASE TITLE
   ========================================================= */

#container_one .showcase-container > h3 {

    width: 100%;

    margin: 0 0 20px;

    padding: 0 0 12px;

    color: #000;

    border-bottom: 3px solid #B8860B;

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.2;

    text-align: left;
}


/* =========================================================
   SHOWCASE GRID
   ========================================================= */

#container_one .showcase-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   SHOWCASE CARDS
   ========================================================= */

#container_one .showcase-card {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-width: 0;

    height: 240px;

    margin: 0;
    padding: 0;

    background: #fff;

    border: 1px solid #B8860B;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .08);

    overflow: hidden;

    transition: none !important;

    transform: none !important;
}


#container_one .showcase-card:hover {

    box-shadow:
        0 3px 9px rgba(0, 0, 0, .10);

    transform: none !important;
}


/* =========================================================
   SHOWCASE IMAGES
   ========================================================= */

#container_one .showcase-card img {

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    object-position: center;

    border: 0;
}


/* =========================================================
   CONTACT
   ========================================================= */

#container_one .contact-container {

    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 30px;

    background: #fff;

    border: 1px solid #D8D9DA;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .10);

    overflow: hidden;
}


/* =========================================================
   CONTACT TITLE
   ========================================================= */

#container_one .contact-container > h3 {

    width: 100%;

    margin: 0 0 20px;

    padding: 0 0 12px;

    color: #000;

    border-bottom: 3px solid #B8860B;

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.2;

    text-align: left;
}


/* =========================================================
   CONTACT GRID
   ========================================================= */

#container_one .contact-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   CONTACT CARD
   ========================================================= */

#container_one .contact-card {

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 22px;

    background: #F1F1F1;

    border: 1px solid #D8D9DA;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .07);

    overflow-wrap: anywhere;
}


#container_one .contact-card h4 {

    margin: 0 0 12px;

    padding: 0 0 10px;

    color: #663399;

    border-bottom: 2px solid #B8860B;

    font-family:
        "Lato",
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.25rem;

    font-weight: 900;

    line-height: 1.25;
}


#container_one .contact-card p {

    margin: 0;

    color: #000;

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

#container_one .contact-card ul {

    margin: 0;

    padding: 0 0 0 20px;

    color: #000;

    font-family:
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1rem;

    line-height: 1.6;
}


#container_one .contact-card li {

    margin: 0 0 5px;

    padding: 0;
}


/* =========================================================
   CONTACT LINKS
   ========================================================= */

#container_one .contact-card a {

    color: #663399;

    font-weight: 700;

    text-decoration: none;
}


#container_one .contact-card a:hover {

    color: #800000;

    text-decoration: underline;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

#container_one a:focus-visible {

    outline: 3px solid #FFCC00;

    outline-offset: 3px;
}


/* =========================================================
   TABLET — 1000px
   ========================================================= */

@media (max-width: 1000px) {

    #container_gcpa {

        padding:
            0 20px 45px;
    }


    #container_one .vpa-content {

        padding: 25px;
    }


    #container_one .vpa-image {

        padding: 16px;
    }


    #container_one .showcase-container,
    #container_one .contact-container {

        padding: 25px;
    }


    #container_one .showcase-grid,
    #container_one .contact-grid {

        gap: 15px;
    }


    #container_one .showcase-card {

        height: 210px;
    }


    #container_one .contact-card {

        padding: 18px;
    }

}


/* =========================================================
   800px
   ========================================================= */

@media (max-width: 800px) {

    #container_gcpa {

        padding:
            0 15px 40px;
    }


    #container_one .goldfarb-main-title {

        font-size: 2.3rem !important;
    }


    /* VPA becomes stacked */

    #container_one .vpa-container {

        flex-direction: column;
    }


    #container_one .vpa-content {

        width: 100%;

        padding: 25px;
    }


    #container_one .vpa-image {

        width: 100%;

        flex: none;

        padding: 15px;

        border-top: 1px solid #D8D9DA;

        border-left: 0;
    }


    #container_one .vpa-image img {

        max-width: 700px;
    }


    /* Showcase */

    #container_one .showcase-container {

        padding: 22px;
    }


    #container_one .showcase-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 12px;
    }


    #container_one .showcase-card {

        height: 180px;
    }


    /* Contact */

    #container_one .contact-container {

        padding: 22px;
    }


    #container_one .contact-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 12px;
    }


    #container_one .contact-card {

        padding: 15px;
    }

}


/* =========================================================
   700px
   ========================================================= */

@media (max-width: 700px) {

    #container_gcpa {

        padding:
            0 12px 35px;
    }


    #container_one .goldfarb-main-title {

        padding:
            .6rem .7rem .75rem;

        font-size: 2rem !important;
    }


    #container_one .vpa-container {

        margin-bottom: 30px;
    }


    #container_one .vpa-content {

        padding: 20px;
    }


    #container_one .vpa-content h3 {

        font-size: 1.5rem;
    }


    #container_one .vpa-content p {

        font-size: 1rem;

        line-height: 1.55;
    }


    #container_one .vpa-image {

        padding: 12px;
    }


    /* Showcase */

    #container_one .showcase-container {

        margin-bottom: 30px;

        padding: 20px;
    }


    #container_one .showcase-container > h3 {

        font-size: 1.8rem;
    }


    #container_one .showcase-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }


    #container_one .showcase-card {

        height: 200px;
    }


    /* Contact */

    #container_one .contact-container {

        padding: 20px;
    }


    #container_one .contact-container > h3 {

        font-size: 1.8rem;
    }


    #container_one .contact-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }

}


/* =========================================================
   480px
   ========================================================= */

@media (max-width: 480px) {

    #container_one {

        font-size: .95rem;
    }


    #container_gcpa {

        padding:
            0 8px 30px;
    }


    #container_one .goldfarb-main-title {

        padding:
            .5rem .5rem .6rem;

        font-size: 1.55rem !important;
    }


    /* VPA */

    #container_one .vpa-container {

        margin-top: 20px;

        margin-bottom: 25px;
    }


    #container_one .vpa-content {

        padding: 17px;
    }


    #container_one .vpa-content h3 {

        margin-bottom: 15px;

        padding-bottom: 10px;

        font-size: 1.3rem;
    }


    #container_one .vpa-content p {

        font-size: .95rem;

        line-height: 1.55;
    }


    #container_one .vpa-image {

        padding: 9px;
    }


    /* Showcase */

    #container_one .showcase-container {

        margin-bottom: 25px;

        padding: 15px;
    }


    #container_one .showcase-container > h3 {

        margin-bottom: 15px;

        font-size: 1.5rem;
    }


    #container_one .showcase-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    #container_one .showcase-card {

        height: 210px;
    }


    /* Contact */

    #container_one .contact-container {

        padding: 15px;
    }


    #container_one .contact-container > h3 {

        font-size: 1.5rem;
    }


    #container_one .contact-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    #container_one .contact-card {

        padding: 15px;
    }


    #container_one .contact-card h4 {

        font-size: 1.1rem;
    }


    #container_one .contact-card p,
    #container_one .contact-card ul {

        font-size: .92rem;

        line-height: 1.55;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #container_one *,
    #container_one *::before,
    #container_one *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

        transform: none !important;
    }

}