@import url('./search-custom.css');
@import url('https://www.miamidade.gov/resources/global-components/boilerplate.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* ------------------------------------------------

Table of Contents - Test

01. GENERAL
02. BREADCRUMBS
02. SLIDER

------------------------------------------------*/
/* ------------------------------------------------*/
/* ---------------->>> GENERAL <<<-----------------*/
/* ------------------------------------------------*/
:root{
	--accent: hsl(2.75deg 74.01% 34.71%);
	--body-font-color: hsl(8.57deg 3.91% 35.1%);
	--title-color: hsl(0deg 0% 15.69%);
	--bg-alt-color: hsl(187.5deg 30.77% 94.9%);

	--slider-desktop-height: 550px;
	--box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);

	--transition-style: 0.3s ease-out;

	--title-font-family: "Noto Serif", serif;
	--nav-font-family: "Noto Sans", sans-serif;

	--section-spacing: 6.5rem;
	--border-radius: 10px;
	/*--component-section: 4rem;*/
	--component-section: 3rem;
}



h1, h2, h3, h4, h5, h6 {
	font-family: var(--title-font-family);
}


.mdc-custom__main-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--title-color);
}


.mdc-custom__content__title {
	border: none;
	margin-block: 0 0.25rem;
}


body {
	font-family: "Roboto", sans-serif;
}


.mdc-custom__main-content {
	color: var(--body-font-color);
	margin-block: 0 2rem;
}


/* Should possibly be only for mobile */
.mdc-custom__main-content > .container > .row > .col-lg-3 {
	position: sticky;
  top: 0;
  height: 100%;
}

:is(.mdc-custom__mega-container, .mdc-custom__single-li-container) > ul a,
.mdc-custom__main-content a {
	color: #295D92;
}


.next-prev__container .btn,
.calendar-quick-view-container__print .btn,
.mdc-custom__button a,
.mdc-custom__multi-item__btn,
.search-and-bio__bio-button {
	background-color: #fff;
	color: var(--secondary-color);
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	border-color: var(--secondary-color);
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}


:is(.mdc-custom__button a, .search-and-bio__bio-button, .next-prev__container .btn, .calendar-quick-view-container__print .btn):is(:hover, :focus, :active) {
		background-color: var(--secondary-color);
		color: #fff !important;
	}


.mdc-custom__button svg {
	fill: var(--secondary-color);
}


.mdc-custom__button a:is(:hover, :focus, :active) svg {
	fill: #fff;
}

.mdc-custom__mega-container__button {
	background-color: var(--secondary-color);
	color: #fff !important;
	border-radius: 5px;
	transition: background-color 0.3s ease-out, color 0.3s ease-out;

	&:is(:hover, :focus) {
		background-color: var(--secondary-color-500);
	}
}



.container {
	max-width: 100% !important;
}

@media (width >= 1450px ) {
	.container {
		padding-left: 5rem;
		padding-right: 5rem;
	}
}


.mdc-custom__button a,
.search-and-bio__bio-button,
.mdc-custom__mega-container__button {
	padding: 0.5em 2em;
}

.mdc-custom__mega-container__button {
	margin-top: 2rem
}



/*--Adding spacing to components when the next component does not contain a sub-title --*/

.iw_component:has(.mdc-custom__button) + .iw_component:not(:has(.mdc-custom__content__sub-title)) {
	margin-top: var(--component-section);
}

.iw_component:has(.mdc-custom__multi-container) + .iw_component:not(:has(.mdc-custom__content__sub-title)) {
	margin-top: var(--component-section);
}

.iw_component:has(.mdc-custom__accordion-container) + .iw_component:not(:has(.mdc-custom__content__sub-title)) {
	margin-top: var(--component-section);
}

.iw_component:has(.mdc-custom__banner-full-width__container) {
	margin-top: var(--component-section);
}



.btn-link {
	color: var(--primary-color);
}



.alt-bg-color {
	background-color: var(--bg-alt-color);
}

.alt-bg-color--title-spacing {

	margin-top: var(--component-section);
	padding-top: var(--component-section);

	& .mdc-custom__content__sub-title {
		margin: 0;
	}

}


.alt-bg-color--content-spacing {
	padding-block: 2rem var(--component-section);
}



.button-align-right {

	& .mdc-custom__button {
		justify-content: 	flex-end;
	}
}

.button-align-right a {
		flex-direction: row-reverse;

		&:is(:hover, :focus) svg{

			& rect {
				fill: #fff;
			}

			& path {
				fill: var(--secondary-color);
			}
		}
}


.mdc-custom__main-content a[href$=".pdf"]::after {
    content: url('/resources-pa/images/adobe_logo.gif');
    margin-left: 5px;
}


.sign-up-title {
	color: #fff !important;
}


.secondary-filters__selected {
	display: none;
}


@media (width <= 992px) {
	.mdc-custom-order-1-mobile {
		order: -1;
	}
}

/* ------------------------------------------------*/
/* -------------->>> NAVIGATION <<<----------------*/
/* ------------------------------------------------*/


/*--Secondary Nav--*/
.mdc-custom__nav-bottom__header-secondary {
	background-color: #fff;
	padding-block: 1em;
	font-size: 0.75rem;
}


