/* BEGIN INDEX CSS ----------------------------------------------> */

#index #content
{
	position: relative;
	left: calc(50% - 50vw); 
	width: 100vw;
	max-width: none;
	margin: 0px auto;
}

#index #mainContent
{
	margin: 0;
	padding: 0;
}

#index #homeAnimation
{
	position: relative;
	width: 100% ;
	background: #ccc;
	height: 90vh;
	max-height: 796px;
}

#index #homeAnimation ul,
#index #homeAnimation ul li
{
	position: relative;
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#index #homeAnimation .image,
#index #homeAnimation .videowrapper
{
	position: relative;
	width: 100%;
	height: 100%;
}

#index #homeAnimation .image img,
#index #homeAnimation .videowrapper video
{
	display: block;
	width: 100%;
	height: auto;
	height: 100%;
	object-fit: cover;
}

#index #homeAnimation .info
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 20px;
	left: max(6vw, 28px);
	bottom: 20px;
	width: calc(100% - 40px);
	max-width: 510px;
	margin: auto;
}

#index #homeAnimation .info .title h1
{
	padding-bottom: 0px;
	color: var(--dark-gray);
	--min-font-size: 36;
	--max-font-size: 64;
}

#index #homeAnimation .info .abstract
{
	color: var(--dark-gray);
	font-size: 1.4rem;
}

#index #homeAnimation .info .abstract p
{
	padding-top: 0px;
	margin-top: 0px;
}

#homeNewsWrapper #homeNewsNav
{
	display: flex;
	/*flex-wrap: wrap;*/
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 20px;
	z-index: 100;
	margin-top: -81px;
	height: 81px;
	background: rgba(255,255,255,0.75);
	border-top: 1px solid #fff;
}

#homeNewsWrapper #homeNewsNav button
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-width: 14px;
	margin-top: -8px;
	height: 87px;
	padding: 0 10px;
	background: none;
	box-sizing: border-box;
	text-shadow: none;
	border: none;
	border-top: 6px solid transparent;
	color: var(--navy-blue);
	font-size: 0.8rem;
	cursor: pointer;
}

#homeNewsWrapper #homeNewsNav button:is(:hover,:focus)
{
	color: var(--light-blue);
}

#homeNewsWrapper #homeNewsNav button.homeNewsLabelsHighlight
{
	border-top: 6px solid var(--dark-red);
}

#homeNewsWrapper .homeNewsItem
{
	display: none;
}

#homeNewsWrapper .homeNewsItem.homeNewsItemHighlight
{
	display: block;
}

#homeNewsWrapper .homeNewsItem ul.results_list,
#homeNewsWrapper .homeNewsItem ul.results_list > li
{
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}

#homeNewsWrapper .homeNewsItem ul.results_list
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li
{
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	font-family: var(--font-family-ptserif);
	font-size: 1.2rem;
}

