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


body:not(.mobileActive) #header::before 
{
	display: none;
}

#homeAnimation
{
	position: relative;
	height: 90vh;
	min-height: 600px;
	--fluid-end: 1200;
	background: var(--Navy);
}

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



/* #homeAnimation li::after 
{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 234px;
	background: linear-gradient(183deg, rgba(0, 0, 0, 0.50) 9.04%, rgba(0, 0, 0, 0.00) 87.16%);
	z-index: 5;
} */

#homeAnimation video,
#homeAnimation .image img
{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	object-fit: cover;
}

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

#homeAnimation li 
{
	padding-top: 10vh;
	box-sizing: border-box;
}

#homeAnimation .content a
{
	color: inherit;
}

#homeAnimation .content a:is(:hover, :focus)
{
	color: var(--Pale-Teal);
}

#homeAnimation .title,
#homeAnimation .title2 
{
	position: relative;
	--fluid-start: 920;
	--min-font-size: 50;
	--max-font-size: 100;
	font-weight: 700;
	line-height: 1;
}

#homeAnimation .title2 span
{
	display: block;
	padding-right: 40px;
	box-sizing: border-box;
}


#homeAnimation .title
{
	padding: 30px 0 10px;
}

#homeAnimation .title2::before 
{
	content: '';
	display: block;
    width: 100%;
    height: 18px;
	margin: 0 0 10px;
    background: var(--Box-Gradient);
}

:root 
{
	/* --blur-radius: 8px; */
	--blur-radius: 24px; /* increased per swati */
}


/* blur pseudo element */
#homeAnimation .title::before
{
	content: '';
	display: block;
	width: 100vw;
	position: absolute;

	bottom: 0;
	z-index: -1;

	
	height: 100%;
	width: calc(100% + 32px);
	left: -16px;

    backdrop-filter: blur(var(--blur-radius));
}


#homeAnimation .title2::before
{
	height: max(18px, 
			min(36px, 18px + (36 - 18) * ((100vw - 400px) / (768 - 400))
	));
	margin: 0 0 20px;
}

#homeAnimation .title2::after 
{
	position: absolute;
	right: 0;
	top: 0;
	content: '';
	display: block;
	width:  max(18px, 
			min(36px, 18px + (36 - 18) * ((100vw - 400px) / (768 - 400))
	));
	min-height: 250px;
	height: 47vh;
	background: var(--Box-Gradient);
}

#homeAnimation .abstract
{
	position: relative;
	padding-left: max(35px, 
             min(85px, 35px + (85 - 35) * ((100vw - 350px) / (1350 - 350))
		));
	padding-right: max(35px, 
             min(85px, 35px + (85 - 35) * ((100vw - 350px) / (1350 - 350))
		));
	margin-top: max(5%, 30px);
	box-sizing: border-box;
	max-width: 600px;
}

#homeAnimation .abstract::before 
{
	position: absolute;
	left: 0;
	top: 10px;
	content: '';
	display: block;
	width:  max(18px, 
			min(36px, 18px + (36 - 18) * ((100vw - 400px) / (768 - 400))
	));
	height: 59vh;
	background: #214392;
}

#homeAnimation .abstract p 
{
	--min-font-size: 20;
	--max-font-size: 24;
	line-height: 1.58;
}

#homeAnimation button.next
{
	position: absolute;
	right: 16px;
	bottom: 10vh;
	z-index: 1000;
	display: block;
	width: 38px;
	background: none;
	padding: 0;
	color: #ffffff;
	border: none;
	cursor: pointer;
}

#homeAnimation button.next svg 
{
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

#homeAnimation #pager 
{
	position: absolute;
	bottom: 8vh;
	left: max(35px, 
             min(85px, 35px + (85 - 35) * ((100vw - 350px) / (1350 - 350))
		));
	z-index: 1000;
	display: flex;
	gap: 13px;
}

#homeAnimation #pager button 
{
	position: relative;
	display: block; 
	max-width: 47px;
	width: 7vw;
	height: 15px;
	background: none;
	border: none;
	cursor: pointer;
}

#homeAnimation #pager button::after 
{
	content: '';
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--Pale-Gray);
}

#homeAnimation #pager button.cycle-pager-active::after
{
	height: 5px;
	background: var(--Deep-Teal);
}

/* #homeAnimation #slides
{
	position: relative;
} */


/* blur pseudo element */
#homeAnimation #slides::before,
#homeAnimation #slides::after
{
	content: '';
    display: none;
	width: calc((100% - min(90%, 1342px)) / 2);
    height: 100vh;
    position: absolute;
    bottom: 0;
	left: 0;
    z-index: 1000;
    backdrop-filter: blur(var(--blur-radius));

}

