@charset "utf-8";
/***** New Show Styles - 2025 *****/

/***** Heads Up! *****/
/***** This is only loaded when segment_1 == "shows" *****/
/***** Show cards on the home page, etc need to be styled elsewhere ******/

#show-page header {
	display: flex;
	flex-direction: column;
	color: var(--cp-primary-bold);
	padding: 4rem 1.5rem;
	border-bottom: 1px solid rgb(232 104 103);
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
	z-index: 5;
}

#show-page header.attach-bg {
	background-color: #f7e5e2;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}


/* ..... // Begin Show Archive Page // .... */
/* ..... // "Show Archive" == Calendar Page // .... */

#show-archive {
	display: flex;
	flex-direction: column;
	background: var(--cp-primary);
}

#show-archive.attach-bg {
   background-color: #f7e5e2;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#archive-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#show-archive header {
	display: flex;
	flex-direction: column;
	color: var(--cp-primary-bold);
	padding: 4rem 1.5rem;
	z-index: 5;
}

#show-archive h1 {
	display: flex;
    font-family: poppins, sans-serif;
    font-size: calc(.8rem + .2vw);
    color: white;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400;
    text-align: center;
    background: var(--cp-primary);
    padding: 1.2rem 1rem 1rem;
    border-radius: 4px;
}

#show-archive h2 {
	position: relative;
	font-size: calc(1.4rem + .3vw);
	font-weight: 500;
	font-family: pt-sans-pro-narrow, sans-serif;
	text-align: center;
	padding: 0 1rem 2rem;
	color: white;
	
}

#show-archive .archive-filter {
    display: flex;
    flex-direction: column;
}

#show-archive .filter-options {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	font-size: calc(.6rem + .2vw);
	font-weight: 600;
	position: relative;
	color: white;
	padding: 1rem 1.5rem 2rem;
	border-radius: 4px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: var(--cp-primary);
}

#show-archive .filter-options .options-wrap {
	position: relative;
	display: flex;
	margin: 0 auto;
}

#show-archive .filter-options a.filter-btn {
	padding: 1.2rem 1rem;
	border-radius: 4px;
	background: var(--cp-primary-ultra-light);
	font-weight: 600;
	line-height: 1;
	align-items: center;
	display: flex;
	color: var(--cp-primary-bold);
	text-transform: uppercase;
	font-size: calc(.6rem + .3vw);
	height: 45px;
	font-family: pt-sans-pro-narrow, sans-serif;
    transition: all 0.4s ease;
}

#show-archive .filter-options a:hover.filter-btn {
    filter: brightness(1.1);
}

#show-archive .filter-options .input-label {
	text-transform: uppercase;
  	letter-spacing: .1em;
}

#show-archive .filter-options .filter-btn.active,
#show-archive .filter-options .filter-custom.active {
	background: var(--cp-primary-brighter);
	color: white;
}

.daterangepicker td.in-range {
	background-color: var(--base-lighter);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: var(--cp-primary-dark);
}

#show-archive .filter-options input[name="date_range"], #show-archive .filter-options select.zone-list {
	background: white;
	border-style: none;
	border-radius: 2px;
	padding: .8em 1em;
	font-size: .75rem;
	height: 45px;
	color: var(--cp-primary-bold);
  	font-weight: 500;
}

#show-archive a.clear-filters {
    padding: .6rem 3rem;
    border-radius: 4px;
    background: var(--cp-primary-brighter);
    font-weight: 600;
    line-height: 1;
    align-items: center;
    display: flex;
    color: white;
    text-transform: uppercase;
    font-size: calc(.6rem + .3vw);
    font-family: pt-sans-pro-narrow, sans-serif;
	transition: all 0.4s ease;
}

#show-archive a:hover.clear-filters {
    background: var(--cp-primary-brighter);
    color: white;

}

