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

body#index 
{
	max-width: 1860px;
}

body#index #banner 
{
	height: auto;
}

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

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

#index #bannerContent 
{
	position: relative;
	left: auto;
	bottom: auto;
}

#homeAnimation
{
	position: relative;
	height: 50vh;
	min-height: 400px;
	margin: 0 0 30px;
	/*background: #2d2e6c; /* for WCAG contrast with text  - look horrible on first page load though */
}

#homeAnimation ul,
#homeAnimation li 
{
	margin:  0;
	list-style: none;
}

#homeAnimation li
{
	display: none;
}

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

#homeAnimation li:nth-child(2) .image
{
	/* warned that this might negatively impact lighthouse results for LCP object */
	/*animation: zoomin 600ms ease-out forwards;*/
	animation: zoomin 1200ms cubic-bezier(0.61, 1, 0.88, 1) forwards;
	animation-iteration-count: 1;
	transform: scale(1.4);
	transform-origin: bottom center;
}

@keyframes zoomin
{
    100% 
    {
        transform: scale(1); 
    }
}

#homeAnimation .image::before
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(8,8,29,1) 0%,rgba(8,8,29,0.1) 100%);
}

#homeAnimation .image img 
{
	width: 100vw;
	height: 100%;
	object-fit: cover;
}

#homeAnimation li 
{
	width:  100%;
}

#homeAnimation > div.results,
#homeAnimation > div.results > ul,
#homeAnimation > div.results > ul > li,
#homeAnimation > div.results > ul > li .image
{
	height: 100%;
}

#homeAnimation .info 
{
	position: absolute;
	bottom: 5vh;
	z-index: 1;
}

#homeAnimation .industry
{
	font-family: 'archivo_narrow';
	font-weight: 700;
	font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1350 - 320)));
	color: #f26731;
	text-transform: uppercase;
}

#homeAnimation .industry::after
{
	content: '';
	display: block;
	width: 100%;
	max-width: 96px;
	height: 1px;
	background: #ffffff;
}

#homeAnimation .abstract
{
	width: 100%;
	max-width: 600px;
	font-size: calc(16px + (23 - 16) * ((100vw - 320px) / (1920 - 320)));
	color: #ffffff;
	line-height: 1.4;
}

#homeAnimation #pager
{
	position: absolute;
	bottom: 10px;
	left: 0;
	z-index: 100;
}

#homeAnimation #pager button
{
	width: 29px;
	height: 15px;
	margin-right: 5px;
	border: none;
	cursor: pointer;
	background: none;
	padding: 0;
}

#homeAnimation #pager button span 
{
	display: inline-block;
	height: 2px;
	width: 100%;
	background: #ffffff;
}

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

#homeBannerSpot
{
	width: 100%;
	color: #414141;
}

#homeBannerSpot li
{
	position: relative;
	border: 1px solid #cecece;
}

#homeBannerSpot li:nth-child(1)
{
	background: url('../i/box-graphic-left.png') no-repeat, #ffffff; /* data-uri */
	background-position: right 50%;
	background-size: 60px 89px;
}

#homeBannerSpot li:nth-child(3)
{
	background: url('../i/box-graphic-right.png') no-repeat, #ffffff; /* data-uri */
	background-position: right 50%;
	background-size: 60px 89px;
	/*background-size: 97px 143px;*/
}

#homeBannerSpot li a
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 120px;
	height: 100%;
	padding: 30px 60px 30px calc(20px + (58 - 20) * ((100vw - 320px) / (1920 - 320)));
	box-sizing: border-box;
	font-family: 'archivo_narrow';
}

#homeBannerSpot li .info
{
	height: 100%;
	min-height: 120px;
	padding: 30px calc(20px + (58 - 20) * ((100vw - 320px) / (1920 - 320)));
	font-family: 'archivo_narrow';
	box-sizing: border-box;
}

