:root {
	--goldPrimary: #FFD050;
	--goldTransparent: #cc99337e;
	--goldSecondary: #cea83d;
	--alumniGold: #856514;
	--greenPrimary: #006f71;
	--candidateGreenPrimary: #006456;
	--candidateBorderandArrow: #ffffff;
	--greenPrimaryTransparent: #006f7152;
	--greenSecondary: #006456;
	--greenDark: #004d4f;
	--darkPrimary: #1f1f1f;
	--darkPrimaryTransparent: #1f1f1f9a;
	--darkSecondary: #333;
	--lightTextColor: #fff;
	--containerWidth: 1200px;
}

.contentContainer {
	max-width: 80%;
	margin: 0 auto;
	/* 	overflow: hidden; */
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	scroll-behavior: smooth;
}

.mb-2 {
	margin-bottom: 4em;
}

.mt-2 {
	margin-top: 4em;
}

.highlight {
	color: var(--goldPrimary);
	text-transform: uppercase;
}

.highlight.g {
	color: var(--greenPrimary);
}

.grey {
	color: #646464;
	font-size: 0.8rem;
}

/* Styling for the note box */
.note-box {
	border-left: 3px solid var(--goldPrimary);
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	border-radius: 4px;
}

.note-box p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--darkTextColor);
}

body.commencement-program {
	font-family: "Archivo Narrow", "Roboto", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
	position: relative;
	background: url("/_resources/images/fsc-seal-interior-background-1920x1080-v3.jpg");
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
	overflow-x: visible !important;
	background-color: #000 !important;
}

.hiddenElement {
	visibility: hidden;
}

.noScroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	/* Store the current scroll position */
	top: var(--scroll-top, 0);
	left: 0;
}

.commencement-program #main-content {
	margin: 0 !important;
	position: relative;
}

.commencementModal {
	position: fixed;
	z-index: 4;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

.commencementModal.show {
	opacity: 1;
	pointer-events: auto;
}

.commencementModal .modalContent {
	background-color: #fff;
	padding: 2rem;
	max-height: 80%;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	position: relative;
	max-width: 700px;
}

.commencementModal
.modalContent
.modalContentContainer
#presidentLetterContent
.letterHeaderImageContainer {
	width: 100%;
	text-align: center;
	margin-bottom: 2em;
}

.commencementModal
.modalContent
.modalContentContainer
#presidentLetterContent
.letterHeaderImageContainer
img {
	width: 45%;
}

.commencementModal
.modalContent
.modalContentContainer
#alumniLetterContent
.letterHeaderImageContainer {
	width: 100%;
	text-align: center;
	margin-bottom: 2em;
}

.commencementModal
.modalContent
.modalContentContainer
#alumniLetterContent
.letterHeaderImageContainer
img {
	width: 100%;
}

/* Modal close button styling - fixed position relative to modal content */
.commencementModal .closeButton {
	position: fixed;
	bottom: 85px;
	right: 300px;
	z-index: 5;
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--darkPrimary);
	cursor: pointer;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.commencementModal .closeButton:hover {
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--goldSecondary);
}

.commencementModal
.modalContent
.modalContentContainer
p:not(
.commencementModal
.modalContent
.modalContentContainer
#alumniLetterContent
p,
.commencementModal
.modalContent
.modalContentContainer
#presidentLetterContent
p
) {
	text-indent: 4ch;
}

.commencementModal .modalContent .modalContentContainer p {
	margin-bottom: 1rem;
	margin-left: 10px;
}
.commencementModal .modalContent .modalContentContainer h2 {
	font-family: "Gotham";
	text-transform: uppercase;
	color: var(--gold);
	font-size: 2rem;
	margin: 1rem auto;
	letter-spacing: 0.05em;
	position: relative;
	text-align: center;
}

.commencement-program #hero {
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lightTextColor);
	/*   background-image: url("https://www.farmingdale.edu/president/inauguration/2025/images/hero-images/dr-prezant-horton-second-floor--v2ch-1920x1080.jpg"); */
	/*   background-image: url("/_test/brad/commencement-program/images/hero.jpg"); */
	/* 	background-image: url("/commencement/program/2026/images/hero.jpg"); */
	/* 	background-image: url("https://fsc-main.b-cdn.net/images/commencement-program-hero-1920x1080.webp"); */
	background-image: url("/commencement/program/2026/images/2026-commencement-hero-1920x1080.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	--after-color: #006f7127;
	--after-color: #00000027;
}

