/* THEME OVERRIDES */
#yp_drawer-camps_programs,
[id^="yp_flyout-"] {
	background-color: var(--white) !important;
}

/* INITIALLY HIDE */
#yp_drawer-camps_programs,
#yp_flyout-academic,
#yp_flyout-adventure_outdoor,
#yp_flyout-college_prep,
#yp_flyout-dance,
#yp_flyout-efy,
#yp_flyout-music,
#yp_flyout-performing_arts,
#yp_flyout-personal_enrichment,
#yp_flyout-stem,
#yp_flyout-theater,
#yp_flyout-writing {
	display: none;
}

/* RIBBON */
#yp_ribbon {
	z-index: 102;
    position: relative;
	background-color: var(--white) !important;
	border-bottom: 2px solid var(--yellow);
    width: 100%;
	font-size: 1rem;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.20);
}
#yp_ribbon-content {
	position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
	background-color: var(--white);
}
#yp_logo a,
#yp_logo a:hover {
    border-bottom: 1px solid transparent !important;
	margin-right: 1rem;
}
#yp_logo img {
    width: 200px;
    display: inline-block;
}
#yp_logo,
#yp_menu,
#yp_menu li {
    display: inline-block;
}
#yp_menu ul {
    margin: unset;
    padding: unset;
}
#yp_menu li {
    font-weight: bold;
	margin-right: 1rem;
}
#navigation #yp_menu li a:hover,
#navigation #yp_menu li.yp_expanded:hover {
    color: var(--royal);
	border-bottom: unset !important;
}
#navigation #yp_menu .yp_expanded_menu li a:hover {
    border-bottom: 1px solid var(--navy) !important;
}
#yp_menu #menu-camps_programs:after {
    content: "\00a0\f107";
    font-family: 'Font Awesome 6 Free';
	font-size: .875rem;
	line-height: 1.4;
}
/* EXPANDED MENU */
.yp_expanded {
    color: var(--navy);
	position: relative;
	cursor: pointer;
}
.yp_expanded:after {
    font-family: 'Font Awesome 6 Free';
    line-height: 0;
    content: "\00a0\f107";
}
.yp_expanded_menu {
    display: none;
    position: absolute;
    background-color: var(--white);
    z-index: 2;
	font-size: .875rem;
	border-radius: 0 0 4px 4px;
	border: 3px solid var(--white);
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
	width: content;
}
.yp_expanded:hover .yp_expanded_menu {
    display: block;
}
.yp_expanded_menu li {
	padding: .625rem .875rem;
	line-height: 1.4;
	width: max-content;
}


/* DRAWER */
@keyframes drawerOpen {
	from {
		max-height: 0;
		overflow-y: hidden;
		display: none;
		}
	to {
		max-height: 100%;
		overflow-y: auto;
		display: block;
		}
}
@keyframes drawerClose {
	from {
		max-height: 100%;
		overflow-y: auto;
		display: block;
		}
	to {
		max-height: 0;
		overflow-y: hidden;
		display: none;
		}
}
#yp_drawer-camps_programs.open {
	display: block;
	max-height: 100%	;
	animation-name: drawerOpen;
	animation-duration: 0.5s;
}
#yp_drawer-camps_programs {
	z-index: 101;
    position: absolute;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
	max-width: 1440px;
	max-height: 0;
    background-color: var(--white);
    margin: 0 auto 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.20);
	animation-name: drawerClose;
	animation-duration: 0.5s;
}
#yp_drawer-camps_programs-container {
    display: flex;
    flex-direction: row;
}
#yp_drawer-camps_programs a:hover {
	border-bottom: 1px solid transparent !important;
}
#yp_categories {
    z-index: 103;
	padding: .5rem;
	padding-top: 1.5rem;
    border-right: 1px solid var(--gray_30);
}
#yp_categories li {
    border: 1px solid transparent;
    padding: .375rem;
	padding-right: 1rem;
    margin-right: 1rem;
}
#yp_categories li:hover {
    border: 1px solid var(--royal_50);
    background-color: var(--royal_10);
    border-radius: 8px;
	cursor: pointer;
}
#yp_categories li.active,
#yp_categories li.active:hover {
    border: 1px solid var(--royal_50);
    background-color: var(--royal_20);
    border-radius: 8px;
	cursor: text;
}
#navigation #yp_drawer-camps_programs #yp_categories li.active a {
    color: var(--navy);
}
#yp_drawer-camps_programs-container .close {
    position: absolute;
    right: 1rem;
    top: .5rem;
}
#yp_drawer-camps_programs-container .close a:before {
    content: "\f00d";
    font-family: 'Font Awesome 6 Free';
    color: var(--gray_80);
    font-size: 1.5rem;
}
#yp_drawer-camps_programs-container .close a:hover:before {
    color: var(--orange);
}
#yp_categories [class^="category-"]:before {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-block;
    content: "";
    background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
    margin: 0 .375rem;
}
#yp_categories .category-academic:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-academic-duo.svg);
}
#yp_categories .category-adventure_outdoor:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-adventure_outdoor-duo.svg);
}
#yp_categories .category-college_prep:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-college_prep-duo.svg);
}
#yp_categories .category-dance:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-dance-duo.svg);
}
#yp_categories .category-efy:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-efy-duo.svg);
}
#yp_categories .category-music:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-music-duo.svg);
}
#yp_categories .category-performing_arts:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-performing_arts-duo.svg);
}
#yp_categories .category-personal_enrichment:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-personal_enrichment-duo.svg);
}
#yp_categories .category-stem:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-stem-duo.svg);
}
#yp_categories .category-theater:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-theater-duo.svg);
}
#yp_categories .category-writing:before {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-writing-duo.svg);
}

