/*--------------------------------------------------------------
	#home-default
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#1.1	trending-articles-section
--------------------------------------------------------------*/
.trending-articles-section {
	padding-bottom: 70px;

	@include media-query(991px) {
		padding-bottom: 50px;
	}

	.trending-articles-grids {
		margin: 0 -15px;

		.grid {
			width: calc(33.33% - 30px);
			float: left;
			margin: 0 15px 50px;

			@include media-query(991px) {
				width: calc(50% - 30px);
			}

			@include media-query(650px) {
				width: calc(100% - 30px);
				float: none;
			}
		}
	}

	.entry-media {
		position: relative;

		button {
			background: $white;
			font-size: 12px;
			font-weight: 500;
			display: inline-block;
			padding: 7px 20px;
			border: 0;
			outline: 0;
			position: absolute;
			left: 30px;
			bottom: -15px;
			border-radius: 50px;
			box-shadow: 0 3px 3px transparentize($black, 0.87);
		}
	}

	.entry-details {
		padding: 50px 30px 30px 30px;
		box-shadow: 5px 5px 15px transparentize($black, 0.93);

		@include media-query(767px) {
			padding: 40px 20px 30px 20px;
		}

		h4 {
			font-size: 22px;
			font-weight: 600;
			margin: 0.4em 0 0.7em;

			@include media-query(1199px) {
				font-size: 20px;
			}
		}

		h4 a {
			color: $heading-color;
		}

		ul {
			overflow: hidden;

			li {
				font-size: 13px;
				text-transform: uppercase;
				float: left;
			}

			> li + li {
				margin-left: 15px;
			}

			a {
				color: #9a9a9a;
			}
		}

		a:hover {
			color: $theme-primary-color;
		}
	}

	.author {
		font-size: 13px;
		color: $text-color;
		text-transform: uppercase;

		a {
			color: $heading-color;
		}
	}
}



/*--------------------------------------------------------------
#1.2	recent-videos-section
--------------------------------------------------------------*/
.recent-videos-section {
	padding-top: 0;

	.left-post {
		text-align: center;

		.entry-media {
			position: relative;

			button {
				background: $white;
				font-size: 12px;
				font-weight: 500;
				display: inline-block;
				padding: 7px 20px;
				border: 0;
				outline: 0;
				position: absolute;
				left: 50%;
				bottom: -15px;
				border-radius: 50px;
				box-shadow: 0 3px 3px transparentize($black, 0.87);
				@include translatingX();
			}

			.video-btn {
				position: absolute;
				left: calc(50% - 35px);
				top: calc(50% - 35px);
			}
		}

		.entry-details {
			padding: 40px 60px 40px 60px;
			box-shadow: 5px 5px 15px transparentize($black, 0.93);

			@include media-query(767px) {
				padding: 40px 20px 30px 20px;
			}

			h4 {
				font-size: 28px;
				font-weight: 600;
				line-height: 1.3em;
				margin: 0.4em 0 0.7em;

				@include media-query(991px) {
					font-size: 24px;
				}

				@include media-query(767px) {
					font-size: 22px;
				}
			}

			h4 a {
				color: $heading-color;
			}

			ul {
				overflow: hidden;
				display: inline-block;

				li {
					font-size: 13px;
					text-transform: uppercase;
					float: left;
					position: relative;
				}

				> li + li {
					margin-left: 30px;

					&:before {
						content: "";
						background: #9a9a9a;
						width: 5px;
						height: 5px;
						position: absolute;
						left: -15px;
						top: 6px;
						border-radius: 50%;
					}
				}

				a {
					color: #9a9a9a;
				}
			}

			a:hover {
				color: $theme-primary-color;
			}
		}

		.author {
			font-size: 13px;
			color: $text-color;
			text-transform: uppercase;

			a {
				color: $heading-color;
			}
		}
	}

	.right-post {

		@include media-query(1199px) {
			margin-top: 60px;
		}

		> .post + .post {
			margin-top: 37px;
		}

		.post {
			position: relative;
			overflow: hidden;
		}

		.entry-media {
			max-width: 250px;
			position: relative;
			float: left;

			@include media-query(550px) {
				float: none;
			}

			svg {
				position: absolute;
				left: calc(50% - 35px);
				top: calc(50% - 35px);
			}
		}

		.entry-details {
			width: calc(100% - 250px);
			position: absolute;
			left: 250px;
			top: 50%;
			transform: translateY(-50%);
			padding: 0 0 0 30px;

			@include media-query(550px) {
				width: 100%;
				padding: 20px 0 0 0;
				float: none;
				position: static;
				-webkit-transform: none;
				-moz-transform: none;
				-o-transform: none;
				-ms-transform: none;
				transform: none;
			}

			h4 {
				font-size: 18px;
				font-weight: 600;
				line-height: 1.3em;
				margin: 0.4em 0 0.7em;

				@include media-query(767px) {
					font-size: 16px;
				}
			}

			h4 a {
				color: $heading-color;
			}

			ul {
				overflow: hidden;
				border-top: 1px solid #E8E8E8;
				padding-top: 15px;

				li {
					font-size: 13px;
					text-transform: uppercase;
					float: left;
					position: relative;
				}

				> li + li {
					margin-left: 30px;

					&:before {
						content: "";
						background: #9a9a9a;
						width: 5px;
						height: 5px;
						position: absolute;
						left: -15px;
						top: 6px;
						border-radius: 50%;
					}
				}

				a {
					color: #9a9a9a;
				}
			}

			a:hover {
				color: $theme-primary-color;
			}
		}

		.author {
			font-size: 12px;
			color: $text-color;
			text-transform: uppercase;

			a {
				color: $heading-color;
			}
		}
	}
}