.commencement-program #hero::after {
	content: '';
	position: absolute;
	background: rgba(0, 0, 0, 0.41);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.commencement-program #hero > * {
	z-index: 2;
}

.commencement-program #hero .heroCopy .heroTitle {
	position: relative;
	font-size: 3rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	font-family: "Gotham";
	margin: 0 0 0.5rem 0;
	text-shadow: 0 0 10px rgb(0, 0, 0, 0.6);
	--after-width: 0%;
	--bottom-distance: 0px;
}

.commencement-program #hero .heroCopy .descriptionContainer {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.commencement-program #hero .heroCopy .descriptionContainer .heroDescription {
	font-size: 1.5rem;
	margin: 0;
	text-shadow: 0 0 10px rgb(0, 0, 0);
}

.commencement-program #hero .heroCopy a {
	align-self: center;
	border: 1px solid var(--goldPrimary);
	padding: 0.75em 1em;
	color: var(--goldPrimary);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "Gotham";
	transition-property: background-color, color;
	transition-duration: 0.3s;
	background: var(--darkPrimaryTransparent);
	font-size: 1rem;
}

.commencement-program #hero .heroCopy a:hover {
	background-color: var(--goldPrimary);
	color: var(--darkPrimary);
}

/* Navigation */
.commencementLinks {
	background-color: var(--greenSecondary);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 3;
}

.commencementLinks .linkList {
	display: flex;
	justify-content: center;
	/* gap: 1px; */
	list-style: none;
}

.commencementLinks .linkList li a {
	padding: 1rem;
	text-decoration: none;
	color: #fff;
	display: block;
	font-family: "Gotham";
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.commencementLinks .linkList li a:hover {
	background-color: var(--goldSecondary);
	background-color: var(--greenPrimary);
	transition: all 0.3s ease;
}

.commencementLinks .linkList li.dropdown {
	position: relative;
}

.commencementLinks .linkList li.dropdown a {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.commencementLinks .linkList li.dropdown .dropdownMenu {
	display: none;
	position: absolute;
	background-color: var(--greenSecondary);
	list-style: none;
	width: 100%;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.commencementLinks .linkList li.dropdown .dropdownMenu.show {
	display: block;
}

/* Headers */
.contentContainer > h2 {
	font-family: "Gotham";
	text-transform: uppercase;
	color: var(--goldPrimary);
	font-size: 2rem;
	margin: 2rem auto 2.5rem auto !important; /* centered margin */
	position: relative;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 0 2rem;
	display: inline-block; /* Contains the element to its content */
	left: 50%;
	transform: translateX(-50%); /* Centers the element */
	white-space: nowrap; /* Keeps the text and decorations together */
}

/* Decorative lines on both sides */
.contentContainer > h2::before,
.contentContainer > h2::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 100px;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--goldPrimary), transparent);
}

.contentContainer > h2::before {
	right: calc(100% + 1rem); /* Adds some spacing between text and line */
}

.contentContainer > h2::after {
	left: calc(100% + 1rem); /* Adds some spacing between text and line */
}

/* Optional: Add subtle decorative elements */
.contentContainer > h2 span {
	position: relative;
	display: inline-block;
}

.contentContainer > h2 span::before,
.contentContainer > h2 span::after {
	content: "•";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--goldSecondary);
	font-size: 1.5rem;
	opacity: 0.7;
}

.contentContainer > h2 span::before {
	left: -2rem;
}

.contentContainer > h2 span::after {
	right: -2rem;
}
/* .contentContainer > h2 {
font-family: "Gotham";
text-transform: uppercase;
color: var(--gold);
font-size: 2rem;
margin: 1rem 0 1.75rem 0 !important;
position: relative;
}

.contentContainer > h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 2px;
background: var(--gold);
} */

/* CONTENT AREAS AND COLUMNS*/
.contentArea {
	background: #fff;
	padding: 1rem;
}

.commencement-program .contentContainer .contentArea .contentCols {
	border-top: 1px solid #ccc;
	padding: 1rem 0 0 0;
}

/* Prevent orphaned headers by avoiding breaks right after headers*/

.contentContainer .contentArea .contentCols h3.contentColHeader,
.contentContainer .contentArea .contentCols h4.contentColSubHeader,
.contentContainer .contentArea .contentCols h5.contentColSubSubHeader {
	break-after: avoid;
	page-break-after: avoid;
	-webkit-column-break-after: avoid;
}