.mdc-custom__nav-bottom__header-secondary > .container,
.mdc-custom__nav-bottom {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mdc-custom__nav-bottom__header-secondary-list, .mdc-custom__nav-bottom__header-secondary-icons {
	list-style: none;
	display: flex;
	gap: 1rem;
	padding-left: 0;
	margin-bottom: 0;
}

.mdc-custom__nav-bottom__header-secondary-icons {
    color: #333;


    & li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }


    & img {
      filter: brightness(0) saturate(100%) invert(14%) sepia(17%) saturate(4380%) hue-rotate(181deg) brightness(100%) contrast(110%);
      height: 12px;
      width: auto;
    }
 }


 /*--Name--*/


 .mdc-custom__nav-bottom__header-container {
 	background-color: var(--primary-color);
 	padding-block: 1rem;
 }


 .mdc-custom__header-name__container {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }

 .mdc-custom__nav-bottom__logo {

  display: flex;
  align-items: center;
  gap: 1rem;

  & img {
    max-height: 130px;
  }

  & .mdc-custom__header-name__line01, .mdc-custom__header-name__line02 {
  	font-family: var(--title-font-family);
    color: #fff;
    text-transform: none;
  }

  & .mdc-custom__header-name__line01 {
  	font-size: clamp(1.5rem, 2.25vw, 2.25rem);
  	font-weight: 700;
  }
  
  & .mdc-custom__header-name__line02 {
  	font-size: clamp(1.25rem, 2vw, 2rem);
  	font-weight: 500;
  	line-height: 1.3;
  }

}


.mdc-custom__nav-bottom__item {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: center;

	& .mdc-custom__top-nav-social {
		display: flex;
		gap: 0.75rem;
		flex-wrap: wrap;
		justify-content: center;

		& img {
			width: 40px;
		}
	}

	& .mdc-custom__nav-bottom__search {

		display: flex;
		align-items: center;
		gap: 1rem;
	}

	& .mdc-custom__header-search {
		background-color: var(--secondary-color);
	}

	& .mdc-custom__header-search__svg {
		fill: #fff;
	}

	& .mdc-custom__translate-search-wrapper {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
	}
}


@media (width > 725px) {
	.mdc-custom__nav-bottom__item .mdc-custom__top-nav-social {
		justify-content: flex-end;
	}
}



/*--Main Navigation--*/

.mdc-custom_fullscreen-close {
	padding-inline: 0px;
}

.mdc-custom__nav-bottom__navigation {
	background-color: #fff;
	box-shadow: var(--box-shadow);

	& .container {
		position: relative;
	}
}

.mdc-custom__global-nav__list > li > :is(button, a) {
	font-family: var(--nav-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	
	text-transform: none;
}


.mdc-custom__mega-container > ul {
	display: flex;
	gap: 2rem;
}

.mdc-custom__mega-container__list {
  --min-column-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
}

.mdc-custom__mega-container__list:has(.mdc-custom__mega-container__item__description) {
	--min-column-size: 20rem;
	gap: 2rem;
}

.mdc-custom__mega-container__list:not(:has(.mdc-custom__mega-container__item__description)) {
	--min-column-size: 16rem;
	gap: 1rem;
}

.mdc-custom__mega-container__child {
	margin: 0;
}


.mdc-custom__mega-container__item {
	margin-bottom: 0;
}

.mdc-custom__mega-container__child:nth-child(1) {
	flex-grow: 2;
	min-width: 	70%;
}

.mdc-custom__mega-container__child:is(:nth-child(2), :nth-child(3)) {
	flex-grow: 1;
}



.mdc-custom__mega-container__title {
	font-family: var(--title-font-family);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0 !important;

	padding-bottom: 0.5em;
	border-bottom: 1px solid hsla(0, 0%, 0%, 0.24);
}

.mdc-custom__mega-container__item__title {
	font-size: 1.25rem;
}

@media(width < 1200px) {
	.mdc-custom__global-nav {
		padding: 0;
	}
}


.mdc-custom__global-nav__main > .mdc-custom__global-nav__list > li {
	padding-block: 0.5rem;
}


.mdc-custom__mega-container > ul {
	padding: 2rem 5rem;
	margin-left: 0;
	margin-right: 0;
}

:is(.mdc-custom__mega-container, .mdc-custom__single-container) > ul {
	top: 100%;
}


.mdc-custom__translate {
	translate: no;  /* Prevents translation (HTML attribute equivalent) */

	& select {
		background-color: var(--primary-color);
		color: #fff;
		border: none;
	}

	& option {
		background-color: #fff;
		color: var(--primary-color);
	}
}



/*--Desktop--*/
@media (width > 1300px) {

    .navbar-toggler {
        display: none;
    }


    .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }



  .mdc-custom__mega-container > ul,
  .mdc-custom__single-container > ul {
    position: absolute;
  }

  .mdc-custom__global-nav__list > li {
    float: left;
  }

  /*--When the drop-down opens-- */
  .mdc-custom__mega-container > ul.collapse.show {
    display: flex;
  }

  .mdc-custom__mega-container > ul {
  	flex-wrap: nowrap;
  }


  /*This shows the background color when "bottom" display is selected on desktop*/
  .mdc-custom__header-container:has(.mdc-custom__header-layout--bottom) {
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 73%,var(--primary-color) 73.1%,var(--primary-color) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }

  .mdc-custom__single-container > ul {
    width: 190%;
    max-width: 280px;
  }

  .mdc-custom__header-layout--logoMiddle :is(.mdc-custom__header-layout__logo, .mdc-custom__header-layout__search),
  .mdc-custom__global-nav__social {
    display: none;
  }

  .mdc-custom__header-layout--logoMiddle .mdc-custom__global-nav__list {
    display: flex;
  }
}



