#index
{
	background: #1F2022; /* for WCAG contrast */

	--anim-image-dur: 1500ms;
	--anim-header-dur: 1000ms;
}

/* BEGIN INDEX CSS ----------------------------------------------> */
#index #banner
{
	padding: 0;
}

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

	position: static;
}

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

	position: static;
}

#index #content
{
	padding-top: calc(72vw - 188px);
	min-height: 0;
}

#homeAnimation
{
	position: absolute;

	top: 0;
	left: 0;
	right: 0;
	height: 72vw;

	z-index: 2;

	color: white;
	background: #1F2022;
}

#homeAnimation ul,
#homeAnimation li,
#homeAnimation li > a:first-child
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;

	margin: 0;
	padding: 0;
	list-style: none;
}

#homeAnimation a
{
	color: inherit;
	color: #E5E5E5;
}

#homeAnimation li
{
	display: flex;
	justify-content: flex-end;
}

#homeAnimation .animControls
{
	position: absolute;
	z-index: 9;

	/* same as .info below */
	right: 0;

	/* offset  from .info */
	margin-top: -63px;
}

#homeAnimation button
{
	padding: 8px 0 0 14px;
	width: 0;
	height: 0;
	margin: 0 0 0 16px;
	border: 0;
	overflow: hidden;

	background: rgba(255,255,255, .24);
	cursor: pointer;
}

#homeAnimation button.current
{
	background: #E9CF2C;
}

#homeAnimation .info
{
	position: relative;

	color: white;
	padding: 0;
	margin: 0;

	max-width: 30%;
}

#homeAnimation .info,
#homeAnimation .animControls
{
	top: 200px;
	top: max(200px, min(20vw, 40vh, 420px));
	margin-right: 52px;
}

#homeAnimation .sp_pencil img
{
	position: absolute;
	top: -10px;
}

@media (max-width: 919px)
{
	#header
	{
		height: 120px;
	}

	#homeAnimation .info,
	#homeAnimation .animControls
	{
		margin-right: 12px;
	}

	#homeAnimation .info
	{
		max-width: 40%;
		margin-top:
	}
}

@media (max-width: 550px)
{
	#homeAnimation
	{
		top: 142px;
		height: calc(72vw + 110px);
	}

	#index #content
	{
		padding-top: calc(72vw - 188px + 142px);

	}

	#homeAnimation .info,
	#homeAnimation .animControls
	{
		top: 32%;
	}

	#homeAnimation .animControls
	{
		margin-top: -30px;
	}

	#homeAnimation .info
	{
		width: 40%;
		bottom: 0;
		font-size: 14px;
	}

	#homeAnimation .info .more
	{
		zoom: .75;
	}
}

#homeAnimation .title
{
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2;

	font-size: clamp(20px, 3.9vw, 75px);
}

#homeAnimation .subtitle
{
	margin-top: -0.15em;
	margin-bottom: 10px;
	text-transform: uppercase;
	line-height: normal;

	font-size: clamp(18px, 2.29vw, 44px);
	color: #E9CF2C;
}
#homeAnimation .subtitle a
{
	color: #E9CF2C;
}

#homeAnimation li
{
	z-index: 0;
}

#homeAnimation li.previous
{
	z-index: 1;
}

#homeAnimation li.current
{
	z-index: 2;
}

#homeAnimation li > div
{
	position: relative;
	z-index: 2;
}

#homeAnimation .image1,
#homeAnimation .image2
{
	position: absolute;
	top: 0;
	bottom: 0;

	width: 100vw;
	height: 100vw;

	z-index: 0;

	clip-path: polygon(67% 0, 0 0, 0 100%, 22% 100%);

	overflow: hidden;
}

#homeAnimation .image2
{
	/* mirror of the clip path above, comes in form right */
	clip-path: polygon(67% 0, 100% 0, 100% 100%, 22% 100%);
	left: 100vw;

	background: rgba(31, 32, 34);
}

#homeAnimation li > div
{
	left: 100vw;
	transition: left var(--anim-image-dur) ease-out;
}

#homeAnimation li > .image1
{
	left: -100vw;
}

#homeAnimation .current > div
{
	left: 0;
}

#homeAnimation .info p
{
	margin: .6em 0;
}

#homeAnimation .info .abstract p
{
	font-size: 1.67rem;
}

#homeAnimation .more:not(:empty)
{
	margin-top: 14px;
	text-transform: uppercase;
	padding-left: 47px;
	font-size: 14px;
	font-weight: 500;
	padding-top: 2px;
}

#homeAnimation .more:not(:empty)
{
	background: url(../i/home-more.svgz) left no-repeat;
}

#homeAnimation .more a:hover,
#homeAnimation .more a:focus
{
	color: #E9CF2C;
}

/* make the animation happen instantly, after the .current animation */
#homeAnimation .previous > div
{
	transition-delay: calc(var(--anim-image-dur) + 10ms);
	transition-duration: 1ms;
}

#homeAnimation .image1 img,
#homeAnimation .image2 img
{
	display: block;

	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 72vw;

	object-fit: cover;
}

#homeAnimation .image2 img
{
	opacity: .07;
}

#homeNews
{
	position: absolute;
	z-index: 999;

	bottom: 0;
	padding-bottom: 130px;
	margin: 0 auto;

	width: 100%;
	left: 0;

	overflow: hidden;

	font-weight: 200;
}

#homeNews .results_list,
#homeNews .results_list li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#homeNews .results_list
{
	display: flex;
	justify-content: space-between;
	position: relative;
	width: calc(100% - 104px);
	max-width: 1632px;
	margin: 0 auto;

	position: relative;
	top: 0;
}