/* Keep at least 2 items with their header */

.contentContainer
.contentArea
.contentCols
h3.contentColHeader
+ h4.contentColSubHeader,
h3.contentColHeader + p.contentColItem,
.contentContainer
.contentArea
.contentCols
h4.contentColSubHeader
+ h5.contentColSubSubHeader,
.contentContainer
.contentArea
.contentCols
h4.contentColSubHeader
+ p.contentColItem,
.contentContainer
.contentArea
.contentCols
p.contentColItem
+ p.contentColItem {
	break-before: avoid;
	page-break-before: avoid;
	-webkit-column-break-before: avoid;
}

/* Add margin to create visual groups */
.contentContainer .contentArea .contentCols h3.contentColHeader {
	margin-top: 1.5em;
	font-size: 1.25rem;
	font-family: "Gotham";
	text-transform: uppercase;
	color: var(--greenSecondary);
	line-height: 1.2;
}

.contentContainer .contentArea .contentCols h3.contentColHeader:first-child {
	margin-top: 0;
}

.contentContainer .contentArea .contentCols h4.contentColSubHeader {
	margin-top: 1em;
	font-size: 1rem;
	font-family: "Gotham";
	color: var(--greenSecondary);
	line-height: 1.2;
}

.contentContainer
.contentArea
.contentCols
h3.contentColHeader
+ h4.contentColSubHeader {
	margin-top: 0.25em;
}

/* SEARCH */

.commencement-program .contentContainer .contentArea .input-group {
	margin-bottom: 1rem;
}

.commencement-program .tableSection .searchWrapper {
	background: #fff;
	padding: 0.5rem;
}

.commencement-program .input-group input::placeholder {
	opacity: 0;
}

.commencement-program .input-group {
	--pad: 0.75rem;
	position: relative;
}

.commencement-program .input-group input {
	padding: var(--pad);
	background-color: #fff;
	border: 1px solid #006f71;
	/* border: none; */
	color: inherit;
	width: 100%;
	outline: none;
}

.commencement-program .input-group label {
	display: flex;
	gap: 0.312em;
	align-items: center;
	position: absolute;
	left: var(--pad);
	top: var(--pad);
	top: calc(var(--pad) - 2px);
	top: calc(var(--pad) + 1px);
	background-color: #fff;
	padding-inline: 0.3em;
	transition: transform 200ms;
	pointer-events: none;
	transform-origin: left;
	translate: -0.3em;
	color: #7b7b7b;
	margin: 0 !important;
}

.commencement-program .input-group label i {
	font-size: 1em;
}

.commencement-program .input-group input:focus + label,
.commencement-program .input-group input:not(:placeholder-shown) + label {
	transform: translateY(calc(-50% - var(--pad) + 2px)) scale(0.8);
	color: #006f71;
}

/* END SEARCH */

/* MISSION STATEMENT */
#missionStatement {
	margin: 4rem 0;
	position: relative;
}

#missionStatement .contentArea {
	padding: 3rem;
	max-width: 50%;
	margin: 0 auto;
	border-radius: 2px;
	position: relative;
	/* background: linear-gradient(to bottom, #fff, #f8f8f885); */
	background: #fff;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#missionStatement .contentArea::before,
#missionStatement .contentArea::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	opacity: 0.6;
}

#missionStatement .contentArea::before {
	top: 1rem;
	left: 1rem;
	border-top: 3px solid var(--goldPrimary);
	border-left: 3px solid var(--goldPrimary);
}

#missionStatement .contentArea::after {
	bottom: 1rem;
	right: 1rem;
	border-bottom: 3px solid var(--goldPrimary);
	border-right: 3px solid var(--goldPrimary);
}

#missionStatement .contentArea p {
	font-size: 1.4rem;
	line-height: 1.8;
	color: var(--darkPrimary);
	text-align: center;
	/* font-family: "Gotham", serif; */
	position: relative;
	padding: 1rem 2rem;
	width: 80%;
	margin: 0 auto;
}

/* #missionStatement .contentArea p::before,
#missionStatement .contentArea p::after {
content: '"';
font-family: Georgia, serif;
font-size: 4rem;
color: var(--gold);
position: absolute;
opacity: 0.4;
} */

#missionStatement .contentArea p::before {
	top: -1rem;
	left: -0.5rem;
}

#missionStatement .contentArea p::after {
	bottom: -2rem;
	right: -0.5rem;
}

.commencement-program #runOfShow .contentContainer .contentArea {
	background: none;
}

