@import "../../../../less/mixins.less";
@import "../../../../less/variable.less";
// Home 1
.recent-news-home_1 {
    .recent-news-container {
	.hide_content {
	    display: none !important;
	}
	article {
	    margin-bottom: 20px;
	    .recent_news_item {
		position: relative;
		display: table;
	    }

	    .post-thumbnail {
		width: 30%;
		position: relative;
		overflow: hidden;
		display: table-cell;
		.post-image {
		    img {
			width: 100%;
			height: 62px;
			.transition(all 0.35s ease-in-out);
		    }
		    @media (min-width: 992px) and (max-width: 1199px) {
			height: auto;
		    }
		    @media (max-width: 479px) {
			height: auto;
		    }
		}
	    }

	    .post-content {
		display: table-cell;
		z-index: 2;
		width: 65%;
		padding-left: 5%;
		vertical-align: middle;
		.entry-title {
		    margin-top: 0px;
		    margin-bottom: 0px;
		    font-size: 16px;
		    font-weight: bold;
		    a {
			font-weight: 600;
			font-size: 14px;
			line-height: 24px;
			color: #fff !important;
			.transition(all 0.35s ease);
			&:hover {
			    color: @primary_color !important;
			}
			@media (max-width: 479px) {
			    font-size: 18px;
			}
		    }
		}
		.post-info {
		    margin-bottom: 0px;
		    color: #e5e5e5;
		    font-size: 14px;
		    line-height: 26px;
		    font-style: italic;
		    a {
			color: @primary_color;
		    }
		    i {
			color: @secondary_color;
			margin-right: 5px;
		    }
		    .post-count-comments {

		    }
		    span {
			padding-right: 10px;
		    }
		}
		.post-excerpt {
		    color: fade(@black, 75%);
		}
		@media (min-width: 992px) and (max-width: 1199px) {
		    width: 100%;
		    position: relative;
		}
		@media (max-width: 479px) {
		    width: 100%;
		    position: relative;
		    padding: 15px;
		}
	    }
	}
    }
    .recent-news-control {
	.recent-news-nav {
	    cursor: pointer;
	    position: absolute;
	    top: 50%;
	    z-index: 99;
	    .translateY(-50%);
	    .box-shadow(1px 1px 1px 1px rgba(0, 0, 0, 0.1));
	    i {
		padding: 15px;
		background-color: @white;
	    }
	    &.nav_next {
		right: 0;
	    }
	    &.nav_prev {
		left: 0;
	    }
	}
    }

}

// Home 2
.recent-news-home_2 {
    .recent-news-container {
	article {
	    box-sizing: border-box;
	    margin: 15px 0;
	    position: relative;
	    border: 1px solid transparent;
	    .post-thumbnail {
		position: relative;
		.post-image {
		    position: relative;
		    .transition(all 0.35s ease-in-out);
		    &:before {
			content: '';
			position: absolute;
			background-color: fade(@black, 35%);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			opacity: 0;
			.transition(all 0.35s ease-in-out);
		    }
		    img {
			width: 100%;
		    }
		}
		.post-content {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    top: 0;
		    left: 0;
		    padding: 40px;
		    overflow: hidden;
		    .entry-title {
			margin: 10px 0 5px 0;
			font-size: 18px;
			text-transform: uppercase;
			color: @white;
			.translateX(-100%);
			.transition(all 0.35s ease-in-out);
			@media (max-width: 479px) {
			    font-size: 14px;
			}
		    }
		    .post-info {
			opacity: 0;
			font-size: 12px;
			text-transform: uppercase;
			color: @primary_color;
			.translateX(50%);
			.transition(all 0.45s ease-in-out);
			.post-category {
			    display: inline-block;
			    ul {
				list-style: none;
				padding: 0;
				display: inline-block;
				padding-right: 10px;
				position: relative;
				&:after {
				    content: '/';
				    position: absolute;
				    right: 0;
				    top: 0;
				    font-size: 12px;
				    color: @primary_color;
				    display: inline-block;
				}
			    }
			}
			.post-author {
			    padding-left: 5px;
			}
		    }
		    .btn-readmore {
			i {
			    opacity: 0;
			    position: absolute;
			    left: 50%;
			    top: 70%;
			    .translate(-50%, 0%);
			    background-color: fade(@black, 35%);
			    height: 60px;
			    width: 60px;
			    border-radius: 100%;
			    line-height: 58px;
			    text-align: center;
			    color: @white;
			    font-size: 18px;
			    .transition(all 0.5s ease-in-out);
			    border: 1px solid transparent;
			    &:hover {
				color: @primary_color;
				border: 1px solid @primary_color;
				background-color: transparent;
			    }
			}
		    }
		    @media (max-width: 479px) {
			padding: 20px;
		    }
		}
	    }
	    &:hover {
		.post-thumbnail {
		    border: 1px solid @border_color;
		    .post-content {
			.entry-title, .post-info {
			    .translateX(0);
			    opacity: 1;
			}
			.btn-readmore {
			    i {
				opacity: 1;
				top: 50%;
				.translate(-50%, -50%);
				@media (max-width: 479px) {
				    top: 70%;
				}
			    }
			}
		    }
		    .post-image {
			.scale(0.95);
			&:before {
			    opacity: 1;
			}
			img {
			    //.scale(0.95);
			}
		    }
		}
	    }
	}
    }
}