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

#header
{
	background: none;
}

body.scrolled #header
{
	background: #ffffff;
}

body:not(.scrolled) #logo path,
body:not(.scrolled) #searchJump path
{
	fill: #ffffff;
}

body:not(.scrolled) .mobileNavBox span
{
	background: #ffffff;
}

body.mobileActive .mobileNavBox span
{
	background: #000;
}

body.mobileActive #searchJump svg path
{
	fill: var(--teal);
}

body#index
{
	padding-top: 0;
}

#content
{
	max-width: none;
	margin: 0px auto;
}

#mainContent
{
	width: 100%;
	flex-basis: 100%;
	margin: 0;
	padding: 0;
}


#homeAnimation
{
	position: relative;
	z-index: 500;
	width: 100%;
	height: 48vw;
}

body.scrolled #homeAnimation
{
	z-index: unset;
}


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

}

#homeAnimation ul li
{
	opacity: 1 !important;
	z-index: 1 !important;
	visibility: visible !important;
}

#homeAnimation ul li
{
	position: absolute;
}


#homeAnimation ul li.current
{
	z-index: 10 !important;
}

#homeAnimation .imagecontainers
{
	position: relative;
	display: flex;
	width: 100vw;
	left: calc(50% - 50vw);
	overflow: hidden;
}

#homeAnimation .imagecontainers span
{
	position: relative;
	display: block;
	width: 25vw;
	height: 100%;
	overflow: hidden;

	transition: transform 1000ms ease 2000ms;
}

#homeAnimation .imagecontainers span:not(:last-child)::after
{
	position: absolute;
	right: 0;
	top: 0;
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: #E5E5E5;
	opacity: .27;
	z-index: 1;
}



#homeAnimation li .imagecontainers span:nth-child(1)
{
	transition-delay: 0s;
	transform: translateY(100%);
}

#homeAnimation li .imagecontainers span:nth-child(2)
{
	transition-delay: .25s;
	transform: translateY(-100%);
}
#homeAnimation li .imagecontainers span:nth-child(3)
{
	transition-delay: .5s;
	transform: translateY(100%);
}
#homeAnimation li .imagecontainers span:nth-child(4)
{
	transition-delay: .75s;
	transform: translateY(-100%);
}



#homeAnimation li.current .imagecontainers span
{
	transform: translateY(0);
}

#homeAnimation .imagecontainers img
{
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 100vw;
	height: auto;
}

#homeAnimation .imagecontainers span:nth-child(2) img{	left: -100%;}
#homeAnimation .imagecontainers span:nth-child(3) img{	left: -200%;}
#homeAnimation .imagecontainers span:nth-child(4) img{	left: -300%;}


#homeAnimation .imagecontainers span::before
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;

	background: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 100%);
}

#homeAnimation .imagecontainers span:nth-child(2)::before
{
	background: linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 100%);
}

#homeAnimation .imagecontainers span:nth-child(3)::before
{
	background: linear-gradient(to right, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 100%);
}

#homeAnimation .imagecontainers span:nth-child(4)::before
{
	background: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 100%);
}


#homeAnimation li .info
{
	top: 30px;
	opacity: 0;
	color: #ffffff;
}

#homeAnimation li.animateOutDown .info
{
	opacity: 0;
	transition: opacity 250ms ease;
}


#homeAnimation li.current .info
{
	opacity: 1;
	top: 0;
	transition: opacity 750ms ease 1.65s, position 750ms ease 1.65s;
}

#homeAnimation .title
{
	--min-font-size: 30;
	--max-font-size: 86;
	--max-margin-bottom: 30;
	line-height: 1.1;
	font-family: 'inter', sans-serif;
	font-weight: 700;
}

#homeAnimation .abstract p
{
	--min-font-size: 17;
	--max-font-size: 26;
}

#homeAnimation .arrowlink
{
	width: 40px;
}

#homeAnimation .arrowlink svg
{
	display: block;
	width: 100%;
	height: auto;
	fill: var(--yellow);
}


#homeAnimation #pager
{
	position: relative;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 50px;
}