/* LETTERS */

#letters .contentContainer .contentArea {
	background: none;
}

#letters .contentContainer .contentArea .contentGridContainer {
	grid-template-columns: repeat(2, 300px);
	gap: 2em;
	justify-content: center;
}

#letters
.contentContainer
.contentArea
.contentGridContainer
.contentGridItem.letterThumbnail {
	background: #fff;
	border-radius: 10px;
}

#letters
.contentContainer
.contentArea
.contentGridContainer
.contentGridItem.letterThumbnail
img {
	width: 100%;
	display: block;
	border-radius: 10px;
}

/* LETTER FROM PRESIDENT */

#presidentLetter {
	margin: 2rem 0;
}

#presidentLetter .letter {
	/* max-width: 90%; */
	max-width: 40%;
	background: #fff;
	margin: 0 auto;
	border-radius: 10px;
	padding: 4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* font-size: 0.9em; */
}

#presidentLetter .letter .letterHeader .letterHeaderImageContainer {
	width: 300px;
	margin-bottom: 1rem;
}

#presidentLetter .letter .letterHeader .letterHeaderImageContainer img {
	width: 100%;
	display: block;
}

#presidentLetter .letter .letterHeader {
	display: flex;
	justify-content: center;
	align-items: center;
}

#presidentLetter .letter .letterDate {
	margin-top: 2rem;
}

#presidentLetter .letter .letterBody {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Farmingdale State College Alumni Association Letter */
#alumniLetter {
	margin: 2rem 0;
}

#alumniLetter .letter {
	max-width: 40%;
	background: #fff;
	margin: 0 auto;
	border-radius: 10px;
	padding: 4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#alumniLetter .letter .letterHeader .letterHeaderImageContainer img {
	width: 100%;
	display: block;
}

#alumniLetter .letter .letterHeader {
	display: flex;
	justify-content: center;
	align-items: center;
}

#alumniLetter .letter .letterDate {
	margin-top: 2rem;
}

#alumniLetter .letter .letterBody {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Alumni Here For You */
#alumniHereForYou {
	margin: 2rem 0;
}

#alumniHereForYou .letter {
	max-width: 700px;
	background: #fff;
	margin: 0 auto;
	border-radius: 10px;
	padding: 4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#alumniHereForYou .letter .letterHeader .letterHeaderImageContainer img {
	width: 100%;
	display: block;
}

#alumniHereForYou .letter .letterHeader {
	display: flex;
	justify-content: center;
	align-items: center;
}

#alumniHereForYou .letter .letterBody {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
}

#alumniHereForYou .letterTitle h3 {
	text-transform: uppercase;
	font-size: 2.75rem;
	text-align: center;
	color: var(--alumniGold);
	font-family: "Gotham";
}

#alumniHereForYou .flourishDivider {
	width: 100%;
	text-align: center;
}

#alumniHereForYou .flourishDivider img {
	width: 83%;
}

#alumniHereForYou .socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

#alumniHereForYou .socials i {
	color: var(--greenSecondary);
}

#alumniHereForYou .socials a {
	text-decoration: none;
	color: var(--alumniGoldy);
	font-weight: bold;
}

#alumniHereForYou .alumniContact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2em;
	margin-top: 2rem;
	text-align: left;
}

#alumniHereForYou .alumniContact .logoContainer {
	width: 65px;
	position: relative;
}

#alumniHereForYou .alumniContact .logoContainer::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 1px;
	background-color: var(--alumniGold);
	background-color: #000;
	right: -16px;
	bottom: 0px;
}

#alumniHereForYou .alumniContact .logoContainer img {
	width: 100%;
}

#alumniHereForYou .alumniContact .contactCopyContainer {
	display: flex;
	flex-direction: column;
	/* gap: 0.5rem; */
}

#alumniHereForYou .alumniContact .contactCopyContainer p {
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

#alumniHereForYou .letterBody a {
	text-decoration: none;
	color: var(--alumniGold);
	font-weight: bold;
}

#alumniHereForYou .alumniContact .contactCopyContainer .emailNumber {
	display: flex;
	gap: 2em;
}

#alumniHereForYou .alumniContact .contactCopyContainer .emailNumber .email {
	position: relative;
}

#alumniHereForYou
.alumniContact
.contactCopyContainer
.emailNumber
.email::after {
	content: "";
	position: absolute;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background-color: #000;
}

