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


body#index
{
	padding-top: 116px;
}

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

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

#homeAnimation
{
	opacity: 0;
	position: relative;
	margin-bottom: 104px;
	margin-bottom: max(50px, 
             min(104px, 50px + (104 - 50) * ((100vw - 767px) / (1920 - 767))
	));

	transition: opacity 750ms ease 200ms;
}

#homeAnimation.show
{
	opacity: 1;
}

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

#homeAnimation .image
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
}

#homeAnimation .image img
{
	display: block;
	width: 100%;
	height: auto;
}

#homeAnimation .info 
{
	position: relative;
	z-index: 9999;
	padding: 40px 0;
	background: #eeeeee;
	font-size: 20px;
	font-size: max(15px, 
             min(20px, 15px + (20 - 15) * ((100vw - 767px) / (1920 - 767))
	));
}

#homeAnimation .title,
#homeAnimation .title2
{
	position: relative;
	top: -30px;
	opacity: 0;
	margin: 0 0 5px;
	font-size: 75px;
	font-size: max(30px, 
             min(75px, 30px + (75 - 30) * ((100vw - 1024px) / (1920 - 1024))
	));
	line-height: 1.04;
	font-family: 'merriweather';

	transition: top 300ms ease,
				opacity 300ms ease;
}

#homeAnimation .title2
{
	transition-delay: 100ms;
}

#homeAnimation .title strong,
#homeAnimation .title2 strong
{
	font-weight: 400;
	color: #C24C40;
}

#homeAnimation .title em,
#homeAnimation .title2 em 
{
	color: #1B3B5C;
	font-style: normal;
}


#homeAnimation li.largeText .title,
#homeAnimation li.largeText .title2
{
	font-size: 90px;
	font-size: max(40px, 
             min(90px, 40px + (90 - 40) * ((100vw - 1024px) / (1920 - 1024))
	));
	line-height: .95;
	  
}

#homeAnimation .abstract 
{
	opacity: 0;
	padding-top: 40px;
	padding-top: max(10px, 
             min(40px, 10px + (40 - 10) * ((100vw - 1280px) / (1920 - 1280))
	));

	padding-bottom: 78px;
	padding-bottom: max(20px, 
             min(78px, 10px + (78 - 20) * ((100vw - 1280px) / (1920 - 1280))
	));

	transition: opacity 500ms ease;
}

#homeAnimation .abstract p:last-child
{
	margin-bottom: 0;
}

#homeAnimation .abstract p:first-child
{
	margin-top: 0;
}

#homeAnimation .morelink 
{
	opacity: 0;
	font-size: 16px;
	text-transform: uppercase;
	transition: opacity 500ms ease;
}

#homeAnimation li.current .title,
#homeAnimation li.current .title2
{
	top: 0;
	opacity: 1;
	transition-delay: 500ms;
}

#homeAnimation li.current .title2
{
	transition-delay: 600ms;
}

#homeAnimation li.current .morelink,
#homeAnimation li.current .abstract
{
	opacity: 1;
	transition-delay: 800ms;
}


#homeAnimation li.bluelink .morelink a:not(:hover):not(:focus)
{
	color: #1B3B5C;
}

#homeAnimation .morelink svg 
{
	position: relative;
	top: 3px;
	width: 17px;
	height: 19px;
	margin: 0 0 0 15px;
	fill: currentColor;
}

#homeAnimation ul li .sp_pencil
{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

#homeAnimation #pager
{
	position: absolute;
	top: 0px;
	right: 10px;
	z-index: 1000;
}

#homeAnimation #pager button 
{
	margin-left: 5px;
	background: #ffffff;
	cursor: pointer;
	border: none;
}

#homeAnimation #pager button.active 
{
	background: #D7B582;
}

#homeAnimation .circle
{
	position: absolute;
	top: -15%;
	left: -30%;
	display: none;
	overflow: hidden;
	z-index: 100;
	width: 80vw;
}

#homeAnimation .circle svg
{
	width: 100%;
	height: 100%;
	opacity: .25;
}

@media (min-width: 768px)
{

	#homeAnimation
	{
		background: #000000;
	}

	#homeAnimation .info 
	{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 70%;
		max-width: 630px;
		background: none;
		color: #ffffff;
		padding-bottom: 107px;
		padding-bottom: max(30px, 
	             min(107px, 20px + (107 - 30) * ((100vw - 767px) / (1920 - 767))
		));
	}

	
	#homeAnimation li.largeText .info 
	{
		max-width: 400px;
	}

	/*#homeAnimation .image::before 
	{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: .5;
	}*/

	#homeAnimation a:not(:hover):not(:focus)
	{
		color: #ffffff;
	}

	#homeAnimation .linkmask
	{
		display: block;
	}

	#homeAnimation #pager 
	{
		right: 0;
		top: auto;
		bottom: 107px;
		bottom: max(30px, 
	             min(107px, 20px + (107 - 30) * ((100vw - 767px) / (1920 - 767))
		));
	}

	#homeAnimation #pager button 
	{
		width: 69px;
		height: 6px;
		padding: 0;
		margin-left: 16px;
	}

	#homeAnimation li.largeText .morelink
	{
		margin-top: 55px;
		margin-top: max(30px, 
	             min(55px, 30px + (55 - 30) * ((100vw - 768px) / (1920 - 768))
		));
		  
	}

}

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


	#homeAnimation .circle
	{
		left: -10%;
	}

}

@media (min-width: 1280px)
{
	

	#homeAnimation .circle
	{
		top: -8%;
		left: -14%;
		display: none;
		height: 120%;
		width: auto;
	}
}



/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 150;
	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: 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;
}


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