/**
 *
 * Blog
 *
 */

.post-content {
	p:last-of-type { margin-bottom: 0; }
	p a { position: relative; border-bottom-style: solid; border-bottom-width: 1px; border-color: inherit; }
	* { color: inherit; }
}
.post-date { margin-bottom: 5px;
	a, span { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; transition: color .4s; font-weight: 700; color: inherit; }
}

.blog {
	a { color: inherit; }
	@include breakpoint(small only) {
		.blog-filter-posts { margin-bottom: 30px; }
		.post-image, .post-header { margin-bottom: 30px; }
		.blog-load-more { padding-top: 30px; }
		.post-item { padding-bottom: 30px; }
	}
	@include breakpoint(medium only) {
		.blog-filter-posts { margin-bottom: 30px; }
		.post-image { width: 50%; float: left; padding-right: 15px; }
		.post-header { margin-bottom: 30px; }
		.blog-load-more { padding-top: 30px; }
	}
	@include breakpoint(large) {
		.blog-load-more { padding: 60px 60px 0 60px; }
		.blog-filter-posts { height: 60px; line-height: 60px; margin-bottom: 60px; 
			.blog-input-wrapper { height: 60px;	}
			.blog-search { float: left; width: auto; margin: 0; padding-left: 30px; }
			.blog-filters-views { float: right; }
			.blog-filters li { padding-bottom: 0; }
		}
	}
	.footer { margin-top: 0; }
	.blog-load-more-content { display: none; }
	.navigation.pagination { margin-bottom: 60px; }
}
.reda-shares {
	.shares-wrapper-inner { transition: color .3s; }
	span { margin-right: 10px; }
	span, i { font-size: 14px; }
}
/**
 *
 * Blog classic
 *
 */

.blog-classic { padding-bottom: 60px; 
	.post-image { margin-bottom: 0; 
		@include breakpoint(medium only) { margin-bottom: 30px; }
	}
	.post-image { margin-top: 30px; }
	.post-content { margin-bottom: 30px; 
		p { position: relative; }
	}
	.post-item.sticky { position: relative; 
		&:after { content: ""; background: $light-gray; position: absolute; content: ""; top: 0; height: 100%; left: -30px; right: -30px; z-index: -1; }
	}
	.search-form { margin-bottom: 60px; }
	.reda-shares { margin-bottom: 30px; }
}

/**
 *
 * Blog grid
 *
 */

