/* 14 - blog pages - start
==================================================================================================== */

/* main blog grid - start */
.main-blog-grid {
	margin-top: 60px;
	.item-image {
		width: 100%;
		display: block;
		overflow: hidden;
		position: relative;
		margin-bottom: 30px;
	}

	.item-content {
		padding: 0px 95px;
	}
	.item-title {
		>a {
			display: block;
			color: #000000;
			font-size: 38px;
			font-weight: 400;
			font-family: $heading-font;
		}
	}

	.post-meta {
		>ul {
			>li {
				padding: 0px;
				color: #434343;
				margin-right: 20px;
				&:after {
					display: none;
				}
				>a {
					color: #000000;
				}
			}
		}
	}
}
/* main blog grid - end */


/* blog grid - start */
.blog-grid {
	margin-top: 30px;
	.blog-image {
		width: 100%;
		display: block;
		overflow: hidden;
		position: relative;
		margin-bottom: 25px;
		&:before {
			top: 50%;
			left: 50%;
			width: 0%;
			content: '';
			height: 90%;
			position: absolute;
			background-color: #000000;
			transition: $default-transition;
			transform: translate(-50%, -50%);
		}
		&:after {
			top: 50%;
			left: 50%;
			z-index: 2;
			opacity: 0;
			color: #ffffff;
			line-height: 1;
			font-size: 14px;
			font-weight: 500;
			position: absolute;
			letter-spacing: 3px;
			content: "VIEW DETAILS";
			font-family: $heading-font;
			transform: translate(-50%, -30%);
			transition: all 0.3s ease-in-out;
			font-family: "Montserrat", sans-serif;
		}
	}

	&:hover {
		.blog-image {
			&:before {
				width: 90%;
			}
			&:after {
				opacity: 1;
				transition-delay: 0.05s;
				transform: translate(-50%, -50%);
			}
		}
	}

	.item-title {
		margin-bottom: 20px;
		>a {
			font-size: 18px;
			line-height: 1.5;
			color: $default-black;
			font-family: $heading-font;
		}
	}

	.item-content {
		padding: 0px 70px;
	}

	.size-increase {
		.item-title {
			>a {
				font-size: 32px;
				font-weight: 700;
				line-height: 1.25;
			}
		}
	}
}

.blog-page {
	.blog-grid {
		margin-top: 60px;
	}
}
/* blog grid - end */


/* blog list - start */
.blog-list {
	margin-bottom: 60px;
	.item-image {
		float: left;
		width: 370px;
		background-color: #ffffff;
		>img {
			transition: $default-transition;
		}
	}
	&:hover {
		.item-image {
			>img {
				opacity: .6;
			}
		}
	}

	.item-content {
		display: table;
		padding-top: 30px;
		padding-left: 60px;
	}

	.item-title {
		margin-bottom: 20px;
		a {
			font-size: 21px;
			line-height: 1.429;
			color: $default-black;
			font-family: $heading-font;
		}
	}
}
/* blog list - end */


/* blog fullimage - start */
.blog-fullimage {
	width: 100%;
	display: block;
	overflow: hidden;
	margin-top: 30px;
	position: relative;
	&.add-effect {
		&:before {
			top: 50%;
			left: 50%;
			width: 0%;
			z-index: 1;
			height: 85%;
			content: '';
			position: absolute;
			transition: all .3s ease-in-out;
			background-color: $default-black;
			transform: translate(-50%, -50%);
		}
		&:hover {
			&:before {
				width: 85%;
			}
		}
	}

	.item-content {
		top: 50%;
		left: 0px;
		right: 0px;
		z-index: 2;
		padding: 0px 30px;
		text-align: center;
		position: absolute;
		transform: translateY(-50%);
		.item-title,
		.item-brand {
			opacity: 0;
			width: 100%;
			display: block;
			color: #ffffff;
			line-height: 1.4;
			transform: translateY(8px);
			transition: $default-transition;
		}
		.item-title {
			font-size: 21px;
			font-weight: 600;
			max-width: 330px;
			margin-bottom: 20px;
			display: inline-block;
		}
		.item-brand {
			font-size: 14px;
		}
	}
	&:hover {
		.item-content {
			.item-title,
			.item-brand {
				opacity: 1;
				transform: translateY(0px);
			}
			.item-title {
				transition-delay: .3s;
			}
			.item-brand {
				transition-delay: .5s;
			}
		}
	}
}

.blog-section {
	.masoney-grid.m-0 {
		&.mb-100 {
			margin-bottom: 100px !important;
		}
		.blog-fullimage {
			margin: 0px;
		}

		&.metro-layout {
			.grid-item,
			.grid-sizer {
				width: 25%;
			}
			.grid-50 {
				width: 50%;
			}
		}
	}

}
/* blog fullimage - end */

/* small blog - start */
.small-blog {
	.item-image {
		float: left;
		width: 69px;
		margin-right: 18px;
		>img {
			transition: $default-transition;
		}
	}
	&:hover {
		.item-image {
			>img {
				opacity: .6;
			}
		}
	}
	.item-content {
		display: table;
		.item-title {
			margin-bottom: 5px;
			>a {
				display: block;
				font-size: 14px;
				font-weight: 700;
				line-height: 1.143;
				color: $default-black;
				font-family: $heading-font;
			}
		}
		.post-date {
			font-size: 12px;
			font-weight: 500;
		}
		.item-price {
			display: block;
			font-size: 14px;
			font-weight: 600;
		}
	}
}
/* small blog - end */

/* 14 - blog pages - end
==================================================================================================== */