/* 2025 Chancellor's Awards */
.commencement-program
#caseWinnersStudents
.contentContainer
.contentArea
.contentCols,
.commencement-program
#caseWinnersFacultyStaff
.contentContainer
.contentArea
.contentCols {
	padding-top: 1rem;
	padding-bottom: 1rem;
	border: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.commencement-program
#caseWinnersStudents
.contentContainer
.contentArea
.contentCols
.caseCol,
.commencement-program
#caseWinnersFacultyStaff
.contentContainer
.contentArea
.contentCols
.caseCol {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.commencement-program
#caseWinnersStudents
.contentContainer
.contentArea
.contentCols
.caseCol.solo-center,
.commencement-program
#caseWinnersFacultyStaff
.contentContainer
.contentArea
.contentCols
.caseCol.solo-center {
	grid-column: 1 / -1;
	align-self: center;
	margin-top: 2rem;
}

.commencement-program
#caseWinnersStudents
.contentContainer
.contentArea
.contentCols
.caseCol
.caseItem,
.commencement-program
#caseWinnersFacultyStaff
.contentContainer
.contentArea
.contentCols
.caseCol
.caseItem {
	text-align: center;
}

.commencement-program
#caseWinnersStudents
.contentContainer
.contentArea
.contentCols
.caseCol
.caseItem
p,
.commencement-program
#caseWinnersFacultyStaff
.contentContainer
.contentArea
.contentCols
.caseCol
.caseItem
p {
	margin-bottom: 0.5rem;
}

/* Student Awards for Academic Excellence */
.commencement-program
#excellenceAwards
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 4;
	column-count: 4;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Master of Science*/
.commencement-program
#degreeCandidatesMastersScience
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Bachelor of Science*/

.commencement-program
#degreeCandidatesBachelorsScience
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 5;
	column-count: 5;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Bachelor of Technology*/
.commencement-program
#degreeCandidatesBachelorsTechnology
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 2;
	column-count: 2;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Associate of Arts */
.commencement-program
#degreeCandidatesAssociatesArts
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Applied Science */
.commencement-program
#degreeCandidatesAssociatesAppliedScience
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 2;
	column-count: 2;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Associate of Science */
.commencement-program
#degreeCandidatesAssociatesScience
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 2;
	column-count: 2;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Degree Candidates Certificates */
.commencement-program
#degreeCandidatesCertificates
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 2;
	column-count: 2;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Honor Society Inductees */
.commencement-program
#honorSocietyInductees
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Latin Honors */
.commencement-program #latinHonors .contentContainer .contentArea .contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Farmingdale State College Foundation & Alumni Association Scholarships */
.commencement-program
#foundationAlumniScholarships
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* Departmental Awards & External Scholarships */
.commencement-program
#departmentalAwards
.contentContainer
.contentArea
.contentCols {
	--original-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #ccc;
	column-gap: 3rem;
}

/* PROGRAM */
.commencement-program #program {
	margin-top: 4em;
}

.commencement-program #program > h2 {
	text-align: center;
	font-size: 2.5rem;
	font-family: "Gotham";
	color: var(--goldPrimary);
	text-transform: uppercase;
}

.commencement-program .divider {
	display: flex;
	justify-content: center;
	/* align-items: center; */
}

.commencement-program div.divider img {
	display: block;
	width: 70%;
}

.commencement-program #program > .flourishDivider {
	display: flex;
	justify-content: center;
	margin: 2rem 0;
}

.commencement-program #program > div.flourishDivider img {
	display: block;
}

/* Run of Show */
.commencement-program #runOfShow {
}

.commencement-program #program section .contentContainer > h3 {
	text-align: center;
	font-family: "Gotham";
	text-transform: uppercase;
	color: var(--goldPrimary);
	font-size: 2rem;
	margin: 1rem 0 1.75rem 0 !important;
	position: relative;
}

.commencement-program #program section .contentContainer > h3::after {
	display: none;
}

.commencement-program #program section .contentContainer h4 {
	text-align: center;
	font-family: "Gotham";
	text-transform: uppercase;
	color: var(--goldPrimary);
	font-size: 1.5rem;
	margin: 1rem 0 1.75rem 0 !important;
	position: relative;
}

.commencement-program #program section .contentContainer .contentArea {
	background: none;
}

.commencement-program
section
.contentContainer
.contentArea
.contentGridContainer {
	display: grid;
	gap: 1em;
	margin: 3rem 0;
}

