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

body
{
	padding-top: 136px;
}

#mainContent,
#content 
{
	width: 100%;
	max-width: unset;
	margin: 0 auto 0;
}

main
{
	padding: 0;
}

#mainContent,
#mainContent:not(:only-child)
{
	float: none !important;
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
}

#footer
{
	margin-top: 0;
}

#homeAnimation
{
	position: relative;

}

#homeAnimation ul,
#homeAnimation li,
#homeAnimation > div.results
{
	height: 100%;
	margin: 0;
	list-style: none;
}

#homeAnimation li 
{
	width: 100%;
}

#homeAnimation .image
{
	position: absolute;
	top: 0;
	width: 100vw;
	left: calc(50% - 50vw);
	z-index: -1;
	height: 100%;
	overflow: hidden;
}

#homeAnimation .image img 
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#homeAnimation .info 
{
	padding: 50px 0;
	width: 70%;
	max-width: 520px;
}

#homeAnimation .info::before 
{
	background: linear-gradient(to right, rgba(255,255,255, .95) 50%, rgba(255,255,255, 0) 80%);
}

#homeAnimation .title,
#homeAnimation .title2
{
	color: var(--darkblue);
	font-family: 'Calluna';
	--min-font-size: 40;
	--max-font-size: 72;
	line-height: .85;

}

#homeAnimation .title2
{
	margin-left: 11%;
}

#homeAnimation .abstract
{
	padding-left: 12%;
	margin-top: 20px;
}

#homeAnimation .abstract p
{
	--min-font-size: 14;
	--max-font-size: 19;
	color: var(--darkblue);
	font-weight: 400;
}

#homeAnimation .abstract p strong 
{
	font-weight: 500;
}

#homePager
{
	position: absolute;
	top: 0;
	right: -20px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	height: 100%;
}

#homePager button 
{
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	padding: 0;
	margin-bottom: 20px;
	border: none;
	background: none;
	/*border-right: 4px solid #ffffff;*/
	cursor: pointer;
	font-size: 0px;
}

#homePager button::after 
{
	display: block;
	position: absolute;
	right: 20px;
	top: 0;
	content: '';
	width: 4px;
	height: 100%;
	background: #ffffff;
}

#homePager button.active::after,
#homePager button:is(:hover,:focus)::after 
{
	background: #8DB938;
}

#homePager button:last-child 
{
	margin: 0;
}


#homeAnimation #quoteDown,
#homeAnimation #quoteUp
{
	position: absolute;
	z-index: 2000;
	display: block;
	/*aspect-ratio: 281/368;*/
	width: auto;
	height: 200px;
	opacity: 0;
	transition: opacity 500ms ease 300ms, 
				top 1000ms ease 300ms;

}

@media (min-width: 768px)
{
	body
	{
		padding-top: 0;
	}

	#homeAnimation,
	#homeAnimation li,
	#homeAnimation li > a
	{

		height: 70vw;
		max-height: 815px;
	}

	#homeAnimation .aligner 
	{
		height: 100%;
		display: flex;
		align-items: flex-end;
		padding-bottom: 5%;
		box-sizing: border-box;
	}

	#homeAnimation .info 
	{
		padding: 50px 0;
		width: 50%;
		max-width: 520px;
	}

	#homeAnimation .image img 
	{
		object-position: center right;
	}

	#homePager 
	{
		padding-top: 68px;
		box-sizing: border-box;
	}



	#homeAnimation #quoteDown
	{
		top: -100px;
		left: 45px;
	}

	#homeAnimation #quoteUp
	{
		bottom: -100px;
		transition: opacity 500ms ease 300ms, 
					bottom 1000ms ease 300ms;
		
	}

	body.startAnimation #homeAnimation #quoteDown
	{
		top: calc(50% - 45px);
		/*opacity: .2;*/
		opacity: .7;
	}

	body.startAnimation #homeAnimation #quoteUp 
	{
		bottom: calc(50% - 45px);
		/*opacity: .2;*/
		opacity: .7;
	}
}

@media (min-width: 1280px)
{

	#homeAnimation .info
	{
		margin-left: 390px;
	}

	#homeAnimation .info::before 
	{
		background: linear-gradient(to right, rgba(255,255,255, .85) 40%, rgba(255,255,255, 0) 74%);
	}

	#homeAnimation #quoteDown, 
	#homeAnimation #quoteUp
	{
		height: 360px;
		left: 0;
	}

	body.startAnimation #homeAnimation #quoteUp
	{
		bottom: calc(50% - 140px);
	}

	#homeAnimation #quoteDown
	{
		left: 87px;
	}

	body.startAnimation #homeAnimation #quoteDown
	{
		top: calc(50% - 50px);
	}

	#homePager button 
	{
		margin-bottom: 32px;
	}
}