/*--------------------------------------------------------------
#1.3	featured-articles 
--------------------------------------------------------------*/
.featured-articles {
	padding-top: 0;

		.posts > .post + .post {
			margin-top: 37px;
		}

		.post {
			position: relative;
			overflow: hidden;
		}

	.entry-media {
		max-width: 475px;
		position: relative;
		float: left;

		@include media-query(991px) {
			max-width: 375px;
		}

		@include media-query(650px) {
			float: none;
		}

		svg {
			position: absolute;
			left: calc(50% - 35px);
			top: calc(50% - 35px);
		}
	}

	.entry-details {
		width: calc(100% - 475px);
		position: absolute;
		left: 475px;
		top: 50%;
		transform: translateY(-50%);
		padding: 0 0 0 30px;

		@include media-query(991px) {
			width: calc(100% - 375px);
			left: 375px;
		}

		@include media-query(650px) {
			width: 100%;
			padding: 20px 0 0 0;
			float: none;
			position: static;
			-webkit-transform: none;
			-moz-transform: none;
			-o-transform: none;
			-ms-transform: none;
			transform: none;
		}

		h4 {
			font-size: 26px;
			font-weight: 600;
			line-height: 1.3em;
			margin: 0.4em 0 0.7em;

			@include media-query(991px) {
				font-size: 20px;
			}
		}

		h4 a {
			color: $heading-color;
		}

		ul {
			overflow: hidden;
			margin-bottom: 15px;

			li {
				font-size: 13px;
				text-transform: uppercase;
				float: left;
				position: relative;
			}

			> li + li {
				margin-left: 30px;

				&:before {
					content: "";
					background: #9a9a9a;
					width: 5px;
					height: 5px;
					position: absolute;
					left: -15px;
					top: 6px;
					border-radius: 50%;
				}
			}

			a {
				color: #9a9a9a;
			}
		}

		p {
			margin-bottom: 1em;
		}

		a.read-more {
			font-size: 14px;
			font-weight: 500;
			color: $heading-color;
			text-decoration: underline;
			text-transform: capitalize;
		}

		a:hover {
			color: $theme-primary-color;
		}
	}

	.author {
		font-size: 12px;
		color: $text-color;
		text-transform: uppercase;

		a {
			color: $heading-color;
		}
	}
}



/*--------------------------------------------------------------
#1.4	newsletter-section
--------------------------------------------------------------*/
.newsletter-section {
	.newsletter-area {
		background: #F8F7F5;
		padding: 70px;


		@include media-query(991px) {
			text-align: center;
			padding: 60px 50px;
		}

		@include media-query(550px) {
			padding: 50px 15px;
		}


		.text {
			width: 480px;
			float: left;

			@include media-query(1199px) {
				width: 380px;
			}

			@include media-query(991px) {
				width: 100%;
				float: none;
			}

			h3 {
				font-size: 25px;
				font-weight: 600;
				margin: 0 0 0.3em;

				@include media-query(767px) {
					font-size: 22px;
					font-size: calc-rem-value(22);
				}
			}

			p {
				font-size: 14px;
				margin: 0;
			}
		}

		form {
			width: calc(100% - 480px);
			float: right;
			padding-left: 200px;
			position: relative;

			@include media-query(1450px) {
				padding-left: 50px;
			}

			@include media-query(1199px) {
				width: calc(100% - 380px);
			}


			@include media-query(991px) {
				width: 100%;
				float: none;
				margin-top: 25px;
				padding-left: 0;
			}

			input {
				background-color: $white;
				height: 65px;
				color: $text-color;
				padding: 6px 20px;
				border-radius: 0;
				border: 1px solid transparentize($black, 0.7);
				box-shadow: none;

				@include media-query(550px) {
					height: 55px;
				}
			}

			button {
				background-color: #444;
				height: 55px;
				font-size: 14px;
				font-weight: 500;
				color: $white;
				padding: 15px 30px;
				text-transform: uppercase;
				position: absolute;
				right: 5px;
				top: 5px;
				border: 0;
				border-radius: 0;
				outline: 0;

				@include media-query(550px) {
					height: 45px;
					padding: 10px 15px;
				}
			}
		}
	}
}


/*--------------------------------------------------------------
#1.5	instagram-section
--------------------------------------------------------------*/
.instagram-section {
	margin: 120px 0;

	@include media-query(991px) {
		margin: 100px 0;
	}

	@include media-query(767px) {
		margin: 80px 0;
	}
	
	@include widther(992px) {
		padding: 0 100px;
	}

	.instagram-inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.instagram-text {
		background-color: $white;
		padding: 25px;
		text-align: center;
		position: absolute;
		top: 50%;
		@include translatingY();

		@include media-query(991px) {
			padding: 20px;
		}
	}

	h3 {
		font-size: 16px;
		font-size: calc-rem-value(16);
		margin: 0;
	}

	p {
		font-size: 13px;
		margin: 0;
	}

	.instagram-grids {
		> .grid {
			width: 16.66%;
			float: left;

			@include media-query(767px) {
				width: 33.33%;
			}
		}
	}
}