/* BEGIN INDEX CSS ----------------------------------------------> */
/*
body#index
{
	padding-top: 130px;
}*/

body.scrolled #header .swoosh 
{
	display: none;
}

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

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

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

#homeAnimation li .sp_pencil 
{
	position: absolute;
	z-index: 10;
}

#homeAnimation
{
	position: relative;
	z-index: 10;
}

#homeAnimation #pager 
{
	position: absolute;
	bottom: 20px;
	right: 16px;
	z-index: 1000;
}

#homeAnimation #pager button 
{
	display: inline-block;
	/*width: 10px;
	height: 10px;*/
	background: #ffffff;
	opacity: .5;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
}

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

#homeAnimation #pager button.cycle-pager-active
{
	opacity: 1;
}

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

#homeAnimation li
{
	opacity: 0;
	height: 100%;
}

#homeAnimation li:not(.darkText) .image::after 
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: .45;
}

#homeAnimation .image img 
{
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 115%;
	object-fit: cover;
}

#homeAnimation .content
{
	position: relative;
	z-index: 10;
	padding: 50px 0;
	color: #ffffff;
}

#homeAnimation li.darkText .content
{
	color: var(--black);
}

#homeAnimation .title 
{
	--max-font-size: 66;
	line-height: 1.25;
	font-weight: 300;
	letter-spacing: -.95px;
}

#homeAnimation .abstract 
{
	--max-font-size: 20;
	line-height: 1.7;
	font-weight: 300;
}

#homeAnimation .abstract a 
{
	color: inherit;
	font-weight: 700;
}

.swoosh
{
	pointer-events: none;
}

#topNews
{
	padding: 0 0 5px;
	font-weight: 300;
	background: #ffffff;
}

#topNews p 
{
	--min-font-size: 12;
}

#topNews h5
{
	margin-top: 0;
}

#topNews a
{
	color: inherit;
	font-weight: 700;
}

#topNews a:hover,
#topNews a:focus 
{
	color: #DAD9D9;
}

#topNews.darkText a:hover,
#topNews.darkText a:focus 
{
	color: #3F3F3F;
}

.ghostHeader 
{
	color: #586F7B;
	opacity: .07;
	text-transform: uppercase;
	--min-font-size: 50;
	--max-font-size: 150;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	letter-spacing: .8vw;

	/*transition: all 400ms ease;*/
}

#homeSearch
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
	z-index: 200;
}

#homeSearch > picture img 
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 156 / 103;
}

#homeSearchRight 
{
	padding: 0 20px;
}

#homeSearchForm
{
	padding: 20px 0;
	box-sizing: border-box;
	max-width: 658px;
}

#homeSearchForm input[type=text]
{
	padding-left: 0;
	border-bottom: 1px solid #CBCBCB;
	color: var(--black);
}

#homeSearchForm label 
{
	padding-left: 0;
	color: #292929;
}

#homeSearchForm > div 
{
	display: block;
}

#homeSearchForm button 
{
	position: absolute;
	right: 10px;
	top: 0;
	padding: 0;
	background: none;
}

#homeSearchForm button svg 
{
	fill: var(--cyanblue);
}

.circleSpotlight
{
	padding: 60px 0 20px;
	box-sizing: border-box;
}

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

.circleSpotlight ul
{
	/*display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 54px;*/
	
}

.circleSpotlight li
{
	display: flex;
	align-items: center;
	justify-content: center;
	/*width: 260px;
	height: 260px;*/
	padding: 30px 40px;
	margin-bottom: 14px;
	box-sizing: border-box;
	/*border-radius: 50%;*/
	color: #ffffff;
	background: var(--darkpurple);
	text-align: center;
	font-weight: 200;
}

.circleSpotlight .title 
{
	margin: 0;
	font-size: 50px;
	line-height: 1.25;
}

.circleSpotlight .smalltext 
{
	font-size: 19px;
	line-height: 1.47;
}

.slideIntro 
{
	max-width: 590px;
}

.slideIntro p 
{
	--min-font-size: 16;
	--max-font-size: 19;
}

