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

/*

PTSans and PTSerif

Available weights:

400 (normal) Normal
700 (bold) Bold

*/

body
{
	/*background: var(--mainColor);*/
	/*padding: 0;*/
	/*padding-top: 107px;*/
	/*max-width: 100%;*/
	/*max-width: 1140px;
	margin: 0 auto;*/
	/*font-family: "PTSerif", georgia, times;
	font-size: 18px;*/
}

#subContent .blogPosts ul,
#subContent .blogPosts li
{
	margin: 0;
	--min-font-size: 16;
	--max-font-size: 21;
	list-style: none;
	line-height: 1.52;
}

#subContent .blogPosts li
{
	margin: 0 0 20px;
}

#subContent h2
{
	padding: 0;
	--max-font-size: 24;
	--min-margin-bottom: 12;
	--max-margin-bottom: 20;
	--min-margin-top: 30;
	--max-margin-top: 40;
	border-bottom: none;
	color: #000000;
	text-transform: uppercase;
	font-weight: 600;
}

.search_form form > div > div.hasFocus > label
{
	display: none !important;
}

#header
{
	/*position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px;
	height: 107px;
	background: #ffffff;
	z-index: 9999;*/
	box-sizing: border-box;
	height: 156px;
}

#logo
{
	position: absolute;
	width: 92px;
}


#bannerContent
{
	padding-left: 0;
}

#content
{

	margin-top: 25px;
	box-sizing: border-box;
}

#blogBannerInfo
{
	margin-top: 10px;
	font-size: 20px;
	overflow: hidden;
}


#blogBannerInfo > div
{
	float: left;
}

#blogBannerInfo > div:not(:last-child)::after
{
	content: '|';
	padding: 0 12px;
}

#emailSignupForm input[type='email'],
#emailSignupForm label
{
	color: #ffffff;
	border-color: #ffffff;
}

#emailSignupForm input[type='email']:focus
{
	background: none;
}

@media (min-width: 768px)
{
	#banner
	{
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		height: 392px;
	}

	#bannerContent
	{
		flex: 0 0 44%;
	}

	body.singlePost #banner
	{
		justify-content: flex-end;
	}

	body.singlePost #bannerContent
	{
		flex-basis: 100%;
	}

	#bannerImage
	{
		left: auto;
		height: 100%;
		right: -6%;
		flex: 0 0 56%;
	}
}

@media (min-width: 1024px)
{
	#blogBannerInfo
	{
		font-size: 24px;
	}
}


.blogPosts .topicdate
{
	display: flex;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
}

.blogPosts .topic
{
	font-size: 18px;
}

.blogPosts .topicdate > div + div::before
{
	position: relative;
	top: 1px;
	content: '|';
	margin: 0 6px;
}

.blogPosts .itemdate
{
	margin-top: 0;
	--min-font-size: 18;
	--max-font-size: 18;
}


.blogPosts .readtime svg
{
	position: relative;
	top: 3px;
	right: 2px;
	width: 18px;
	height: 18px;
	fill: currentColor;
}


.blogPosts:not(.singlePost) div > div.title
{
	--min-margin-top: 20;
	--max-margin-top: 40;
	margin-bottom: 25px;
	--max-font-size: 42;
	color: #000000;
	font-family: 'PTSans';
	line-height: 1.2;
}

.blogPosts.singlePost div > div.title
{
	margin-bottom: 8px;
	--max-font-size: 32;
	font-weight: 500;
}

.blogPosts .title a
{
	color: inherit;
}

.blogPosts .title a:hover,
.blogPosts .title a:focus
{
	color: #666666;
	text-decoration: none;
}

.blogPosts:not(.singlePost) div > div.title::after
{
	content: '';
	display: block;
	width: 55px;
	height: 1px;
	margin: 14px 0 25px;
	background: var(--orange);
}

.byline,
.blogcategory
{
	--max-font-size: 21;
}

.subtitle
{
	margin: 10px 0 20px;
	--max-font-size: 32;
	font-weight: 500;
	line-height: 1.18;
}

.blogcategory,
.blogPosts .bio
{
	margin-bottom: 8px;
	--max-font-size: 21;
}

.blogcategory span
{
	font-weight: 500;
}