/*--Mobile--*/
@media (width <= 1300px) {

	.navbar-toggler {
		display: block;
	}

  .mdc-custom__global-nav__list {
    position: relative;

    & li {
    	float: none;
    }
  }

  .mdc-custom__header-logo {
    max-width: 75px;
  }

  .mdc-custom__mega-container__item--half > li {
    width: 100%;
  }

  .mdc-custom__global-nav {
    padding: 0.75rem 0;
  }

  .mdc-custom__global-nav__list > li .mdc-custom__mega-container__link,
  .mdc-custom__global-nav__list > li .mdc-custom__single-container__link {
    width: 100%;
    text-align: left;
  }

  .mdc-custom__mega-container > ul {
    margin: 0;
  }

  .mdc-custom__mega-container > ul,
  .mdc-custom__single-container > ul {
  	position: relative;
  }


  .mdc-custom__header-layout--bottom .mdc-custom__header-layout__navigation {
    box-shadow: 0 0 0 100vmax var(--primary-color);
    clip-path: inset(0 -100vmax);
  }

  .mdc-custom__header-layout--bottom .mdc-custom__global-nav {
    background-color: var(--primary-color);
  }

  .mdc-custom__header-layout--inline,
  .mdc-custom__header-layout--logoMiddle {
    grid-template-areas:
      'nav . . . . logo logo . . . . search';
  }

  :is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .navbar-collapse {
    position: absolute;
    background-color: #fff;
    box-shadow: var(--box-shadow);

    top: 100%;
    width: 100%;
    border: 1px solid rgb(245, 245, 245);
  }

  .mdc-custom__header-layout--logoMiddle :is(.mdc-custom__header-layout__logo--middle, .mdc-custom__header-layout__search--middle) {
    display: none;
  }


  /*--Bottom--*/
  .mdc-custom__header-layout--bottom .mdc-custom__global-nav {
    display: grid;
  }

  .mdc-custom__header-layout--bottom .mdc-custom__global-nav > button {
    width: 30px;
  }

  /*--Bottom with Site Name--*/
  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name {
    grid-template-areas:
      'logo logo logo logo logo logo logo logo logo logo logo logo'
      'search search search search search search search search search search search search'
      'nav nav nav nav nav nav nav nav nav nav nav nav';
  }

  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name .mdc-custom__header-layout__logo {
    flex-direction: column;
    text-align: center;
  }

  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name .mdc-custom__header-layout__search {
    display: grid;
    place-items: center;
    margin-top: 0.5rem;
  }



  .mdc-custom__nav-bottom__wrapper {
  	display: flex;
  	flex-direction: row-reverse;
  	justify-content: flex-end;
  	align-items: center;
  	background-color: var(--primary-color);

  	& > * {
  		flex: 1;
  	}
  }

  .mdc-custom__nav-bottom__navigation {
  	background-color: var(--primary-color);
  }

  .mobile-menu-bars {
  	color: #fff;
  	font-size: 0.75rem;
  }

  .mobile-menu-bars span {
  	background: #fff;
  }

  .mdc-custom__header-name__container {
  	display: none;
  }

  .mdc-custom__nav-bottom__header-container .container {
  	padding-left: 0;
  }

  .mdc-custom__global-nav__main {
  	position: absolute;
  	background-color: #fff;
  	z-index: 100;
  	width: 100vw;
  	margin-left: -15px;
  	top: 135%;
  }

  .mdc-custom__nav-bottom__logo {
  	margin-left: -37px;
  	z-index: 2;
  }

  .mdc-custom__nav-bottom__item {
  	& .mdc-custom__top-nav-social {
  		display: none;
  	}
  }

  .mdc-custom__translate {
  	& select {
  		font-size: 0.75rem;
  		height: auto;
  	}
  }


  .mdc-custom__nav-bottom__item {
	  & .mdc-custom__translate-search-wrapper {
	  	gap: 0.5rem;
	  	flex-direction: column;
	  	align-items: end;
	  }
  }


	.mdc-custom__mega-container__link, .mdc-custom__single-container__link, .mdc-custom__link-container__link {
		min-height: auto;
	}

	.mdc-custom__global-nav__social {
		display: flex;
		flex-wrap: wrap;

		& > a:not(:first-child) {
			padding-left: 0;
		}

		& > a {
			padding-right: 0;
		}
	}

}


@media (width <= 1200px) {
	.mdc-custom__mega-container > ul {
		padding: 1rem;
	}
}


@media (width <= 400px) {
	.mdc-custom__nav-bottom__header-secondary-icons {
		& img {
			display: none;
		}
	}
}



/* ------------------------------------------------*/
/* ---------------->>> FOOTER <<<------------------*/
/* ------------------------------------------------*/

.mdc-custom__footer__main {
	padding-block: 3rem 2rem;
}

.mdc-custom__footer__title {
	color: #fff;
}

.mdc-custom__footer__text > p:has(img) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.mdc-custom__footer__text > p img {
	max-width: 160px;
}