#show-archive .archive-results {
	width: 100%;
    margin-left: auto;
    margin-right: auto;
	display: flex;
	flex-direction: column;
    padding: 1.5rem;
    background: var(--white-trans-40);
    border-radius: 4px;
    border: 1px solid var(--white-trans-50);

    a.upcoming-show-box {
        display: flex;
        overflow: hidden;
        height: 100%;
        flex-grow: 1;
        flex-direction: column;
        padding: 1.5rem 1.5rem 1.75rem;
        border-radius: 4px;
        border: 1px solid var(--white-trans-50);
        color: white;
        transition: background-color .4s ease;

        .heading {
            font-size: calc(.7rem + .1vw);
            letter-spacing: .07em;
            text-transform: uppercase;
            margin-bottom: .25rem;
            font-weight: 600;
        }

        .show-title {
            font-size: calc(1.1rem + .5vw);	
            font-weight: 700;
            font-family: pt-sans-pro-narrow, sans-serif;
            margin-bottom: .25rem;
        }

        .show-details {
            font-weight: 500;
            line-height: 1.2;
            font-size: calc(.8rem + .2vw);
            margin-bottom: 1.5rem;
            font-family: pt-sans-pro-narrow, sans-serif;
        }

        .attending {
            display: flex;
            margin-top: auto;
            font-size: calc(1.2rem + .3vw);	
            font-weight: 800;
            text-transform: uppercase;
            font-family: pt-sans-pro-narrow, sans-serif;
            letter-spacing: .03em;

            > div {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-right: .25rem;
                padding: 5px 8px 5px 5px;
                border-radius: 3px;
                background: var(--white-trans-60);
            }

            svg {
                font-size: calc(1.4rem + .3vw);
                margin-right: 5px;
            }
        }
    }

    a.upcoming-show-box.dark {
        background-color: var(--white-trans-40);
        color: var(--cp-primary-medium);

    }

    a.upcoming-show-box.light {
        background-color: var(--white-trans-60);
        color: var(--cp-primary-brighter);        
    }

    a:hover.upcoming-show-box {
        background-color: var(--white-trans-80);
    }
}

#show-archive a.past-archive, #hs-archive a.past-archive {
	text-align: center;
	margin-top: .5rem;
	color: var(--cp-primary);
	padding: .4rem .75rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
}

/* ..... CTA Footer for bottom of shows pages ****/
#shows-footer {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5rem 2rem;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	background-color: black;
	background-image:url(https://hjxbucket.s3.us-east-2.amazonaws.com/site/heroes/horse-show-jump.webp);
	background-position: center center;
	font-size: calc(.9rem + .2vw);
	border-top: var(--accent-light) 40px solid;
	min-height: 55vh;
    align-items: center;
}

#shows-footer .content-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	position: relative;
  	z-index: 10;
}

#shows-footer .content-container .title-wrap {
	display: flex;
	flex-direction: column;
	max-width: 360px;
}
#shows-footer .content-container .title {
	font-size: 1.8em;
	color: var(--accent-light);
	text-transform: uppercase;
	line-height: 1.4;
	font-weight: 600;
}

#shows-footer .content-container .subtitle {
	font-size: .65em;
	color: white;
	line-height: 1.6;
	font-weight: 500;
	margin-bottom: .9em;
	text-transform: uppercase;
	letter-spacing: .1em;
}

#shows-footer .content-container .content-wrap {
	display: flex;
	flex-direction: column;
	flex-grow: 2;
}

#shows-footer .content-container .content p {
	font-size: .75em;
	color: white;
	margin: 0;
  	padding: 2rem 0 0;
	line-height: 2.2;
	max-width: 600px;
}

#shows-footer .content-container .content-wrap a {
	color: var(--cp-primary-bold);
	background: var(--cp-primary-light);
	padding: .2em .7em .1em;
	border-radius: 2px;
	line-height: 1;
    white-space: nowrap;
}

#shows-footer a.cta {
	color: var(--cp-primary-bold);
	font-weight: 600;
	font-size: .75em;
	background: var(--cp-primary-ultra-light);
	padding: 1.2em 2.4em;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .2em;
	display: inline-flex;
	margin: 1rem auto 0 0;
	line-height: 1;
	transition: .5s ease;
}

#shows-footer a:hover.cta {
	filter: brightness(1.4);
}

/* ..... Media Queries for #shows-footer section ****/
@media screen and (min-width:576px) {
	#shows-footer {
		padding: 5rem 4rem;
	}
}
@media screen and (min-width:768px) {
	#shows-footer {
		padding: 6rem;
	}
	#shows-footer .content-container .title {
		font-size: 2.2em;
	}
    #shows-footer .content-container .content p {
        font-size: .85em;
    }
}
@media screen and (min-width:1200px) {
	#shows-footer {
		padding: 12rem 6rem;
	}
	#shows-footer .content-container .content p {
		margin: auto;
		font-size: 1em;
	}
}


/*********-------- Individual Show Pages --------**********/

#show-page {	
	height: 100%;	
	display: flex;
	flex-direction: column;
}

#show-page.attach-bg {
background-color: #f7e5e2;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#show-page h1 {
	font-family: pt-sans-pro-narrow, sans-serif;
	position: relative;
	margin: .2em 0;
	font-size: calc(2.4rem + .5vw);
	font-weight: 700;
}