#slide2
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
	/*margin-top: 40px;*/
	/*padding-top: 60px;*/
	padding-top: 30px;
	/*padding-top: 160px;*/
	/*margin-bottom: 130vh;*/
}

#slide2 .ghostHeader
{
	position: absolute;
	right: -1%;
}

#slide2 .slideIntro 
{
	margin-bottom: 58px;
}

#homeMatters
{
	width: 100%;
	max-width: 1430px;
	padding: 40px 20px;
	margin: 0 auto;
	box-sizing: border-box;
}


#homeSearch,
#slide2
{
	z-index: 5;
	background: #ffffff;
}

#homeSearch
{
	z-index: 6;
}

#slide3
{
	position: relative;
	/*position: fixed;*/
	top: 0;
	left: -10px;
	width: 100vw;
	left: calc(50% - 50vw);
	/*padding-top: max(180px, 
	             min(240px, 180px + (240 - 180) * ((100vw - 768px) / (1350 - 768))
	));*/
	padding-top: max(90px, 
	             min(120px, 90px + (120 - 90) * ((100vw - 768px) / (1350 - 768))
	));
	background: var(--slateblue);
	color: #ffffff;
}


#slide3 a,
#slide3 h2
{
	color: inherit;
}

#slide3 .ghostHeader 
{
	position: absolute;
	color: inherit;
	left: -.5vw;
	/*top: max(85px, 
	             min(95px, 85px + (95 - 85) * ((100vw - 768px) / (1350 - 768))
	));*/ /*changed again per bug comments*/
	top: max(55px, 
		             min(70px, 55px + (70 - 55) * ((100vw - 768px) / (1350 - 768))
		));
	  
	text-align: left;
}

#homeCapabilities
{
	width: 100%;
	padding: 0 20px 100px;
	max-width: 1430px;
	margin: 0 auto;
	box-sizing: border-box;
}

#homeCapabilities .view_more a 
{
	border-color: currentColor;
}

#homeCapabilities .view_more a:after 
{
	background: url(../i/icon-arrow-white.svgz) no-repeat;
	background-size: 100% auto;
}

#homeCapabilities .slideIntro
{
	margin-bottom: 40px;
}

#homeCapabilitiesList 
{
	margin-bottom: 40px;
}

#homeCapabilitiesList ul,
#homeCapabilitiesList li,
.circleImageSpotlight ul,
.circleImageSpotlight li
{
	margin: 0;
	list-style: none;
}

#homeCapabilitiesList li:first-child 
{
	border-top: 1px solid #738B98;
}

#homeCapabilitiesList li 
{
	border-bottom: 1px solid #738B98;
	--max-font-size: 28;
	font-weight: 300;
}

#homeCapabilitiesList li a 
{
	position: relative;
	display: block;
	padding: 24px 70px 24px 0;
	transition: all 250ms ease;
}

#homeCapabilitiesList li a:focus,
#homeCapabilitiesList li a:hover 
{
	border-bottom: none;
	transform: translateX(10px);
}

#homeCapabilitiesList li a svg
{
	position: absolute;
	right: 9px;
	top: calc(50% - 21px);
	display: block;
	width: 43px;
	height: 43px;
	padding: 0 12px;
	box-sizing: border-box;
	fill: #ffffff;
	/*transform: rotate(-90deg);*/
	border: 1px solid #738B98;
	border-radius: 50%;
}

#homeCapabilitiesList li a svg path
{
	fill: inherit;
}

.circleImageSpotlight
{
	margin-top: 50px;
}

.circleImageSpotlight li 
{
	position: relative;
}

.circleImageSpotlight .image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.circleImageSpotlight .image::before 
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	box-shadow: 20px 20px 0px 30px #A3C46F;
	transition: all 300ms ease;
	z-index: 1;
}

.circleImageSpotlight li .image::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0;
	z-index: 0;
	transition: all 300ms ease;
}

.circleImageSpotlight li:hover .image::before,
.circleImageSpotlight li:focus-within .image::before
{
	top: 1px;
	right: 17px;
	width: calc(100% - 15px);
	height: calc(100% - 15px);
}

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

