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

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

#waterMarkAnimation.drawMark
{
	display: none !important;
}

/*
#splashBg
{
	position: absolute;
	z-index: 80;
  	left: -80px;
  	right: -80px;
  	top: 0;
  	bottom: 0;
  	width: calc(100% + 160px);
  	height: 100vh;
  	
  	background: url('../i/logo-mark-mask.svgz') center center no-repeat; /* data-uri *\/
  	background-size: 100%;
  	animation-name: splash_bg;
  	animation-duration: 3s;
  	animation-timing-function: linear;
  	animation-fill-mode: forwards;
  	animation-iteration-count: 1;
}

@keyframes splash_bg 
{
   from 
   {
     transform: translateY(0);
   }
   
   to 
   { 
     transform: translateY(-187%);
   }
}
*/

#index #header
{
	box-shadow: none;
}

#index.scrolled #header
{
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}

#index #noNavBar
{
	display: none;
}

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

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

#index #homeAnimation
{
	position: relative;
	z-index: 10;
	width: calc(100% + 160px);
	margin: 0 0 0 -80px;
	background: #333;
}

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

#index #homeAnimation .image
{
	position: relative;
	z-index: 5;
}

#index #homeAnimation .image::after
{
	content: '';
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(0,0,0,0.80) 30%, transparent);
}