.blogPosts:not(.singlePost) > div.results_list > div
{
	position: relative;
	padding: 20px 0;
	border-top: 1px solid #e1e1e1;
}


.blogPosts.singlePost div.content
{
	margin-top: 30px;
}

.blogPosts > div.results_list > div:last-child
{
	border-bottom: none;
}

.blogPosts div > .image:empty
{
	display: none;
}

.viewMore a
{
	font-size: 18px;
	text-decoration: underline;
}

.socialshare
{
	display: flex;
	margin: 15px 0 40px;
}

.socialshare a
{
	display: block;
	height: 19px;
	margin-right: 28px;
}

.socialshare a svg
{
	display: block;
	width: auto;
	height: 100%;
	fill: #466A87;

}

.socialshare a:hover,
.socialshare a:focus
{
	opacity: .75;
}


@media (min-width: 768px)
{


	.blogPosts .readtime
	{
		position: absolute;
		right: 0;
		top: 18px;
		line-height: 1;
		color: #8D8D8D;
		font-size: 18px;
		text-transform: uppercase;
		letter-spacing: .5px;
	}
}


#historyLinks
{
	overflow: hidden;
	padding: 60px 0;
	border-top: 1px solid #e1e1e1;
}

#historyLinks a
{
	padding: 8px 30px;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 600;
	color: #000000;
	background: #F4B940;
	border-radius: 36px;
	line-height: 1;
}



#historyLinks a.prevPage
{
	float: left;
}

#historyLinks a.nextPage
{
	float: right;
}


form > div
{
	display: block;
}

input:not([type]),
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
textarea,
select,
.customSelect,
.fsComboBox [role=textbox]
{
	min-height: 34px;
	padding: 0px 8px 10px 0;
	box-sizing: border-box;
	border-radius: 0;
	font-size: 22px;
	text-transform: unset;
	font-weight: 400;
	line-height: 1;
	letter-spacing: unset;
	border: none;
	border-bottom: 1px solid #25435A;
	background: none;
}

.search_form:not(.blogFilters) form > div > div > label
{
	padding: 0px 8px 10px 0;
	font-size: 22px;
	text-transform: unset;
	font-weight: 400;
	line-height: 1;
}

.blogSearch input,
.customSelect
{
	padding-right: 30px;
}

.autosearch button
{
	display: none;
}

.autosearch form
{
	overflow: hidden;
}

.customSelectInner
{
	text-transform: unset;
	font-weight: 400;
	overflow: visible;
}

.customSelect::before
{
	display: none;
}

.customSelect::after
{
	width: 5px;
	height: 5px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-color: #333333;
	right: 6px;
	top: 12px;
}

select
{
	color: inherit;
}

.blogSearch button
{
	position: absolute;
	right: 12px;
	top: -3px;
	display: block;
	width: 29px;
	height: 29px;
	padding: 0;
	border-radius: 0;
	background: none;
	border: none;
	cursor: pointer;
}


button > svg
{
	display: block;
	width: 100%;
	height: auto;
	fill: #333333;
}

#emailSignupForm
{
	max-width: 350px;
	margin: 40px auto 0;
	/*text-align: right;*/
}


#emailSignupForm h2
{
	margin: 45px 0 0 0;
	color: #333333;
	font-size: 16px;
	border: none;
}

#emailSignupForm h2 svg
{
	width: 16px;
	height: auto;
}



#emailSignupForm [type=submit]
{
	margin-top: 30px;
	padding: 20px 40px;
}

#mainContent
{
	padding-top: 25px;
}

#blogSideList ul,
#blogSideList li,
#blogEditors ul,
#blogEditors li,
#blogArea ul,
#blogArea li
{
	margin: 0;
	list-style: none;
}

#blogSideList li,
#blogEditors li,
#blogArea li
{
	margin-bottom: 10px;
}


@media (min-width: 768px)
{

	#logo
	{
		left: 20px;
		right: auto;
	}


	.blogPosts > div > div > .image
	{
		width: 40%;
		float: right;
		margin: 0 0 12px 20px;
	}


}