#show-page .go-back {
	text-transform: uppercase;
	font-size: calc(.5rem + .2vw);
	letter-spacing: .07em;
	font-weight: 800;
	background: rgba(133, 53, 64, .8);
	padding: 1rem 2rem;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid rgba(133, 53, 64, .9);
}

#show-page .go-back a {
	color: white;
}
#show-page #show-page-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white-trans-20);
}

#show-page #show-details {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    background: var(--white-trans-60);
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--cp-primary-light);
    border-bottom: none;

    .headline-wrap {
        display: inline-flex;
        flex-direction: column;
        font-size: calc(.6rem + .2vw);
        font-weight: 600;
        position: relative;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 4px;
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        background-color: #E86867;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cdefs%3E%3CradialGradient id='a' cx='500' cy='500' r='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E86867'/%3E%3Cstop offset='1' stop-color='%23F7E5E2'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='500' cy='500' r='96.1%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F8D0D0' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23F8D0D0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1000' height='1000'/%3E%3Cg fill='none' stroke='%23EB9593' stroke-width='1' stroke-miterlimit='10' stroke-opacity='0.51'%3E%3Crect x='12.5' y='12.5' width='975' height='975'/%3E%3Crect x='25' y='25' width='950' height='950'/%3E%3Crect x='37.5' y='37.5' width='925' height='925'/%3E%3Crect x='50' y='50' width='900' height='900'/%3E%3Crect x='62.5' y='62.5' width='875' height='875'/%3E%3Crect x='75' y='75' width='850' height='850'/%3E%3Crect x='87.5' y='87.5' width='825' height='825'/%3E%3Crect x='100' y='100' width='800' height='800'/%3E%3Crect x='112.5' y='112.5' width='775' height='775'/%3E%3Crect x='125' y='125' width='750' height='750'/%3E%3Crect x='137.5' y='137.5' width='725' height='725'/%3E%3Crect x='150' y='150' width='700' height='700'/%3E%3Crect x='162.5' y='162.5' width='675' height='675'/%3E%3Crect x='175' y='175' width='650' height='650'/%3E%3Crect x='187.5' y='187.5' width='625' height='625'/%3E%3Crect x='200' y='200' width='600' height='600'/%3E%3Crect x='212.5' y='212.5' width='575' height='575'/%3E%3Crect x='225' y='225' width='550' height='550'/%3E%3Crect x='237.5' y='237.5' width='525' height='525'/%3E%3Crect x='250' y='250' width='500' height='500'/%3E%3Crect x='262.5' y='262.5' width='475' height='475'/%3E%3Crect x='275' y='275' width='450' height='450'/%3E%3Crect x='287.5' y='287.5' width='425' height='425'/%3E%3Crect x='300' y='300' width='400' height='400'/%3E%3Crect x='312.5' y='312.5' width='375' height='375'/%3E%3Crect x='325' y='325' width='350' height='350'/%3E%3Crect x='337.5' y='337.5' width='325' height='325'/%3E%3Crect x='350' y='350' width='300' height='300'/%3E%3Crect x='362.5' y='362.5' width='275' height='275'/%3E%3Crect x='375' y='375' width='250' height='250'/%3E%3Crect x='387.5' y='387.5' width='225' height='225'/%3E%3Crect x='400' y='400' width='200' height='200'/%3E%3Crect x='412.5' y='412.5' width='175' height='175'/%3E%3Crect x='425' y='425' width='150' height='150'/%3E%3Crect x='437.5' y='437.5' width='125' height='125'/%3E%3Crect x='450' y='450' width='100' height='100'/%3E%3Crect x='462.5' y='462.5' width='75' height='75'/%3E%3Crect x='475' y='475' width='50' height='50'/%3E%3Crect x='487.5' y='487.5' width='25' height='25'/%3E%3C/g%3E%3Crect fill-opacity='0.51' fill='url(%23b)' width='1000' height='1000'/%3E %3C/svg%3E");
        background-attachment: fixed;
        background-size: cover;
        background-blend-mode: hard-light;

        
       /* .show-location {
            font-size: calc(.8rem + .2vw);
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: .08em;
        } */

        .show-type {
            display: flex;
            align-items: center;
            padding:  0 12px;
            height: 36px;
            text-transform: uppercase;
            color: var(--cp-primary-medium);
            font-size: calc(.7rem + .3vw);
            margin-right: .25rem;
            margin-bottom: .25rem;
            line-height: 1;
            font-weight: 600;
            background: var(--white-trans-60);
            border: 1px solid var(--cp-primary-ultra-light);
            font-family: pt-sans-pro-narrow, sans-serif;
            border-radius: 2px;
        }

        a.circuit-link {
            display: flex;
            align-items: center;
            height: 36px;
            line-height: 1;
            color: var(--cp-primary-brighter);
            font-size: calc(.7rem + .3vw);
            font-weight: 600;
            background: var(--white-trans-60);
            border: 1px solid var(--cp-primary-ultra-light);
            border-radius: 2px;
            padding: 0 12px;
            text-transform: uppercase;
            font-family: pt-sans-pro-narrow, sans-serif;
            transition: all .5s ease;
            margin-bottom: .25rem;
        }

        a:hover.circuit-link {
            background: var(--white-trans-80);
        }

        .attending {
            display: flex;
            justify-content: center;
            margin-top: auto;
            font-size: calc(1.8rem + .3vw);	
            font-weight: 800;
            text-transform: uppercase;
            font-family: pt-sans-pro-narrow, sans-serif;
            letter-spacing: .03em;
            color: white;
        }

        .attending > div {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: .25rem;
            background: var(--white-trans-20);
            border: 1px solid var(--white-trans-30);
            padding: 5px 8px 5px 5px;
            border-radius: 3px;

            .attending-sh svg {
                font-size: calc(1.4rem + .3vw);
                margin-right: 5px;
            }

            .attending-sb svg {
                font-size: calc(1.8rem + .3vw);
                margin-right: 5px;
            }
        }

    }

    .details-wrap {
        display: inline-flex;
        flex-direction: column;
        font-size: calc(.6rem + .2vw);
        font-weight: 600;
        position: relative;
        color: var(--cp-primary-brighter);
        padding: 1rem 1rem 0;
        border-radius: 4px;
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;

        .show-dates {
            font-size: calc(.65rem + .2vw);
            text-transform: uppercase;
            letter-spacing: .1em;
            font-weight: 800;
        }
    }
}

