/**
 * 	8.0 Related Posts
 *
 * ----------------------------------------------------------------------------------------
 */
 
.related {
	height: 200px;
	margin: 40px auto;
	max-width: 960px;
	width: 100%;
	.title{
		color: $main-text-color;
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		position: relative;
		width: 90%;
		vertical-align: middle;
		z-index: 9999;
	}
}

.related li {
	@include main-transition;
	background: #fff;
	float: left;
	height: 200px;
	list-style: none;
	position: relative;
	text-align: center;
	width: 33.333334%;
	&:before {
		content: '';
		display: inline-block;
		height: 100%;
		margin-right: -0.25em;
		vertical-align: middle;
	}
	img {
		@include main-transition;
		height: 200px;
		max-width: 320px;
		opacity: 0.3;
		position: absolute;
		top: 0;
		width: 100%;
	}
}

.related li {
	&:nth-child(1),
	&:nth-child(1) .wp-post-image {
		-webkit-border-radius: 20px 0 0 20px;
		-moz-border-radius: 20px 0 0 20px;
		border-radius: 20px 0 0 20px;
	}
	&:nth-child(2),
	&:nth-child(2) .wp-post-image {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
	&:nth-child(3),
	&:nth-child(3) .wp-post-image {
		-webkit-border-radius: 0 20px 20px 0;
		-moz-border-radius: 0 20px 20px 0;
		border-radius: 0 20px 20px 0;
	}
}

.related li:hover {
	background: $accent-color;
	& .title {
		color: #fff;
	}
}