@media (min-width: 1800px)
{
	#homeAnimation .info::before 
	{
		background: linear-gradient(to right, rgba(255,255,255, .85) 20%, rgba(255,255,255, 0) 70%);
	}
}


#homeIntro 
{
	padding-top: max(30px, 
	             min(80px, 30px + (80 - 30) * ((100vw - 767px) / (1460 - 767))
	));

	padding-bottom: max(30px, 
	             min(40px, 30px + (40 - 30) * ((100vw - 767px) / (1460 - 767))
	));
}


#homeCareers ul,
#homeCareers li 
{
	position: relative;
	margin: 0;
	list-style: none;
}


#homeCareers
{
	position: relative;
	padding-top: max(30px, 
	             min(80px, 30px + (80 - 30) * ((100vw - 767px) / (1460 - 767))
	));
	color: #ffffff;

	padding-bottom: max(60px, 
	             min(80px, 60px + (80 - 60) * ((100vw - 767px) / (1460 - 767))
	));
}

#homeCareers::before
{
	background: url('../i/chat-box-background.png') no-repeat, var(--darkblue); /* data-uri */
	background-size: cover;
}

#homeCareers h2 
{
	color: inherit;
}

#homeCareers > div 
{
	margin-top: 40px;
}

#homeCareers ul 
{
	display: grid;
	grid-gap: 50px;
}

#homeCareers .image
{
	aspect-ratio: 675 / 414;
	overflow: hidden;
}

#homeCareers .image img 
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#homeCareers .content 
{
	position: relative;
	z-index: 10;
	width: 87%;
	min-height: 200px;
	/*padding: 30px 20px;*/
	padding: 
		max(25px, 
		    min(40px, 25px + (40 - 25) * ((100vw - 500px) / (1460 - 500))
		))
		max(20px, 
             min(57px, 20px + (57 - 20) * ((100vw - 500px) / (1460 - 500))
		));
	margin-left: 13.1%;
	margin-top: -15%;
	background: #ffffff;
	color: var(--black);
	box-sizing: border-box;
}

#homeCareers .linkoverlay a 
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0px;
}

#homeCareers .title 
{
	margin-bottom: 10px;
	color: var(--darkgreen);
	/*color: var(--limegreen); *//* not ADA compliant */
	font-weight: 500;
	text-transform: uppercase;
	--max-font-size: 21;
}

#homeCareers .content:hover,
#homeCareers .content:focus-within
{
	background: var(--blue);
	color: #ffffff;
}

#homeCareers .content:hover .title,
#homeCareers .content:focus-within .title
{
	color: inherit;
}



@media (min-width: 768px)
{
	#homeIntro
	{
		display: flex;
		justify-content: space-between;
	}

	#homeIntro .leftContent 
	{
		flex: 0 1 500px;
	}

	#homeIntro .rightContent 
	{
		flex: 0 1 875px;
		padding-left: 40px;
		box-sizing: border-box;
	}

	#homeIntro > div h2:first-child 
	{
		margin-top: 0;
	}



	



	#homeCareers ul.results_list 
	{
		grid-template-columns: repeat(2, 1fr);
	}

	#homeCareers .content
	{
		min-height: 282px;
	}

	#homeCareers::before
	{
		background: url(../i/chat-box-background.png) no-repeat, 

		linear-gradient(to bottom, var(--darkblue) 50%, #F5F5F5 50%);

		background-size: 50%;
		background-position: right top;
	}

}




/* 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;
}

@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: 20000; /* so we can be over the header div */
	top: calc(50% - 5vh);
	left: 10px;
	height: 10vw;
	max-height: 80vh;
	width: calc(100% - 20px);
	background: #000000;
}

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

#noticeMessage > div
{
	position: relative;
	z-index: 999999;
	overflow: hidden;
	width: 100%;
	background: #000000;
	color: #ffffff;
	font-size: 1.1rem;
}

#noticeMessage > div > div
{
	margin: 0;
	/*padding: 1.5em 2.5em; not needed when using full image in pop over */
}

#noticeMessage > div > div img
{
	display: block;
	width: 100%;
	height: auto;
}

#noticeMessage > div div p
{
	margin: 0;
	padding: 0;
}

.noticebuttons
{
	margin-top: 1em;
}

#noticeMessage .noticebuttons > *
{
	margin-right: 1em;
}

@media (min-width: 768px)
{
	#noticeMessage
	{
		left: calc(50% - 45vw);
		width: 90vw;
		
		left: calc(50% - 35vw);
		width: 70vw;
	}
}


@media (max-width: 767px)
{

	#homeAnimation
	{
		height: 50vh;
	}

	#homeAnimation li
	{
		position: absolute;
		opacity: 0;
	}

	#homeAnimation .aligner
	{
		display: flex;
		align-items: center;
		height: 100%;
	}
}


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