/* FLYOUT */
.yp_flyout {
    flex-grow: 2;
}
[id^="yp_flyout-"] {
	position: relative;
	z-index: 110;
}
#yp_drawer-camps_programs-container .close.drawer-camps_programs {
	z-index: 108;
	position: absolute;
}
#yp_drawer-camps_programs-container [id^="yp_flyout-"] .close {
	z-index: 114;
	position: absolute;
}
#choose-category {
    position: absolute;
    top: 2rem;
    padding-left: 1.5rem;
}
.yp_flyout .header {
    display: flex;
    flex-direction: row;
    align-items: end;
    background-color: var(--gray_15);
}
.yp_flyout .icon {
    margin-right: 1rem;
    margin-bottom: .5rem;
    width: 60px;
	height: 60px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.yp_flyout .text {
    flex-grow: 2;
}
.yp_flyout .title {
    font-size: 1.75rem;
    margin-bottom: .25rem;
}
.yp_flyout a.overview:after,
.yp_flyout .overview a:after {
    font-family: 'Font Awesome 6 Free';
	content: "\f054\f054";
	margin-left: .375rem;
}
.yp_flyout .header,
.yp_flyout .list {
    padding: 1.5rem;
}
#navigation #yp_drawer-camps_programs a {
	color: var(--royal);
}
#navigation .yp_flyout .list a {
	display: block;
	margin: .5rem;
}
.yp_flyout .subhead {
	font-weight: bold;
	margin: 0 .5rem .5rem;
}

.yp_flyout .column-group {
	margin-bottom: 1.5rem;
}

#yp_flyout-academic .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-academic-color.svg);
}
#yp_flyout-adventure_outdoor .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-adventure_outdoor-color.svg);
}
#yp_flyout-college_prep .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-college_prep-color.svg);
}
#yp_flyout-dance .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-dance-color.svg);
}
#yp_flyout-efy .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-efy-color.svg);
}
#yp_flyout-music .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-music-color.svg);
}
#yp_flyout-performing_arts .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-performing_arts-color.svg);
}
#yp_flyout-personal_enrichment .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-personal_enrichment-color.svg);
}
#yp_flyout-stem .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-stem-color.svg);
}
#yp_flyout-theater .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-theater-color.svg);
}
#yp_flyout-writing .icon {
    background-image: url(../../../../../themes/custom/byuce_theme/images/yp_ribbon/icon-writing-color.svg);
}

#yp_flyout-academic.open,
#yp_flyout-adventure_outdoor.open,
#yp_flyout-college_prep.open,
#yp_flyout-dance.open,
#yp_flyout-efy.open,
#yp_flyout-music.open,
#yp_flyout-performing_arts.open,
#yp_flyout-personal_enrichment.open,
#yp_flyout-stem.open,
#yp_flyout-theater.open,
#yp_flyout-writing.open {
	display: block;
}
#yp_flyout-academic,
#yp_flyout-adventure_outdoor,
#yp_flyout-college_prep,
#yp_flyout-dance,
#yp_flyout-efy,
#yp_flyout-music,
#yp_flyout-performing_arts,
#yp_flyout-personal_enrichment,
#yp_flyout-stem,
#yp_flyout-theater,
#yp_flyout-writing {
	display: none;
}