#homeNewsWrapper .homeNewsItem.homeNewsItemSlideIn ul.results_list > li
{
	margin-top: 0;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li .image
{
	position: relative;
	z-index: 1;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li .image::after
{
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to top, rgba(0,0,0,0.40) 20%, transparent);
}

#homeNewsWrapper .homeNewsItem ul.results_list > li .image img
{
	display: block;
	width: 100%;
	height: 100%;	
	height: 407px;	
	object-fit: cover;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li .info
{
	position: absolute;
	bottom: 0px;
	z-index: 5;
	padding: max(20px, 3vw);
	line-height: 1.2;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li .info .section
{
	padding-bottom: 5px;
	font-family: var(--font-family-ptsans);
	font-size: 0.9rem;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li a.sp_pencil
{
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 8;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li a:not(.sp_pencil)
{
	color: #fff;
}

#homeNewsWrapper .homeNewsItem ul.results_list > li a:not(.sp_pencil):is(:hover,:focus)
{
	color: var(--extra-light-blue);
}

#index #homeLower
{
	max-width: 1366px;
	margin: 4em auto;
	padding: 0 20px;
}

#index #homeLower form > div
{
	display: flex;
	flex-wrap: nowrap;
	border-bottom: 1px solid #707070;
}

#index #homeLower form > div > div
{
	flex: 1;
}

#index #homeLower form > div > div.submit_wrapper
{
	flex: 0;
}

#index #homeLower form > div > div input[type='text']
{
	padding-bottom: 0;
	background: none;
	border: none;
	color: var(--deep-navy-blue);
	font-size: 1.2rem;
	font-weight: 700;
}

#index #homeLower form > div > div input[type='text']:focus 
{
	background: #f1f1f1;
}

#index #homeLower form > div > div:not(.hasFocus) label
{
	color: var(--deep-navy-blue);
	font-size: 1.2rem;
	font-weight: 700;
}

#index #homeLower form > div > div button[type='submit']
{
	margin-bottom: 0;
	padding-bottom: 0;
	background: none;
	border: none;
}

#index #homeLower form > div > div button[type='submit']:is(:hover,:focus) svg path
{
	fill: var(--light-blue);
}

/* I don't know what this is for, so I'm just going to hide it to prevent it from breaking the layout at smaller screen sizes */
#index #homeLower form > div > div:nth-child(3)
{
	display: none;
}

.diversityTextIcon
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 128px;
	font-family: var(--font-family-ptserif);
	color: var(--deep-navy-blue);
	font-size: 2.1rem;
}

.diversityTextIcon picture
{
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.diversityTextIcon img
{
	display: block;
	width: 100%;
	height: auto;
	max-width: 158px;
	max-height: 128px;
	/*object-fit: cover;*/
}

@media (min-width: 501px)
{
	#homeNewsWrapper .homeNewsItem ul.results_list 
	{
		display: flex;
		flex-direction: row;
	}

	#homeNews
	{
		height: 407px;
	}
}

@media (min-width: 768px)
{
	#homeNewsWrapper #homeNewsNav button
	{
		min-width: 54px;
		font-size: 1rem;
	}
	
	#homeNewsWrapper .homeNewsItem ul.results_list > li
	{
		width: 33.33%;
		transform: translateY(80px);
		opacity: 0;
		transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	#homeNewsWrapper .homeNewsItem.homeNewsItemSlideIn ul.results_list > li
	{
		transform: translateY(0);
		opacity: 1;
		transition-delay: 0ms;
	}

	#homeNewsWrapper .homeNewsItem.homeNewsItemSlideIn ul.results_list > li:nth-child(2)
	{
		transition-delay: 350ms;
	}

	#homeNewsWrapper .homeNewsItem.homeNewsItemSlideIn ul.results_list > li:nth-child(3)
	{
		transition-delay: 700ms;
	}
}


/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;
	width: 100%;
	padding: 12px 16px 12px 16px;
	background: #ccc;
	box-sizing: border-box;
	color: #000000;
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: center;
}

#alertMessage p,
#alertMessage p *
{
	margin: 0;
	padding: 0;
	color: #000000;
}

#alertMessage a
{
	text-decoration: underline;
}

#alertMessage .closeButton
{
	position: absolute;
	top: 20px;
	right: 17px;
	padding: 24px 24px 0 0;
	background: none;
	border: none;
	color: #000;
}

#alertMessage .closeButton::before,
#alertMessage .closeButton::after
{
	top: 10px;
	left: 0px;
	width: 24px;
	height: 2px;
}

#alertMessage .closeButton:is(:hover,:focus)
{
	color: #555;
}

@media (min-width: 920px)
{
	#alertMessage
	{
		padding: 20px 44px 20px 44px;
		font-size: 1rem;
	}
}

@media (min-width: 1350px)
{
	#alertMessage
	{
		padding: 20px 80px 20px 80px;
	}
}


/* Home Notice Message */

#noticeMessage
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 2000; /* so we can be over the header div */
	top: 10px;
	bottom: 10px;
	left: 16px;
	right: 16px;
	height: 40vh;
	max-height: 70vh;
	width: calc(100vw - 32px - 50px);
	max-width: 866px;
	margin: auto;
	padding: 3.5em 20px 1.5em 20px;
	background: rgba(0,0,0,0.95);
}

#noticeMessage:not(.open)
{
	display: none;
}

#noticeMessage > div
{
	position: relative;
	z-index: 999999;
	width: 100%;
	height: 100%;
	font-size: 0.825rem;
}

#noticeMessage > div > div
{
	position: relative;
	overflow: auto;
	height: 100%;
	max-height: 70vh;
	margin: 0;
	padding: 0 2.5em 0 0;
}

#noticeMessage > div > div *
{
	color: #ffffff;
	--max-font-size: 20;
}

#noticeMessage > div div p:last-child
{
	margin-bottom: 0;
	padding-bottom: 0;
}

#noticeMessage .noticebuttons
{
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}

#noticeMessage div button,
#noticeMessage a.standardButton
{
	display: inline-flex;
	padding: 14px 18px 14px 25px;
	margin: 10px 10px 10px 0;
	background: none;
	border: 1px solid currentColor;
	border-radius: 0;
	color: inherit;
	font-weight: 300;
	font-size: 16px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

#noticeMessage div button:last-of-type,
#noticeMessage a.standardButton:last-of-type
{
	margin-right: 0;
}

#noticeMessage div button:after
{
	content: 'x';
	display: inline-block;
	margin-left: 18px;
	font-size: 1rem;
	line-height: 1.4;
	vertical-align: middle;
}

#noticeMessage div button:is(:hover,:focus),
#noticeMessage a.standardButton:is(:hover,:focus)
{
	background: white;
	color: black;
}

#noticeMessage div button:is(:hover,:focus) div,
#noticeMessage a.standardButton:is(:hover,:focus)
{
	color: black;
}

#noticeMessage .closeButton
{
	position: absolute;
	top: 20px;
	right: 17px;
	padding: 24px 24px 0 0;
	background: none;
	border: none;
	color: #fff;
}

#noticeMessage .closeButton::before,
#noticeMessage .closeButton::after
{
	top: 10px;
	left: 0px;
	width: 24px;
	height: 2px;
}

#noticeMessage .closeButton:is(:hover,:focus)
{
	color: #ccc;
}

@media (min-width: 969px)
{
	#noticeMessage
	{
		width: calc(100vw - 32px - 60px);
		padding: 3.5em 20px 1.5em 40px;
	}
}

/* END INDEX CSS ------------------------------------------------> */