#homeAnimation #pager button
{
	display: block;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid #000000;
	background: none;
	border-radius: 50%;
	cursor: pointer;
}

#homeAnimation #pager button:not(:last-child)
{
	margin-right: 22px;
}

#homeAnimation #pager button.active
{
	border-color: var(--yellow);
	background: var(--yellow);
}


@media (min-width: 768px)
{

	#homeAnimation
	{
		margin-bottom: 95px;
	}

	#homeAnimation .imagecontainers span
	{
		position: relative;
	}


	#homeAnimation .imagecontainers span
	{
		max-height: 90vh;
	}

	#homeAnimation .imagecontainers img
	{
		height: 100%;
	}

	#homeAnimation .info
	{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		margin-top: 0;
		color: #ffffff;
	}

	#homeAnimation .infoInner
	{
		width: 60%;
		max-width: 670px;
		box-sizing: border-box;
		/*margin-left: 200px;*/
		margin-left: 25%;

	}

	#homeAnimation .arrowlink
	{
		margin-top: 40px;
		width: 66px;
	}

	#homeAnimation #pager
	{
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
		height: 100%;
		flex-direction: column;
		justify-content: center;
	}

	#homeAnimation #pager button
	{
		border-color: #ffffff;
		margin-bottom: 24px;
	}

}


@media (max-width: 767px)
{

	#homeAnimation
	{
		height: 100vw;
		padding-bottom: 50px;
		max-height: 50vh;
		margin-bottom: 70px;
	}

	#homeAnimation div.results
	{
		height: 100%;
	}

	#homeAnimation .imagecontainers
	{
		position: absolute;
		height: 100%;
	}

	#homeAnimation li.current .info
	{
		position: relative;
		z-index: 1000;
		padding: 120px 0 100px;
	}

	#homeAnimation .imagecontainers img
	{
		height: 100%;
		object-fit: cover;
	}

}

@media (max-width: 400px)
{
	#homeAnimation
	{

		min-height: 475px;
		max-height: 100vh;
	}
}


@media (max-width: 700px) and (orientation: landscape)
{
	#homeAnimation
	{

		min-height: 400px;
		max-height: unset;
	}
}




/* Statistics */

.statistics ul,
.statistics li
{
	margin: 0;
	list-style: none;
	text-align: center;
	color: #666666;
}

.statistics li
{
	margin-bottom: 40px;
}

.statistics
{
	margin: 30px 0;
}

.statistics .title
{
	--max-font-size: 80;
	font-weight: 700;
	line-height: 1;
	font-family: 'inter';
}

.statsCounter .title
{
	opacity: 0;
}


.statistics .smalltext
{
	--fluid-start: 1280;
	--fluid-end: 1800;
	--min-font-size: 18;
	--max-font-size: 24;
}

.statistics li:nth-child(1) .title {	color: var(--teal);}
.statistics li:nth-child(2) .title {	color: var(--coral);}
.statistics li:nth-child(3) .title {	color: var(--darkblue);}

.statistics a:not(:hover):not(:focus)
{
	color: inherit;
}


#section1 .freeformspotlight
{
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 400px;
}

#section1 .freeformspotlight img
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#section1 .freeformspotlight .linkText
{
	position: relative;
	z-index: 10;
	padding: 30px;
	color: #ffffff;
	--max-font-size: 34;
	line-height: 1.22;
	width: calc(80% - 48px);
	max-width: 488px;
}

#section1 .right > a:only-child .freeformspotlight .linkText
{
	--max-font-size: 44;
}

#section1 .right
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

#section1 .right a > svg
{
	position: absolute;
	right: 30px;
	bottom: 30px;
	display: block;
	width: 48px;
	height: auto;
	fill: var(--yellow);
	z-index: 10;
}

#section1 .right > * 
{
	position: relative;
	flex: 1 1 250px;
}

#section2
{
	position: relative;
	/*padding-top: 84px;
	margin: 73px 0;*/

	/*changed per client*/
	padding-top: 54px;
	margin: 43px 0;
}

