#maincontent {
	overflow: initial;
}

.main-hero {
    background-color: var(--brand-primary-blue);
	border-bottom: 5px solid var(--brand-secondary-tan);
	
	& > .inner {
		position: relative;
		z-index: 2;
		min-height: 200px;
	}
}

.main-hero-title {
	display: block;
	font-size: 3rem;
	line-height: 1;
}
.main-hero-subtitle {
	font-size: 1rem;
	color: var(--brand-secondary-tan);
}

.link-group {
	padding-left: 1rem;
	
	& .navbar + .navbar {
		border-top: 1px solid var(--color-var(--color-white));
	}
}

.btn-close-menu {
    position: absolute;
    top: -1rem;
    right: 1rem;
    z-index: 3;
    color: var(--color-white);
    padding: 0.4rem 0.8rem;
    background-color: var(--brand-primary-blue);
	border: 1px solid var(--color-white);
    border-radius: 50%;
}

#collapseBlock {
	background-color: var(--brand-accent-blue-80);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
#helpfulBtn {
	position: relative;
}
#helpfulBtn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.8rem;
	transform: translateY(-50%) rotate(90deg);
	transition: var(--default-transition);
	font-family: "Font Awesome 6 Pro";
	font-size: 1.2rem; 
	font-weight: 900;
}
#sidebar.is-active #helpfulBtn::after {
	transform: translateY(-50%) rotate(0deg);
}

.content-wrapper{
	overflow: hidden;
}
.main-wraper {
	position: relative;
}
.bg-full-width,
.bg-color-light-blue::before,
.bg-color-light-tan::before {
	position: absolute;
	top: 0;
	bottom: 0;
    left: 50%;
    width: calc(100vw + 420px);
    transform: translateX(-50%);
	height: 100%;
	background-repeat: no-repeat;
	background-position: top right;
	/* background-size: cover; */
}

@media (max-width: 767.98px) {
	.bg-full-width { 
		background-image: none !important;
	}
	.bg-color-light-tan {
		background-color: #f3e9d7 !important;
	}
	.bg-color-light-blue{
		background-color: #E5EFF6 !important;
	}
}

.bg-color-light-blue::before,
.bg-color-light-tan::before {
	content:'';
}
.bg-color-light-blue::before {
/* 	background: linear-gradient(135deg, #E5EFF6, 82%, #E5EFF6cf); */
	background: linear-gradient(135deg, rgba(229, 239, 246, 1) 0%, rgba(214, 223, 230, 1) 65%, rgba(191, 199, 204, 0) 90%, rgba(115, 120, 123, 0) 100%);
}
.bg-color-light-tan::before {
/* 	background: linear-gradient(135deg, #f3e9d7, 82%, #f3e9d7cf); */
	background: linear-gradient(135deg,rgba(233, 223, 187, 1) 0%, rgba(243, 233, 215, 1) 53%, rgba(243, 233, 215, 0.9) 69%, rgba(233, 223, 187, 1) 100%);
}

.col-lg-0 {
	flex: 0 0 auto;
	width: 0;
}

#helpfulBtn {
	position: relative;
}
#helpfulBtn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%) rotate(90deg);
	transition: var(--default-transition);
	font-family: "Font Awesome 6 Pro";
	font-size: 1.2rem; 
	font-weight: 900;
}
#sidebar.is-active #helpfulBtn::after {
	transform: translateY(-50%) rotate(0deg);
}

.btn-program-page {
	display: block;
	border: none;
	border-radius: 0;
	width: 100%;
    font-size: 1.5rem;
    background-color: var(--brand-primary-blue);
    padding: 1rem 1.5rem;
}
a.btn-program-page:hover {
    background-color: var(--brand-accent-blue);
	color: var(--brand-primary-blue) !important;
}

.content .btn-program-page {
    color: var(--color-white) !important;
}
.content ul li::marker {
  color: var(--brand-accent-tan);
}