.circleImageSpotlight li 
{
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 50%;
	width: 80vw;
	height: 80vw;
	max-width: 420px;
	max-height: 420px;
}

.circleImageSpotlight ul 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: max(20px, 
	             min(62px, 20px + (62 - 20) * ((100vw - 768px) / (1920 - 768))
	));
}

.circleImageSpotlight .content 
{
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 0 40px;
	text-align: center;
	opacity: 0;
	transition: all 300ms ease;
}

.circleImageSpotlight .title 
{
	--max-font-size: 80;
	font-weight: 300;
	line-height: 1;
}

.circleImageSpotlight .smalltext
{
	--max-font-size: 19;
}

.circleImageSpotlight li:hover .image::after,
.circleImageSpotlight li:focus-within .image::after
{
	opacity: .41;
}

.circleImageSpotlight li:hover .content,
.circleImageSpotlight li:focus-within .content 
{
	opacity: 1;
}

#slide4
{
	margin: 50px 0 90px;

}

#slide4 .slideIntro
{
	margin-bottom: 40px;
}

#slide4
{
	width: 100%;
	max-width: 1430px;
	margin-left: auto;
	margin-right: auto;
}


@media (min-width: 768px)
{

	#topNews
	{
		max-width: 330px;
	}

	#homeAnimation .content
	{
		display: flex;
		flex-direction: column;
		text-align: right;
		align-items: flex-end;
		/*padding-right: 16px;*/
		/*padding-top: 20%;*/
		/*padding-top: 16%;*/
		padding-top: 20%; /*changed per swati */
		box-sizing: border-box;
	}

	#homeAnimation .content .title,
	#homeAnimation .content .abstract 
	{
		width: 75%;
		max-width: 780px;
	}

	#homeAnimation li 
	{
		aspect-ratio: 1920/1280;
	}

	#homeAnimation li:not(.darkText) .image::after 
	{
		opacity: .23;
	}

	#homeAnimation #pager 
	{
		bottom: max(20px, 
		             min(45px, 20px + (45 - 20) * ((100vw - 768px) / (1600 - 768))
		));
	}

	#homeAnimation #pager button 
	{
		width: 16px;
		height: 16px;
	}

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


	#homeSearch
	{
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		/*margin-bottom: 160px;*/
	}

	#homeSearch picture
	{
		position: relative;
		top: -1px /*can't figure out why this doesn't stretch to full height.  this gets rid of the weird 1px line above it*/;
		flex: 0 1 44%;
	}

	#homeSearch > picture img
	{
		height: 100%;
		object-fit: cover;
	}

	#homeSearchRight
	{
		flex: 0 1 46%;
		
		padding-top: max(30px, 
		             min(95px, 30px + (95 - 30) * ((100vw - 768px) / (1920 - 768))
		));
		padding-left: max(30px, 
		             min(105px, 30px + (105 - 30) * ((100vw - 768px) / (1920 - 768))
		));
		padding-bottom: 200px;
		box-sizing: border-box;
	}

	.circleSpotlight li
	{
		width: 260px;
		height: 260px;
		border-radius: 50%;
	
	}

	.circleSpotlight
	{
		position: absolute;
		bottom: -88px;
		padding: 0;
		width: 100%;
	}

	.circleSpotlight ul
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		flex-wrap: nowrap;
		gap: max(5px, 
		             min(54px, 5px + (54 - 5) * ((100vw - 768px) / (1920 - 768))
		));
	}



	#slide2
	{
		padding-top: 160px;
	}

	#homeMatters
	{
		padding-top: max(20px, 
		             min(90px, 20px + (90 - 20) * ((100vw - 768px) / (1350 - 768))
		));
	}


	#homeCapabilities .slideIntro
	{
		margin-bottom: 70px;
	}

	.circleImageSpotlight ul 
	{
		gap: max(40px, 
		             min(64px, 40px + (64 - 40) * ((100vw - 768px) / (1920 - 768))
		));
	}

	.circleImageSpotlight li 
	{
		width: 40vw;
		height: 40vw;
	}

	#topNews
	{
		position: absolute;
		bottom: max(30px, 
		             min(71px, 30px + (71 - 30) * ((100vw - 768px) / (1600 - 768))
		));
		padding-left: 23px;
		z-index: 1000;
		color: #ffffff;
		background: none;

		/*transition: all 250ms ease;*/
	}

	#topNews p:last-child
	{
		margin-bottom: 0;
	}

	#topNews h5 
	{
		color: #ffffff;
	}

	#topNews.darkText,
	#topNews.darkText h5
	{
		color: var(--black);
	}
	
	/* removed per client */
	/*#homeAnimation.hasTopNews .image::before 
	{
		display: block;
		content: 'NEWS';
		position: absolute;
		z-index: 1;
		left: 0;
		bottom: max(50px, 
		             min(125px, 50px + (125 - 50) * ((100vw - 768px) / (1600 - 768))
		));
		color: #ffffff;

		font-weight: 700;
		line-height: 1;
		--min-font-size: 60;
		--max-font-size: 150;
		letter-spacing: .8vw;
		opacity: 0;
	}*/


	body.startSwoosh #homeAnimation.hasTopNews .image::before 
	{
		opacity: .25;
	}
}