.mdc-custom__copyright {
	background-color: var(--primary-color);
	color: #fff;
	margin-block: 0;
	padding-block: 1rem;


	& .mdc-custom__copyright__container {
		justify-content: flex-start;
	}


	& .mdc-custom__copyright__container > a {
		display: none;
	}
}


/*--Mobile--*/
@media (width < 1200px ) {
  .mdc-custom__footer {
    text-align: center;

  }


  .mdc-custom__footer__text > p:has(img) {
  	justify-content: center;
  }

  .mdc-custom__footer__text > p img {
  	max-width: 75px;
  }
}


/* ------------------------------------------------*/
/* ----------->>> SIDE NAVIGATION <<<--------------*/
/* ------------------------------------------------*/

.mdc-custom__side-container {
	gap: 3rem;
}

.mdc-custom__side-nav {

	--nav-color: hsl(0deg 0% 15.69%);

	& .mdc-custom__side-title {
		font-family: var(--title-font-family);
		font-size: 1.25rem;
		border: none;
	}

	& .active,
	& li a,
	& li a:is(:hover, :focus) {
		display: block;
		color: var(--nav-color);
	}

	& ul {
		gap: 1rem;
	}

	& li {
		border: none;
		padding: 0;
	}

	& li a {
		font-family: "Noto Sans", sans-serif;

		background-color: #e0e0e0;
		padding: 0.75em;
		border-radius: 5px;
		border-left: solid 6px transparent;
	}

	& .active,
	& li a:is(:hover, :focus) {
		border-left: solid 6px var(--accent);
		text-decoration: none;
	}


	& .active::before, & .active::after {
		content: normal;
	}

	& li a:is(:hover, :focus)::before,
	& li a:is(:hover, :focus)::after {
		content: normal;
	}
}



/* ------------------------------------------------*/
/* ------------->>> BREADCRUMBS <<<----------------*/
/* ------------------------------------------------*/

.mdc-custom__breadcrumbs {
	margin-block: 2rem var(--component-section);

	span:first-of-type a::before {
		content: '';
		display: inline-block;
		background-image: url(../images/icons/breadcrumb-icon-home.svg);
		background-repeat: no-repeat;
		background-position: center;
		width: 20px; height:19px;
		margin-right: 0.5rem;
		margin-bottom: -3px;
	}

	a, .iw-breadcrumb-separator {
		color: var(--secondary-color);
	}
}


/* ------------------------------------------------*/
/* ---------->>> CONTENT HIGHLIGHT <<<-------------*/
/* ------------------------------------------------*/

.content-highlight-content__link:is(:hover, :focus) {
	text-decoration: none;
}

.content-highlight--custom-gray {
	background-color: var(--gray-bg);
	padding-block: 3rem 14rem;
}

.content-highlight--home {
	margin-top: -18rem;
}

.content-highlight-container {
  --min-column-size: 24rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), 1fr));
}


.content-highlight-item {
	min-height: 320px;
	width: 100%;

	overflow: hidden;
	background-position: center;
	background-size: cover;
	padding-top: 1rem;
	color: #fff;

	border-radius: 10px;

	display: grid;
	align-items: end;
}




.content-highlight-content {
	padding: 2rem 1rem 0 1rem;
	background: linear-gradient(0deg, rgba(5,21,46,0.55) 80%, rgba(5,21,46,0) 100%);

}



