#calendar-extraordinaire {
margin: var(--cal-margin-top) auto var(--cal-margin-bottom);
padding: var(--cal-pad-top) 0 var(--cal-pad-bottom);
width: 100%;	
}
.skinny-ad {
	position: relative;
	z-index: 5;
	width: 1400px;
	max-width: 100%;
	margin: -100px auto 50px;
	background: var(--skinny-ad-bg);
	color: #111;
}
.skinny-ad .skinny-ad-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
	padding: 12px 32px;
}
.skinny-ad .skinny-ad-title {
	font-family: 'sentinel', serif;
	font-weight: 600;
	font-size: 30px;
	line-height: 1;
}
.skinny-ad .skinny-ad-right {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}
.skinny-ad .skinny-ad-expiration {
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}
.skinny-ad .skinny-ad-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	background: var(--cream-light);
	border: 1px solid #111;
	color: #111;
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
}
.skinny-ad .skinny-ad-btn svg {
	width: 16px;
	height: 14px;
}
.skinny-ad .skinny-ad-btn svg path {
	fill: #111;
}
@media screen and (max-width: 900px) {
	.skinny-ad {
		margin-top: 0;
	}
	.skinny-ad .skinny-ad-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.skinny-ad .skinny-ad-title {
		font-size: 24px;
	}
	.skinny-ad .skinny-ad-right {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 12px;
	}
	.skinny-ad .skinny-ad-expiration {
		white-space: normal;
	}
}
.banner-ad {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 30px 0 0;
	background: var(--banner-ad-bg);
	color: #111;
	overflow: hidden;
}
.banner-ad .banner-ad-graphic {
	flex: 0 0 320px;
	max-width: 320px;
	background: var(--cream);
	overflow: hidden;
}
.banner-ad .banner-ad-graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner-ad .banner-ad-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 40px 48px;
}
.banner-ad .banner-ad-title {
	font-family: 'sentinel', serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 1;
	color: #111;
	margin-bottom: 12px;
}
.banner-ad .banner-ad-text {
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	color: var(--dark-grey);
	max-width: 550px;
}
.banner-ad .banner-ad-aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.banner-ad .banner-ad-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
}
.banner-ad .banner-ad-expiration {
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: #111;
	white-space: nowrap;
	text-align: center;
}
.banner-ad .banner-ad-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	background: var(--cream-light);
	border: 1px solid #111;
	color: #111;
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
}
.banner-ad .banner-ad-btn svg {
	width: 16px;
	height: 14px;
}
.banner-ad .banner-ad-btn svg path {
	fill: #111;
}
.banner-ad .banner-ad-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 24px;
	background: var(--monarch);
	color: #fff;
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
}
.banner-ad .banner-ad-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #010101;
	color: #111;
	font-family: 'source-sans-pro', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
}
.banner-ad .banner-ad-link svg {
	width: 16px;
	height: 14px;
}
.banner-ad .banner-ad-link svg path {
	fill: #111;
}
@media screen and (max-width: 900px) {
	.banner-ad {
		flex-direction: column;
	}
	.banner-ad .banner-ad-graphic {
		flex-basis: auto;
		max-width: none;
		width: 100%;
		height: 160px;
	}
	.banner-ad .banner-ad-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px;
	}
	.banner-ad .banner-ad-title {
		font-size: 28px;
	}
	.banner-ad .banner-ad-aside {
		align-items: flex-start;
		width: 100%;
	}
	.banner-ad .banner-ad-actions {
		align-items: flex-start;
	}
	.banner-ad .banner-ad-expiration {
		text-align: left;
	}
}
.calendar-box {
width:1400px;
max-width: 100%;
margin: 0 auto;
z-index: 1;
min-height: 1200px;
}
.background-images {
width: 100%;
position: absolute;
height: 100%;
top: 0;
left:50%;
transform:translate(-50%,0);	
z-index: 0;
overflow: visible;		
}
.backgroundImage {
position: absolute;	
}
.backgroundImage img {
width: 100%;
height: auto;	
}
.calendar-tabs {
display: flex;
column-gap: 4px;	
z-index: 2;
margin-bottom: -1px;
}
.calendar-tabs .cal-tab {
padding: 16px 10px;
background: var(--cream);
color: var(--dark-monarch);	
line-height: 24px;
border-bottom: 1px solid rgba(95,85,65,.2);
transition: all .5s;
}
.calendar-tabs .cal-tab:hover {
cursor: pointer;
color: var(--dark-grey);
background: white;
}
.calendar-tabs .cal-tab.selected {
background:white;
padding: 12px 10px 16px;
font-family: 'source-sans-pro', sans-serif; font-weight: 700;
line-height: 22px;
color: var(--dark-grey);
border-top: 4px solid var(--dark-monarch);
border-bottom: 1px solid white;	
}
.calendar-contents {
background: white;
border: 1px solid rgba(95,85,65,.2);
padding: 30px;	
z-index: 1;
}
.date-flex {

display: flex;
justify-content: center;
align-items: center;	
width: max-content;

}
.date-flex .date-filter { width: 450px; flex-shrink: 0; max-width: 100%; }
.date-flex .date-filter input {
	padding: 12px 17px;
	border: 1px solid rgba(95,85,65,.2);
	border-radius: 6px;
	font-size: 18px;	
	text-align:center;
	width: 100%;
}
.date-next {
	position: absolute;
	right: -36px;
	transform:rotate(-90deg);	
	display:none;
}
.date-title { text-align: center; }
.calendar-items .performance {
	border: 1px solid rgba(95,85,65,.2);
	width: 100%;	
	margin-bottom: 25px;
}
.calendar-items h3 { margin-bottom: 14px; }
.calendar-items .performance:last-child { margin-bottom: 0; }
.calendar-items .performance .performance-title {
	width: 100%;
	background: var(--fossil-rim);
	padding: 13px;
	color: white;	
}
.calendar-items .performance .performance-content {
	padding: 20px;
	background: white;	
}
.calendar-items .performance .performance-content .pimage-flex {
	display: flex;
	column-gap: 21px;	
}
.calendar-items .performance .performance-content .pimage-flex .pimage {
	width: 212px;
	height: 0;
	padding-bottom: 140px;
	flex-shrink: 0;	
}
.calendar-items .performance .performance-content .perf-content-flex {
display: flex;
column-gap: 21px;
width: 100%;	
}
.calendar-items .performance .performance-content .perf-content-flex .perf-content { width: 100%; }
.calendar-items .performance .performance-content .perf-content-flex .pricing-block { 
width: 270px; 
flex-shrink: 0; 
padding-left: 20px;
border-left: 1px solid rgba(95,85,65,.2);
display: flex;
flex-direction: column;
justify-content: center;
}
.calendar-items .performance .performance-content .perf-content-flex .pricing-block ul {
list-style-type: disc;
padding-left:24px;	
}
.calendar-items .performance .performance-content .perf-bottom-bar {
display: flex;
background: var(--cream);
border: 1px solid rgba(95,85,65,.2);
padding: 16px 17px 18px 24px;
margin-top: 16px;
align-items: center;
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-time {
margin-right: auto;	
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-warning { 
background: var(--monarch);
color: white;
position: absolute;
width: max-content;
height: 100%;
left: 50%;
top:0;
transform:translate(-50%,0);	
line-height: 28px;
padding:16px;
}	
.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets a.cta.perf-cta, .calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets span {
color: var(--dark-monarch);	
background: none;
border: 0;
padding: 0;
font-family: "source-sans-pro", sans-serif; font-weight: 700;
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets span {
	display: flex; 
	align-items: center;
	font-size: 16px;
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets a.cta.perf-cta svg, .calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets span svg {
margin-left: 20px; 	
width: 32px;
margin-right: 0;
height: 32px;
}

.calendar-events {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.calendar-events .event {
	border: 1px solid rgba(95,85,65,.2);
	background: var(--cream);
}
.calendar-events .event .performance-title {
	width: 100%;
	background: var(--fossil-rim);
	padding: 13px;
	color: white;	
}

.calendar-events .event .event-content-box {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.calendar-events .event .event-content-box .pimage-flex {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.calendar-events .event .event-content-box .pimage-flex .pimage {
	width: 212px;
	height: 133px;
	flex-shrink: 0;
}

.calendar-events .event .event-content-box .pimage-flex .perf-content-flex {
	display: flex;
	column-gap: 21px;
	width: 100%;
}

.calendar-events .event .event-content-box .pimage-flex .perf-content-flex .perf-content { width: 100%; }
.calendar-events .event .event-content-box .pimage-flex .perf-content-flex .pricing-block { 
	width: 270px; 
	flex-shrink: 0; 
	padding-left: 20px;
	border-left: 1px solid rgba(95,85,65,.2);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.calendar-events .event .event-content-box .pimage-flex .perf-content-flex .pricing-block ul {
list-style-type: disc;
padding-left:24px;	
}

.calendar-events .event .event-content-box .event-li {
	background: white;
	padding: 17px 24px;
	display: flex;
	align-items: center;
	border: 1px solid rgba(95,85,65,.2);
}

.calendar-events .event .event-content-box .event-li .event-date {
	font-family: "source-sans-pro", sans-serif; font-weight: 700;
	font-size: 16px;
	margin-right: 55px;
	line-height: 20px;
	width: 275px;
	flex-shrink: 0;
}

.calendar-events .event .event-content-box .event-li .event-title {
	font-size: 16px;
	line-height: 22px;
	margin-right: auto;
}

.calendar-events .event .event-content-box .event-li .event-bb-tickets a.cta.perf-cta {
	color: var(--dark-monarch);	
	background: none;
	border: 0;
	padding: 0;
}

.calendar-events .event .event-content-box .event-li .event-bb-tickets a.cta.perf-cta svg {
	margin-left: 20px; 	
	width: 32px;
	margin-right: 0;
	height: 32px;
}

.calendar-events .event .event-content-box .event-li .event-bb-tickets span {
	display: flex; 
	align-items: center;
	font-size: 16px;
	font-family: "source-sans-pro", sans-serif; font-weight: 700;
	color: var(--dark-monarch);
}
.calendar-events .event .event-content-box .event-li .event-bb-tickets span svg {
margin-left: 20px; 	
width: 32px;
margin-right: 0;
height: 32px;
color: var(--dark-monarch);
}

.cal-title-control-flex {
	height: 36px;
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

.cal-title-control-flex hr.cal-sep {
	background:rgba(95,85,65,.2);
	height:1px;
	border:none;
	width: 100%;
	margin-bottom:20px;
}

.calendar-controls {
	margin-left: auto;
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 20px;
	width:max-content;
	flex-shrink: 0;
}

.calendar-controls .cc-regular, .calendar-controls .cc-listview {
	font-size:16px;
	line-height: 22px;
	border-bottom:1px solid var(--monarch);
	padding-bottom: 4px;
}

.calendar-controls .cc-regular:hover, .calendar-controls .cc-listview:hover {
	cursor: pointer;
}

.calendar-controls .cc-regular.selected, .calendar-controls .cc-listview.selected {
	font-family: "source-sans-pro", sans-serif; font-weight: 700;
	font-size:16px;
	line-height: 20px;
	border-bottom:3px solid var(--monarch);
}

.calendar-controls .cc-bar {
	background:rgba(95,85,65,.5);
	height: 26px;
	width: 1px;
}

.filter-bar {
	display: flex;
	justify-content: center; 
	align-items: center;
	width: max-content;
	margin: 0 auto 20px;
	gap: 48px;
}

.scout-filters, .summercamp-filters {
	display: flex;
	gap: 48px;
}

.select-flex {
display:flex;
		padding: 12px 17px;
		border: 1px solid rgba(95,85,65,.2);
		border-radius: 6px;
		font-size: 18px;	
		width: 250px;
}

	.select-flex:hover {
		cursor: pointer;	
	}
	.select-flex > svg {
		position: absolute;
		right:17px;
		top: 50%;
		transform:translate(0,-50%);	
	}
	.scout-event-type-dropdown, .scout-rank-dropdown, .sc-event-type-dropdown, .sc-ages-dropdown {
		position: absolute;
		width: 100%;
		height: auto;
		background: white;
		box-shadow: 0 6px 16px 0px rgba(0,0,0,.06);
		z-index: 99;
		padding:16px;
		line-height: 34px;
		overflow:hidden;
		border: 1px solid #cdcdcd;
		border-radius: 8px;	
	}
	
	.scout-event-type-dropdown li, .scout-rank-dropdown li, .sc-event-type-dropdown li, .sc-ages-dropdown li {
		color: var(--dark-grey);
		width: max-content;
		position:relative;
		display: flex;
  		align-items: center;
  		gap: 8px;
	}
	.scout-event-type-dropdown li svg:first-child, .scout-rank-dropdown li svg:first-child, .sc-event-type-dropdown li svg:first-child, .sc-ages-dropdown li svg:first-child {
		display:block;		
	}
	.scout-event-type-dropdown li svg:last-child, .scout-rank-dropdown li svg:last-child, .sc-event-type-dropdown li svg:last-child, .sc-ages-dropdown li svg:last-child {
		display:none;	
		position: absolute;
		left: 4px;
		top: 50%;
		transform:translate(0,-50%);
		width: 14px;
		height:14px;
	}
	.scout-event-type-dropdown li svg path , .scout-rank-dropdown li svg path, .sc-event-type-dropdown li svg path, .sc-ages-dropdown li svg path {
		fill: var(--monarch);	
	}
	.scout-event-type-dropdown li.selected svg:last-child, .scout-rank-dropdown li.selected svg:last-child, .sc-event-type-dropdown li.selected svg:last-child, .sc-ages-dropdown li.selected svg:last-child {
		display:block;	
		position: absolute;
		top: 50%;
		transform:translate(0,-50%);
	}
	.scout-event-type-dropdown li:hover, .scout-rank-dropdown li:hover, .sc-event-type-dropdown li:hover, .sc-ages-dropdown li:hover, .scout-event-type-dropdown li.selected, .scout-rank-dropdown li.selected, .sc-event-type-dropdown li.selected, .sc-ages-dropdown li.selected {
		color:var(--monarch);
		cursor: pointer;
	}
	.date-filter:hover { cursor: pointer;}
	.cal-mobile-control {
		display:none; 	
	}
	.desktop-loader { display:block; width: 100%; animation: fadeinout 2s infinite; transition: all 1s; }
	.mobile-loader { display:none; }
	@keyframes fadeinout {
		0% { opacity: 1; }
		50% { opacity: .8; }
		100% { opacity: 1; }
	}
	.progress-bar {
		height: 12px; 
		margin: 20px 0;
		background:	var(--cream);
		border: 1px solid var(95,85,65,.2);
		width:100%;
		overflow:hidden;
	}
	.progress {
		width: 100%;
		height: 100%;
		background-color: var(--monarch);
		animation: indeterminateloader 1s infinite linear;
		transform-origin: 0% 50%;	
	}
	
	@keyframes indeterminateloader {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}
	
	@media screen and (max-width: 1200px) {
		.calendar-items .performance .performance-content .perf-content-flex, .calendar-events .event .event-content-box .pimage-flex .perf-content-flex {
			align-items: flex-start;		
			flex-direction:column;
		}
		
		.calendar-tabs {
			display:none;		
		}	
		.cal-mobile-control {
			display:flex;	
			padding-bottom: 0px;
			border-bottom: 1px solid var(--monarch);
			margin-bottom: 10px;	
		}
		.cal-mobile-control:hover { cursor: pointer; }
		.cal-mobile-control .selected {
			margin-right: auto;
			font-family: 'termina', sans-serif;
			font-weight: 400;
			font-size: 14px;
			text-transform: uppercase;
		}
		.cal-mobile-control .dropdown svg {
			width: 24px;
			height:24px;
			transition: all .25s;		
		}
		.cal-mobile-control .dropdown svg path {
			fill: var(--monarch);
		}
		.ct-disp-mobile {
			position: absolute;
			top:30px;
			left: 0;
			height: max-content;
display: flex;
width: 100%;
flex-direction:column;
column-gap: 4px;	
z-index: 2;
margin-bottom: -1px;
border: 1px solid rgba(95,85,65,.2);
box-shadow: var(--hmns-box-shadow-light);
animation: growMenu .25s ease-in-out forwards;
}
@keyframes growMenu {
	from { opacity:0; height:0px; }
	to { opacity: 1; height:330px; }
} 
.rotate90 {
	transform:rotate(-90deg);
}
.calendar-tabs .cal-tab {
padding: 4px 10px;
background: var(--cream);
color: var(--dark-monarch);	
line-height: 24px;
border-bottom: 1px solid rgba(95,85,65,.2);
transition: all .5s;
width: 100%;
}
.calendar-tabs .cal-tab:hover {
cursor: pointer;
color: var(--dark-grey);
background: white;
}
.calendar-tabs .cal-tab.selected {
background:white;
padding: 4px 10px;
font-family: 'source-sans-pro', sans-serif; font-weight: 700;
line-height: 22px;
color: var(--dark-grey);
border-top: 0px solid var(--dark-monarch);
border-left: 4px solid var(--dark-monarch);
border-bottom: 1px solid white;	
}
.filter-bar {
	max-width:100%;
}
	
		.filter-bar, .scout-filters {
			flex-direction: column;
			width:100%;
			gap:12px;
		}
		.select-flex, .date-flex .date-filter input {
	display: flex;
	padding: 4px 12px;
	width: 100%;
}
	.date-filter, .date-flex, .dates { width: 450px; margin: auto; max-width: 100%; }
	.scout-filters, .summercamp-filters {
	display: flex;
	gap: 12px;
	flex-direction: column;
	width: 450px;
	margin: 0 auto;
}
	
		#calendar-extraordinaire { padding-top: 0;  } 
		.calendar-inner-box { padding-top: 30px; }
		.cal-title-control-flex hr.cal-sep { display: none; }
		.calendar-controls { margin: 0 auto; }
		.calendar-events .event .event-content-box .event-li {
			flex-direction: column;
			align-items: center;
			justify-content: center;			
			text-align:center;
			gap: 12px;
		}
		.calendar-events .event .event-content-box .event-li .event-date, .calendar-events .event .event-content-box .event-li .event-title { margin-right: 0; }
		.calendar-events .event .event-content-box .event-li .event-bb-tickets { width: 100%; }
		.calendar-events .event .event-content-box .event-li .event-bb-tickets svg { display:none !important; }
		.calendar-events .event .event-content-box .event-li .event-bb-tickets a.cta.perf-cta {
	color: white;
	background: var(--monarch);
	border: 0;
	padding: 12px 24px;
	width: 100%;
	display: block;
}
		.desktop-loader { display:none; }
		.mobile-loader { display:block; width: 100%; animation: fadeinout 2s infinite; transition: all 1s; }
		.calendar-items .performance .performance-content .pimage-flex, .calendar-events .event .event-content-box .pimage-flex {
			flex-direction: column;
			gap: 21px;
		}
		.calendar-items .performance .performance-content .perf-content-flex, .calendar-events .event .event-content-box .pimage-flex .perf-content-flex {
			flex-direction:column; 
			gap: 21px;
			width: 100%;
			flex-shrink: 0;
			
		}
		.calendar-items .performance .performance-content .perf-content-flex .pricing-block, .calendar-events .event .event-content-box .pimage-flex .perf-content-flex .pricing-block {
	width: 100%;
	flex-shrink: 0;
	padding-left: 0px;
			padding-top: 20px;
			border-left: 0px solid rgba(95,85,65,.2);
			border-top: 1px solid rgba(95,85,65,.2);
}
	.calendar-items .performance .performance-content .pimage-flex .pimage, .calendar-events .event .event-content-box .pimage-flex .pimage {
			width: 100%;
			height: 0;
			padding-bottom: 43.5%;
			flex-shrink: 0;
		}	
		
	}
	@media screen and (max-width:768px) {
		
		.calendar-items .performance .performance-content .perf-bottom-bar .bb-warning {
	background: none;
	color: var(--fossil-rim);
	position: relative;
	width: max-content;
	height: 100%;
	left: unset;
	top: unset;
	transform: unset;
	line-height: 28px;
	padding: 8px;
	margin: 0 auto;
}
		.calendar-contents { padding: 16px 12px; }
			
		.calendar-items .performance .performance-content .perf-bottom-bar {
	display: flex;
	background: var(--cream);
	border: 1px solid rgba(95,85,65,.2);
	padding: 16px 8px 12px;
	margin-top: 16px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-time {
	margin-right: unset;
}
.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets { width: 100%; }
.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets a.cta.perf-cta {
	color: white;
	background: var(--monarch);
	border: 0;
	padding: 0;
	width: 100%;
	display: block;
	text-align: center;
	padding: 8px;
	margin-top: 12px;
}
	.calendar-items .performance .performance-content .perf-bottom-bar .bb-tickets svg { display: none; }
		
	}