/*****************************
    Blog
*****************************/

/* blog post */
.blog-post {
	min-height: 220px;
	position: relative;
	transition: all 0.5s ease-in-out;

	.blog-post-info {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		padding: 20px;

		.blog-post-title {
			color: $white;
			transition: all 0.3s ease-in-out;

			&:hover {
				color: $primary;
			}

		}

		.blog-post-category {
			background: $primary;
			padding: 2px 10px;
			border-radius: $border-radius;
			display: inline-block;
			margin-bottom: 10px;

			a {
				color: $white;
				font-size: 13px;
				margin-right: 4px;

				&:last-child {
					margin-right: 0;
				}

			}

		}

	}

}

.blog-post.blog-post-big {
	min-height: auto;
	height: 100%;
}

.blog-post-02 {
	margin-bottom: 40px;

	.blog-post-title {
		margin-top: 10px;
	}

	.blog-post-category {
		margin-top: 20px;
		background: $primary;
		padding: 2px 10px;
		border-radius: $border-radius;
		display: inline-block;
		margin-bottom: 10px;

		a {
			color: $white;
			font-size: 13px;
			margin-right: 4px;

			&:last-child {
				margin-right: 0;
			}

		}

	}

	.blog-post-footer {
		border: 1px solid $border-color;
		padding: 12px 16px;
		display: flex;
		align-items: center;

		.blog-post-time,
		.blog-post-author,
		.blog-post-comment,
		.share-box {
			margin: 0 8px;
		}

		.blog-post-author {
			img {
				margin: 0 5px;
				height: 20px;
				border-radius: 50%;
			}

		}

		span {
			font-size: 13px;
		}

		a {
			font-size: 13px;
			color: $gray-3;

			&:hover {
				color: $primary;
			}

		}

		i {
			padding-right: 5px;
		}

	}

	.share-box {
		.share-box-social {
			background: $secondary;

			li {
				a {
					color: $white;

					&:hover {
						color: $primary;
					}

				}

			}

			&:before {
				border-color: $secondary transparent transparent transparent;
			}

		}

	}

}

.blog-post.blog-post-03 {
	min-height: 450px;
	border-radius: $border-radius;
}

.share-box {
	position: relative;

	.share-box-social {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		left: 50%;
		bottom: 100%;
		display: flex;
		background: $primary;
		padding: 10px;
		transition: all 0.3s ease-in-out;
		border-radius: $border-radius;
		transform: translate(-50%, 0px);

		li {
			a {
				padding: 0 10px;
				color: $white;
				font-size: 13px;
				display: block;

				&:hover {
					color: $gray-8;
				}

			}

		}

		&:before {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 6px 6px 0 6px;
			border-color: $primary transparent transparent transparent;
			content: "";
			position: absolute;
			left: 50%;
			bottom: -6px;
			z-index: 99;
			margin-left: -3px;
		}

	}

	&:hover {
		.share-box-social {
			opacity: 1;
			visibility: visible;
			margin-bottom: 6px;
		}

	}

}

// blog-post-quote
.blog-post-quote {
	.blockquote {
		padding: 30px 30px 0 30px;

		p {
			font-size: 14px;
			font-style: italic;
		}

		i {
			font-size: 30px;
			margin-bottom: 20px;
			color: darken($primary, 10%);
		}

		cite {
			font-size: 15px;
		}

	}

	.blog-post-info {
		padding-left: 34px;
		margin-bottom: 20px;
	}

	.blog-post-link {
		a {
			color: $white;

			&:hover {
				color: $gray-8;
			}

		}

	}

	.blog-post-content {
		.blog-post-footer {
			padding-left: 30px;
			border-color: darken($primary, 7%);

			a {
				color: $white;
				transition: all 0.3s ease-in-out;

				i {
					transition: all 0.3s ease-in-out;
				}

				&:hover {
					color: $gray-8;

					i {
						color: $gray-8;
					}

				}

			}

			span {
				color: $white;
			}

		}

	}

	.share-box {
		.share-box-social {
			background: $secondary;

			li {
				a {
					color: $gray-8;

					&:hover {
						color: $primary;
					}

				}

			}

			&:before {
				border-color: $secondary transparent transparent transparent;
			}

		}

	}

}

/* Blog sidebar */

