/* BEGIN STATIC CSS ---------------------------------------------> */


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

#careersNav li a
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 392px;
	width: 100%;
	color: #ffffff;
}


#careersNav .content 
{
	position: relative;
	width: 100%;
	padding: 30px 35px;
	text-align: center;
	box-sizing: border-box;
	max-width: 500px;
}

#careersNav .image img 
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

#careersNav .title
{
	line-height: 1.2;
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 19px;
}

#careersNav .title,
#careersNav .navabstract 
{
	font-size: 19px;
}

#careersNav .navabstract 
{
	margin: 30px 0;
}

#careersNav .view_more
{
	justify-content: center;
	text-transform: uppercase;
	font-size: 17px;
	color: #F0E6D8;
	letter-spacing: 1px;
}

#careersNav .view_more svg
{
	margin-right: 10px;
	fill: currentColor;
}

@media (min-width: 1200px)
{
	
	#careersNav ul
	{
		display: flex;
	}

	#careersNav ul li 
	{
		width: calc(100%/3);
		background: #001f39;
	}

	#careersNav .image::after
	{
		display: none;
	}

	#careersNav .image
	{
		transition: opacity 250ms ease;
	}

	#careersNav .navabstract,
	#careersNav .view_more 
	{
		display: none;
	}

	#careersNav a:hover .image,
	#careersNav a:focus .image 
	{
		opacity: 0;
	}

	#careersNav a:hover .title,
	#careersNav a:focus .title
	{
		color: #F0E6D8;
	}

	#careersNav a:hover .navabstract,
	#careersNav a:focus .navabstract,
	#careersNav a:hover .view_more,
	#careersNav a:focus .view_more  
	{
		/*doing flex since the .view_more needs that to look right*/
		display: flex;
	}
}

/* END STATIC CSS -----------------------------------------------> */