@media (max-width: 767.980px) {
	#yp_drawer-camps_programs-container {
		flex-direction: column-reverse;
	}
	#yp_categories ul {
		column-count: 3;
		column-width: 262px;
		margin-top: 1.25rem;
	}
	#choose-category {
		display: none;
	}
	#yp_drawer-camps_programs-container [id^="yp_flyout-"] .close {
		top: .5rem;
		left: 0;
		width: 100%;
		margin: 0;
		padding: revert-layer;
		margin: 0 1.25rem;
	}
	.yp_flyout .icon {
		margin-top: 1.5rem;
	}
	#yp_drawer-camps_programs-container .close {
		position: relative;
		left: 1.25rem;
		top: .5rem;
	}
	#yp_drawer-camps_programs-container .close a {
		margin: .5rem 0;
		display: block;
	}
	#yp_drawer-camps_programs-container .close a:before {
		content: "\f177\00a0";
		font-size: 1rem;
		font-family: 'Font Awesome 6 Free';
		color: var(--royal);
	}
	#yp_drawer-camps_programs-container .close.drawer-camps_programs a:before {
		content: "\f00d\00a0";
	}
	#yp_drawer-camps_programs-container .close.drawer-camps_programs a:after {
		content: "Close";
		font-size: 1rem;
		font-family: 'IBM Plex Sans';
		font-weight: bold;
	}
	#yp_drawer-camps_programs-container .yp_flyout .close a:after {
		content: "Camps & Programs";
		font-size: 1rem;
		font-family: 'IBM Plex Sans';
		font-weight: bold;
	}
	#yp_categories ul {
		padding-left: .5rem;
	}
	#yp_categories li {
		padding-left: 0;
	}
	.yp_flyout {
		position: absolute;
		top: 0;
		width: 100%;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.20);
	}
}
@media (max-width: 575.980px) {
	#navigation #yp_menu a {
		color: var(--royal);
	}
	.yp_expanded_menu {
		display: block;
		position: relative;
		background: unset;
		box-shadow: unset;
		font-size: 1rem;
	}
	#yp_menu li {
		margin-right: 0;
	}
	#menu-camps_programs {
		display: block;
		padding-bottom: .5rem;
	}
	#yp_drawer-camps_programs {
		z-index: 102;
	}
	#yp_categories ul {
		column-width: 300px;
	}
	#yp_categories li:hover {
		background: none;
		border: none;
	}
	
	#yp_drawer-camps_programs-container .close.drawer-camps_programs a:before,
	#yp_drawer-camps_programs-container .close a:before {
		content: "\f177\00a0\00a0";
	}
	#yp_drawer-camps_programs-container .close.drawer-camps_programs a:after {
		content: "Youth Programs Menu";
	}
	#yp_drawer-camps_programs-container .yp_flyout .close a:after {
		content: "Camps & Programs";
	}
	#yp_menu #menu-camps_programs:after,
	.yp_expanded_menu li a:after,
	.category-academic:after,
	.category-adventure_outdoor:after,
	.category-college_prep:after,
	.category-dance:after,
	.category-efy:after,
	.category-music:after,
	.category-personal_enrichment:after,
	.category-performing_arts:after,
	.category-stem:after,
	.category-theater:after,
	.category-writing:after {
		content: "\f178";
		font-family: 'Font Awesome 6 Free';
		position: absolute;
		right: 1.5rem;
		color: var(--royal);
		font-size: 1rem;
	}
	.yp_expanded_menu li a:after {
		right: 0;
	}
	/* MOBILE MENU */
	#yp_ribbon-content {
		justify-content: space-between;
	}
	#yp_mobile {
		float:right;
	}
	#yp_mobile:before {
		content: "\f078";
		font-family: 'Font Awesome 6 Free';
		color: var(--royal);
	}
	#yp_mobile.open:before {
		color: var(--red);
	}
	#yp_menu {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		margin-top: 1px;
		padding: 1.25rem;
		background-color: var(--white);
		border-radius: 0 0 8px 8px;
		box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.20);
		transition: 0s;
	}
	#yp_menu.open {
		display: block;
	}
	#yp_mobile.open {
		-webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
		transform: rotate(-180deg);
	}
	#yp_menu.open li,
	#yp_menu.open li a {
		width: 100%;
		display: block;
		padding-right: 0;
		color: var(--navy);
	}
	.yp_expanded:after {
		content: "";
	}
}