.blog-sidebar {
	.widget {
		margin-bottom: 30px;

		&:last-child {
			margin-bottom: 0;
		}

		.widget-title {
			margin-bottom: 0;
		}

		.search {
			position: relative;

			input {
				padding-right: 64px;
				height: 50px;
				padding-left: 20px;
			}

			i {
				position: absolute;
				right: 0;
				top: 0;
				background: $primary;
				color: $white;
				padding: 18px 20px;
				cursor: pointer;
				margin: 0;
				border-radius: 0 $border-radius $border-radius 0px;
			}

		}

		ul.list-style {
			li {
				margin-bottom: 10px;

				a {
					display: flex;
					color: $gray-3;
					width: 100%;

					&:hover {
						color: $primary;
					}

				}

				&:last-child {
					margin-bottom: 0;
				}

			}

		}

		.gallery {
			ul {
				display: flex;
				flex-wrap: wrap;

				li {
					flex: 0 0 19%;
					margin: 0 1% 1% 0;

					&:nth-child(5n+5) {
						margin-right: 0;
					}

				}

			}

		}

		.social {
			ul {
				li {
					padding: 10px 10px 10px 20px;
					border: 1px solid $border-color;
					display: flex;
					margin-bottom: 10px;
					align-items: center;

					a {
						color: $gray-8;
						text-transform: capitalize;

						i {
							width: 15px;
						}

					}

					.follow {
						background: $gray-1;
						padding: 3px 18px;
						font-size: 12px;
						border-radius: $border-radius;

						&:hover {
							background: $gray-8;
							color: $white;
						}

					}

					&:last-child {
						margin-bottom: 0;
					}

				}

				.facebook {
					a {
						color: #466ca9;
					}

					.follow {
						&:hover {
							background: #466ca9;
						}

					}

				}

				.twitter {
					a {
						color: #20b5e6;
					}

					.follow {
						&:hover {
							background: #20b5e6;
						}

					}

				}

				.youtube {
					a {
						color: #d92c20;
					}

					.follow {
						&:hover {
							background: #d92c20;
						}

					}

				}

				.linkedIn {
					a {
						color: #13799f;
					}

					.follow {
						&:hover {
							background: #13799f;
						}

					}

				}

			}

		}

		.popular-tag {
			ul {
				li {
					display: inline-block;
					margin-bottom: 4px;

					a {
						padding: 6px 20px;
						display: block;
						border: 1px solid $border-color;
						color: $gray-3;

						&:hover {
							color: $primary;
							border-color: $primary;
						}

					}

				}

			}

		}

	}

}

/* Blog detail */

.blog-detail {
	.blog-post-content {
		text-align: left;
	}

}

.navigation {
	.nav-links {
		display: flex;

		.nav-previous {
			width: 50%;
			border: 1px solid $border-color;
			margin-right: 30px;
			transition: all 0.5s ease-in-out;

			a {
				display: flex;
				color: $gray-3;

				&:hover {
					.pagi-text {
						color: $white;
						background: $primary;
					}

				}

			}

			.nav-title {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.pagi-text {
				border-right: 1px solid $border-color;
				transition: all 0.5s ease-in-out;
			}

			&:hover {
				background: $gray-1;
			}

		}

		.nav-next {
			width: 50%;
			border: 1px solid $border-color;
			margin-right: 30px;
			margin-right: 0;
			text-align: right;
			transition: all 0.5s ease-in-out;

			a {
				display: flex;
				color: $gray-3;
				padding-left: 15px;

				&:hover {
					.pagi-text {
						color: $white;
						background: $primary;
					}

				}

			}

			.nav-title {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				margin-left: auto;
			}

			.pagi-text {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				border-left: 1px solid $border-color;
			}

			&:hover {
				background: $gray-1;
			}

		}

		.pagi-text {
			display: inline-block;
			padding: 12px 25px;
			color: $gray-3;
			transition: all 0.5s ease-in-out;
		}

		.nav-title {
			margin: 12px 20px;
		}

	}

}

@media (max-width:991px) {
	.share-box .share-box-social {
		left: -50px;
	}

	.share-box .share-box-social:before {
		left: 75%;
	}

}

@media (max-width:575px) {
	.navigation .nav-links {
		display: block;
	}

	.navigation .nav-links .nav-previous {
		width: 100%;
		margin-bottom: 6px;
	}

	.navigation .nav-links .nav-next {
		width: 100%;
	}

}