.content-highlight-content__text,
.content-highlight-content__button {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.content-highlight-content__text {
	transition: opacity 0.4s, visibility 0.4s, max-height 0.6s, margin 0.4s;

	& p:last-child {
		margin-bottom: 0;
	}
}

.content-highlight-content__button {
	transition: opacity 0.4s, visibility 0.4s, max-height 0.6s, margin 0.4s;
	display: inline-block;
	padding: 0 1.5em;


	background-color: #fff;
	color: var(--secondary-color);

	border-radius: 8px;

	transition: background-color 0.3s ease-out, color 0.3s ease-out;



	&:is(:hover, :focus) {
		background-color: var(--secondary-color);
		color: #fff;
		text-decoration: none;
	}
}








.content-highlight-content__title {
	font-family: var(--title-font-family);
	font-weight: 600;
	font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
	color: #fff;
	line-height: 1.2;

	position: relative;
}





.highlight-landing-page {
	margin-top: -10rem;


	& .content-highlight-item {
		min-height: 300px;
	}

	& .content-highlight-container {
		--min-column-size: 24rem;
		gap: 3rem 1.5rem;
	}

}


@media(width >= 768px) {
	.content-highlight-content__link:is(:hover, :focus-within) {

		& .content-highlight-content__text {
			max-height: 400px;
	    opacity: 1;
	    visibility: visible;
	    transition: max-height 2s;
	    margin-bottom: 1rem;
		}



		& .content-highlight-content__button {
			max-height: 400px;
	    opacity: 1;
	    visibility: visible;
	    transition: max-height 2s;
	    margin-bottom: 1rem;

	    padding: 0.5em 1.5em;
		}

	}
}

@media(width < 768px) {
	.content-highlight-item {

		& .content-highlight-content__text {
			max-height: 400px;
	    opacity: 1;
	    visibility: visible;
	    transition: max-height 2s;
	    margin-bottom: 1rem;
		}



		& .content-highlight-content__button {
			max-height: 400px;
	    opacity: 1;
	    visibility: visible;
	    transition: max-height 2s;
	    margin-bottom: 1rem;

	    padding: 0.5em 1.5em;
		}

	}
}



/* ------------------------------------------------*/
/* ---------->>> BANNER FULL WIDTH <<<-------------*/
/* ------------------------------------------------*/


.mdc-custom__main-content:has( .iw_placeholder > .iw_component:last-child .mdc-custom__banner-full-width__container)  {
    margin-block: 2rem 0;
}



.pa-banner-full-width {
	margin-top: 5rem;
	padding-block: var(--section-spacing);
	background-color: var(--bg-alt-color);

	& .mdc-custom__banner-full-width__tint {
				display: 	none;
	}

	& .mdc-custom__banner-full-width__description {
				color: 	var(--body-font-color);
	}

	& .mdc-custom__banner-full-width__text {
		max-width: 	110ch;
	}


	& .mdc-custom__content__button {
			background-color: transparent;
	}
}



/* ------------------------------------------------*/
/* ------------>>> MULTI COLUMN <<<----------------*/
/* ------------------------------------------------*/

.mdc-custom__multi-container {
	margin-block: 2rem 5rem;
}

.mdc-custom__multi {
	--min-column-size: 34rem;
	--grid-type: auto-fit;
	gap: 1.5rem;

	grid-template-columns: repeat(var(--grid-type), minmax(min(var(--min-column-size), 100%), 1fr));
}


.mdc-custom__multi:has(.mdc-custom__multi-item__img) {
 --grid-type: auto-fill;
}


.mdc-custom__multi-item {
	& .mdc-custom__multi-item__title {
		color: var(--title-color);
		font-family: 	var(--title-font-family);
	}
}


/*--When there is an image on the multi-column component--*/
.mdc-custom__multi-item:has(.mdc-custom__multi-item__img) {
	--padding: 1.5rem;

	box-shadow: var(--box-shadow);
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: var(--padding);

	& .mdc-custom__multi-item__img {
		padding-bottom: var(--padding);
	}

	& :is(.mdc-custom__multi-item__title, .mdc-custom__multi-item__description) {
		padding-inline: var(--padding);
	}


	& .mdc-custom__multi-item__btn {
		border-radius: 4px;
		color: var(--secondary-color) !important;

		&:is(:hover, :focus) {
			background-color: var(--secondary-color);
			color: #fff !important;
		}
	}
}

/*--When there is NO image on the multi-column component--*/
.mdc-custom__multi-item:not(:has(.mdc-custom__multi-item__img)) {
	padding: var(--padding);

	& a.mdc-custom__multi-item__btn {
		color: var(--secondary-color);

		&:is(:focus, :hover) {
			color: #fff;
		}
	}

}


/* ------------------------------------------------*/
/* -------------->>> ACCORDION <<<-----------------*/
/* ------------------------------------------------*/

/*.mdc-custom__accordion__title button {
	padding: 1.5em 1em;
}*/


.mdc-custom__accordion-container {

	& .card {
		box-shadow: var(--box-shadow);
		background-color: #fff;
		border-radius: 10px;

	}

	& button {
		padding: 1.5rem;
		color: var(--title-color);
	}

	& button[aria-expanded="true"] {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	& .collapse {
		background-color: #fff;

		border-width: 0 1px 1px 1px;
		border-style: solid;
		border-color: rgba(0,0,0,.125);

		border-radius: 0 0 10px 10px;
	}

	& .card-body {
		padding:  1.5rem;
	}


	& .mdc-custom__accordion__icon::before {

		--accordion-width: 4px;

	  border: solid black;
	  border-width: 0 var(--accordion-width) var(--accordion-width) 0;
	  border-radius: 1px;
	  display: inline-block;
	  padding: var(--accordion-width);
	  transform: rotate(45deg) !important;

	  transition: transform 0.3s ease-out;

	  width: auto !important;
	  height: auto !important;
	  background-color: transparent;
	}

	& .mdc-custom__accordion__icon::after {
		content: normal;
	}

	& button[aria-expanded="true"] .mdc-custom__accordion__icon::before {
		transform: rotate(225deg) !important;
	}
}

/* ------------------------------------------------*/
/* ---------------->>> SLIDER <<<------------------*/
/* ------------------------------------------------*/

.mdc-custom__slider-title {
	font-size: clamp(1.75rem, 2.5vw, 3.2rem);
}

.home-pa-slider--inner .mdc-custom__slider, .mdc-custom__iframe-container iframe {
	border-radius: 10px;
}

.mdc-custom__main-content:has(.home-pa-slider) {
	margin-top: 0;
}

.home-pa-slider--inner {
	margin-top: var(--component-section);
}

.home-pa-slider {

/*--slider-desktop-height: 680px;*/
	--slider-desktop-height: calc(80vh - 270px);
	--slider-tint: hsl(0deg 0% 16% / 80%);

	--slider-mobile-height: 800px;

	& .mdc-custom__slider-title {
		color: #fff;
	}

	& a.mdc-custom__slider-btn {
		--button-color: hsl(191.61deg 34.07% 82.16%);

		font-family: var(--nav-font-family);
		font-weight: 600;
		font-size: 1rem;

		color: var(--secondary-color);
		text-transform: none;
		background-color: var(--button-color);
		transition: background-color 0.3s ease-out, color 0.3s ease-out;
		padding: 1rem;

		border-radius: 0.5rem;

		&:is(:hover, :focus) {
			background-color: var(--secondary-color);
			color: var(--button-color);
		}
	}


	& .mdc-custom__slider-overlay {
		text-align: left;
		padding-inline: 2rem;
	}

	& .mdc-custom__slider-overlay--color {
		background-color: var(--slider-tint);
	}

	& .mdc-custom__slider-description > p:last-child {
		margin-bottom: 0;
	}

	& .mdc-custom__slider-description a {
		color: #fff;
		text-decoration: underline;
	}

	& .mdc-custom__slider-description a:is(:hover, :focus) {
		color: #fff !important;
	}



	/*--Slider Dots--*/

	& .slick-dots {
		background-color: var(--slider-tint);
		left: 50%;
		bottom: 3rem;
		transform: translate(-50%, 0%); /* Offset the icon by 50% of its width */
		width: auto;
		padding: 0.25rem 0.75rem;
		border-radius: 50px;

		display: flex;

		& .slick-active .slick-dot-icon::before,
		& :is(button:hover, button:focus, button:active) .slick-dot-icon::before {
			color: hsl(2.75deg 74.01% 34.71%) !important;
		}

		& .slick-dot-icon::before {
			font-size: 4rem !important;
		}


	}




	/*--Slider Arrows--*/
	& .mdc-custom__slider-custom-prev-button,
	  .mdc-custom__slider-custom-next-button {
	  	--arrow-size: 48px;

		background-color: var(--secondary-color);
		height: var(--arrow-size);
		width: var(--arrow-size);
		max-width: var(--arrow-size);
		border-radius: 50%;
		box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.12);

		display: grid;
		place-items: center;
	}


}



.home-pa-slider:not(.home-pa-slider--inner) {

	& .container {
		padding-left: 0;
		padding-right: 0;
	}

	& .slick-dots {
		bottom: 5.5rem;
	}

}

@media (width <= 425px) {

	.home-pa-slider:not(.home-pa-slider--inner) {


		& .slick-dots {
			bottom: 5rem;
		}


	}

}



@media (width > 991px) {

	.home-pa-slider {

		& .mdc-custom__slider-custom-prev-button,
		  .mdc-custom__slider-custom-next-button {
			top: 50%;
			transform: translate(0%, -50%); /* Offset the icon by 50% of its height */
		}


		& .mdc-custom__slider-custom-prev-button {
			left: 3rem;
			right: 0;
		}


		& .mdc-custom__slider-overlay {
			padding: 5rem 8rem 9rem 8rem;
		}


		& .mdc-custom__slider, & .mdc-custom__slider .slick-slide, & .mdc-custom__slider-background-image {
			min-height: 500px;
		}

		& .mdc-custom__slider-overlay {
			max-height: none;
		}

	}

}

@media (width <= 991px) {


	.mdc-custom__slider .slick-autoplay-toggle-button {
		left: 2rem;
	}

	.mdc-custom__slider-custom-next-button {
		right: 2rem;
	}

}


@media (width <= 991px) and (width >= 500px) {


	.home-pa-slider {
	--slider-mobile-height: 700px;
	}
}




/* ------------------------------------------------*/
/* -------------->>>SEARCH AND BIO<<<--------------*/
/* ------------------------------------------------*/


.container:has(.search-and-bio) {
	position: relative;
	z-index: 2;
  margin-top: -8rem;  
}

.container:has(.search-and-bio--inside-page) {
	margin-top: 0;
}


.search-and-bio {
	--min-column-size: 34rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));


  & > * {
  	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12);
		border-radius: 0.625rem;
		background-color: #fff;
  }


  & form .row {
  	gap: 0.5rem;
  }

}