.commencement-program
section
.contentContainer
.contentArea
.contentGridContainer.threeCol {
	grid-template-columns: repeat(3, 1fr);
}

.commencement-program
section
.contentContainer
.contentArea
.contentGridContainer.twoCol {
	grid-template-columns: repeat(2, 1fr);
}

.commencement-program
section
.contentContainer
.contentArea
.contentGridContainer.oneCol {
	grid-template-columns: 1fr;
}

.commencement-program section .contentContainer .contentArea .contentGridItem {
	display: flex;
	flex-direction: column;
	gap: 2em;
	align-items: center;
	text-align: center;
}

.commencement-program
section
.contentContainer
.contentArea
.contentGridItem
p {
	color: #fff;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.5;
}

/* Tab styling */
.candidateTabs {
	/*   margin: 2rem 0; */
	margin: 4rem 0 1rem 0;
	padding: 0 2rem;
}

.candidateTabs [role="tablist"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	/*   margin: 6rem 0 2rem 0; */
	padding-bottom: 0.5rem;
}

.candidateTabs [role="tab"] {
	background-color: var(--darkPrimaryTransparent);
	color: var(--lightTextColor);
	border: 1px solid var(--greenPrimary);
	border-radius: 4px;
	padding: 0.75rem 1rem;
	font-family: "Gotham", sans-serif;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.5px;
	flex: 0 1 auto;
	white-space: nowrap;
	margin-bottom: 0.5rem;
}

.candidateTabs [role="tab"]:hover {
	background-color: var(--greenPrimaryTransparent);
}

.candidateTabs [role="tab"][aria-selected="true"] {
	background-color: var(--candidateGreenPrimary);
	color: var(--lightTextColor);
	border-color: var(--candidateBorderandArrow);
	position: relative;
}

.candidateTabs [role="tab"][aria-selected="true"]::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--candidateBorderandArrow);
}

/* ==========================================================================
MEDIA QUERIES - ORGANIZED BY COMPONENT AND BREAKPOINT
========================================================================== */

/* 
* LAYOUT & GENERAL COMPONENTS
* ========================================================================== */

/* Large screens (1200px+) */
@media (max-width: 1310px) {
	.contentContainer > h2 {
		font-size: 1.75rem;
		padding: 0 1rem;
	}

	.contentContainer > h2::before,
	.contentContainer > h2::after {
		width: 50px;
		top: calc(50% - 3px);
	}

	.contentContainer > h2 span::before,
	.contentContainer > h2 span::after {
		display: none;
	}
}

@media (max-width: 933px) {
	body.commencement-program {
		background-image: url('/_resources/images/fsc-interior-background-green.jpg');
		background-size: 100% auto;
		background-repeat: repeat-y;
		background-position: center top;
		background-attachment: fixed;
	}
	.contentContainer > h2 {
		font-size: 1.5rem;
	}

	.contentContainer > h2::before {
		right: calc(100% + 0.2rem);
	}

	.contentContainer > h2::after {
		left: calc(100% + 0.2rem);
	}

	.commencement-program
	section
	.contentContainer
	.contentArea
	.contentGridItem
	p {
		font-size: 0.9em;
	}

	.contentContainer .contentArea .contentCols h3.contentColHeader {
		font-size: 1em;
	}
}

@media (max-width: 791px) {
	.contentContainer > h2 {
		font-size: 1.25rem;
	}

	.contentContainer > h2::before,
	.contentContainer > h2::after {
		width: 30px;
	}

	.contentContainer > h2::before {
		right: 98%;
	}

	.contentContainer > h2::after {
		left: 98%;
	}
}

@media (max-width: 609px) {
	.contentContainer > h2 {
		white-space: normal;
		line-height: 1.5;
		font-size: 1.5rem;
	}

	.contentContainer > h2::before,
	.contentContainer > h2::after {
		display: none;
	}
}

/* 
* HERO SECTION
* ========================================================================== */
@media (max-width: 1131px) {
	.commencement-program #hero .heroCopy .heroTitle {
		font-size: 2rem;
	}
	.commencement-program #hero .heroCopy a {
		padding: 0.45em 0.8em;
		font-size: 1rem;
	}
}

@media (max-width: 741px) {

	.commencement-program #hero .heroCopy .heroTitle {
		font-size: 1.5rem;
	}

	.commencement-program #hero .heroCopy a {
		padding: 0.25em 0.8em;
		font-size: 0.8rem;
	}
}

