/**
 * Post List specific styles
 * Also used for the 'Event List' page template and the 'Apply Open Position' page.
 */
 
.post-list-title-banner {
	padding: 0;
	color: #fff;
	background-color: #444444;
}
	.post-list-title-banner .container {
		padding-top: 4em;
		padding-bottom: 4em;
	}
	
		.post-list-title-banner h1,
		.post-list-title-banner h1.page-title {
			margin: 0;
			font-weight: 700;
			font-size: 42px;
			color: #fff;
			float: none;
			width: 100%;
		}
		
.post-list .content-area {
	max-width: 1600px;
	padding: 0 2%;
	width: 100%;
	float: none;
	margin: 0 auto;
}
.post-list .wrapper { 
	max-width: 100%;
	padding: 0 10px;
}
	
		.post-list-filter-bar ul.post-list-filters {
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			padding: 2em 0;
			border-bottom: 5px solid #ccc;
		}
			.post-list-filter-bar ul.post-list-filters li {
				padding-right: 2em;
			}
			
			.post-list-filter-bar ul.post-list-filters span.post-refine-btn,
			.post-list-filter-bar ul.post-list-filters a {
				text-transform: uppercase;
				font-weight: 600;
				font-size: 15px;
				line-height: 1.5;
				display: flex;
				position: relative;
				cursor: pointer;
				text-decoration: none;
				color: #444;
			}
				.post-list-filter-bar ul.post-list-filters span.post-refine-btn:after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}
				
				.post-list-filter-bar ul.post-list-filters span.post-refine-btn > span,
				.post-list-filter-bar ul.post-list-filters a > span {
					display: block;
					margin-left: 1em;
					width: 1.5em;
					height: 1.5em;
					position: relative;
					transition: transform 0.4ms ease-in-out;
				}
				.post-list-filter-bar ul.post-list-filters span.post-refine-btn.on > span {
					transform: rotate(90deg);
				}
				
					.post-list-filter-bar ul.post-list-filters span.post-refine-btn > span:before,
					.post-list-filter-bar ul.post-list-filters span.post-refine-btn > span:after,
					.post-list-filter-bar ul.post-list-filters a > span:before,
					.post-list-filter-bar ul.post-list-filters a > span:after {
						content: "";
						background: #b43a8d;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0.8em;
						height: 2px;
						border-radius: 2px;
						margin-top: -1px;
						margin-left: -0.4em;
						transform: rotate(35deg);
						transform-origin: 100% 50%;
					}
					.post-list-filter-bar ul.post-list-filters span.post-refine-btn > span:after,
					.post-list-filter-bar ul.post-list-filters a > span:after {
						transform: rotate(-35deg);
					}
		
	.post-refine-dd {
		background: #fff;
		padding: 15px 0;
		display: none;
	}
	
		.post-refine-dd .content-area {
			padding-top: 10px;
			padding-bottom: 10px;
		}
		
		.post-refine-dd ul {
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			margin: -5px;
		}
			
			.post-refine-dd ul .button {
				margin: 5px;
			}
	
	.post-list-boxes {
		background-color: #eeeeee;
	}
	.list-of-posts.article-grid {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 2em -10px 0;
	}
	
		.list-of-posts.article-grid .single-article-wrap {
			flex: 0 25%;
			box-sizing: border-box;
			padding: 10px;
			display: flex;
			flex-direction: column;
		}
		
			.list-of-posts.article-grid .single-article-wrap a.single-article {
				text-decoration: none;
			}
		
			.list-of-posts.article-grid .single-article .image-wrap-wrapper {
				width: 100%;
				overflow: hidden;
				position: relative;
				background: #fff;
				border-bottom: 1px solid rgba(0,0,0,0.05);
			}
				.list-of-posts.article-grid .single-article .image-wrap {
					overflow: hidden;
					text-align: center;
					position: relative;
					background-size: contain;
					background-color: #fff;
					background-repeat: no-repeat;
					background-position: center;
					transition: transform .2s ease-in-out,opacity .3s ease;
				}
				.list-of-posts.article-grid .single-article .image-wrap:after {
					content: "";
					display: block;
					padding-bottom: 45%;
				}
				.list-of-posts.article-grid .single-article-wrap:hover .image-wrap {
					transform: scale(1.05);
				}
				.list-of-posts.article-grid .single-article .image-wrap a {
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					text-indent: -9999px;
					overflow: hidden;
				}
				
			.list-of-posts.article-grid .content-wrap {
				padding: 1em 1.5em;
				background: #fff;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
			}

			.list-of-posts.article-grid .single-article h3 {
				font-size: 15px;
				font-weight: 700;
				line-height: 1.6;
				color: #151617;
				margin: 0 0 1em;
			}

			.list-of-posts.article-grid .content-wrap h4 {
				margin-bottom: 1em;
				margin-top: auto;
			}
			
			.list-of-posts.article-grid .content-wrap .single-article-date {
				color: #646464;
				font-size: 13px;
				margin-top: 0;
			}
			.list-of-posts.article-grid .event-article .content-wrap .single-article-date {
				color: #b43a8d;
				font-size: 15px;
			}
			
@media only screen and (max-width: 1200px) {
	.list-of-posts.article-grid .single-article-wrap {
		flex: 0 33.3%;
	}
}
@media only screen and (max-width: 850px) {
	.list-of-posts.article-grid .single-article-wrap {
		flex: 0 50%;
	}
}
@media only screen and (max-width: 500px) {
	.list-of-posts.article-grid .single-article-wrap {
		flex: 0 100%;
	}
}