.pa-btn-solid a {
	background-color: var(--secondary-color);
	color: #fff;
	&:is(:hover, :focus) {
		background-color: var(--secondary-color-500) !important;
		color: #fff;
	}

}

.search-and-bio__button {
	background-color: var(--secondary-color);
	color: #fff;
	border-radius: 	10px;
	padding: 1em;
	line-height: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	&:is(:hover, :focus) {
		background-color: var(--secondary-color-500) !important;
		color: #fff;
	}
}



.search-and-bio__search {
	display: flex;
	flex-direction: column;

	& [role="tabpanel"][hidden] {
  	display: none;
	}
}



.search-and-bio__radio {

	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;


	& label {
	  display: flex;
	  cursor: pointer;
	  font-weight: 500;
	  position: relative;
	  overflow: hidden;
	  margin-bottom: 0;


		&:focus-within {
  		outline-offset: 4px;
			outline: 3px dotted #3BD1FF;
  	}

	  
	}

	& label input {
	  position: absolute;
	  left: -9999px;
	}

	& label input:checked + span:before {
	  box-shadow: inset 0 0 0 0.4375em var(--secondary-color);
	  background-color: #fff;
	}
	& label span {
	  display: flex;
	  align-items: center;
	  transition: 0.25s ease;
	}


	& label span:before {
	  display: flex;
	  flex-shrink: 0;
	  content: "";
	  background-color: #D9D9D9;
	  width: 1.5em;
	  height: 1.5em;
	  border-radius: 50%;
	  margin-right: 0.375em;
	  transition: 0.25s ease;
	  box-shadow: inset 0 0 0 0 var(--secondary-color);
	}

}





