/* -----------------------------------------------------
    single blog style
----------------------------------------------------- */
.single-blog {
	margin-bottom: 30px;
	border-radius: 10px;
	.thumb {
		position: relative;
		img {
			border-radius: 10px;
		}
		.tag {
			position: absolute;
			left:20px;
			top: 21px;
		}
	}
	.single-blog-details {
		padding: 20px 0 10px 0;
		.title {
			margin-bottom: 20px;
			font-weight: 700;
		}
		.content {
			margin-bottom: 13px;
		}
		.btn {
			margin-top: 13px;
		}
	} 
	.tag {
		background: $green;
		padding: 0 6px 0 7px;
		height: 25px;
		line-height: 25px;
		color: $white;
		font-size: 14px;
		border-radius: 2px;
	}
	.author {
		color: #01B9B7;
		font-weight: 500;
		margin-bottom: 0;
		position: relative;
		padding-top: 15px;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 10px;
			height: 1px;
			width: 30px;
			background: var(--main-color-one);
		}
	}
	&.sticky {
		background: $gray;
		padding: 30px;
		.single-blog-details {
			padding: 0;
		}
	}
	&.style-two {
		.single-blog-details {
			padding: 20px 30px;
		}
	}
	&.style-three {
		position: relative;
	    overflow: hidden;
		.thumb {
			position: relative;
			img {
				@include transition(all, 0.4s,ease);
			}
			&:after {
			    content: '';
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 0;
				bottom: 0;
			    width: 100%;
				height: 100%;
				background: var(--main-color-two);
		    	z-index: 0;
		    	opacity: 0.6;
		    	border-radius: 10px;
			}
		}
		.single-blog-details-wrap {
			position: absolute;
		    left: 0;
		    right: 0;
		    top: 50%;
		    transform: translateY(-50%);
		    margin-top: 40px;
		    z-index: 2;
		    overflow: hidden;
			@include transition(all, 0.6s, ease);
		    .single-blog-details {
		    	padding: 20px 25px;
		    }
		    .title,
			p {
				color: $white;
			}
			.title {
				margin-bottom: 0;
			}
			.btn {
				visibility: hidden;
				opacity: 0;
				margin-top: 22px;
				height: 49px;
				line-height: 49px;
				@include transition(all, 0.4s, ease);
			}
		}
		&:hover {
			.single-blog-details-wrap {
				margin-top: 0px;
				.btn {
					visibility: visible;
					opacity: 1;
				}
			}
			.thumb {
				img {
					filter: blur(2px);
				}
			}
		}
	}
	&.style-four{
		position: relative;
		padding: 20px 0; 
		box-shadow: none;
		margin: 0 15px;

	 	.single-blog-details {
		    padding: 20px 30px;
		}
		&:after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 82%;
			border: 1px solid var(--main-color-one);
			z-index: -1;
		}
	}
}


.single-blog-wrap {
	display: flex;
    align-items: center;
    box-shadow: 0px 0px 12px #071C551F;
    .single-blog-left-wrap {
	    width: 46%;
	    display: table-cell;
	    float: none;
	    position: relative;
	    img {
    	    height: fit-content;
	    }
    }
    .single-blog-right-wrap {
	    width: 56%;
	    display: table-cell;
	    float: none;
	    height: auto;
	    overflow: hidden;
    }
}



/* -----------------------------------------------------
    blog details style
----------------------------------------------------- */
.tp-blockquote {
	padding: 40px 20px 35px 90px;
	position: relative;
	border-radius: 10px;
	margin: 13px 0 20px 0;
	p {
		color: $white;
		font-weight: 200;
		font-size: 16px;
	}
	&:after {
		content: '\f10d';
		position: absolute;
	    font-size: 40px;
		left: 38px;
		top: 30px;
		font-family: FontAwesome;
		color: var(--main-color-one);
	}
}
.single-blog-post-tags {
	.all-tags-title {
		min-width: 115px;
	}
	a {
		background: $green;
		padding: 0 6px 0 7px;
		height: 25px;
		line-height: 25px;
		color: $white;
		font-size: 14px;
		border-radius: 2px;
		margin-left: 10px;
	}
}

.single-post-navigation {
	.nav-previous {
		border: 1px solid #CFD3DE;
		border-radius: 10px;
		padding: 30px;
		@include transition(all, 0.4s, ease);
		h4 {
			padding-left: 64px;
			font-weight: 700;
			margin-top: 20px;
			line-height: 34px;
		}
		&:hover {
			background: #F8F8F8;
			.slick-arrow {
				border: 3px solid var(--main-color-one);

				border: 3px solid var(--main-color-one);
				color: var(--main-color-one);
			}
		}
	}
	.nav-next {
		border: 1px solid #CFD3DE;
		border-radius: 10px;
		padding: 30px;
		@include transition(all, 0.4s, ease);
		h4 {
			padding-right: 66px;
			font-weight: 700;
			margin-top: 20px;
			line-height: 34px;
		}
		&:hover {
			background: #F8F8F8;
			.slick-arrow {
				border: 3px solid var(--main-color-one);

				border: 3px solid var(--main-color-one);
				color: var(--main-color-one);
			}
		}
	}
	.slick-arrow {
		border: 3px solid #CFD3DE;
		color: #CFD3DE;
	}
	.nav-post-text {
		line-height: 56px;
	}
}
.author-area {
	background: $gray;
	padding: 50px 60px;
	border-radius: 10px;
	.media-left {
		img {
			height: 100px;
			width: 100px;
			border-radius: 50%;
			border: 2px solid #01B9B7;
		}
	}
	.media-body {
		margin-left: 30px;
		h4 {
			font-family: var(--body-font);
			margin-bottom: 30px;
		}
		p {
			margin-bottom: 30px;
		}
	}
}