/* BEGIN BIO-LISTING CSS ----------------------------------------> */

body
{
	background-color: #DEE8EA;
}

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

#content
{
	max-width: 1572px;
}

#lowerContent
{
	position: relative;
	width: calc(100% + 160px);
	margin: 0 0 0 -80px;
}

#attySearchWrapper
{
	position: relative;
	max-width: 1096px;
	margin: 0px auto;
	padding: 80px 0 0 0;
}

#mainContent h2
{
	font-family: 'Manrope', Arial, sans-serif;
	font-size: 1.8rem;
	font-weight: 300;
}

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

@media (max-width: 919px)
{
	#lowerContent
	{
		width: calc(100% + 32px);
		margin: 0 0 0 -16px;
	}
	
	#attySearchWrapper
	{
		padding: 0px 0 0 0;
	}
}

@media (max-width: 767px)
{
	#attySearchWrapper
	{
		margin: 0px auto;
	}
}

.letterLinks
{
	margin: 14px 0 150px -9px;
	color: #8B9EA4;
	color: #51686C; /* WCAG Contrast Fix */
	font-family: 'Manrope', Arial, sans-serif;
	font-size: 1.45rem;
	font-weight: 300;
}

.letterLinks::after
{
	/* make div stretch to height of content */
	display: block;
	clear: both;
	content: '';
}

.letterLinks a,
.letterLinks span
{
	display: inline-block;
	float: left;
	width: calc(100% / 26);
	text-align: center;
}

.letterLinks a
{
	color: #69767C;
}

.letterLinks a:hover,
.letterLinks a:focus
{
	color: #DAA900;
}

.letterLinks > *:last-child
{
	width: calc(100% / 26 - 1px);
}

@media (max-width: 1024px)
{
	.letterLinks a,
	.letterLinks span
	{
		width: calc(100% / 13);
	}

	.letterLinks > *:nth-child(12),
	.letterLinks > *:last-child
	{
		width: calc(100% / 13 - 1px);
	}
}

@media (max-width: 767px)
{
	.letterLinks
	{
		margin: 14px 0 0px -9px;
	}
}

/* END BIO-LISTING CSS ------------------------------------------> */