#section2::before
{
	content: '';
	position: absolute;
	left: calc(50% - 50vw);
	top: 0;
	width: 62vw;
	height: 180%;

	background: linear-gradient(to bottom, rgba(112,114,119,1) 0%, rgba(223,228,237,1) 100%);

	opacity: .1;
	z-index: -1;

}

#section2 .linktext
{
	margin-left: var(--random-left-margin);
}



div.sectionContent
{
	max-width: 920px;
	margin: 0 var(--random-left-margin);
}

div.sectionContent p
{
	--max-font-size: 21;
}


#section4
{
	position: relative;
	padding: 35px 0;
	margin-bottom: 35px;
}

#section4 .linktext
{
	margin: 0 var(--random-left-margin);
}

#section4::before
{
	content: '';
	position: absolute;
	right: calc(50% - 50vw);
	top: 70px;
	width: 40vw;
	height: 180%;

	background: linear-gradient(to bottom, rgba(112,114,119,1) 0%, rgba(223,228,237,1) 100%);

	opacity: .07;
	z-index: -1;

}

#row6
{
	position: relative;
}

/*#row6::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(0,0,0,0) 700px);
	opacity: .75;
}*/

#row6
{
	overflow: hidden;
	margin-top: 65px;
}

#row6 > picture > img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	display: block;

	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

#officeList img 
{
	display: block;
	width: 100%;
	height: auto;
}

#officeList
{
	position: relative;
}

#officeList::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(0,0,0,0) 700px);
	opacity: .75;
}

#officeList > div.results 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#officeList h1
{
	position: absolute;
	left: 0;
	top: 0;
	color: #ffffff;
	padding: 20px 20px;
	z-index: 10;
	margin: 0;
}

#officeList h1 a:not(:hover, :focus)
{
	color: inherit;
}

@keyframes icon_slide_down
{
	0%
	{
		transform: translateY(-50px);
		opacity: 0;
	}

	100%
	{
		transform: translateY(0);
		opacity: 1;
	}
}

#officeList ul,
#officeList li
{
	margin: 0;
	list-style: none;
}

#officeList li
{
	transform: translateY(-50px);
	opacity: 0;
}

#officeList.startAnimation li
{

	animation: icon_slide_down .5s forwards;
}

#officeList.startAnimation li:nth-child(2n) { animation-delay: .5s }
#officeList.startAnimation li:nth-child(3n) { animation-delay: .75s }
#officeList.startAnimation li:nth-child(4n) { animation-delay: 1s }
#officeList.startAnimation li:nth-child(5n) { animation-delay: 1.25s }
#officeList.startAnimation li:nth-child(6n) { animation-delay: 1.5s }
#officeList.startAnimation li:nth-child(7n) { animation-delay: 1.75s }
#officeList.startAnimation li:nth-child(8n) { animation-delay: 2s }
#officeList.startAnimation li:nth-child(9n) { animation-delay: 2.25s }
#officeList.startAnimation li:nth-child(10n) { animation-delay: 2.5s }
#officeList.startAnimation li:nth-child(11n) { animation-delay: 2.75s }
#officeList.startAnimation li:nth-child(12n) { animation-delay: 3s }
#officeList.startAnimation li:nth-child(13n) { animation-delay: 3.25s }

#officeList .mapicon
{
	display: block;
	width: .9vw;
	height: auto;
}

#officeList .mapicon svg
{
	display: block;
	width: 100%;
	height: auto;
	fill: var(--yellow);
}

#officeList li
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: auto;
}

#officeList .title
{
	display: none;
	padding: 5px 15px;
	background: var(--teal);
	color: #ffffff;
	white-space: nowrap;
}

#officeList li:is(:hover,:focus-within)
{
	z-index: 200;
}

.mapStatistics
{
	position: relative;
	z-index: 10;
	margin-top: 30px;
	/*margin-bottom: 80px;*/
	padding-bottom: 20px;

}

.mapStatistics h1 p
{
	margin: 0;
}

.mapStatistics h1
{
	color: inherit;
	padding: 40px;
	margin: 0;
}

.mapStatistics ul,
.mapStatistics li
{
	margin: 0;
	list-style: none;
}

