//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables


body {
	background-color: $white;
}
/*
    ============================
            Header Wrapper
    ============================
*/
#headerWrapper {
	background-color: $white;
	padding: 63px $p-20 $p-0;
	h1 {
		font-weight: 600;
		color: $color_57;
		font-size: 40px;
		position: $pos-rel;
		&:before {
			position: $pos-abs;
			content: 'The';
			font-size: 12px;
			left: 0;
			right: 78px;
			transform: rotate(270deg);
			top: 0;
			bottom: 0;
		}
	}
}

/*      
    =======================
            NavBar
    =======================
*/
nav.navbar {
	padding: 25px $p-20 25px;
	box-shadow: none;
	background-color: $color_none !important;
	border-bottom: none !important;
	div.navbar-collapse {
		.navbar-nav {
			a {
				color: $additional-color-11;
				&:hover {
					color: $color_38;
				}
			}
			a.active {
				color: $color_56;
				font-weight: 600;
			}
		}
	}
}
.navbar-toggler-icon {
	&:before {
		font-family: $font_family_1;
		content: '\e96d';
		font-weight: 600;
		font-size: 22px;
	}
}
/*      
    =========================
            Search Bar
    =========================
*/
#searchWrapper {
	padding: $p-0 $p-20 $p-50;
	background-color: $white;
	form {
		position: $pos-rel;
		width: 200px;
		.form-group {
			&:before {
				font-family: $font_family_1;
				content: '\f169';
				position: $pos-abs;
				top: 10px;
				left: 11px;
			}
			input {
				border-radius: 20px;
				padding-left: $p-30;
				&::-webkit-input-placeholder {
					color: $color_38;
				}
				&::-moz-placeholder {
					color: $color_38;
				}
				&:-ms-input-placeholder {
					color: $color_38;
				}
				&:-moz-placeholder {
					color: $color_38;
				}
			}
		}
	}
}

/*      
    =======================
          Latest Posts
    =======================
*/
#latestPostsWrapper {
	padding: $p-20 $p-20 $p-60;
	margin: 45px $m-0 $m-0 $m-0;
	>.container {
		padding-top: $p-20;
		border-top: $b-width-1 $solid $color_6;
	}
	.post-content {
		.carousel {
			.carousel-inner {
				cursor: pointer;
				.carousel-item {
					.carousel-caption {
						text-align: $align-left;
						left: 6%;
						right: 6%;
						h5 {
							span {
								margin-left: $m-20;
								font-size: 22px;
								border-bottom: $b-width-1 $solid $color_56;
							}
						}
						p.meta {
							margin-top: 1rem;
							margin-left: $m-20;
							span.post-category {
								font-weight: 600;
								text-transform: $transform-upper;
								font-size: 10px;
							}
							span.post-meta-info {
								text-transform: $transform-upper;
								font-size: 9px;
							}
						}
					}
					img {
						transition: all .2s ease-in-out;
					}
				}
				&:hover {
					.carousel-item {
						img {
							transform: scale(1.2, 1.2);
						}
					}
				}
			}
		}
		.img-post {
			background-size: cover !important;
			height: 235px;
			padding: $p-20;
			-webkit-transition: all 0.35s ease;
			transition: all 0.35s ease;
			cursor: pointer;
		}
		&:hover {
			.img-post {
				-webkit-transform: translateY(-5px) scale(1.02);
				transform: translateY(-5px) scale(1.02);
			}
		}
		.post-text {
			position: $pos-abs;
			bottom: 20px;
			color: $white;
			span.post-category {
				font-weight: 600;
				text-transform: $transform-upper;
				font-size: 12px;
				&:before {
					position: $pos-abs;
					content: '';
					background-color: $white;
					height: 1px;
					width: 26px;
					bottom: 7px;
				}
			}
			span.post-meta-info {
				text-transform: $transform-upper;
				font-size: 11px;
			}
		}
	}
}

/*      
    =======================
         Popular Post
    =======================
*/
#popularPostWrapper {
	padding: $p-60 $p-0;
}
/*      Popular Header    */
#popularPostHeader {
	h3 {
		color: $additional-color-11;
		position: $pos-rel;
		font-weight: 600;
		&:before {
			position: $pos-abs;
			content: '';
			background-color: $additional-color-5;
			height: 2px;
			width: 118px;
			bottom: 10px;
		}
	}
}
/*      Popular Content    */
#popularPostContent {
	background-color: $color_245;
	padding: $p-30;
	.card {
		border: none;
		border-radius: $br-0;
		border-bottom: $b-width-2 $solid $light-gray;
		cursor: pointer;
		&:hover {
			border-color: $additional-color-5;
		}
		.card-body {
			.card-title {
				color: $additional-color-5;
			}
			.card-text {
				color: $color_63;
				font-size: 13px;
			}
			p {
				span.post-category {
					font-weight: 600;
					color: $color_55;
					text-transform: $transform-upper;
					font-size: 12px;
				}
				span.post-meta-info {
					color: $color_63;
					text-transform: $transform-upper;
					font-size: 11px;
				}
			}
		}
	}
}

