/* BEGIN BLOG CSS -----------------------------------------------> */


#bannerImage::after
{
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: #002B49;
	opacity: .51;
}

body.blog #customSectionTitle
{
	font-family: 'Lato';
}

#blogTopSpotlights
{
	max-width: 1468px;
	margin: 30px auto 0;
}

.blog .search_form div
{
	float: none;
}

.blog #subContent form > div
{
	display: block;
}

.blog #subContent #emailSignupForm button
{
	float: right;
}

.blog #subContent form > div > div
{
    flex-basis: 100%;
}

.blog #searchMessage
{
	margin-bottom: 1.3em;
	padding-bottom: 8px;
	background-size: 12px 1px;
	border-bottom: 1px solid currentColor;
}

.blogPosts div.title
{
	--max-font-size: 36;
	--min-margin-bottom: 15;
	--max-margin-bottom: 28;
	font-family: 'Calluna';
	color: var(--darkblue);
	line-height: 1.25;
}

.blogPosts div.title a:not(:hover):not(:focus)
{
	color: inherit;
}

.blogPosts div.abstract p 
{
	--max-font-size: 23;
}

.blogPosts img
{
	height: auto;
	max-width: 100%;
}

.autosearch button
{
	display: none;
}

#blogSearch button
{
	position: absolute;
	background: none;
	right: 0;
	top: -40px;
	border: none;
}

#blogSearch button svg 
{
	fill: var(--darkblue);
}

#blogSearch
{
	margin-bottom: 20px;
}

.autosearch
{
	margin-bottom: 10px;
}

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

#blogSocialLinks li
{
	margin-bottom: 15px;
}

#blogSocialLinks
{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	padding-bottom: 12px;
}

#blogSocialLinks li:not(:last-child)
{
	margin-right: 15px;
}

#blogSocialLinks a
{
	display: block;
	width: 45px;
	height: 45px;
	transition: transform 250ms ease;
}

#blogSocialLinks a:hover,
#blogSocialLinks a:focus
{
	transform: scale(1.05);
}

#blogSocialLinks svg 
{
	display: block;
	width: 100%;
	height: auto;
	fill: var(--orange);
}

.blogPosts .socialshare
{
	padding: .5em 0;
	border-bottom: 1px solid currentColor;
	text-align: right;
}


body.singlePost .blogPosts .image:not(:empty)
{
	margin: 21px 0 44px;
}

/* in listing, make image a max height */
.blogPosts > div > div:not(.postDetail) img
{
	display: block;
	width: auto;
	max-height: 9.5em;
}

.blogPosts .sp_pencil img
{
	display: inline !important;
}

/* in listing, make sure the read more shows inline with the intro */
.blogPosts > div > div:not(:only-child) .intro p:last-child
{
	display: inline;
}

.blogPosts > div > div
{
	position: relative;
	clear: both;
	padding-bottom: 28px;
	margin-bottom: 70px;
	border-bottom: 1px solid #707070;
}

body.singlePost .blogPosts > div > div
{
	border: none;
}

body:not(.singlePost) .blogPosts > div > div::after 
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	height: 12px;
	width: 50%;
	background: var(--yetanothergreen);
}

/* fields within each blog post */
.blogPosts > div > div > div + div
{
	margin-top: .5em;
}

.blogPosts .blogComments
{
	margin-bottom: 0;
}

.blogPosts .blogComments > div > div
{
	padding: 10px 0;
	border: 1px solid currentColor;
	border-width: 1px 0 0 0;
}

.blogPosts .blogComments > div > div > div
{
	margin: 0 10px;
}

.blogPosts .blogComments .comment
{
	margin-top: 10px;
}

#addComment
{
	border-top: 1px solid currentColor;
}

.blog #historyLinks a
{
	float: left;
}

.blog #historyLinks a:last-child
{
	float: right;
}

.blogtag
{
	margin: 1em 0;
	line-height: 1.5;
}

.blogFilters ul,
.blogFilters li
{
	list-style: none;
	margin: 0 0 .5em 0;
}

#subContent .blogFilters li
{
	margin-bottom: 20px;
}

/*#subContent .blogFilters:not(#blogList) .results_list > li:nth-child(n+6)
{
	display: none;
}*/

#subContent .blogFilters
{
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rules);
}

#subContent .blogFilters a:not(:hover):not(:focus)
{
	color: inherit;
}

#mainContent #blogArchives .results_list
{
	column-count: 2;
}


.bottomContent
{
	margin-top: 50px;
}

.bottomContent .leftContent
{
	margin-bottom: 20px;
	color: #0176BB;
	font-size: 15px;
}

.bottomContent .leftContent a:not(:hover):not(:focus)
{
	color: inherit;
}

.bottomContent .itemdate
{
	font-size: 19px;
	font-weight: 600;
	color: var(--teal);
}

.topContent 
{
	overflow: hidden;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.topContent a:not(:hover):not(:focus)
{
	color: inherit;
}

.topContent > div 
{
	float: left;
}

.blogNameAuthor
{
	margin-bottom: 5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	overflow: hidden;
}

.blogNameAuthor > div
{
	float: left;
}

.blogNameAuthor > div:not(:last-child)::after,
.topContent > div:not(:last-child)::after
{
	content: '|';
	margin: 0 8px;
}

#mainNav > ul > li > a::after
{
	display: none;
}

@media (min-width: 480px)
{
	#mainContent #blogArchives .results_list
	{
		column-count: 3;
	}
}

@media (min-width: 768px)
{
	.bottomContent
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.bottomContent .leftContent
	{
		margin-bottom: 0;
	}

	.bottomContent .itemdate
	{
		padding-left: 100px;
	}
}

#mainContent #blogArchives .results_list,
#mainContent #blogArchives .results_list > li
{
	list-style: none;
	display: block;
	margin: 0 0 15px 0;
}

#mainContent #blogArchives .results_list > li
{
	margin: 0;
	padding: 0;
}


.blogAuthors ul,
.blogAuthors li
{
	list-style: none;
	margin: 0 0 10px 0;
}

.blogAuthors li
{
	margin-bottom: 50px;
}

.blog #subContent .xrefBio
{
	padding-top: 25px;
}


.blogAuthors .abstract
{
	margin: 5px 0;
}

.vlog .image
{
	position: relative;
}

.vlog .image a::before,
.vlog .image a::after
{
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 43.3px;
	border-color: transparent transparent transparent white;
}

.vlog .image a::before
{
	border-left-color: #808080;
	filter: blur(8px);
}

#blogLinkedIn
{
	margin: 20px 0;
}

#blogLinkedIn > a
{
	display: block;
	position: relative;
	padding-left: 35px;
	line-height: normal;
}

#blogLinkedIn > a svg
{
	position: absolute;
	top: 1px;
	left: 0;
}

@media (min-width: 920px)
{
	#mainContent:not(:only-child)
	{
		float: left;
		width: calc(100% - 21.5% - 117px);
	}

	#subNav,
	#subContent,
	#additionalSubcontent
	{
		clear: right;
		float: right;
		width: 21.5%;
	}
}

.contributors .blogAuthors ul.results_list > li
{
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	column-gap: 18px;
}

.contributors .blogAuthors ul.results_list > li .abstract,
.contributors .blogAuthors ul.results_list > li .links
{
	flex-basis: 100%;
}

.contributors .blogAuthors ul.results_list > li .title
{
	font-weight: 500;
}

/* END BLOG CSS -------------------------------------------------> */