//Blog Page Style

.left-sidebar{
	.search-widget {
    position: relative;
}
	& input {
	    width: 100%;
	    border: 1px solid#ebebeb;
	    height: 45px;
	    padding: 0 55px 0 20px;
	    border-radius: 5px;
	    @media #{$desktop-device}{
		           font-size:12px;
		           padding-left:10px;
		        }
	}
		& button {
	    position: absolute;
	    width: 50px;
	    height: 45px;
	    left: auto;
	    right: 0;
	    font-size: 20px;
	    line-height: 45px;
	    text-align: center;
	    border-radius: 0px 5px 5px 0px;
	    background-color:$theme-color;
	    color:#fff;
	    &:hover{
	    	background-color:#1d1d1d;
	    }
	}
	.category-post{
		& li{
			margin-bottom: 5px;
			display:block;
			& a{
				color: #888;
				line-height:24px;
				&:hover{
					color: $theme-color;
				}
			}
			&:last-child{
				margin:0;
			}
		}
	}
	.recent-post-widget{

		.recent-single-post {
		    margin: 0 0 30px;

		    .thumb-side img {
			    width: 90px;
			    height: 90px;
			    object-fit: cover;
			    object-position: center;
			}
			.media-side {
			    margin: 0 0 0 18px;
			    align-self: center;
			    align-items: center;
			    line-height:24px;

			    a {
				    font-size: 14px;
				    color: #1d1d1d;
				    font-weight: 600;
				    &:hover{
						color: $theme-color;
				    }
				}
			}
		}
	}
}
.single-blog-post{
	line-height:24px;
	.blog-post-media {
	    overflow: hidden;
	    .blog-image {
		    	img {
			    width: 100%;
			    object-fit: cover;
			    object-position: center;
			}
	    }
	    iframe {
		    width: 100%;
		    position: relative;
		}
	}
	.slick-slide{
		&:focus{
		outline:0px none;
		}
	}
}
.single-blog-post{
	&.blog-list-post{
		.blog-post-media{
			.blog-image {
				img{
					height:300px
				}
			}
		    iframe {
			    width: 100%;
			    position: relative;
			    height:300px;
			}
			.blog-gallery {
				.swiper-slide {
					img {
					    width: 100%;
					    height: 300px;
					    object-fit: cover;
					    object-position: center;
					}
				}
			}
		}
	}
}

	.blog-post-content-inner{
		.blog-title {
			a {
			    font-size: 24px;
			    font-weight: 600;
			    color: #1d1d1d;
			    &:hover{
			    	color:$theme-color;
			    }

		        @media #{$desktop-device}{
		           font-size:20px;
		        }
		        @media #{$tablet-device}{
		           font-size:20px;
		        }
		        @media #{$extra-small-mobile}{
		           font-size:20px;
		        }
			}
		}
		.blog-page-meta {
		    margin: 10px 0;
		    li{
		        display: inline-block;
    			position: relative;
			    &:first-child {
				    margin-right: 15px;
				}
				&:first-child:after {
				    position: absolute;
				    top: 50%;
				    right: -9px;
				    left: auto;
				    background: #555;
				    content: '';
				    width: 1px;
				    height: 12px;
				    margin-top: -6px;
				}
				& a {
				    display: block;
				    color: #1d1d1d;
				    &:hover{
			    		color: $theme-color;
				    }
				}
		    }
		}
		p {
		    margin: 20px 0;
		    padding-top: 20px;
		    border-top: 1px solid#ebebeb;
		    color: #1d1d1d;
		    line-height:24px;
		}
		.read-more-btn {
		    color: #1d1d1d;
		    font-size: 14px;
		    text-transform: capitalize;
		    line-height: 1;
		    position: relative;
		    display: inline-block;
		    i {
			    color: $theme-color;
			    font-size: 16px;
			    -webkit-transition: all 300ms linear;
			    -moz-transition: all 300ms linear;
			    -ms-transition: all 300ms linear;
			    -o-transition: all 300ms linear;
			    transition: all 300ms linear;
			    transform: translate(2px,2px);
			    display: inline-block;
			}
			&:hover{
				padding-left:10px;
			    color: $theme-color;
			}
		}
	}

