/*--------------------------------------------------------------
# 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();
}
/*--------------------------------------------------------------
# Feature Homepage
--------------------------------------------------------------*/
.feature-box {
	width: 100%;
	margin-bottom: 70px;
}
.featurePost {
	width: 100%;
	padding: 0 7px;
	box-sizing: border-box;

	.entry-title {

		a {		

			&:hover {
				text-decoration: none;
				background-image: linear-gradient(to right,#ff9900 0,#ff9900 100%);
				background-position: 0 90%;
				background-repeat: repeat-x;
				background-size: 100% 2px;
				-webkit-transition: background-image .25s ease;
				transition: background-image .25s ease;

			}


		}

	}
}

.largeFeature {
	position: relative;
	width: 50%;
	max-width: 570px;
	float: left;
	margin-right: 0;
	box-sizing: border-box;

	.entry-title {
		position: absolute;
		bottom: 10%;
		background: #fff;
		padding: 10px;
		width: 70%;
		margin: 0 auto;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 18px;

		 a {
		 	color: #000;
		 }
	}
}
.smallFeature-wrap {
	float: left;
	padding-left: 18px;
	box-sizing: border-box;

	.smallFeature {
		float: left;
		margin-right: 17px;
		box-sizing: border-box;
		max-width: 274px;
		min-height: 320px;
		background: #ebebeb;

		.entry-title {
			font-size: 18px;
			text-align: center;
			padding: 40px 10px;

			a {
				color: #000;
			}
		}

		&:last-child {
			margin-right: 0;
		}
	}


}

/*--------------------------------------------------------------
# Sectcion Posts
--------------------------------------------------------------*/
.row-box {
	width: 100%;
	padding: 0 7px;
	margin-bottom: 70px;

	article {

		&:hover {

			.wp-post-image {
				-webkit-transform: scale(1.2);
				transform: scale(1.2);
				-webkit-transition: all .6s ease;
				transition: all .6s ease;			
			}


		}


	}

	.post-thumbnail {
		width: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;

		a {
			display: block;
		}

		.wp-post-image {

			-webkit-transition: all .7s ease;
			transition: all .7s ease;	


		}

		img {
			line-height: 1;
			display: block;
		}

	}

	.section-title-wrapper {
		width: 100%;
		text-align: center;

		.section-title {
			font-size: 24px;
			position: relative;
			text-transform: uppercase;
			margin: ms(0) 0 ms(0) 0;

			&:after {
				content: '';
				width: 78px;
				height: 3px;
				background: #f90;
				bottom: -8px;
				position: absolute;
				display: block;
				margin: 0 auto;
				left: 0;
				right: 0;

			}
		}

	}

	.large-post {
		max-width: 570px;
		width: 100%;
		float: left;
		margin-bottom: 16px;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #e6e6e6;
		position: relative;
		border-radius: 9px;
		overflow: hidden;
		-webkit-transition: all .4s ease;
		transition: all .4s ease;
		outline: none;
    

    	header {
			padding: 20px 15px;
			text-align: center;
			width: 100%;
			box-sizing: border-box;

			a {
				color: #000;
			}

    	}

    	&:first-child {
    		margin-right: 16px;
    	}
	}

	.smallPost-inner {

		.small-post {
			max-width: 375px;
			width: 100%;
			float: left;
			margin-right: 16px;
			box-sizing: border-box;
			background: #fff;
			border: 1px solid #e6e6e6;
			position: relative;
			border-radius: 9px;
			overflow: hidden;
			-webkit-transition: all .4s ease;
			transition: all .4s ease;
			outline: none;    

			header {
				padding: 20px 15px;
				text-align: center;
				width: 100%;
				box-sizing: border-box;

					.entry-title {

						font-size: 18px;

						a {

							color: #000;

						}
					}			

    		}

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.entry-title {

		a {		

			&:hover {
				text-decoration: none;
				background-image: linear-gradient(to right,#ff9900 0,#ff9900 100%);
				background-position: 0 90%;
				background-repeat: repeat-x;
				background-size: 100% 2px;
				-webkit-transition: background-image .25s ease;
				transition: background-image .25s ease;

			}


		}

	}

}

.meta-date {
	padding: 10px 0 10px 15px;

	span {
		font-size: 14px;
		color: #333;
	}
}

/*--------------------------------------------------------------
# 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 {

	&.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: relative;
		top: 0;
		display: flex;
		padding: 80px 0;
		margin-top: -26px;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: $white-color;
		z-index: 2;
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
		
	}

	.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);
		}
	}
}

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

	textarea#comment {
		width: 50%;
	}
}

/*--------------------------------------------------------------
# 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';
		}
	}
}