.mapStatistics li
{
	display: flex;
	align-items: center;
	padding: 0 40px 20px 0;

	background: rgba(223,228,237,1);
}

.mapStatistics li a 
{
	display: flex;
	align-items: center;
}



.mapStatistics .title
{
	min-width: 80px;
	text-align: center;
	line-height: .75;
	margin-right: max(25px,
	             min(40px, 25px + (40 - 25) * ((100vw - 1350px) / (1700 - 1350))
	));

	--max-font-size: 64;
	color: var(--darkblue);
}

.mapStatistics a
{
	color: inherit;
}

.mapStatistics a:is(:hover, :focus) .smalltext
{
	text-decoration: underline;
}

.mapStatistics .linktext
{
	margin: 60px 40px;
}

/*#officeList li
{
	display: none;
}*/

@media (min-width: 600px)
{
	.statistics ul.results_list
	{
		display: flex;
		justify-content: flex-start
	}

	.statistics li
	{
		flex: 0 1 36%;
	}

	.statistics li:last-child
	{
		flex: 0 1 22%;
	}
}

@media (min-width: 768px)
{
	#section1 .right > a:only-child .freeformspotlight .linkText
	{
		padding: 45px 63px;
	}

	#section1 .right > a:only-child > svg
	{
		right: 63px;
		bottom: 45px;
		width: 78px;
	}

	.mapStatistics
	{
		margin-top: 0;
	}

	.mapStatistics ul
	{
		display: flex;
		width: 100%;
	}

	.mapStatistics ul li 
	{
		width: calc(100%/3);
	}
}


@media (min-width: 1100px)
{

	#row6 > picture > img,
	#row6::after
	{
		z-index: -1;
	}


}

@media (min-width: 1280px)
{

	#section1
	{
		display: flex;
		justify-content: space-between;
	}

	#section1 .right
	{
		flex: 0 1 821px;
	}

	#section1 .right > *:last-child
	{
		margin-left: 24px;
	}

	#section1 .left
	{
		flex: 0 1 800px;
	}

	#section1 h1
	{
		width: 100%;
		margin-top: 0;
	}

	#section1 .statistics
	{
		margin-top: 64px;
		margin-bottom: 60px;
	}


	/* Janice didn't like the "shake" in the counting animation caused by the resizing container.  The only way to deal with this is to have a fix container size.  This results in it not matching the mockup exactly */
	/*.statistics li
	{
		flex-basis: auto;
	}

	.statistics li:not(:last-child)
	{
		margin-right: 9%;
	}*/

	.statistics .title
	{
		--fluid-start: 1350;
		--fluid-end: 1900;
	}

	#section1 .right
	{
		flex-wrap: nowrap;
	}
}

@media (min-width: 1350px)
{


	#officeList h1
	{
		padding: 60px 70px;
		/*border-bottom: 1px solid rgba(229,229,229, .3);*/
	}

	.mapStatistics li
	{
		display: flex;
		padding: 40px 70px;
		border: 1px solid #cecece;
	}

	.mapStatistics li:not(:last-child)
	{
		border-right: none;
	}


	.mapStatistics .linktext
	{
		top: 70px;
		right: 70px;
	}

	.mapStatistics > picture > img
	{
		width: 1751px;
		height: auto;
	}

	#officeList li
	{
		display: block;
		line-height: 1.25;
	}

	#officeList li .mapicon:hover + .title
	{
		display: block;
		position: absolute;
		left: 40px;
		top: 0;
		margin: 0;
		color: #ffffff;
	}

	#section1 .freeformspotlight
	{
		min-height: 375px;
	}

	body:not(.scrolled) #mainNav a
	{
		color: #ffffff;
	}

}

@media (min-width: 1500px)
{

	#section4
	{
		position: relative;
	}

	#section4 .linktext
	{
		position: absolute;
		bottom: 60px;
		right: var(--random-left-margin);

	}

}

@media (min-width: 1900px)
{
	/*.statistics li:not(:last-child)
	{
		margin-right: 12%;
	}*/
}



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

#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;
	}
}

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