@media (max-width: 544px) {
	.commencement-program #hero .heroCopy {
		padding: 0 10px;
	}
	.commencement-program #hero .heroCopy .heroTitle {
		text-align: center;
	}
}
/* 
* HERO SECTION
* ========================================================================== */

@media (max-width: 1541px) {
	#missionStatement .contentArea p {
		width: 100%;
		margin: 0;
	}
}

@media (max-width: 1200px) {
	#missionStatement .contentArea {
		max-width: 70%;
	}
}

@media (max-width: 768px) {
	#missionStatement .contentArea {
		max-width: 90%;
	}

	#missionStatement .contentArea p {
		font-size: 1.2rem;
		padding: 0.5rem 0rem;
	}
	#missionStatement .contentContainer > h2 {
		font-size: 1.75rem;
	}

	#missionStatement .contentContainer > h2::before,
	#missionStatement .contentContainer > h2::after {
		width: 50px;
	}
}

@media (max-width: 480px) {
	#missionStatement .contentContainer > h2::before,
	#missionStatement .contentContainer > h2::after {
		display: none; /* Removes lines on very small screens */
	}
}

@media (max-width: 446px) {
	#missionStatement .contentArea {
		padding: 2em;
		max-width: 95%;
	}
}

/* 
* LETTERS SECTION
* ========================================================================== */

@media (max-width: 1584px) {
	#presidentLetter .letter,
	#alumniLetter .letter {
		max-width: 60%;
	}
}

@media (max-width: 1148px) {
	#presidentLetter .letter,
	#alumniLetter .letter {
		max-width: 70%;
	}
}

@media (max-width: 906px) {
	#presidentLetter .letter,
	#alumniLetter .letter {
		max-width: 85%;
	}
}

@media (max-width: 596px) {
	#presidentLetter .letter {
		padding: 2rem;
		gap: 0.25rem;
	}

	#alumniLetter .letter {
		padding: 2rem;
		gap: 0.25rem;
	}
}

@media (max-width: 508px) {
	#presidentLetter .letter,
	#alumniLetter .letter {
		max-width: 95%;
	}
}

/* 
* MODAL & DIALOG
* ========================================================================== */

@media (max-width: 1573px) {
	.commencementModal .closeButton {
		bottom: 67px;
		right: 278px;
	}
}

@media (max-width: 1525px) {
	.commencementModal .closeButton {
		right: 198.5px;
	}
}

@media (max-width: 1365px) {
	.commencementModal .closeButton {
		right: 119.5px;
	}
}

@media (max-width: 1209px) {
	.commencementModal .closeButton {
		right: 49px;
	}
}

@media (max-width: 1209px) {
	.commencementModal .closeButton {
		bottom: 20px;
		right: 86px;
	}
}

@media (max-width: 967px) {
	.commencementModal .closeButton {
		bottom: 20px;
		right: 18px;
	}
}

@media (max-width: 713px) {
	.commencementModal .modalContent {
		max-width: 90%;
	}
}

@media (max-width: 663px) {
	.commencementModal
	.modalContent
	.modalContentContainer
	#presidentLetterContent
	.letterHeaderImageContainer
	img {
		width: 62%;
	}
}

@media (max-width: 500px) {
	.commencementModal .modalContent .modalContentContainer h2 {
		font-size: 1.5rem;
	}
}

/* 
* NAVIGATION & LINKS
* ========================================================================== */

@media (max-width: 1533px) {
	.commencementLinks .linkList li a {
		font-size: 0.8em;
	}
}

@media (max-width: 1260px) {
	.commencementLinks .linkList li a {
		font-size: 0.7em;
	}
}

@media (max-width: 1123px) {
	.commencementLinks {
		position: relative;
	}
	.commencementLinks .linkList {
		flex-direction: column;
		align-items: center;
	}
}

/* 
* CANDIDATE TABS
* ========================================================================== */