.search-and-bio__search__tab-container {
	border-bottom: 	1px solid #eee;
	padding-top: 	1rem;
	padding-inline: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.search-and-bio__search__tab-item {
	flex: 1 1 250px;

	font-family: var(--nav-font-family);
	font-size: 	1.125rem;
	font-weight: 700;
	color: hsl(0deg 0% 36.08%);
	border-radius: 0;
	border-bottom: 3px solid transparent;
	padding-inline: 0;

	&[aria-selected="true"] {
		color: var(--title-color);
		border-bottom-color: 	var(--secondary-color);
	}

}


.search-and-bio__radio {
	padding: 1rem 2rem 0 2rem;
}

.content-section {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: center;
	height: 100%;

	padding: 1rem 2rem 2rem 2rem;
}






.search-and-bio__bio {
	padding: 1.5rem 2rem;

	display: flex;
	gap: 1.25rem;
	align-items: center;
	justify-content: space-between;
	
}



.search-and-bio__bio-image {
	order: 2;  /* Positions the image to the right */
}

.search-and-bio__bio-text {
	order: 1;  /* Positions the image to the left */
	flex: 1; /* Allows the text to take up available space */
}

.search-and-bio__bio-title {
	font-size: 1.5rem;
}

.search-and-bio__bio-button {
	display: inline-block;
	margin-top: 0.5rem;
	border-radius: 0.75rem;
	border-width: 2px;

	&:is(:hover, :focus) {
		text-decoration: none;
	}

}

.search-and-bio__search__tangible {
	display: flex;
	gap: 1rem;
	flex-direction: column;

}


@media (width <= 768px) {
	.search-and-bio__bio {
		flex-direction: column;
	}

	.search-and-bio__bio-image {
		order: -1;
	}
}


/* ------------------------------------------------*/
/* ------------>>>CONTENT SHOWCASE<<<--------------*/
/* ------------------------------------------------*/

.content-showcase {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: center;
}

.content-showcase__item {
	flex: 1 1 0;

	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.content-showcase__item:nth-child(2) {
	max-width: 600px;
}


.content-showcase__title {
	margin-bottom: 0;
}

.content-showcase__options {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.content-showcase__options__item {
	border: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 2rem;
	border-radius: var(--border-radius);

	display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}


.content-showcase__options__title, .content-showcase__options__sub-title {
	display: block;
}

.content-showcase__options__title {
	font-family: var(--title-font-family);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--title-color);
}

.content-showcase__options__arrow {
	background-color: var(--bg-alt-color);
	aspect-ratio: 1/1;
	width: 60px;
	padding: 1.25rem;
	transition: all var(--transition-style);

	display: grid;
	align-items: center;


	&:is(:hover, :focus) {
		background-color: var(--secondary-color);
		& img {
			filter: invert(1) brightness(200%) contrast(100%);
		}
	}

}



.content-showcase__image-container {
	--padding: 2rem;

	box-shadow: var(--box-shadow);
	border-radius: calc(var(--border-radius) + var(--padding));
	padding: var(--padding);



	& img {
		border-radius: var(--border-radius);
	}

}



@media (width <= 768px) {
	.content-showcase {
		flex-direction: column;
	}
}

/* ------------------------------------------------*/
/* -------------->>>CONTENT STATS<<<---------------*/
/* ------------------------------------------------*/

/*--If the Content Stats Component is the last one within the body remove the margin-bottom of the "main" tag to make it flush with the footer.--*/
.mdc-custom__main-content:has( > div > .iw_component:last-child .content-stats) {
	margin-bottom: 0;
}

.content-stats {
	display: 	grid;
	grid-template-columns: 	1fr;
	grid-template-rows: 1fr;

	position: 	relative;
	background-size: cover;
	background-position: 	center;

	color: #fff;
	text-align: 	center;


	& .content-stats-title {
			color: 	#fff;
	}


	& .container {
		display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	}


}

.content-stats > * {
	grid-row: 1;
	grid-column: 1;
}

.content-stats-tint {
	background-color: rgba(0, 0, 0, 0.5);
}

.content-stats-content {
	padding-block: 8rem;
	max-width: 	120ch;
}


.content-stats__numbers {
	--min-column-size: 16rem;
	display: 	grid;
  gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
}


.content-stats__numbers-title, .content-stats__numbers-text {
	display: 	block;
}

.content-stats__numbers-title {
	font-family: 	var(--title-font-family);
	font-size: var(--font-size-xxl);
	font-weight: 	bold;
}



/* ------------------------------------------------*/
/* ------------->>> CONTENT TABS <<<---------------*/
/* ------------------------------------------------*/

.content-tabs {
	background-color: #f5f5f5;
	border-radius: 10px;

	border-width: 1px;
	border-style: solid;
	border-color: #e0e0e0;

	margin-bottom: 1rem;

	display: flex;
	flex-wrap: wrap;

}



.content-tabs-title {
	font-size: var(--font-size-xl);
	margin-top: 0;
}

.content-tabs-content {

	container-type: inline-size; /* Enables container queries based on width */

	display: 	flow-root;
	border: 1px solid #e0e0e0;
	padding: 2rem;
	border-radius: 10px;

	background-color: #fafafa;

	& > .row {
		align-self: center;
	}
}


.content-tabs-buttons {
	font-weight: 500;
	padding-block: 0.5em;


	&[aria-selected="true"] {
		/*background-color: var(--secondary-color);*/
		background: linear-gradient(90deg, var(--secondary-color), #0075a8);
		color: #fff;
		border-radius: 10px;
	}
}





/*--If the last element is the description field is a list and it also contains a link then convert that list into buttons--*/
.content-tabs-description > ul:last-of-type:last-child:has(a) {
	list-style: none;
	margin-top: 1rem;
	padding-left: 0;

	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;

	& li a {
		display: inline-block;
		background-color: 	transparent;
		color: var(--secondary-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--secondary-color);
    padding: 1em 1.5em;
    border-radius: 10px;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;

    &:is(:focus, :hover) {
    	background-color: var(--secondary-color);
    	color: #fff !important;
    	text-decoration: none;
    }
	}
}






.content-tabs__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}









a.content-tabs__cta-primary {
	background-color: var(--secondary-color);
	color: #fff;
	padding: 1em 1.5em;
	border-radius: 10px;

	&:is(:hover, :focus) {
		background-color: var(--secondary-color-500);
		color: #fff !important; 
	}
}



a.content-tabs__cta-secondary {
	color: var(--secondary-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--secondary-color);
    padding: 1em 1.5em;
    border-radius: 10px;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;

    &:is(:focus, :hover) {
    	background-color: var(--secondary-color);
    	color: #fff !important;
    }
}



.content-tabs-image,
.content-tabs-iframe iframe {
	float: right;
	margin: 3.25rem 0 1rem 1rem;
}



.content-tabs-image  {
  border-radius: 10px;
  max-width: 40%;   /* Take up to 40% of the container */
  height: auto;
  width: auto;
}

.content-tabs-iframe iframe {
	width: 100% !important;
	max-width: 560px;
	height: auto !important;
	aspect-ratio: 16/9;

}



/* Container query: when the parent container is 850px or less */
@container (width <= 850px) {
  .content-tabs-image {
    float: none;
    display: block;
    margin: auto auto 1rem auto;
    max-width: 80%;
  }

  .content-tabs-iframe iframe {
  	display: block;
  	float: none;
  	margin: auto auto 1rem auto;
  }


}


@media (width <= 900px) {
	.content-tabs {
		--min-column-size: 18rem;
    	display: grid;
    	grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), 1fr));
	}
}