@media (min-width: 1024px)
{


	#homeAnimation .content
	{
		padding-top: 28%; /*changed per swati */
	}


	.circleSpotlight ul 
	{
		padding-left: 22%;
	}

	.ghostHeader
	{
		opacity: .07;
	}

	#homeMatters,
	#homeCapabilities,
	#slide4
	{
		position: relative;
	}

	/*#homeMatters .view_more,*/
	#homeCapabilities .view_more,
	.newsroomSpotlights .view_more
	{
		position: absolute;
		top: max(20px, 
		             min(90px, 20px + (90 - 20) * ((100vw - 768px) / (1350 - 768))
		));
		padding-top: 50px;
		right: 20px;
	}

	#homeCapabilities .view_more,
	.newsroomSpotlights .view_more
	{
		top: 0px;
	}

	#homeCapabilitiesList 
	{
		margin-bottom: 80px;
	}

	#slide4 .slideIntro
	{
		margin-bottom: 60px;
	}


	

}

@media (min-width: 1250px)
{
	#homeAnimation li 
	{
		aspect-ratio: 1920/980;
		height: 100vh;
	}

	#homeCapabilities
	{
		padding-bottom: 340px;
		margin-bottom: 300px;
	}

	.circleImageSpotlight
	{
		position: absolute;
		bottom: -230px;
	}
	
	.circleImageSpotlight ul
	{
		flex-wrap: nowrap;
	}

	.circleImageSpotlight li
	{
		width: 30vw;
		height: 30vw;

		transform: translateY(150px);
		opacity: 0;

		transition: all 750ms ease;

	}

	.circleSpotlight li
	{
		transform: translateY(150px);
		opacity: 0;

		transition: all 750ms ease;
	}

	.circleImageSpotlight li:nth-child(2)
	{
		margin-top: 100px;
	}

	.circleImageSpotlight ul li:nth-child(2) { transition-delay: 100ms; }
	.circleImageSpotlight ul li:nth-child(3) { transition-delay: 200ms; }

	.circleSpotlight li:nth-child(2) { transition-delay: 100ms; }
	.circleSpotlight li:nth-child(3) { transition-delay: 200ms; }


	.circleImageSpotlight.startAnimation ul li,
	.circleSpotlight.startAnimation li
	{
		transform: translateY(0px);
		opacity: 1;
	}


	#homeSearchForm
	{
		padding: 40px 0 60px;
	}
}

@media (min-width: 1350px)
{
	#homeAnimation .content
	{
		padding-top: 15%;
	}
}