.blog-grid { 
	.blog-content-rows { display: none; }
	.blog-load-more { clear: both; padding-top: 0; margin-bottom: 60px; }
	.blog-content >div { overflow: hidden; padding: 0; }
	.post-date a { font-size: 12px; letter-spacing: 2px; }
	.post-content-footer { margin-top: 30px; }
	.post-header { margin-bottom: 0; margin-right: 15px;
		h4 { margin-bottom: 30px; }
	}
	@include breakpoint(small only) {
		.post-item { width: 100%; margin-bottom: 60px; }
		.post-content-footer .reda-shares { margin-bottom: 30px; }
	}
	@include breakpoint(medium only) {
		.post-item { @include calc(width, '100% / 2'); padding: 0px 15px 60px; float: left;
			&:nth-child(2n + 1) { clear: both; }
		}
		.post-image { display: inline-block; padding-bottom: 100%; position: relative; width: 100%; vertical-align: middle; margin-bottom: 30px; 
			a { cursor: pointer; left: 50%; position: absolute; top: 50%; transform: translate3d(-50%,-50%,0); 
				&.img-high { height: 100%; width: 100%; text-align: center; 
					img { height: 100%; width: auto; }
				}
				&.img-wide, &.img-wide img { width: 100%; height: auto; }
				span { display: inline-block; height: 100%; }
			}
		}
		.post-content-footer .reda-shares { margin-bottom: 30px; }
	}
	@include breakpoint(large) {
		.post-item { @include calc(width, '100% / 3'); padding: 0px 15px 120px; float: left;
			&:nth-child(3n + 1) { clear: both; }
		}
		.post-image { display: inline-block; padding-bottom: 100%; position: relative; width: 100%; vertical-align: middle; margin-bottom: 30px; 
			a { cursor: pointer; left: 50%; position: absolute; top: 50%; transform: translate3d(-50%,-50%,0); overflow: hidden;
				&.img-high { height: 100%; width: 100%; text-align: center; 
					img { height: 100%; width: auto; }
				}
				&.img-wide, &.img-wide img { width: 100%; height: auto; }
				span { display: inline-block; height: 100%; position: relative; 
					&:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; z-index: 1; }
				}
				&:hover {
					span:before { opacity: 1; }
				}
			}
		}
		.post-content-footer { 
			.reda-shares { float: left;
				.shares-icons { position: absolute; padding-left: 0; white-space: nowrap; left: -10px; bottom: -40px; }
			}
			.post-btn-more { float: right; }
		}
	}
}
.blog-sm-grid {
	.blog-content-rows { display: none; }
	.blog-load-more { clear: both; padding-top: 0; margin-bottom: 60px; }
	.blog-content >div { overflow: hidden; padding: 0; }
	.post-title { margin-bottom: 0; padding: 30px 15px 30px 100px; border-top-width: 3px; border-top-style: solid; }
	.post-date { margin-bottom: 10px; }
	.post-content { padding: 0 30px 30px 45px; }
	.date-block { display: inline-block; margin-left: -15px; margin-top: -15px; z-index: 2; padding: 0 15px; position: absolute; width: 115px; height: 100px; 
		h1 { text-align: center; padding-top: 10px; margin-bottom: 10px; letter-spacing: 5px; font-size: 72px; line-height: 56px; }
		p { text-transform: uppercase; letter-spacing: 5px; text-align: center; font-size: 14px; margin-bottom: 5px; }
	}
	.post-content-footer { padding: 0 30px 45px 45px; }
	// .post-header { background: $white; }
	@include breakpoint(small only) {
		.post-item { width: 100%; }
		.post-content-footer .reda-shares { margin-bottom: 30px; }
	}
	@include breakpoint(medium only) {
		.post-item { @include calc(width, '100% / 2'); padding: 0px 30px; float: left;
			&:nth-child(2n + 1) { clear: both; }
		}
		.post-content-footer .reda-shares { margin-bottom: 30px; }
	}
	@include breakpoint(large) {
		.post-item { @include calc(width, '100% / 3'); padding: 0px 30px; float: left;
			&:nth-child(3n + 1) { clear: both; }
		}
		.post-content-footer { 
			.reda-shares { float: left;
				.shares-icons { position: absolute; padding-left: 0; white-space: nowrap; left: -10px; bottom: -40px; }
			}
			.post-btn-more { float: right; }
		}
	}
}
/**
 *
 * Blog rows
 *
 */

.blog-rows { 
	.blog-content-grid { display: none; }
	.post-title { margin-bottom: 30px; }
	.post-btn-more { margin: 15px; }
	.img-wide, .img-high, .img-tall { overflow: hidden; display: block; }
	@include breakpoint(small only) {
		.post-item { margin-bottom: 30px; }
		.post-content { margin-bottom: 30px; }
		.post-content-wrapper { padding: 0 15px; }
		
	}
	@include breakpoint(medium only) {
		.post-item { overflow: hidden; padding-bottom: 30px; margin-bottom: 30px; }
		// .post-header, .post-content, .post-btn-more { margin-left: 50%; width: 50%; padding-left: 15px; }
		.post-content { margin-bottom: 15px; }
		.post-content-wrapper { width: 60%; float: left; padding: 30px; }
	}
	@include breakpoint(large) {
		.post-item { overflow: hidden; margin-top: 30px; margin-bottom: 30px; 
			&:first-of-type() { margin-top: 0; }
			&:last-of-type() { border: none; margin-bottom: 0; }
		}
		.post-image { width: 40%; float: right; }
		.post-content-wrapper { width: 60%; float: left; padding: 30px 60px 30px 30px; }
		.post-content { margin-left: 30px; margin-bottom: 30px; 
			p { line-height: 2.1em; }
		}
		.post-content-footer { margin-left: 30px;
			.reda-shares { float: left; }
			.post-btn-more { float: right; }
		}
	}

	.post-image {
		@include breakpoint(medium) {
			a { display: block; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; 
			&.img-bg-loaded {
				span:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; z-index: 1; }
				}
			}
			span { display: block; height: 100%; position: relative; overflow: hidden; background-position: center center; background-size: cover; background-repeat: no-repeat; 
			}
		}
		
		a:hover {
			span:before { opacity: 1; }
			span { transform: scale(1.2); }
		}
	}
}

/**
 *
 * Blog filters
 *
 */
	