/*      
    =======================
         Articles Post
    =======================
*/
#articlesPostWrapper {
	padding: $p-60 $p-0;
}
/*      Article Post Header    */
#articlesPostHeading {
	h2 {
		position: $pos-rel;
		color: $additional-color-11;
		font-weight: 600;
		&:before {
			position: $pos-abs;
			content: '';
			background-color: $additional-color-5;
			height: 2px;
			width: 100px;
			bottom: 10px;
		}
	}
}
/*      Article Post Content    */
#articlesPostContent {
	border-top: $b-width-1 $solid $color_6;
	border-bottom: $b-width-1 $solid $color_6;
	article {
		position: $pos-rel;
		cursor: pointer;
		&:not(:last-child) {
			border-bottom: $b-width-1 $solid $color_6;
		}
		.thumbnail-img {
			img {
				width: 350px;
				height: 230px;
			}
		}
		.post-heading {
			color: $color_56;
		}
		&:hover {
			.post-heading {
				color: $color_57;
			}
		}
		.post-text {
			color: $color_63;
		}
		p.meta {
			margin: 8px 0;
			span.post-category {
				font-weight: 600;
				color: $additional-color-7;
				text-transform: $transform-upper;
				font-size: 12px;
			}
			span.post-meta-info {
				color: $color_63;
				text-transform: $transform-upper;
				font-size: 11px;
			}
		}
		.media.usr-meta {
			width: 145px;
			img {
				width: 40px;
			}
			.media-body {
				p.meta-usr-name {
					margin: 8px $m-0;
					color: $additional-color-11;
					font-weight: 600;
				}
			}
		}
	}
}

/*      
    =======================
          Pagination
    =======================
*/

/* In case you need it */


/*      
    =======================
          Footer
    =======================
*/

#footerWrapper {
	padding: $p-0 $p-0 15px;
	background-color: $color_245;
	.insta-photo {
		position: $pos-rel;
		width: 12.5%;
		height: auto;
		float: left;
		img {
			position: $pos-rel;
			display: block;
			width: 100%;
			opacity: .5;
			height: auto;
			cursor: pointer;
		}
		&:hover {
			img {
				opacity: 1;
			}
			.social-link {
				opacity: 1;
			}
		}
		.social-link {
			color: $white;
			font-size: 11px;
			left: 0;
			list-style-type: none;
			margin: $m-0;
			margin-left: 5px;
			opacity: 0;
			padding: $p-0;
			position: $pos-abs;
			right: 0;
			bottom: 0;
			cursor: pointer;
		}
	}
	h1 {
		position: $pos-rel;
		font-weight: 600;
		color: $white;
		font-size: 40px;
		&:before {
			position: $pos-abs;
			content: 'The';
			font-size: 12px;
			left: 0;
			right: 78px;
			transform: rotate(270deg);
			top: 0;
			margin-left: auto;
			margin-right: auto;
			bottom: 0;
			width: 33px;
		}
	}
	/*      Nav Footer      */
	ul.footer-nav {
		li {
			a {
				color: $white;
				&:hover {
					color: $color_38;
				}
			}
			a.active {
				color: $color_84;
				font-weight: 600;
			}
		}
	}
	/*  Social Media Section    */
	.social-media {
		border-top: $b-width-1 $solid $color_48;
		ul.list-inline {
			li {
				a {
					i {
						padding: 8px;
						border-radius: 25px;
						cursor: pointer;
						color: $color_38;
						box-shadow: 0px 0px 0px 1px #d3d3d3;
					}
				}
				&:hover {
					a {
						i {
							color: $color_245;
							box-shadow: 0px 0px 0px 1px #07e0c4;
							background-color: $color_84;
						}
					}
				}
			}
		}
	}
	.copy-right {
		color: $color_63;
		a {
			color: $color_84;
		}
	}
}
/*
    Media queries
*/
@media (max-width: 991px) {
	#footerWrapper {
		.insta-photo {
			width: 25%;
		}
	}
}