@media (max-width: 768px) {
	.candidateTabs [role="tablist"] {
		gap: 0.25rem;
	}

	.candidateTabs [role="tab"] {
		padding: 0.5rem 0.75rem;
		font-size: 0.8rem;
		flex: 1 1 auto;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.candidateTabs {
		padding: 0 0.5rem;
	}
	.candidateTabs [role="tab"] {
		flex: 1 1 calc(50% - 0.25rem);
		font-size: 0.65rem;
	}
}

/* 
* COLUMN LAYOUTS & CONTENT ORGANIZATION
* ========================================================================== */

/* Degree Candidates and Awards Columns */
@media (max-width: 1177px) {
	.commencement-program
	#degreeCandidatesBachelorsScience
	.contentContainer
	.contentArea
	.contentCols {
		column-count: 4;
	}
}

@media (max-width: 967px) {
	.commencement-program
	#excellenceAwards
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesBachelorsScience
	.contentContainer
	.contentArea
	.contentCols {
		column-count: 3;
	}
}

@media (max-width: 751px) {
	.commencement-program
	#excellenceAwards
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#foundationAlumniScholarships
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#departmentalAwards
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesMastersScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesBachelorsScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesAssociatesArts
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesCertificates
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#honorSocietyInductees
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#latinHonors
	.contentContainer
	.contentArea
	.contentCols {
		column-count: 2;
	}
}

@media (max-width: 693px) {
	.commencement-program
	#caseWinnersStudents
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#caseWinnersFacultyStaff
	.contentContainer
	.contentArea
	.contentCols {
		grid-template-columns: 1fr;
		gap: 1em;
	}

	.commencement-program
	#caseWinnersStudents
	.contentContainer
	.contentArea
	.contentCols
	.caseCol,
	.commencement-program
	#caseWinnersFacultyStaff
	.contentContainer
	.contentArea
	.contentCols
	.caseCol {
		gap: 1em;
	}
}

/* 
* PROGRAM
* ========================================================================== */

@media (max-width: 755px) {
	#alumniHereForYou .letterTitle h3 {
		font-size: 1.75em;
	}
}

@media (max-width: 719px) {
	#alumniHereForYou .letter {
		max-width: 600px;
		padding: 4rem 2rem;
	}
}

@media (max-width: 665px) {
	#alumniHereForYou .letterTitle {
		padding: 0em 2em;
		max-width: 95%;
	}
}

@media (max-width: 633px) {
	#alumniHereForYou .letter {
		max-width: 95%;
	}
}

@media (max-width: 624px) {
	#alumniHereForYou .letterBody p {
		font-size: 0.8em;
	}
	#alumniHereForYou .letterBody a {
		font-size: 0.8em;
	}
}

@media (max-width: 532px) {
	#alumniHereForYou .socials {
		flex-direction: column;
		gap: 1em;
	}
}

@media (max-width: 500px) {
	#alumniHereForYou .alumniContact {
		flex-direction: column;
	}

	#alumniHereForYou .alumniContact .logoContainer::after {
		display: none;
	}

	#alumniHereForYou .alumniContact .logoContainer {
		width: 85px;
	}
}

/* PROGRAM HEADINGS */
@media (max-width: 693px) {
	.commencement-program #program > h2 {
		font-size: 1.5em;
	}

	.commencement-program #program section .contentContainer > h3 {
		font-size: 1.5em;
	}
}

/* PROGRAM FLOURISHES */
@media (max-width: 693px) {
	.commencement-program #program > div.flourishDivider img {
		width: 60%;
	}
}

/* PROGRAM COLS */
@media (max-width: 633px) {
	.commencement-program
	section
	.contentContainer
	.contentArea
	.contentGridContainer.threeCol {
		grid-template-columns: 1fr;
	}

	.commencement-program
	section
	.contentContainer
	.contentArea
	.contentGridContainer.twoCol {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 555px) {
	.commencement-program
	#excellenceAwards
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#foundationAlumniScholarships
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#departmentalAwards
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesMastersScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesBachelorsScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesBachelorsTechnology
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesAssociatesArts
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesAssociatesScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesAssociatesAppliedScience
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#degreeCandidatesCertificates
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#honorSocietyInductees
	.contentContainer
	.contentArea
	.contentCols,
	.commencement-program
	#latinHonors
	.contentContainer
	.contentArea
	.contentCols {
		column-count: 1;
	}
}

/* Degree Candidates and Programs Container */
@media (max-width: 1212px) {
	.commencement-program
	#degreeCandidates
	.contentContainer
	.candidatesAndPrograms
	.candidatesAndProgramsContainer {
		column-count: 3;
	}
}

@media (max-width: 862px) {
	.commencement-program
	#degreeCandidates
	.contentContainer
	.candidatesAndPrograms
	.candidatesAndProgramsContainer {
		column-count: 2;
		text-align: center;
	}
}

@media (max-width: 702px) {
	.commencement-program
	#degreeCandidates
	.contentContainer
	.candidatesAndPrograms
	.candidatesAndProgramsContainer {
		column-count: 1;
	}
}