/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/
.banner {
	background: #f2f2f2;
	margin-top: 50px;

	img {
		margin: auto;
		display: block;
	}
}

/*--------------------------------------------------------------
# Banner Ads
--------------------------------------------------------------*/
.header-banner {
	@include em('margin', 0, 0, 20, 0);
}
.footer-banner {
	@include em('margin', 30, 0, 0, 0);
}

/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/
.wrap-header {
	position: relative;
	width: 100%;
	@include em('margin', 0, 0, 20, 0);

	&:before {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background: $black-90;
		position: absolute;
		left: 0;
		top: 50%;
	}

	.header-title {
		background: $white-color;
		position: relative;
		display: inline-block;
		@include em('font-size', 24);
		@include em('padding', 0, 15, 3, 0);
		margin: 0;
	}
}

/*--------------------------------------------------------------
# Breadcrumb
--------------------------------------------------------------*/
#breadcrumbs {
	font-family: $heading-font;
	color: $white-50;

	@include breakpoint(767) {
		display: none;
	}

	a {
		@include animate-link($white-50, $white-50);
	}

}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.site-content {
	position: relative;
	z-index: 1;
}

.home,
.archive {
	&.no-banner .site-content {
		padding-top: 100px;
	}
}

.sticky {
	display: block;
}

.entry-title {
	margin: 0;
}

#toc_container a {
	@include animate-link($default-color, $default-color);
}

.header-sty2 {
	.site-content {
		margin: 1.875em 0;
	}
}

.more-link {
	@include default-button();
}

/*--------------------------------------------------------------
# Archive Post
--------------------------------------------------------------*/
body.blog,
body.search,
body.archive {

	.entry-header {
		padding: 0 0 20px 0;

		.entry-title {
			@include em('font-size', 24);
			padding: 0 0 5px 0;
		}

		a {
			@include animate-link($default-color, $default-color);
		}
		.entry-meta {

			a {
				color: $black-60;
				&:hover {
					color: $black-color;
				}
			}
		}
	}

	.entry-content {
		//padding: 0 1em 1em;
	}

}

/*--------------------------------------------------------------
# Commment
--------------------------------------------------------------*/
.comment-respond {

	width: 100%;
	float: left;

	textarea#comment {
		width: 50%;
	}
}



/*--------------------------------------------------------------
# Single Post
--------------------------------------------------------------*/
.single-content {

	margin-top: - ms(4);

	&.has-thumbnail {

		.entry-header {

			&:before {
				@include bg-gradientCenter($black-90, $black-70, $black-70, $black-90);
			}

		}

		.post-thumbnail {
			min-height: 500px;

			@include breakpoint(800) {
				min-height: 200px;
			}

			@include breakpoint(670) {
				min-height: 0;
			}

			img {
				display: block;
				margin: 0 auto;
			}
		}

	}

	&.no-thumbnail {

		.entry-header {

			&:before {
				background: $black-90;
			}
		}

		.post-thumbnail {
			min-height: 300px;

			@include breakpoint(800) {
				min-height: 200px;
			}

		}
	}

	.entry-header {
		width: 100%;
		text-align: center;
		position: relative;
		@include em('margin', 0, 0, 50, 0);

		@include breakpoint(639) {
			@include em('margin', 0, 0, 30, 0);
		}

		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			z-index: 1;
		}

		.entry-title {
			@include em('font-size', 56);
			font-weight: 700;

			@include breakpoint(800) {
				@include em('font-size', 28);
			}
		}

		.entry-meta {
			color: $white-50;
			font-family: $heading-font;

			a {
				@include animate-link($white-50, $white-50);
			}
		}

	}

	.entry-header-inner {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: $white-color;
		z-index: 2;
	}

	.entry-content {

		p {
			@include em('font-size', 18);

			&:first-child {
				@include em('font-size', 22);

				&:first-letter {
					float: left;
					@include em('font-size', 72);
					font-weight: bold;
					line-height: .6;;
					padding: 0 10px 0 0;
				}
			}
		}

		h2 {
			font-weight: 700;
		}

		h3 {
			font-weight: 700;
			margin: 15px 0;
		}

	} 

	.entry-footer {
		border-bottom: 2px solid $black-10;
		padding-bottom: 20px;

		> span {
			@include em('margin-right', 10);
		}
	}
}

.product-item {
	//border-left: 2px solid $black-10;
	border-bottom: 2px solid $black-10;
	padding: 0;
	@include em('margin-bottom', 30);

	.product-image {
		width: 100%;
		max-width: 300px;
		float: left;
		margin-right: 25px;
		position: relative;

		a {

			&:hover {
				box-shadow: none !important;
			}

			&:after {
				content: '\f1d2';
				font-family: $icon-font;
				color: $black-color;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		@include breakpoint(639) {
			float: none;
		}

		img {
			margin: 0;
		}


	}

	p {
		margin-left: 325px;

		@include breakpoint(800) {
			margin-left: 0;
		}


	}

}


/*--------------------------------------------------------------
# Sigle Page
--------------------------------------------------------------*/
body.page {
	
	.page-content {
		background: $white-color;
		@include em('margin', 0, 0, 20, 0);
	}

	.entry-title {
		@include em('margin-bottom', 5);
	}

	.entry-content {
		@include em('font-size', 18);
		@include em('margin-bottom', 20);

		a {
			@include animate-link($link-color, $link-color);
		}

		form {
			@include em('font-size', 12);
		}
	}
}

/*--------------------------------------------------------------
# Template category lists
--------------------------------------------------------------*/
.category-item {
	@include em('margin-bottom', 40);

	ul {
		@include reset-ul();
	}

	li {
		width: 48%;
		float: left;
		margin-right: 4%;
		position: relative;
		@include em('padding', 0, 0, 5, 25);


		&:nth-child(2n) {
			margin-right: 0;
		}

		&:nth-child(2n+1) {
			clear: left;
		}

		&:before {
			font-family: $icon-font;
			content: '\f112';
			display: block;
			position: absolute;
			left: 5px;
			top: 0;
		}

		a {
			@include animate-link($default-color, $default-color);
		}

		@include breakpoint(639) {
			width: 100%;
			margin-right: 0;
		}
	}
}

/*--------------------------------------------------------------
# Related posts
--------------------------------------------------------------*/
.related-posts {
	@include grid-single();
}

/*--------------------------------------------------------------
# Recently posts
--------------------------------------------------------------*/
.recently-posts {
	@include grid-single();
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.posts-navigation,
.post-navigation {
	font-family: $heading-font;
	width: 100%;
	float: left;
	margin: 0 0 20px 0;

	a {
		@include default-button();
	}
}

.posts-navigation,
.post-navigation {

	a {
		width: 96%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;
		position: relative;
		text-align: left;

		&:before {
			font-family: $icon-font;
			position: absolute;
			top: 0;
		}
	}

	.nav-previous {
		width: 50%;
		float: left;
	}

	.nav-previous a {
		float: left;
		padding-left: 35px;

		&:before {
			left: 10px;
			content: '\f185';
		}
	}

	.nav-next {
		width: 50%;
		float: right;
	}

	.nav-next a {
		text-align: right;
		float: right;
		padding-right: 35px;

		&:before {
			right: 10px;
			content: '\f186';
		}
	}
}