@media (min-width: 900px)
{
	#content
	{
		display: flex;
		padding-right: 0;
		flex-direction: row;
		justify-content: space-between;
	}

	#mainContent:not(:only-child)
	{
		flex: 1 1 1045px;
		box-sizing: border-box;
		float: none !important;
		margin-right: 89px;
	}

	body.subContentRight #subContent
	{
		flex: 1 1 545px;
		padding: 37px 0 0 0;
		box-sizing: border-box;
		float: none !important;
		flex-grow: 0;
		transform: unset;
	}
}

@media (min-width: 1024px)
{
	#historyLinks
	{
		padding: 60px 15px;
	}
}



#blogSpotlights ul,
#blogSpotlights li
{
	position: relative;
	margin: 0;
	list-style: none;
}


#blogSpotlights .image
{
	aspect-ratio: 544 / 337;
	background: var(--navy-blue);
}

#blogSpotlights .image img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .5;
}

#blogSpotlights ul
{
	display: grid;
	grid-gap: 37px;
}

#blogSpotlights .title
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: max(20px,
	             min(47px, 20px + (47 - 20) * ((100vw - 767px) / (1600 - 767))
	));
	box-sizing: border-box;
	color: #ffffff;
	line-height: 1.3;
	--max-font-size: 21;
}


@media (min-width: 768px)
{
	#blogSpotlights .image
	{
		aspect-ratio: 544 / 544;
	}

	#blogSpotlights ul
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px)
{
	#blogSpotlights .image
	{
		aspect-ratio: 544 / 337;
	}
}

#blogSideSearch
{
	padding: 30px 20px;
	margin-bottom: 50px;
	background: rgba(40,83,116,.17);
}

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

#blogSideSearch #blogSocial
{
	margin: 30px 0;
}

#blogSideSearch #blogSocial ul
{
	display: flex;
	align-items: center;
}

#blogSideSearch #blogSocial ul li:not(:last-child)
{
	margin-right: 28px;
}

#blogSideSearch #blogSocial svg
{
	fill: #25435A;
}

#blogSideSearch h2
{
	margin-top: 0;
}

@media (min-width: 1280px)
{
	#blogSideSearch
	{
		padding: 40px 46px;
	}
}


/* Main Navigation -----------------------------------------------> */

#blogNav
{
	position: relative;
	font-weight: 400;
	line-height: normal;
	font-family: 'PTSans';
	text-transform: uppercase;
}

/* base style resets */
#blogNav ul,
#blogNav li
{
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* top level */
#blogNav > ul
{
	width: 100%;
}

/* all menu links */
#blogNav a
{
	color: #a0a0a0;
	text-decoration: none;
}

#blogNav li > a
{
	display: block;
	padding: 10px 0;
}

#blogNav li li:hover > a,
html[data-whatintent="keyboard"] #blogNav li li:focus-within > a
{
	/* using data-whatintent, because some browsers don't understand focus-within */
	background: #aaa;

	color: white;
	text-decoration: none;
}

#blogNav #blogSocial
{
	display: flex;
	align-items: center;
}

#blogNav #blogSocial ul
{
	display: flex;
}

#blogNav #blogSocial li a
{
	display: block;
	width: 23px;
	padding: 0;
	color: #f39500;
}

#blogNav #blogSocial li:not(:last-child)
{
	margin-right: 16px;
}

#blogNav #blogSocial li a svg
{
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

#blogNav #blogSocial li:nth-child(2) a {color: #bb0000}
#blogNav #blogSocial li:nth-child(3) a {color: #3b5998}
#blogNav #blogSocial li:nth-child(4) a {color: #1E3050}
#blogNav #blogSocial li:nth-child(5) a {color: #007bb6}

#blogNav #blogSocial li a:hover,
#blogNav #blogSocial li a:focus
{
	opacity: .65;
}

#blogContactForm
{
	padding: 30px;
	background: #eeeeee;
}

#blogContactForm form > div > div
{
	margin: 0 0 20px;
}

#blogContactForm #submit_wrapper input
{
	padding: 15px 50px;
	border-radius: 0;
	background: var(--mainColor);
}

@media (min-width: 1500px)
{
	.postextras
	{
		display: flex;
		justify-content: space-between;
		margin: 0 0 26px;
	}

	.socialshare
	{
		margin-top: 5px;
	}
}





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