/* BLOG Stylesheet */


/* Blog
-------------------------------------------------------- */

.blog-page h1 {margin-top:-20px;}

.blog-page h2 {
	font-size:38px;
	margin:0 0 20px;
}

.blog-loop {
	padding:40px 0;
	background:#250B08;
}

.post-row-wrap {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:1200px;
	margin:20px auto;
}

.post-row {
	border-radius:20px;
	display:flex;
	align-items:center;
	width:49.2%;
	box-shadow:3px 3px 6px #222;
	
}

.top-post.post-row {
	width:1200px;
	margin:-250px auto auto;
}

.post-row h2 {
	margin:0 0 5px;
	font-size:22px;
	line-height:1;
}

.top-post.post-row h2 {
	font-size:36px;
	margin-bottom:10px;
	display:inline-block;
}

.post-row p {
	margin:0;
	font-size:16px;
}

.top-post.post-row p {
	font-size:23px;
}

.post-row a {
	display:inline-block;
}

.post-col {
	padding:0 10px;
	margin:0;
}

.top-post .post-col {
	padding: 0 20px;
}

.post-img-col img {
	transition:.2s ease;
	margin-bottom:-6px;
}

.left img {
	border-radius:20px 0 0 20px;
	border-right:solid 1px #fff;
}

.right img {
	border-radius:0 20px 20px 0;
	border-left:solid 1px #fff;
}

.post-img-col img:hover {
	border-radius:10px;
	transition:.2s ease;
	border:none;
}

.blog-pagination {
	display:block;
	margin:40px 20px;
	text-align:center;
}

.page-numbers {
	padding:10px 20px;
	margin:5px;
	background:#00587B;
	color:#DCEFF7;
	border-radius:10px;
	transition:.2s ease;
	box-shadow:3px 3px 6px #222;
}

.page-numbers.current {
	background:#008CC3;
}

.page-numbers:hover {
	background:#008CC3;
	transition:.2s ease;
}

.blog-agent-bio-img {
	top:1200px;
	height:360px;
}

/* Media Queries
-------------------------------------------------------- */

@media (max-width:1440px) {
	.blog-loop .top-post {
		margin-top:-120px;
	}
	.blog-page .hero-content {top:170px;} /* Counteract change in front-page CSS */
}

@media (max-width:1250px) {
	.top-post.post-row {
		width:900px;
		margin:-120px auto auto;
	}	
	.post-row-wrap {
		width:900px;
	}
	.post-row h2 {
		font-size:17px;
	}
	.top-post.post-row h2 {
		font-size:28px;
		margin-bottom:10px;
	}
	.post-row p {
		font-size:13px;
	}
	.top-post.post-row p {
		font-size:22px;
		}
}

@media (max-width:1008px) { /* Counteract change in front-page CSS */
	.blog-page .hero-content h2 {color:white;}
	.top-post.post-row {margin-top:-40px;}
}

@media (max-width:950px) {
	.post-row {
		min-width:440px;
		margin:auto;
	}
	.top-post.post-row {
		width:600px;
	}
	.post-row.left {
		margin-bottom:20px;
	}
	.top-post.post-row img {
		width:300px;
		height:200px;
	}
	.post-row h2 {
		font-size:17px;
	}
	.top-post.post-row h2 {
		font-size:24px;
		margin-bottom:8px;
	}
	.post-row p {
		font-size:13px;
	}
	.top-post.post-row p {
		font-size:17px;
	}	
		.post-row-wrap {
		width:600px;
	}
}

@media (max-width:640px) {
	.blog-page .hero-content h1 {color:#67C5E8;} /* Counteract change in front-page CSS */
	.top-post.post-row {margin-top:-40px;}
	.top-post.post-row {
		display:block;
		margin-top:20px; /* Counteract change in front-page CSS */
		width:400px;
	}
	.top-post.post-row img {
		display:block;
		width:440px;
		height:240px;
		border-right:0;
		border-bottom:solid 1px #fff;
		border-radius: 10px 10px 0px 0px;
	}
		.post-row-wrap {
		width:440px;
	}
}

@media (max-width:479px) {
	.post-row {
		display:block;
		margin:auto;
		min-width:300px;
		min-height:160px;
	}
	.top-post.post-row {
		width:300px;
	}
	.post-row img{
		width:160px;
		height:106px;
	}
	.post-row.left img {
		border-bottom:solid 1px #fff;
	}
	.post-row.right img {
		border-top:solid 1px #fff;
	}
	.top-post.post-row img {
		width:300px;
		height:212px;
	}	
	.post-row h2 {
		min-height:44px;
		height:44px;
		margin-top:10px;
		margin-bottom:0;
	}
	.top-post.post-row h2 {
		font-size:24px;
		margin-top:8px;
	}
	.post-row p {
		font-size:12px;
		position:absolute;
		width:130px;
	}
	.post-row.left p {
		margin-left:160px;
		margin-top:-150px;
		margin-bottom:auto;
	}
	.post-row.right p {
		margin-top:10px;
	}
	.post-row.right img {
		margin-left:142px;
	}
	.top-post.post-row p {
		font-size:14px;
		padding-bottom:10px;
		position:relative;
		width:100%;
		margin:auto;
		margin-top:8px;
	}	
		.post-row-wrap {
		width:300px;
	}
	.blog-agent-bio-img {display:none;}
}