body {
    background-color: white;
}

.neighborhood {
    --palette-yellow : #EFE121;
    --palette-green  : #057435;
    --palette-pink   : #ED2A79;
    --palette-grey   : #979797;
    --palette-body   : #4A4A4A;
}

.neighborhood-info,
.schedule-amenities
{
    display: flex;
}
.neighborhood-info {
    flex-wrap: wrap;
    justify-content: center;
}
.neighborhood .bg-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.neighborhood-info .header-concept {
    flex: 1;
}
.neighborhood-info .credits-map {
    flex: 1;
    min-width: 300px;
    overflow-y: hidden;
}

.neighborhood-info > div  {
    z-index: 0;
}
.neighborhood h2, .neighborhood h3 {
    color: var(--palette-pink);
    font-family: Pickathon
}
.neighborhood-info h4 {
    margin: 6px 0;
}
.neighborhood h2 {
    font-size: 48px;
}
.neighborhood h3 {
    font-size: 40px;
}
.neighborhood h4 {
    color: var(--palette-body);
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: normal;
}

.neighborhood-info .select-neighborhood {
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: "Open Sans", sans-serif;
    background-color: var(--palette-yellow);
    color: var(--palette-body);
    border: none;
    border-radius: 0;
    font-size: 20px;
    padding-left: 36px;
    margin: 0.5em 1em 0;
    background-image: url("data:image/svg+xml;utf8,<svg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 2.4375C0 1.23438 0.929688 0.25 2.1875 0.25H4.8125C6.01562 0.25 7 1.23438 7 2.4375V5.0625C7 6.32031 6.01562 7.25 4.8125 7.25H2.1875C0.929688 7.25 0 6.32031 0 5.0625V2.4375ZM0 11.1875C0 9.98438 0.929688 9 2.1875 9H4.8125C6.01562 9 7 9.98438 7 11.1875V13.8125C7 15.0703 6.01562 16 4.8125 16H2.1875C0.929688 16 0 15.0703 0 13.8125V11.1875ZM7 22.5625C7 23.8203 6.01562 24.75 4.8125 24.75H2.1875C0.929688 24.75 0 23.8203 0 22.5625V19.9375C0 18.7344 0.929688 17.75 2.1875 17.75H4.8125C6.01562 17.75 7 18.7344 7 19.9375V22.5625ZM8.75 2.4375C8.75 1.23438 9.67969 0.25 10.9375 0.25H13.5625C14.7656 0.25 15.75 1.23438 15.75 2.4375V5.0625C15.75 6.32031 14.7656 7.25 13.5625 7.25H10.9375C9.67969 7.25 8.75 6.32031 8.75 5.0625V2.4375ZM15.75 13.8125C15.75 15.0703 14.7656 16 13.5625 16H10.9375C9.67969 16 8.75 15.0703 8.75 13.8125V11.1875C8.75 9.98438 9.67969 9 10.9375 9H13.5625C14.7656 9 15.75 9.98438 15.75 11.1875V13.8125ZM8.75 19.9375C8.75 18.7344 9.67969 17.75 10.9375 17.75H13.5625C14.7656 17.75 15.75 18.7344 15.75 19.9375V22.5625C15.75 23.8203 14.7656 24.75 13.5625 24.75H10.9375C9.67969 24.75 8.75 23.8203 8.75 22.5625V19.9375ZM24.5 5.0625C24.5 6.32031 23.5156 7.25 22.3125 7.25H19.6875C18.4297 7.25 17.5 6.32031 17.5 5.0625V2.4375C17.5 1.23438 18.4297 0.25 19.6875 0.25H22.3125C23.5156 0.25 24.5 1.23438 24.5 2.4375V5.0625ZM17.5 11.1875C17.5 9.98438 18.4297 9 19.6875 9H22.3125C23.5156 9 24.5 9.98438 24.5 11.1875V13.8125C24.5 15.0703 23.5156 16 22.3125 16H19.6875C18.4297 16 17.5 15.0703 17.5 13.8125V11.1875ZM24.5 22.5625C24.5 23.8203 23.5156 24.75 22.3125 24.75H19.6875C18.4297 24.75 17.5 23.8203 17.5 22.5625V19.9375C17.5 18.7344 18.4297 17.75 19.6875 17.75H22.3125C23.5156 17.75 24.5 18.7344 24.5 19.9375V22.5625Z' fill='%230C793C'/> </svg> ");
    background-repeat: no-repeat;
    background-position-x: 0px;
}
.neighborhood-info .select-neighborhood option {
    background-color: white;
}