@media (max-width: 991.98px) {
	.btn-program-page {
		font-size: 1rem;
		padding: 0.5rem 1rem;
		text-align: center;
	}
}
/********************** mobile **********************/
@media (max-width: 991.98px) {
	.translation-container {
		z-index: 3;
		top: 383px;
		bottom: auto;
		transition: var(--default-transition);
	}
	body.is-scrolled {
		.translation-container {
			opacity: 0;
			visibility: hidden;
		}
	}
    .my-sticky-mobile {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 10;

        &.is-hidden {
            opacity: 0;
            visibility: hidden;
        }

        & .card-body {
            position: relative;
            z-index: 2;
        }
        & .button-group {
            width: 49%;
			
			& .btn-program-page {
				position: relative;
				z-index: 3;
			}
        }
    }
    
    #myStickyMobile,
    #collapseBlockMobile{
        transition: var(--default-transition);
    }
    #collapseBlockMobile{
        position: fixed;
        top: 110%;
        width: 100%;
		height: 100vh;
        left: 0;
		background-color: var(--brand-accent-blue-60);
		box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
		border-top: var(--brand-primary-blue) 20px solid;

        &.is-active {
			top: 0;
        }
		
		& i[class*="arrow-down"] { 
            position: absolute;
            right: 2rem;
            bottom: 4rem;
        }

		.list-group,
		.link-group {
			overflow: auto;
			max-height: 100vh;
			padding-bottom: 5rem;
		}
    }
	
	#linkGroupMobile{
        &:not(.has-scroll) + i[class*="arrow-down"] {
            opacity: 0;
        }
        &.scrolled-to-bottom + i[class*="arrow-down"] {
            opacity: 0;
        }
    }
}

/********************** desktop **********************/
#thecontent {
	& p a {
		font-weight: bold;
	}
	
	& > div > div > h2 {
		margin-bottom: 2rem;
		text-decoration: underline solid var(--brand-accent-tan) 2px;
		text-underline-offset: 0.2rem;
	}
	
}
@media (min-width: 992px) {
	#thecontent > div > div > h2 {
		margin-bottom: 2rem;
		text-decoration: underline solid var(--brand-accent-tan) 3px;
		text-underline-offset: 0.5rem;
	}
	
	#maincontent {
		margin-top: 0;
	}
	.main-hero {
		overflow: hidden;
		position: relative;
		border-bottom-width: 10px;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 50%;
			height: 100%;
			background-size: cover;
			background-position: top center;
			background-repeat: no-repeat;
			z-index: 1;
		}
		
		& > .inner {
			min-height: 350px;
		}
		& .block-title {
			width: 50%;
		}
	} 
	#sidebar, #thecontent, #collapseBlock, #theBlank {
		transition: var(--default-transition);
	}
	#sidebar {
		position: relative;
        z-index: 4;
		margin-top: -123px;

        &.is-active {

            & i[class*="arrow-down"] {
                opacity: 0;
            }
        }

        &:not(.is-active) {
            & i[class*="arrow-down"] {
                opacity: 1;
            }
        }

        & .scrolled-to-bottom + i[class*="arrow-down"] {
            opacity: 0;
        }
	}
	
	#helpfulMenu {
        position: relative;
		margin-top: 10px;

        & i[class*="arrow-down"] {
            position: absolute;
            left: 5px;
            bottom: 5px;
        }
    }
	
	#theMain {
		position: relative;
		z-index: 4;
	}
	.sidebar-wrapper {
		position: absolute;
		top: 0;
		/* z-index: 3; */
		width: 100%;
		height: 100%;
	}
	.my-sticky {
		position: sticky;
		top: 100px;
	}
	
	.sticky-wrap {
		position: relative;
		
		& i[class*="arrow-down"] {
            position: absolute;
            left: 5px;
            bottom: 5px;
        }
	}

	#collapseBlock {
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
        max-height: calc(100vh - 300px);
        
        &.is-active {
            max-height: 0; 
        }
		&:not(.has-scroll) + i[class*="arrow-down"] {
            opacity: 0;
        }
	}
	
	.main-hero-title {
		font-size: 5rem;
	}
	.main-hero-subtitle {
		font-size: 1.5rem;
	}
}

/* fontsize for large screen*/
@media (min-width: 1920px) {
	#maincontent p,
	#maincontent .btn,
	#maincontent li,
	#maincontent .nav-link,
	#maincontent .accordion-body,
	#sidebar .nav-link {
		font-size: 1.15rem !important;
	}
}

/* form */
.edu-mm-container {
	max-width: 50ch;
}
.mauticform-label {
	color: var(--brand-primary-blue);
}
.mauticform-input {
	width: 420px;
	border-color: var(--brand-primary-blue);
	border-width: 1px;
	border-style: solid;
}
.mauticform-button {
	background-color: var(--brand-primary-blue);
	color: var(--color-white);
}


/********************** modality **********************/

/* Hide elements with data-visibility="hidden" */
[data-visibility="hidden"] {
	display: none !important;
}
/* Hide section when only one element has data-visibility="" (empty) */
.pp-formats-section:has(.item[data-visibility=""]):not(:has(.item[data-visibility=""] ~ .item[data-visibility=""])) {
	display: none !important;
}
/* Hide section when all elements have data-visibility="hidden" */
.pp-formats-section:not(:has(.item:not([data-visibility="hidden"]))) {
	display: none !important;
}