#show-page #attending {
    display: flex;
    flex-direction: column;
}

#show-page .attending-wrap {
    display: block;
	column-count: 1;             /* number of columns */
    column-gap: 1rem;          /* space between columns */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1000px;
    background: var(--white-trans-60);
    padding: 1rem 2rem;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--cp-primary-light);
    border-top: none;

    .item-wrap {
        position: relative;
        display: inline-block;  /* important - makes the element respect the column layout */
        break-inside: avoid;         /* prevent item from breaking between columns */
        width: 100%;
        min-height: 300px;
        margin: .25rem 0;
        font-family: pt-sans-pro-narrow, sans-serif;

        img {
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
            z-index: 1;
            border-radius: 3px;
        }

        div.img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            transition: background-color .4s ease-in-out;
            background-color: var(--black-trans-60);
            background: linear-gradient(16deg, rgba(0,0,0,1) 0%, rgba(5,5,5,0.36876757538953087) 43%, rgba(5,5,5,0.09145665101978295) 71%, rgba(0,0,0,0) 100%);
        }

        .sb-logo {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 100%;
            max-width: 50px;
            aspect-ratio: 1 / 1;
            display: block;
            z-index: 99;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

             img {
                width: 100%;
                object-fit: cover;
                border-radius: 2px;
                border: var(--black-trans-10) 1px solid;
            }
        }

        .bottom-content {
            display: flex;
            flex-direction: column;
            position: absolute;
            bottom: 0;
            z-index: 3;
            width: 100%;
            font-size: calc(1rem + .2vw);
            color: white;

            .inner {
                padding: 1rem;

                a.title {
                    color: white;
                    font-size: 1.8em;
                    line-height: 1;
                    font-weight: 300;
                    transition: color .4s ease;
                }

                a:hover.title {
                    color: var(--cp-primary-ultra-light);
                }

                a.details {
                    padding: 8px 14px;
                    background: var(--black-trans-40);
                    border: 1px solid var(--cp-primary);
                    border-radius: 3px;
                    margin-top: .5rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: var(--cp-primary);
                    text-transform: uppercase;
                    font-size: .9em;
                    letter-spacing: .03em;
                    transition: all .4s ease;
                }

                a:hover.details {
                    background: var(--black-trans-80);
                }

                .location {
                    display: flex;
                    align-items: center;
                    color: var(--cp-primary-light);
                    text-transform: uppercase;
                    font-weight: 600;
                    font-size: .9em;
                    letter-spacing: .08em;
                }

            }
            
        }
    }
}

@media screen and (min-width: 768px) {
  #show-page .attending-wrap {
    columns: 2 auto;
  }
}

@media screen and (min-width: 992px) {
  #show-page .attending-wrap {
    columns: 3 auto;
  }
}