.neighborhood-info .next-prev {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5em 2.5em 1.5em 0em;
    overflow: clip;
}

.neighborhood .frame_top .frame_title .icon {
    position: absolute;
    width: 128px;
    top: -4px;
    left: 30px;
    z-index: 1;
    filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 30%));
}

.neighborhood-info .next-prev a,
.neighborhood-info .next-prev a:visited,
.neighborhood-info .next-prev span,
.neighborhood .controls .scroll-buttons-title a
{
    color: var(--palette-green);
    font-size: 28px;
    margin: 0 0.5em;
}
.neighborhood-info .next-prev i{
    text-shadow: 0px 1px 8px white;
}

.neighborhood-info .next-prev span.disabled {
    opacity: 0.3;
    cursor: default;
}

.neighborhood-info .next-prev .bg-fill {
    background: var(--palette-yellow);
    transform-origin: bottom right;
    transform: rotate(2deg);
    width: 120%;
    left: -20%;
}
.neighborhood-info .excerpt {
    padding: 2em;
    max-width: 680px;
    margin: auto;
}
.neighborhood-info .excerpt h2 {
    margin: 0;
}
.neighborhood-info .excerpt-content {
    overflow-y: hidden;
    height: 0;
    mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
    margin-bottom: 2em;
}
.neighborhood-info .excerpt.show-all .excerpt-content {
    mask-image: none;
}
.neighborhood-info .excerpt.show-all .excerpt-content h3 {
    margin: 1.5em 0 0.5em;
}

.neighborhood-info .excerpt .read-more {
    text-decoration: none;
    display: inline-block;
    background: var(--palette-green);
    color: white;
    padding: 0.5em;
    font-family: Pickathon;
    cursor: pointer;
    visibility: hidden;
}

.neighborhood-info .excerpt          .read-more i {
    transition: all 0.6s 0.3s;
    transform: rotate( 90deg);
}
.neighborhood-info .excerpt.show-all .read-more i {
    transform: rotate(-90deg);
}

.neighborhood-info .credits-map {
    display: flex;
    flex-direction: column;
    max-width: 450px;
}

.neighborhood-info .credits .bg-fill {
    background: var(--palette-green);
    left: -30px;
    bottom: -30px;
    clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 30px), 1% 100%);

}

.neighborhood-info .credits {
    position: relative;
    color: white;
    flex: 0;
}
.neighborhood-info .credits .content {
    margin: 0.5em 1em 0.5em;
}
.neighborhood-info .map {
    color: white;
    flex: 1;
    max-height: 450px;
    z-index: -2;
    position: relative;
}
.neighborhood-info .map img {
    width: 100%;
}
.neighborhood-info .map .see-full {
    top: 36px;
    left: 30px;
}

.neighborhood .lineup {
}
.neighborhood .lineup .bg-fill {
    background: var(--palette-yellow);
    transform: rotate(-6deg);
    width: 140%;
    left: -20%;
    bottom: -100%;
    transform-origin: bottom;
    top: -1em;
    z-index: 1;
}

.neighborhood .lineup .controls {
    clip-path: polygon(0 -200%, 100% -200%, 100% 100%, 0% 100%);
    overflow-x: clip;
    position: relative;
    padding: 2em;
}
.neighborhood .lineup .controls > :not(.bg-fill) {
    position: relative;
    z-index: 2;
}

.neighborhood .lineup .controls .scroll-buttons-title {
    margin: 1em 0 2em;
}
.neighborhood .lineup .controls .scroll-buttons-title,
.neighborhood .lineup .controls .filters {
    display: flex;
    justify-content: center;
}