#homeBannerSpot li:nth-child(1):hover,
#homeBannerSpot li:nth-child(1):focus,
#homeBannerSpot li:nth-child(3):hover,
#homeBannerSpot li:nth-child(3):focus
{
	background-image: url('../i/box-graphic-left-hover.png');
	background-color: rgba(255,255,255,0.8);
	/*border-color: #cececea1;*/
	border-color: rgba(45,46,108,0.90);
}

#homeBannerSpot .title
{
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #f26831;
	color: #D3450D;
	font-weight: 700;
	font-size: calc(25px + (36 - 25) * ((100vw - 320px) / (1600 - 320)));
	line-height: .88;
}

#homeBannerSpot .popuptext
{
	display: none; /* used in popup only */
}

#homeBannerSpot a:hover .title,
#homeBannerSpot a:focus .title
{
	color: #9393b4;
}

#homeBannerSpot .abstract 
{
	font-size: calc(16px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.25;
}

#homeBannerSpot li:nth-child(2)
{
	color: #ffffff;
	background: rgba(45, 46, 108, .9);
}

#homeBannerSpot li:nth-child(2) .title 
{
	margin-bottom: 24px;
	font-size: calc(19px + (28 - 19) * ((100vw - 320px) / (1600 - 320)));
	color: inherit;
	line-height: 1;
}

#homeBannerSpot li:nth-child(2) a:hover .title,
#homeBannerSpot li:nth-child(2) a:focus .title 
{
	color: #ccc;
}

#homeBannerSpot li:nth-child(2) .title::after
{
	content: '';
	display: block;
	width: 96px;
	height: 1px;
	margin: 15px 0;
	background: #f26831;
}

#homeBannerSpot li:nth-child(2) a:hover .title::after,
#homeBannerSpot li:nth-child(2) a:focus .title::after
{
	background: #ffffff;
}

#homeBannerSpot li:nth-child(2) .abstract
{
	font-family: 'Arial';
	font-size: calc(16px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.5;
}

#homeBannerSpot li:nth-child(2) a:hover .abstract,
#homeBannerSpot li:nth-child(2) a:focus .abstract 
{
	color: #ccc;
}

#homeBannerSpot li a.sp_pencil
{
	position: absolute;
	top: -0px;
	left: -0px;
}

#homeSpecialSpot
{
	display: none;
}

@media (min-width: 920px)
{
	#homeAnimation .image::before
	{
		background: linear-gradient(to right, rgba(8,8,29,1) 0%,rgba(8,8,29,0) 80%);
	}
	
	#homeBannerSpot ul 
	{
		display: flex;
		justify-content: center;
		margin: 0 -20px;
	}

	#homeBannerSpot ul li 
	{
		flex:  0 1 420px;
		margin: 0 10px;
	}

	#homeBannerSpot ul li:nth-child(2)
	{
		flex: 1 1 816px;
	}
	
	#homeBannerSpot .abstract 
	{
		font-size: calc(14px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
	}
	
	#homeBannerSpot li:nth-child(2) .abstract
	{
		font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	}
}

@media (min-width: 1024px)
{
	#homeAnimation
	{
		height: auto;
	}

	#homeAnimation .info
	{
		top: 15vw;
		bottom: auto;
	}
}

@media (min-width: 1350px)
{
	#homeAnimation
	{
		/* must be done since we're using waypoints on industry spots at this size */
		min-height: 49.2198vw; /* calc(100vw / (1900/945))*/
	}
	
	#homeAnimation .abstract
	{
		font-size: calc(18px + (23 - 16) * ((100vw - 320px) / (1920 - 320)));
		max-width: 500px;
	}
	
	#homeBannerSpot li a
	{
		height: 223px;
	}
}

@media (min-width: 1600px)
{
	#homeAnimation .image::before
	{
		background: linear-gradient(to right, rgba(8,8,29,.85) 0%,rgba(8,8,29,0) 50%);
		/* , linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 30%) maybe */
	}
	
	#homeAnimation .info
	{
		top: 12vw;
	}

	#homeAnimation #pager
	{
		bottom:  375px;
	}

	#homeAnimation .abstract
	{
		font-size: calc(16px + (23 - 16) * ((100vw - 320px) / (1920 - 320)));
		max-width: 600px;
		color: #ffffff;
		line-height: 1.4;
	}

	#homeBannerSpot
	{
		position: absolute;
		bottom:  0;
		z-index: 100;
		padding:  51px 0;
	}

	#homeBannerSpot::before
	{
		background: #ffffff;
		opacity: .3;
	}

	#homeBannerSpot li 
	{
		border: none;
	}

	#homeBannerSpot .abstract
	{
		font-size: 32px;
	}

	#homeBannerSpot .title
	{
		font-size: 36px;
	}

	#homeBannerSpot .abstract 
	{
		font-size: 32px;
	}

	#homeBannerSpot li a
	{
		padding: 30px 60px 30px calc(20px + (58 - 20) * ((100vw - 320px) / (1920 - 320)));
	}

	#homeBannerSpot li:nth-child(2) .title 
	{
		font-size: 28px;
	}

	#homeBannerSpot li:nth-child(2) .abstract
	{
		font-size: 18px;
	}

	#homeBannerSpot li:nth-child(1)
	{
		background-size: 97px 143px;
	}

	#homeBannerSpot li:nth-child(3)
	{
		background-size: 97px 143px;
	}
}

@media (min-width: 1350px)
{
	#homeAnimation .industry
	{
		font-size: 28px;
	}
}

@media (min-width: 1920px)
{
	#homeAnimation .abstract
	{
		font-size: 23px;
	}
}


/* FEATURED INDUSTRY TILES */

#industrySpot
{
	margin: 14px 0 20px 0 !important;
	padding-bottom: 10px;
}

.industryTile .results_list
{
	position: relative;
	margin-top: 40px;
}

.industryTile .results_list > li 
{
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 238px;
	overflow: hidden;
	margin: 0 0 20px 0;
	background: #f4f4f4;
	box-sizing: border-box;
	cursor: pointer;
}

.industryTile .results_list > li .frontInfo
{
	position: relative;
	height: 238px;
	width: 100%;
}

.industryTile .results_list > li .frontInfo .image
{
	position: relative;
	height: 238px;
	width: 100%:
}

.industryTile .results_list > li .frontInfo .title
{
	position: absolute;
	left: 20px;
	bottom: 18px;
	color: #f26831;
	color: #C5410D; /* WCAG contrast */
	font-family: 'archivo_narrow';
	font-size: 1.2rem;
	line-height: 1.2;
}

.industryTile .results_list > li .frontInfo .image img
{
	display: block;
	float: right;
	width: 70%;
	margin-top: 20px;
}

.industryTile .results_list > li .backInfo
{
	position: absolute;
	top: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
	padding: 20px;
	background: rgba(0,115,174,0.90);
	box-sizing: border-box;
	transition: opacity 0.3s ease-in;
}

.industryTile .results_list > li:hover .backInfo,
.industryTile .results_list > li:focus .backInfo
{
	opacity: 1;
}

.industryTile .results_list > li a .backInfo
{
	color: #ffffff;
}

.industryTile .results_list > li .backInfo .backtitle
{
	font-family: 'archivo_narrow';
	font-size: 1.4rem;
	line-height: 1.2;
}
	
.industryTile .results_list > li .backInfo .featuredabstract
{
  	padding: 8px 0 0 0;
  	box-sizing: border-box;
}

.industryTile .results_list > li .backInfo .featuredabstract p
{
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.2;
}

.industryTile .results_list > li .backInfo .featuredabstract div
{
	position: absolute;
	bottom: 10px;
	right: 20px;
	padding: 0 20px 0 0;
	background: url('../i/read-more-arrow.svgz') right center no-repeat; /* data-uri */
	background-size: 10px;
	font-size: 1rem;
}

.industryTile .results_list > li > a.sp_pencil
{
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 10px;
}

#industrySpot .view_more a
{
	padding-right: 60px;
	line-height: 2;
}

@media (min-width: 768px)
{
	#industrySpot
	{
		margin: 14px 0 14px 0 !important;
		padding-bottom: 0px;
	}
	
	.industryTile .results_list
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.industryTile .results_list > li
	{
		height: 300px;
		width: calc(50% - 4px);
	}

	.industryTile .results_list > li .frontInfo
	{
		height: 300px;
	}

	.industryTile .results_list > li .frontInfo .image
	{
		height: 300px;
	}
	
	#industrySpot .view_more
	{
		position: absolute;
		top: -16px;
		right: 0;
		margin: 0;
	}
}

@media (min-width: 920px)
{
	#industrySpot
	{
		margin: 54px 0 20px 0 !important;
		padding-bottom: 10px;
	}
	
	#industrySpot .view_more
	{
		position: absolute;
		top: -36px;
		right: 0;
		margin: 0;
	}
}	

@media (min-width: 1025px)
{
	.industryTile .results_list > li
	{
		width: calc(25% - 4px);
	}
	
	.industryTile .results_list > li .frontInfo .title
	{
		font-size: 1.2rem;
		line-height: 1.2;
	}
	
	.industryTile .results_list > li .backInfo .backtitle
	{
		font-size: 1.4rem;
		line-height: 1.2;
	}
	
	.industryTile .results_list > li .backInfo .featuredabstract p
	{
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.industryTile .results_list > li .backInfo .featuredabstract div
	{
		font-size: 0.8rem;
	}
}

@media (min-width: 1125px)
{
	.industryTile .results_list > li
	{
		height: 238px;
	}

	.industryTile .results_list > li .frontInfo
	{
		height: 238px;
	}

	.industryTile .results_list > li .frontInfo .image
	{
		height: 238px;
	}

}

@media (min-width: 1350px)
{
	/* industry spots have waypoint animation at this window size */
	
	.industryTile .results_list > li
	{
		opacity: 0;
		margin-top: 50px;
		transition: opacity 425ms ease-in, margin-top 500ms ease-in;
	}

	.industryTile .results_list > li:nth-child(2)
	{
		transition-delay: 200ms;
	}

	.industryTile .results_list > li:nth-child(3)
	{
		transition-delay: 350ms;
	}

	.industryTile .results_list > li:nth-child(4)
	{
		transition-delay: 500ms;
	}

	.industryTile.industrySpotSlideIn .results_list > li 
	{
		opacity: 1;
		margin-top: 0;
		cursor: pointer;
	}
}


/* Home Spotlight Popup Support -------------------------------------------------> */

#homeSpotPopupWrapper
{
	position: fixed;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(51, 51, 51, .7);
	transition: opacity 1.3s;
}

#homeSpotPopupWrapper:not(.active)
{
	pointer-events: none;
	opacity: 0;
}

#homeSpotPopup
{
	display: none;
	position: relative;
	background: white;
}

#homeSpotPopupContent
{
	position: relative;
	z-index: 10;
	/*border: 12px solid #cecece;*/
	background: white;
	max-height: calc(100vh - 40px);
	width: calc(100vw - 40px);
	max-width: 1000px;
	box-sizing: border-box;
	overflow: auto;
}

#homeSpotPopupContent > h2
{
	margin: 0px;
	padding: 30px 70px;
	background: rgba(45, 46, 108, 1);
	color: #ffffff;
}

#homeSpotPopupContent > div
{
	padding: 30px 70px;
}

#homeSpotPopupClose
{
	position: absolute;
	top: 34px;
	right: 42px;
	border: none;
	border-radius: 0px;
	background: none;
	padding: 24px 34px 0 0;
	color: #ffffff;
}

#homeSpotPopupClose:hover,
#homeSpotPopupClose:focus
{
	color: #ccc;
}

.closeButton::before, 
.closeButton::after 
{
	width: 30px;
	height: 1px;
}

@media (max-width: 1024px)
{
	#homeSpotPopupContent > h2
	{
		padding: 16px 16px;
	}

	#homeSpotPopupContent > div
	{
		padding: 16px;
	}
	
	#homeSpotPopupClose
	{
		top: 15px;
	}
}

@media (max-width: 479px)
{
	#homeSpotPopupContent
	{
		max-height: calc(100vh - 100px);
	}
}


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