#index #header,
#homeNews .results_list
{
	/* bring in the header after a delay for the image animation to complete */
	transition: top var(--anim-header-dur) var(--anim-image-dur) ease-out;
}

#index #header:not(.slideIn)
{
	top: -300px;
}

#homeNews:not(.slideIn) .results_list
{
	top: 100vh;
}

#homeNews .results_list > li,
#homeNews .results_list > li > a
{
	box-sizing: border-box;
	padding: 34px 41px;
}

#homeNews .results_list > li
{
	width: 33.33%;
	margin: 0 0 0 3.4vw;
}

@media (max-width: 919px)
{
	#homeNews .results_list
	{
		width: calc(100% - 24px);
	}

	#homeNews .results_list > li
	{
		margin-left: 12px;
	}
}

#homeNews .results_list > li:first-child
{
	margin: 0;
}

#homeNews .results_list > li > a
{
	display: block;
	margin: -34px -41px;
	height: 100%;
}

#homeNews a
{
	color: inherit;
	/*color: #E5E5E5;*/
}

#homeNews .results_list > li:nth-child(odd)
{
	background: #2F4051;
	color: white;
	color: #E5E5E5;
}

#homeNews .results_list > li:nth-child(even)
{
	background: #E9CF2C;
	color: black;
}

#homeNews .title
{
	display: block;
	font-size: 1.2em;
	line-height: 1.1;
	letter-spacing: 1.4px;
	font-weight: 600;
	text-transform: uppercase;

	margin-bottom: 14px;
}

#homeNews .abstract
{
	font-size: 1.1rem;
}

#homeNews .more
{
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
}

#homeNews li:nth-child(odd) .more
{
	color: rgb(233, 207, 44);
}

#homeNews a:hover .more,
#homeNews a:focus .more
{
	text-decoration: underline;
	text-decoration-color: rgba(233, 207, 44,.5);
	text-underline-offset: 5px;
}

#homeNews li:nth-child(even) a:hover .more,
#homeNews li:nth-child(even) a:focus .more
{
	text-decoration-color: rgba(0,0,0,.5);
}

#homeNews .icon
{
	display: flex;
	justify-content: flex-end;
	margin-top: -32px;
}

#homeNews .icon img
{
	display: block;
	position: relative;
	top: 4px;
	left: 9px;
}

#index #footer
{
	position: sticky;
	z-index: 9999;
}

body#index.mobileActive  #footer
{
	z-index: 0;
}

@media (max-width: 1500px)
{
	#homeNews
	{
		position: relative;
		margin-top: -10vh;
		padding-bottom: 30px;

		overflow: visible;
	}

	#homeNews .results_list
	{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 1130px)
{
	#homeNews::after
	{
		content: '';

		position: absolute;
		top: 0;
		bottom: 0;

		left: calc(50% - 50vw);
		width: 100vw;
		z-index: -1;

		background: linear-gradient(to bottom,
			transparent,
			rgb(31, 32, 34) 10vh);
	}

	#homeNews .results_list
	{
		flex-direction: column;
	}

	#index #homeNews .results_list > li
	{
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media (max-width: 919px)
{
	#homeNews
	{
		padding-top: 30px;
		margin-top: 0;
	}

	#homeNews .results_list
	{
		flex-direction: column;
	}

	#index #homeNews .results_list > li
	{
		width: 100%;
		margin: 0 0 20px 0;
	}

	#homeNews::after
	{
		background: rgb(31, 32, 34);
	}

	#homeAnimation .info .abstract p
	{
		font-size: 1.3rem;
		line-height: 1.2;
	}
}

@media (max-width: 767px)
{
	#homeAnimation .image2 img
	{
		opacity: .27;
	}

	#homeNews
	{
		display: block;
	}

	#homeNews .homeNewsItem,
	#homeNews .homeNewsItem:first-child
	{
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media (max-width: 479px)
{
	#homeAnimation .title
	{
		line-height: 1.6;
	}

	#homeAnimation .info .abstract
	{
		display: none;
	}

	/*
	#homeAnimation .info .abstract p
	{
		font-size: 0.9rem;
	}
	*/
}



@media (max-width: 479px)
{

}


/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;
	width: 100%;
	padding: 20px 80px 20px 80px;
	background: #9f0604;
	box-sizing: border-box;
	color: #ffffff;
	line-height: 1.2;
	text-align: center;
}

#alertMessage *
{
	margin: 0;
	padding: 0;
	color: #ffffff;
}

#alertMessage a
{
	text-decoration: underline;
}

@media (max-width: 1349px)
{
	#alertMessage
	{
		padding: 20px 44px 20px 44px;
	}
}

@media (max-width: 1024px)
{
	#alertMessage
	{
		padding: 12px 16px 12px 16px;
		font-size: max(16px, 0.9rem);
	}
}


/* Home Notice Message */

#noticeMessageWrapper
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: calc(50% - 5vh);
	left: calc(50% - 45vw);
	z-index: 99;
	height: 10vw;
	width: 90vw;
	background: #000000;
}

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

#noticeMessage > div
{
	margin: 0;
	padding: 1.5em 2.5em;
}

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

#noticeMessage button
{
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: none;
	color: #333333;
	font-weight: 400;
	font-size: 42px;
	line-height: 20px;
	cursor: pointer;
	text-align: center;
}

#noticeMessage button:after,
#noticeMessage button:before
{
	content: '';
	display: block;
	position: absolute;
	top: 14px;
	width: 30px;
	height: 2px;
	background-color: #ffffff;
}

#noticeMessage button:before
{
	transform: rotate(-45deg);
}

#noticeMessage button:after
{
	transform: rotate(45deg);
}


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