.neighborhood .lineup .controls .scroll-buttons-title h3 {
    margin: 0;
}
.neighborhood .lineup .controls .scroll-buttons-title i {
    color: white;
    text-shadow: 0px 1px 8px var(--palette-pink);
    cursor: pointer;
}

.neighborhood .filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
.neighborhood .filters span {
    font-weight: bold;
    font-style: italic;
}

.neighborhood .filters input {
    display: none;
}
.neighborhood .filters label {
    font-family: Pickathon;
    font-size: 24px;
    color: #523D3280;
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    border: 2px solid var(--palette-pink);
    user-select: none;
    cursor: pointer;
}
.neighborhood .filters input:checked ~ label {
    background: var(--palette-pink);
    color: white;
}

.neighborhood .lineup .acts {
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.neighborhood .lineup .acts::-webkit-scrollbar {
    display: none;
}

.neighborhood .lineup .act {
    background-size: cover;
    text-decoration: none;
    min-width: 25%;
    display: block;
    aspect-ratio: 1 / 1;
    position: relative;
}
.neighborhood .lineup .act-name {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(205, 171, 53, 0.5);
    font-weight: bold;
    padding: 5px 10px;
    text-shadow: 1px 1px 1px #000;
}

.neighborhood .lineup .acts {
    --duration: 0.2s;
}
.neighborhood .lineup .act {
    transition: opacity var(--duration) ease-in-out, transform var(--duration) ease-in-out, min-width var(--duration) ease-in-out;
    opacity: 1;
    transform: scaleX(1);
}
.neighborhood .lineup .act.hidden {
    opacity: 0;
    transform: scaleX(0);
    min-width: 0;
    transition: opacity var(--duration) ease-in-out, transform var(--duration) ease-in-out, min-width var(--duration) ease-in-out var(--duration);
}
.neighborhood .lineup .act .act-name {
    opacity: 1;
    transition: opacity var(--duration) var(--duration);
}
.neighborhood .lineup .act.hidden .act-name {
    opacity: 0;
    transition: opacity 0s;
}

.neighborhood .schedule-amenities {
    flex-wrap: wrap;
}
.neighborhood .schedule-amenities > * {
    flex: 1;
    min-width: 300px;
}

.neighborhood .schedule h3 {
    text-align: center;
}

.neighborhood .schedule {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.neighborhood .schedule .title {
    position: relative;
    overflow: hidden;
}
.neighborhood .schedule .title h3 {
    margin-bottom: 2em;
}
.neighborhood .schedule .title .bg-fill {
    background: var(--palette-yellow);
    transform: rotate(6deg);
    transform-origin: top right;
}

.neighborhood .schedule label {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.neighborhood .schedule label i {
    transform: rotate(0);
    transition: all 0.3s;
}
.neighborhood .schedule input[type=checkbox]:not(:checked) ~ label i {
    transform: rotate(-90deg);
}
.neighborhood .schedule .day {
    margin: 0 30px;
}
.neighborhood .schedule .events {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 0;
    margin: 1em 0;
}
.neighborhood .schedule .events .time {
    font-weight: bold;
}
.neighborhood .schedule .events .time,
.neighborhood .schedule .events .event
{
    position: relative;
    border-radius: 4px;
    padding: 0.5em;
}
.neighborhood .schedule .events .event {
    min-height: 52px;
    height: unset !important;
}
.neighborhood .schedule .events .event a {
    color: #4A4A4A !important;
}
.neighborhood .schedule .events .event .lineup-icon {
    color: var(--palette-pink);
    position: absolute;
    bottom: 1em;
    right: 1em;
}

.neighborhood .schedule input[type=checkbox]:not(:checked) ~ .events {
    display: none;
}
.neighborhood .schedule input {
    -webkit-appearance: none;
    appearance: none;
}
.neighborhood .schedule input:focus-visible + label {
    outline: 1px auto black;
    outline-offset: 4px;
}

.neighborhood .schedule .event {
    background: var(--palette-yellow);
}

.neighborhood .amenities {
    padding: 30px;
    position: relative;
}
.neighborhood .other-amenities-list {
    list-style: none;
}
.neighborhood .other-amenities-list li {
    margin-bottom: 0.5em;
}
.neighborhood .other-amenities-list a {
    text-decoration: none;
    color: var(--palette-body) !important;
    font-weight: bold;
}
.neighborhood .other-amenities-list,
.neighborhood .amenities .amenities-list {
    font-size: 24px;
}
.neighborhood .amenities .amenities-list {
    display: grid;
    grid-template-columns: auto 1fr;
}
.neighborhood .amenities .amenities-list .icon {
    margin: 0 10px 7px;
}

.neighborhood .no-amenities .schedule,
.neighborhood .no-schedule  .amenities-content
{
    max-width: 970px;
    margin: auto;
}

.neighborhood .no-schedule {
    z-index: 1;
    position: relative;
    --bleed: 100px;
}

.neighborhood .no-schedule .amenities {
    margin-bottom: var(--bleed);
}
.neighborhood .no-schedule .amenities .bg-fill {
    top:    calc( -1 * var(--bleed));
    bottom: calc( -1 * var(--bleed));
    background: var(--palette-yellow);
    clip-path: polygon(
          0% var(--bleed),
        100%   0px,
        100% 100%,
          0% calc(100% - var(--bleed))
    );
}
.neighborhood .no-schedule .amenities-content {
    padding: 37px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.neighborhood .sponsors,
.neighborhood .tickets
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.neighborhood .sponsors {
    margin-top: 48px;
}
.neighborhood .sponsors h3:first-of-type{
    margin-bottom: 48px;
}
.neighborhood .tickets {
    margin: 2em 0;
}

.neighborhood .tickets a {
    font-family: Pickathon;
    font-size: 36px;
    color: var(--palette-pink);
    transform: rotate(-4.49deg);
    padding: 10px 10px;
    padding-left: calc(0.5em + 78px);
    border-style: solid;
    border-color: var(--palette-pink);
    border-width: 3px 3px 2px 0;
    border-radius: 0 20px 20px 0;
    background: #eee;
    box-shadow: 0px 4px 24px 0px #0004;
    margin: 1em 0 2em;
    text-decoration: none;
    white-space: nowrap;
}
.neighborhood .tickets a:before {
    content: "";
    background-image: url('/wp-content/themes/pickathon/images/2026/logo_head.png');
    display: block;
    position: absolute;
    left: -14px;
    top: 50%;
    height: 125px;
    width: 110px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(0, -50%);
}

.neighborhood .headfoot {
    position: absolute;
    z-index: 1;
    bottom: 0;
}

.neighborhood .frame_top .frame_title > div {
    padding-left: 170px;
    backdrop-filter: blur(27px);
}

.neighborhood .header-carousel.controls {
    bottom: calc(1em + 83px);
}

@media (max-width: 480px) {
    .neighborhood .header-carousel.controls {
        bottom: 2.0em;
        transform: translateX(-50%);
    }
    .headfoot {
        transform: translate(0, 100%);
    }

    .neighborhood .icon {
        left: -6px !important;
    }
    .neighborhood .frame_top .frame_title > div {
        padding-left: 120px;
        padding: 16px 23px 16px 120px;
        backdrop-filter: none;
        background-color: #8c9da1;
    }

    .neighborhood-info,
    .schedule-amenities
    {
        flex-wrap: wrap;
    }
    .neighborhood-info .next-prev {
        padding-top: 68px;
        padding-right: 0;
    }
    .lineup .filters {
        justify-content: flex-start !important;
    }
    .lineup .filters span {
        display: block;
        width: 100%;
    }
    .lineup .acts {
        flex-direction: column;
        flex-wrap: wrap !important;
        max-height: 100vw;
    }
    .lineup .act {
        transition: opacity var(--duration), width var(--duration) !important;
    }
    .lineup .act:not(.hidden)  {
        min-width: unset !important;
        width: 50vw !important;
        height: 50vw !important;
    }
    .lineup .act.hidden  {
        transform: scaleX(1.0) !important;
        width: 0;
        height: 50vw;
    }

    .neighborhood .tickets a {
        font-size: 28px !important;
        padding-left: 64px;
    }
    .neighborhood .tickets a:before {
        width: 78px;
        height: 88px;
    }
}