/* ------------------------------------------------*/
/* -------------->>> Event List <<<----------------*/
/* ------------------------------------------------*/

.event {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;

	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12);
	padding: 1.25rem;
	border-radius: 25px;
}

.event-image {
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	width: 100%;
	max-width: 375px;
	border-radius: 5px;
}

.event-content {
	flex: 1 1 450px;
	max-width: 82ch;
}

.event-content .event-date {
	display: inline-block;
	background-color: #EEF5F6;
	border-radius: 20px;
	padding: 0.5rem;
	margin-bottom: 0.5rem;

	font-weight: bold;
	font-size: 14px;
	color: var(--title-color);
}

.event-title {
	font-family: "Roboto", sans-serif;
	font-size: var(--font-size-lg);
}

.event-location {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;

	margin-top: 1.25rem;
}

.event-location-title {
	font-weight: bold;
	color: var(--title-color);
	line-height: 1;
}

@media (max-width: 768px) {

	  .event {
	    flex-direction: column;
	    align-items: center;
	  }

	.event-image {
		max-width: 100%;
	}
}

/* ------------------------------------------------*/
/* ------------>>> BANNER FULL WIDTH <<<-----------*/
/* ------------------------------------------------*/
.mdc-custom__banner-full-width__text {
	max-width: 82ch;
	padding-block: 7rem;

	& .mdc-custom__content__button {
		line-height: 1;
		padding: 1em 2em;
	}

	& .mdc-custom__content__button:is(:hover, :focus) {
		border-color: var(--secondary-color);
	}
}



.banner-image {
	& h2 {
		color: #fff;
	}
}


/* ------------------------------------------------*/
/* --------------->>> CALENDAR <<<-----------------*/
/* ------------------------------------------------*/

.calendar-title-container > .column:first-child {
	padding: 0;
}

.day-navigation__container {
	margin-bottom: 1.5rem;
}

.day-navigation,
.day-navigation__day-month {
	list-style: none;
	padding-left: 0;
}

.day-navigation__child__date-picker, .day-navigation__child__date-picker .mydp {
	height: auto !important;
}

.day-navigation__child__date-picker .input-group {
	height: 100%;
}


.day-navigation__day-month .day-navigation__child--active a {
	color: #fff;
}

.next-prev__container {

	& .btn {
		display: flex;
		gap: 0.25rem;
		align-items: center;
	}
}

.event-date > ul,
mdc-calendar-event-list > ul,
.add-event-to-calendar-ui > ul {
	list-style: none;
	padding-left: 0;
}

.calendar-subtitle {
	margin-block: 0;
}

.event-date > p {
	margin-top: 1rem;
}

body.dialog-open div.overlay {
	z-index: 4000 !important;
}

.calendar-title-container  {

    & .m8, .right-align {
		display: flex;
	    flex-direction: column;
	    justify-content: center;
    }

    & .right-align {
    	text-align: right;
    }
}

.calendar-quick-view-container .list-item {
	padding-bottom: 0;
}

.search__filter-container,
.calendar-quick-view-container .list-item .detail-item:first-child {
	display: none !important;
}

.calendar-quick-view-container .waves-effect:is(:hover, :focus) {
	color: #fff !important;
}

.sort-select__label {
	font-size: 1rem !important;
	font-weight: 500;
}