@media (max-width: 1024px)
{
	
	.circleImageSpotlight .image::before,
	.circleImageSpotlight.startAnimation .image::after,
	.circleImageSpotlight.startAnimation .content
	{
		transition-delay: 1250ms;
	}

	.circleImageSpotlight li:nth-child(2) .image::before,
	.circleImageSpotlight.startAnimation li:nth-child(2) .image::after,
	.circleImageSpotlight.startAnimation li:nth-child(2) .content
	{
		transition-delay: 1500ms;
	}

	.circleImageSpotlight li:nth-child(3) .image::before,
	.circleImageSpotlight.startAnimation li:nth-child(3) .image::after,
	.circleImageSpotlight.startAnimation li:nth-child(3) .content
	{
		transition-delay: 1750ms;
	}


	.circleImageSpotlight.startAnimation .image::before
	{
		top: 1px;
		right: 17px;
		width: calc(100% - 15px);
		height: calc(100% - 15px);
	}

	.circleImageSpotlight.startAnimation .image::after
	{
		opacity: .41;
	}

	.circleImageSpotlight.startAnimation .content
	{
		opacity: 1;
	}

}


body.loading #content
{
	opacity: 0;
}

@media (max-width: 767px)
{
	#homeAnimation
	{
		display: flex;
		flex-direction: column;
	}

	#homeAnimation #pager 
	{
		display: none;
	}

	#topNews
	{
		order: 3;
		margin-top: 20px !important;
	}
}

/* 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: var(--black);
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: center;
}

#alertMessage p,
#alertMessage p *
{
	margin: 0;
	padding: 0;
	color: var(--black);
}

#alertMessage a
{
	text-decoration: underline;
}

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

@media (min-width: 1280px)
{
	
	#homeAnimation .content .title, 
	#homeAnimation .content .abstract
	{
		width: 54%;
	}
}

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


/*====== Swoosh animation ======*/


@keyframes header_swoosh_animation
{
	0%
	{
		height: 0%;
	}

	100%
	{
		height: calc(100% + 35px);
	}
}

@keyframes animation_swoosh_animation
{
	0%
	{
		aspect-ratio: 1390 / 1;
	}

	100%
	{
		aspect-ratio: 1390 / 751;
	}
}


#header .swoosh
{ 
	height: 0%;
	opacity: .4;
}

#header .swoosh svg 
{
	position: absolute;
	z-index: 0;
}

#homeAnimation .swoosh 
{
	aspect-ratio: 1390 / 1;
	overflow: hidden;
	/*animation-delay: .s;*/
}

#homeAnimation .swoosh svg 
{
	/*opacity: .9;*/
	opacity: .4;
}

body.startSwoosh #homeAnimation .swoosh 
{
	animation: animation_swoosh_animation 1.9s forwards;
	animation-timing-function: ease-out;
	/*animation-delay: .25s;*/

	clip-path: polygon(0 150px, 100% 150px, 100% 100%, 0 100%);

}

body.startSwoosh #header .swoosh
{

	animation: header_swoosh_animation .5s forwards;
	animation-timing-function: linear;
	/*animation-delay: .75s;*/
	animation-delay: .5s;
}

@media (min-width: 1024px)
{
	
	#header 
	{
		opacity: 0;
		top: -150px;
		transition: opacity 500ms ease 300ms,
					top 700ms ease 0ms;
	}

	body.startSwoosh #header 
	{
		opacity: 1;
		top: 0;
	}

	#homeAnimation .content .title, 
	#homeAnimation .content .abstract,
	#topNews,
	#homeAnimation.hasTopNews .image::before 
	{
		opacity: 0;
		transition: opacity 800ms ease 1800ms/*,
					transform 1800ms ease 1000ms*/;



		/*transform: translateX(-200px);*/
	}

	#topNews,
	#homeAnimation.hasTopNews .image::before 
	{
		transition-delay: 2000ms;
		/*transform: translateX(200px);*/
		/*transition: opacity 1200ms ease 500ms,
					transform 2200ms ease 1500ms;*/
	}

	body.startSwoosh #homeAnimation .content .title,
	body.startSwoosh #homeAnimation .content .abstract,
	body.startSwoosh #topNews
	{
		opacity: 1;
		/*transform: translateX(0);*/
	}
}


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