#index #homeAnimation .image img
{
	display: block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

#index #homeAnimation .info
{
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 10;
	left: 15vw;
	top: 15vw;
	width: 100%;
	max-width: 600px;
}

#index #homeAnimation .info .title
{
	position: relative;
	width: 540px;
	box-sizing: border-box;
	color: #FCD672;
	font-size: 2.1rem;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-align: right;
}

#index #homeAnimation .info .title h1
{
	margin: 0;
	padding: 0;
	border: none;
	color: #FCD672;
	font-weight: 300;
	font-size: 2.1rem;
	letter-spacing: 4px;
}

#index #homeAnimation .info .title  h1 strong
{
	display: block;
	margin-bottom: -15px;
	color: #ffffff;
	font-size: 6rem;
	font-weight: 800;
	text-align: left;
	opacity: 0.8;
}

#index #homeAnimation .info .title a
{
	color: #FCD672;
}

#index #homeAnimation .info .title a strong
{
	color: #ffffff;
}

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

#index #homeAnimation .info .abstract
{
	min-height: 150px;
	margin-top: 1em;
	color: #ffffff;
	font-size: 1.05rem;
}

#index #homeAnimation .info .abstract a
{
	color: #ffffff;
}

#index #homeAnimation .info .learnmore 
{
	/*margin-top: auto;*/
	margin-bottom: 2vw;
}

#index #homeAnimation .info .learnmore a
{
	color: #FCD672;
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
}

/*#index #homeAnimation .info .title a:hover h1,
#index #homeAnimation .info .title a:focus h1,
#index #homeAnimation .info .title a:hover h1 strong,
#index #homeAnimation .info .title a:focus h1 strong,
#index #homeAnimation .info .abstract a:hover,
#index #homeAnimation .info .abstract a:focus,*/
#index #homeAnimation .info .learnmore a:hover,
#index #homeAnimation .info .learnmore a:focus
{
	color: #DAA900;
}

#index #homeAnimation .pager
{
	justify-self: flex-end;
	position: relative;
	z-index: 20;
	margin: 30px 0 0 0;
	margin-top: auto;
}

#index #homeAnimation .pager button
{
	margin-left: -10px;
	margin-right: 1.3vw;
	padding: 10px;
	background: none;
	border: none;
	text-shadow: none;
	cursor: pointer;
}

#index #homeAnimation .pager button span
{
	display: block;
	width: 4.5vw;
	height: 3px;
	background: rgba(255,255,255,0.30);
}

#index #homeAnimation .pager button:not(.active):hover span,
#index #homeAnimation .pager button:not(.active):focus span
{
	background: rgba(255,255,255,0.60);
}

#index #homeAnimation .pager button.active span
{
	background: #FCD672;
}

@media (max-width: 1349px)
{
	#index #homeAnimation
	{
		width: calc(100% + 80px);
		margin: 0 0 0 -40px;
	}
}

@media (max-width: 919px)
{	
	#index #homeAnimation
	{
		width: calc(100% + 32px);
		margin: 0 0 0 -16px;
	}
	
	#index #homeAnimation .info
	{
		top: 250px;
	}
}

@media (max-width: 767px)
{
	#index #homeAnimation .info .title 
	{
		width: auto;
	}
	
	#index #homeAnimation .info .title h1
	{
		font-size: 1.9rem;
	}
	
	#index #homeAnimation .info .title  h1 strong
	{
		font-size: 4rem;
	}
	
	#index #homeAnimation .info
	{
		left: 16px;
		top: 150px;
		width: calc(100% - 32px);
		box-sizing: border-box;
		max-width: none;
	}
	
	#index #homeAnimation .info .abstract 
	{
		font-size: 0.9rem;
	}
}

#homeNewsItem
{
	position: absolute;
	bottom: 0px;
	z-index: 90;
	width: calc(100% + 160px);
	margin: 0 0 0 -80px;
}

#homeNewsItem .itemList
{
	position: relative;
	width: 100%;
}

#homeNewsItem ul.results_list
{
	display: flex;
	justify-content: space-between;
	gap: 5px;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#homeNewsItem ul > li
{
	align-self: flex-end;
	display: block;
	position: relative;
	width: calc(33.33% - 5px);
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0 0 16px 0;
	box-sizing: border-box;
	color: #ffffff;
	line-height: 1.2;
	text-align: center;
}

#homeNewsItem ul > li .title
{
	padding: 0 30px 0 0;
}

#homeNewsItem ul > li a:not(.sp_pencil)
{
	display: block;
	position: relative;
	height: 100%;
	min-height: 100%;
	background: rgba(1,60,77,0.80);
	padding: 36px 2vw 36px 2vw;
	box-sizing: border-box;
	color: #ffffff;
	text-align: left;
	
	overflow: hidden;
	padding-bottom: 32768px; 
	margin-bottom: -32768px; 
}

#homeNewsItem ul > li a:hover,
#homeNewsItem ul > li a:focus
{
	background: rgba(0,128,102,0.90);
	/*color: #DAA900;*/		
}

#homeNewsItem ul > li a.sp_pencil
{
	position: absolute;
	top: -5px;
	left: 10px;
}

#homeNewsItem ul > li a:after
{
	display: inline-block;
	content: '+';
	position: absolute;
	top: 36px;
	right: 2vw;
	color: #FCD672;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 0.9;
	vertical-align: top;
}

#homeNewsItem ul > li a.triggerPopupPlayer:after
{
	display: inline-block;
	content: '';
	position: absolute;
	top: 36px;
	right: 1.7vw;
	width: 24px;
	height: 20px;
	/*
	background: url('../i/play.svg') center no-repeat; /* data-uri *\/
	background-size: 100%;
	*/
	background: #FCD672;
	mask-image: url('../i/icon-video.svg');
  	mask-repeat: no-repeat;
	mask-position: center;
  	mask-size: 100%; /* cover */
  
	color: #FCD672;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 0.9;
	vertical-align: top;
}

#homeNewsItem ul > li .abstract
{
	display: none;
}

@media (min-width: 920px)
{
	#homeNewsItem ul > li
	{
		transition: all 3s ease-in-out;
	}
	
	#homeNewsItem ul > li .abstract
	{
		display: block;
		opacity: 0;
		max-height: 0px;
		overflow: auto;
		margin: 16px 0 0 0;
		padding: 20px 30px 0 0;
		padding-top: 10px;
		color: #ffffff;
		font-size: 0.85rem;
		overflow: hidden;
		border-top: 20px solid transparent;
		transition: border-top 500ms linear, padding-bottom 500ms linear, padding-top 500ms linear, opacity 300ms linear 300ms;
	}

	#homeNewsItem ul > li a
	{
		transition: all 700ms ease-in-out;
	}
	
	#homeNewsItem ul > li a:hover:after,
	#homeNewsItem ul > li a:focus:after
	{
		content: '';
		position: relative;
		top: inherit;
		right: 2vw;
		float: right;
		width: 7px;
		height: 15px;
		mask: unset;
		background: url('../i/home-tile-more.svgz') left bottom no-repeat; /* data-uri */
		background-size: 7px;
		margin: 0 -30px 0px 0;
	}

	#homeNewsItem ul > li a:hover .abstract,
	#homeNewsItem ul > li a:focus .abstract
	{
		opacity: 1;
		padding: 0 0 150px 0;
		border-top: 0px solid transparent;
		transition: border-top 500ms linear, padding-bottom 500ms linear, padding-top 500ms linear, opacity 300ms linear 300ms;
	}
	
	#homeNewsItem ul.results_list > li
	{
		opacity: 0;
		transition: opacity 425ms ease-in;
		transition-delay: 850ms;
	}

	#homeNewsItem ul.results_list > li:nth-child(2)
	{
		transition-delay: 1250ms;
	}

	#homeNewsItem ul.results_list > li:nth-child(3)
	{
		transition-delay: 1650ms;
	}

	#homeNewsItem.homeNewsItemSlideIn ul.results_list > li 
	{
		opacity: 1;
	}
}

@media (max-width: 1349px)
{
	#index #homeNewsItem
	{
		width: calc(100% + 80px);
		margin: 0 0 0 -40px;
	}
}

@media (max-width: 919px)
{	
	#index #homeNewsItem
	{
		width: calc(100% + 32px);
		margin: 0 0 0 -16px;
	}
	
	#homeNewsItem ul.results_list
	{
		display: block;
	}
	
	#homeNewsItem ul.results_list > li
	{
		display: block;
		margin: 0 0 5px 0;
		padding: 0 0 0 0;
		width: 100%;
		height: auto;
		min-height: auto;
	}
	
	#homeNewsItem ul > li a:not(.sp_pencil)
	{
		height: auto;
		min-height: auto;
		margin: 0 0 0 0;
		padding: 36px 16px 36px 16px;
	}
}

@media (max-width: 767px)
{
	#index
	{
		background: #333;
	}
	
	#index #homeAnimation,
	#index #homeAnimation ul li,
	#index #homeAnimation ul li .image,
	#index #homeAnimation ul li .image img
	{
		height: 100vh;
		max-height: 700px;
	}
	
	#index #homeNewsItem
	{
		position: relative;
	}
}

@media (max-width: 812px) and (orientation:landscape)
{
	#index
	{
		background: #333;
	}
	
	#index #homeAnimation,
	#index #homeAnimation ul li,
	#index #homeAnimation ul li .image,
	#index #homeAnimation ul li .image img
	{
		max-height: 700px;
		min-height: 700px
	}
	
	#index #homeNewsItem
	{
		position: relative;
	}
}


/* 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: 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 ------------------------------------------------> */