.blog-filter-posts { width: 100%; position: relative; 
	i { transform: scale(1) !important; }
	.blog-input-wrapper { position: relative; } 
	.blog-search, .blog-filters-views { float: none; }
	.blog-search { margin-bottom: 15px; }
	.blog-filters-views { 
		.blog-filters, .post-views { margin: 0; display: inline-block; height: 100%; }
		li { list-style-type: none; display: inline-block; margin: 0 10px; padding-bottom: 15px; height: 60px; position: relative; 
			&:after { content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; height: 2px; opacity: 0; transition: opacity .4s, transform .4s; /* background: $accent-color; */ }
			&:hover {
				&:after { opacity: 1; }
			}
			&.active-filter {
				&:after { opacity: 1; }
			}
			a { font-size: 12px; display: block; line-height: 60px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
		}
		.post-views li {
			&:after { bottom: 0; }
			a { font-size: 18px; } 
		}
	}

	&:after { content: ""; position: absolute; bottom: 0; left: 15px; right: 15px; height: 2px; z-index: -1; }
	.search-icon { position: relative; width: 30px; display: inline-block; height: 100%; text-align: center; margin-right: 15px; 
		.search-icon-close { opacity: 0; visibility: hidden; transition: opacity .4s 0s, visibility 0s .4s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		> i { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .4s 0s, visibility 0s 0s; display: inline-block; }
	}
	.search-input { display: inline-block; height: 60px; width: 0; transition: width .4s 0s, visibility 0s .4s; padding: 0; border-bottom-style: solid; border-bottom-width: 2px; visibility: hidden; position: relative;
		input { position: relative; border: none; background: transparent; box-shadow: none; margin-bottom: 0; height: 60px; display: inline-block; padding-right: 30px; font-weight: 500; }
		button { position: absolute; right: 0; height: 60px; width: 30px; bottom: 0; text-align: center; opacity: 0; transition: opacity .4s; cursor: pointer; }
		&:after { display: none; }
	}
	
	.blog-search { width: 100%; 
		&.active-search { 
			.search-icon > i { opacity: 0; visibility: hidden; transition: opacity .4s 0s, visibility 0s .4s; }
			.search-icon .search-icon-close { opacity: .5; visibility: visible; transition: opacity .4s 0s, visibility 0s 0s; 
				&:hover { opacity: 1; }
			}
			.search-input { width: 200px; visibility: visible; transition: width .4s 0s, visibility 0s 0s; 
				button { opacity: .5; 
					&:hover { opacity: 1; }
				}
			}
		}
	}
}

/**
 *
 * Single Post
 *
 */

.single-post {
	.page-bg-color { padding-bottom: 90px; }
	.post-content { padding-bottom: 60px; }
	.post-content p { margin-bottom: 30px; font-size: 16px; line-height: 2.1em; }
	a { color: inherit; }
	// .footer { margin-top: 90px; }
}
.single-post-nav { text-align: center;  width: 100%;
	@include breakpoint(small only) { margin-bottom: 30px; 
		> div { text-align: center; 
			&:last-of-type() { border: none; }
		}
		.previous-post, .next-post, .back-to-blog { text-align: center !important; opacity: 1 !important; align-self: none; padding: 10px 0; margin: 10px 0; border-bottom: 2px solid $light-gray; top: 0; }
		.title, .date { display: none !important}
	}
	@include breakpoint(medium) { margin: 0 auto 90px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid $light-gray; height: 60px; padding-bottom: 5px; }
    .date { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin-bottom: 1px; font-weight: bold; opacity: 0; transition: opacity .4s cubic-bezier(0.77,0,0.175,1); }
    .previous-post { text-align: left; overflow: hidden; flex-grow: 1; flex-basis: 0;
    	@include breakpoint(large) { span, .date { margin-left: 20px; }}
    	i { left: 0; }
    }
    .next-post { text-align: right; overflow: hidden; flex-grow: 1; flex-basis: 0;
    	@include breakpoint(large) { span, .date { margin-right: 20px; }}
    	i { right: 0; }
    }
    .no-active span, .no-active i { opacity: .5 !important; }
    .back-to-blog { text-align: center; overflow: hidden; flex-grow: 1; flex-basis: 0; }
    a { display: block; }
    span { display: block; transition: opacity .4s; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; transition: opacity .4s cubic-bezier(0.77,0,0.175,1); }
    i { display: none; }
    .previous-post a, .next-post a, .back-to-blog a {  transition: transform .4s cubic-bezier(0.77,0,0.175,1); }
    @include breakpoint(large) {
    	.previous-post:hover, .next-post:hover, .back-to-blog:hover { 
	    	a { transform: translateY(18px); }
	    	.date { opacity: 1; }
	    	span:not(.title) { opacity: 0; }
	    	.title { opacity: 1; }
	    }
	    i { position: absolute; font-size: 18px; bottom: 6px; display: block; }
    }
    
    .title { opacity: 0; }
    .close { width: 17px; height: 17px; position: relative; margin: 0 auto; transform: rotate(45deg);
    	&:before { content: ""; position: absolute; width: 100%; height: 1px; top: 50%; margin-top: -1px; left: 0; background: $body-font-color; }
    	&:after { content: ""; position: absolute; height: 100%; width: 1px; top: 0; left: 50%; margin-left: -1px; background: $body-font-color; }
    }
}
.single-post-header { margin-bottom: 60px;
	@include breakpoint(medium down) {
		.post-header { margin-top: 30px; }
	}
	@include breakpoint(large) {
		.post-image ~ .post-header { margin: -60px 30px 30px; }
		.post-header { margin: 0 0 30px; padding: 30px; box-shadow: 0 1px 8px rgba(0,0,0,.2); background: $white; }
	}
}

.post-tags { margin: 30px 0 60px; 
	li { list-style-type: none; display: inline-block; font-size: 12px; padding-right: 20px; position: relative;
		a { font-size: 12px; text-transform: uppercase; display: inline-block; opacity: .7; transition: opacity .4s; 
			&:hover { opacity: 1; }
		}
		&:last-of-type() .el-icon-spacing { display: none; }
		&:first-of-type() { padding-right: 5px; }
		i { font-size: 8px; color: $accent-color; right: 6px; position: absolute; top: 50%; margin-top: -5px;height: 10px; line-height: 10px; }
	}
	.el-icon-spacing { height: 4px; width: 4px; background: $accent-color; display: inline-block; position: absolute; top: 50%; margin-top: -2px; border-radius: 50%; right: 8px; }
}

/**
 *
 * Comments
 *
 */

.post-comments { margin-top: -1px; padding-top: 60px; padding-bottom: 60px; border-top: 3px solid $accent-color; overflow: hidden;
	> h6 { margin-bottom: 30px; }
	> .comment-list { margin: 0; 
		li { list-style-type: none; }
		@include breakpoint(medium down) {
			.comment-list { margin-left: 0; }
		}
		@include breakpoint(large) {
			.comment-list { margin-left: 25px; }
		}

	}
	.comment-list .comment-body { margin-bottom: 30px; 
		ul li { list-style-type: disc; }
		ol li { list-style-type: decimal; }
		p { margin-bottom: 15px; }
	}

	.comment-list { overflow: hidden; clear: both; background: $light-gray; padding: 30px; 
		.comment-form fieldset:after { background: $medium-gray; z-index: 0; }
		> li:last-of-type { margin-bottom: 0 !important; }
		.comment-respond {
			h6 { margin: 30px; margin-bottom: 0; }
		}
	}
	.recentcomments { margin-bottom: 30px; margin-top: 30px; overflow: hidden }
	.comment-author-avatar { float: left; width: 50px; }
	.comment-header { margin-bottom: 15px; 
		.comment-author-link { font-weight: bold; margin-bottom: 3px; }
		.comment-date { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
	}
	.comment-header, .comment-body { margin-left: 80px; }
	.comment-reply-link { text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
}
#recentcomments { margin-bottom: 90px; }

.comment-form { padding: 30px 20px; width: 100%; position: relative; 
	fieldset:after { left: 0; right: 0; }
	.form-submit { margin-bottom: 0; margin-top: 20px; }
	.logged-in-as { position: absolute; top:-30px ; right: 30px; }
}
.btn-comment { display: inline-block; margin: 0 10px; 
	&.button-success { color: #2ec556 !important; 
		.button-border { background: #2ec556; }
	}
}
.comment-respond {
	h6 { margin: 30px 0; }
}

#cancel-comment-reply-link { text-transform: uppercase; font-family: $body-font-family; font-size: 12px; letter-spacing: 3px; }

/**
 *
 * Blog Colors
 *
 */
 
// .blog .post-item { border-color: $light-gray; }
.blog .blog-filter-posts:after { background: $light-gray; }
.blog .blog-filter-posts .blog-filter-views li:after { background: $accent-color; }
.blog .link-hover:after { background: $body-font-color; }
.date { color: $accent-color; }
// .blog .blog-filter-posts .search-input { border-color: $accent-color; }
// .blog .post-date a, .single-post .post-date a, .single-post .post-date span { color: $accent-color; }
.single-post .link-hover:after { background: $body-font-color; }