#homeAnimation #slides::before
{
	/* left: auto;
	right: 100%; */
	left: auto;
	right: 0;
}

#homeSearch
{
	position: relative;
	padding: 40px 0;
	color: #ffffff;
	z-index: 1000;
}

#homeSearch form > div 
{
	display: block;
}

#homeSearch input 
{
	background: none;
	border: none;
	border-bottom: 1px solid var(--Periwinkle);
	color: #ffffff;
	width: calc(100% - 50px);
	padding: 12px 0 0 0;
}

#homeSearch label 
{
	color: var(--Periwinkle);
	font-style: italic;
	padding: 12px 0 0 0;
	--max-font-size: 20;
}

#homeSearch form > div > div.hasFocus > label
{
	background: none;
	color: var(--Pale-Teal) !important;
	padding: 0;
	font-size: 14px;
	top: -5px;
}

#homeSearch h2
{
	color: inherit;
	margin-top: 0;
}

#homeSearch button 
{
	position: absolute;
	right: 0;
	top: 10px;
	display: block;
	width: 31px;
	height: 31px;
	color: #ffffff;
	padding: 0;
	background: none;
}

#homeSearch button svg 
{
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

#homeSearch button:is(:hover,:focus)
{
	color: var(--Pale-Teal);
}

#homeSearch::before
{
	background: linear-gradient(90deg, #214392 0%, #285DB7 100%);
}

@media (min-width: 600px)
{
	#homeSearch::before
	{
		left: 0;
		width: 100%;
	}

	#homeSearch .aligner
	{
		padding: 0 30px;
	}

}

@media (min-width: 768px)
{
	#homeAnimation
	{
		height: 70vh;
		
		min-height: 650px;
	}

	#homeAnimation .abstract::before 
	{
		height: 45vh;
	}

	#homAnimation #pager 
	{
		bottom: 50px;
	}
}

@media (min-width: 768px) and (min-height: 600px)
{
	#homeAnimation
	{
		--fluid-start: 1000;
		--fluid-end: 1600;
	}

	#homeAnimation .abstract
	{
		padding-right: 0;
	}

	#homeSearch 
	{
		/* width: 100vw;*/
		padding: 0;
		/*left: calc(50% - 50vw); */
		width: 100%;
	}

	#homeSearch::before 
	{
		display: none;
	}

	#homeSearch .aligner 
	{
		width: 100%;
        max-width: var(--standard-width);
        margin: 0 auto;
        left: 8px;
		padding: 40px;
		background: linear-gradient(90deg, #214392 0%, #285DB7 100%);
		box-sizing: border-box;
	}
}

/* blur pseudo element */
@media (min-width: 920px)
{
	#homeAnimation .title::before
	{
		width: calc(100% + 88px);
		left: -44px;
	}
}

@media (min-width: 1200px)
{
	#homeSearch::before 
	{
		display: none;
	}

	#homeSearch
	{
		position: relative;
		z-index: 1000;
		width: 100vw;
		left: calc(50% - 50vw);
		display: flex;
		align-items: flex-end;
		flex-wrap: nowrap;
		/* padding: 70px 85px; */
		margin-top: -36px;
		/* background: linear-gradient(90deg, #214392 0%, #285DB7 100%); */

	}

	#homeSearch .aligner 
	{
		width: 90%;
		padding: 70px 85px;
	}

	#homeSearch form 
	{
		flex: 0 1 820px;
	}

	#homeSearch h2 
	{
		flex: 1 1 275px;
		white-space: nowrap;
		margin-right: 38px;
		margin-bottom: 0;
	}

	#homeAnimation #slides::before,
	#homeAnimation #slides::after
	{
		display: block;
	}
}

/* a little bit of hacker to try and keep the #homeAnimation .abstract::before from poking out below the homeanimation on short devices */
#statistics
{
	position: relative;
	margin-top: 0 !important;
	padding-top: 60px;
	background: #ffffff;
	z-index: 200;
}

/* @media (min-width: 1200px) and (min-height: 700px) */
@media (min-width: 1200px)
{

	#homeAnimation
	{
		position: fixed;
		top: 0;
		left: calc(50% - 50vw);
		--fluid-start: 1000;
		--fluid-end: 1600;
		width: 100%;
		height: 100vh;
	}

	#upperContent
	{
		padding-top: 100vh;
	}

	#homeAnimation li
	{
		padding-top: max(50px, 
             min(80px, 50px + (80 - 50) * ((100vw - 1200px) / (1600 - 1200))
		));
		padding-top: 13vh;		
	}

	#homeAnimation .content 
	{
		width: 90%;
		max-width: var(--standard-width);
		margin: 0 auto;
		/* left: 8px; */ /* I'm worried this nudge to align with the search isn't going to cut it */
	}

	#homeAnimation button.next
	{
		bottom: auto;
		top: max(290px, 
             min(400px, 290px + (400 - 290) * ((100vw - 1200px) / (1600 - 1200))
		));
		right: 80px;
	}

	#homeAnimation .title
	{
		padding-bottom: 20px;
	}

	#homeAnimation .abstract::before 
	{
		height: 59vh;
	}

	

	#homeAnimation #pager
	{
		/* left: 85px; */
		/* width: 1200px;
		left: calc(50% - 600px); */
		left: 11vw;
		max-width: var(--standard-width);
		margin: 0 auto;
		bottom: auto;
		top: max(500px, 
             min(680px, 500px + (680 - 500) * ((100vw - 1200px) / (1600 - 1200))
		));
		top: 91vh;
	}

	#mainContent 
	{
		position: relative;
		z-index: 10;
		background: #ffffff;
	}

	#footer
	{
		position: relative;
		z-index: 1;
	}

	#statistics
	{
		position: relative;
		margin: 0 !important;
		padding: 50px 0 10px;
	}
	
}

@media (min-width: 1500px)
{
	#homeAnimation #pager
	{
		/* left: 85px; */
		width: 1175px;
		left: calc(50% - 587.5px);
		
	}
}



#content
{
	margin: 0px auto;
}

#mainContent
{
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0;
}


/* Newsroom Carousel */

#newsroomCarousel
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
	margin: 80px 0;
}

#newsroomCarousel a:not(:hover):not(:focus)
{
	color: var(--Black);
}

#newsroomCarousel .image img
{
	display: block;
	width: 100%;
	height: auto;
	opacity: .7;
}

#newsroomCarousel .image
{
	margin-bottom: 25px;
	background: #002B49;
}

#newsroomCarousel div.slick-track > div 
{
	position: relative;
	margin: 0 15px;
}

#newsroomCarousel .section 
{
	position: absolute;
	top: 23px;
	left: 27px;
	z-index: 10;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1.52px;
	--min-font-size: 13;
	--max-font-size: 19;
}

#newsroomCarousel #slickNav button 
{
	position: absolute;
	top: calc(50% - 45px);
	left: 24px;
	display: block;
	aspect-ratio: 45/38;
	width: 25px;
	mask-image: url('i/icon-arrow.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
	background: #ffffff;
	padding: 0;
	border: none;
	cursor: pointer;
	transform: rotate(180deg);
}

#newsroomCarousel #slickNav button:is(:hover, :focus)
{
	background: var(--Pale-Teal);
}

#newsroomCarousel #slickNav button + button 
{
	left: auto;
	right: 24px;
	transform: unset;
}

#newsroomCarousel .title 
{
	--max-font-size: 24;
}

#newsroomCarousel a:is(:hover, :focus) .image img 
{
	opacity: .5; /* opacity increase per Swati */
}

@media (min-width: 768px)
{
	#newsroomCarousel .section
	{
		--fluid-start: 1280;
	}

	#newsroomCarousel #slickNav button 
	{
		left: 32px;
	}

	#newsroomCarousel #slickNav button + button 
	{
		right: 32px;
	}
}

@media (min-width: 1350px)
{
	#newsroomCarousel #slickNav button 
	{
		left: 60px;
		width: 45px;
	}

	#newsroomCarousel #slickNav button + button 
	{
		right: 60px;
	}

	#newsroomCarousel div.slick-track > div
	{
		margin: 0 35px;
	}
}

/* Home content */

#homeContent
{
	position: relative;
	padding: max(80px, 
             min(120px, 80px + (120 - 80) * ((100vw - 768px) / (1600 - 768))
		)) 
		0;
}

#homeContent > div 
{
	max-width: 1080px;
}

#homeContent::before
{
	background: var(--Reverse-Gradient, linear-gradient(77deg, #10C1B3 3.73%, #214292 79.83%));
}

#homeContent :is(h2,h3,h4,h5,p)
{
	color: #ffffff;
}

#homeContent p.quoteBlock
{
	padding: 0;
	width: unset;
	max-width: unset;
	color: var(--Canary-Yellow);
	--max-font-size: 32;
}

#homeContent p.quoteBlock::before
{
	display: none;
}


/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;
	display: none;
	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 ------------------------------------------------> */