.single-post-content {
		p {
	    margin: 20px 0;
	    color: #1d1d1d;
	    line-height: 24px;
	}
		p{
			&.quate-speech {
		    margin-left: 100px;
		    padding: 10px 15px;
		    font-size: 16px;
		    line-height: 26px;
		    font-style: italic;
		    border-left: 3px solid$theme-color;
		     @media #{$large-mobile}{
		           margin-left: 50px;
		        }
			}
		}
}
.blog-single-tags-share {
    margin-bottom: 35px;
    line-height: 24px;
	    span{
		   &.title {
		    font-weight: 700;
		    color: #1d1d1d;
		}
    }
    .tag-list {
		    li {
		    display: inline-block;
		    margin-left: 5px;
		    color: #1d1d1d;
		    a {
			    color: #1d1d1d;
			    &:hover{
			    	color:$theme-color;
			    }
			}
		}
    }
    .social {
		   li {
		    display: inline-block;
		    margin-left: 10px;
		    font-size: 16px;
		    color: #1d1d1d;
		    a{
		    	color: #1d1d1d;
		    	&:hover{
			    	color:$theme-color;
		    	}
		    }
		}
    }
}

.blog-related-post {
    padding: 40px 0 30px 0;
    border-top: 1px solid#ebebeb;
    border-bottom: 1px solid#ebebeb;
    .section-title {
	    border-bottom: 0px solid #ebebeb;
	    margin-bottom: 30px;
	    h2{
		    &:before {
			    content: "";
			    position: absolute;
			    left: 50%;
			    margin-left:-25px;
			    height: 2px;
			    bottom: -1px;
			    background: #146cda;
			    width:50px;
			}
	    }
	}
	.blog-title {
		a {
		    font-size: 20px;
		     @media #{$desktop-device}{
		           font-size:15px;
		        }
		     @media #{$tablet-device}{
		           font-size:15px;
		        }
		     @media #{$large-mobile}{
		           font-size:20px;
		        }
		}
	}
}

.comment-area {
line-height:24px;
    margin-top: 35px;
    h2{
	    &.comment-heading {
		    font-family: "Open Sans",sans-serif;
		    font-size: 24px;
		    color: #1d1d1d;
		    text-transform: capitalize;
		    line-height: 16px;
		    font-weight: 600;
		    margin: 0 0 40px;
		}
    }
    .single-review {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    margin: 0 0 50px;
		     @media #{$large-mobile}{
		           display: block;
		        }
	    .review-img {
		    -webkit-box-flex: 0;
		    -ms-flex: 0 0 90px;
		    flex: 0 0 90px;
		    margin: 0 15px 0 0;
		    @media #{$large-mobile}{
		    	margin: 0 0 20px 0;
		    }
		}
		.review-content {
		    padding: 30px;
		    border: 1px solid #ebebeb;
		    border-radius:5px;
		    .review-top-wrap {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			    justify-content: space-between;
			    margin: 0 0 10px;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			    .review-left {
				    display: -webkit-box;
				    display: -ms-flexbox;
				    display: flex;
				    .review-name h4 {
					    font-weight: 600;
					    color: #1d1d1d;
					}
					a {
					    color: #1d1d1d;
					    &:hover{
					    	color:$theme-color;
					    }
					}
				}
			}
			 p {
			    margin: 0;
			    width: 93%;
			    @media #{$extra-small-mobile}{
			    	width:100%;
			    }
			}
		}
		&.child-review {
		    margin-left: 70px;
		    @media #{$large-mobile}{
		    	margin-left: 0px;
		    }
		}
	}
}
.blog-comment-form{
	line-height:24px;
	h2{
		&.comment-heading {
		    font-family: "Open Sans",sans-serif;
		    font-size: 24px;
		    color: #1d1d1d;
		    text-transform: capitalize;
		    line-height: 16px;
		    font-weight: 600;
		    margin: 0 0 10px;
		}
	}
	p {
	    margin: 0 0 30px;
	}
	.single-form{
		input, textarea{
		padding: 2px 10px 2px 20px;
	    background: transparent;
	    border: 1px solid #e6e6e6;
	    color: #333;
		border-radius: 5px;
		}
		textarea {
		    height: 180px;
		    padding: 20px 10px 2px 20px;
		    margin-bottom: 20px;
		    width: 100%;
		    outline: none;
		}
		input {
		    height: 45px;
		    -webkit-box-shadow: none;
		    box-shadow: none;
		    padding-left: 10px;
		    font-size: 14px;
		    color: #253237;
		    width: 100%;
		    margin-bottom: 15px;
		    outline: none;
		}
		input{
			&.submit{
			padding: 0 55px!important;
		    line-height: 48px;
		    height: 48px;
		    font-size: 16px;
		    font-weight: 700;
		    border: none;
		    border-radius: 5px;
		    box-shadow: none;
		    text-transform: uppercase;
		    background: $theme-color!important;
		    display: block;
		    color: #fff!important;
		    width: 200px;
		    -webkit-transition: all 300ms linear;
		    -moz-transition: all 300ms linear;
		    -ms-transition: all 300ms linear;
		    -o-transition: all 300ms linear;
		    transition: all 300ms linear;
		    margin: 20px 0px 0px 0px;
			    &:hover{
			    	background-color:#1d1d1d!important;
			    }
			}
		}
	} 
}