@import "normalize.less";
@import "settings.less";
@import "generated.less";
@import "classes.less";
@import "common.less";
@import "font-awesome.less";
@import "thirdparty.less";

/*

Hello!

All styling of theme contains here.
Extra settings are in settings.less

normalize.less contains all normalizations and reset for browsers
generated.less is generated by special script so it's not editable nor deletable
classes.less contains main classes used for this project, you can't delete or change them either
common.less contains all common styles for elements in post content
font-awesome.less contains vector icons so it's as well not editable

If you have any questions please contact us directly via email:
support@major-themes.com

Thank you for your choice.

MT

*/

.wrapper > header {

	/* Logo styling */

	width: 100%;
	.border-box;

	.relative;
	z-index: 1500;

	.top-nav-wrap {
		background: @main-nav-bg - #090909;
		width: 100%;
		height: 40px;
		padding: 0 42px 0 50px;
		.border-box;
		.top-nav {
			.left;
			line-height: 40px;
			font-size: 12px;
			color: spin(#bbb - @main-nav-bg, 180);
			@media (max-width: 960px) {
				.hidden;
			}
		}
		.social {
			.right;
			line-height: 30px;
			@media (max-width: 960px) {
				float: none;
				.center;
			}
			a {
				color: spin(#bbb - @main-nav-bg, 180);
				.ib;
				.center;
				.animate;
				.rounded(30px);
				line-height: 40px;
				width: 30px;
				height: 40px;
				&:hover {
					color: spin(#fff - @main-nav-bg, 180);
				}
				&.hidden {
					.hidden;
				}
			}
		}
	}

	.main-nav-wrap {
		background: @main-nav-bg;
		width: 100%;
		height: 60px;
		padding: 0 30px 0 50px;
		.border-box;

		.logo-wrap {
			.left;
			h1.logo {
				font-family: @logo-font;
				font-size: 30px;
				margin: 0;
				padding: 0;
				line-height: 60px;
				text-transform: @logo-text-transform;
				a {
					color: spin(#fff - @main-nav-bg, 180);
				}
				&.custom {
					img {
						max-height: 60px;
					}
				}
			}
		} /* .logo-wrap */

		.main-nav {
			.right;
			@media (max-width: 960px) {
				.hidden;
			}
			a {
				.animate;
				color: spin(#bbb - @main-nav-bg, 180);
				&:hover {
					color: spin(#ccc - @main-nav-bg, 180);
				}
			}
			div > ul {

				li {
					&.current-menu-ancestor, &.current-menu-item, &.current_page_item, &.current-cat {
						> a {
							color: spin(#eee - @main-nav-bg, 180);
							border-bottom: 0;
							&:hover {
								color: spin(#fff - @main-nav-bg, 180);
							}
						}
					}
				}

				> li {

					.ib;
					line-height: 60px;
					padding: 0 20px 0 20px;
					.relative;
					font-size: 14px;

					&:first-child {
						&:before {
							content: '';
						}
					}

					ul {
						.absolute;
						top: 100%;
						left: 0;
						text-align: left;
						text-transform: none;
						z-index: 6;
						.hidden;
						li {
							.block;
							.relative;
							line-height: 1.5;
							width: 220px;
							background: @main-nav-bg + #090909;
							.box-shadow(0px, 1px, 2px, 0.1);
							padding: 0;
							margin: 0;

							&:hover > a {
								border-bottom: 0;
								background: @main-nav-bg + #111;
							}

							span {
								.fa;
								.fa-angle-right;
								color: spin(#bbb - @main-nav-bg, 180);
								.right;
								line-height: 1.5;
							}
							a {
								color: spin(#bbb - @main-nav-bg, 180);
								border-bottom: 0;
								margin: 0;
								padding: 12px 25px;
								.block;
							}


							ul {
								.absolute;
								top: 0;
								left: 100%;
							}
						}
					} /* ul */
				} /* > li */
			} /* div > ul */ 
		} /* .main-nav */
	} /* .main-nav-wrap */

} /* .wrapper > header */


.head-bg {
	width: 100%;
	.header-bg;
	margin-bottom: 0;
	.post-content-styling;
	.relative;
	.center;
	padding: 15vh 0;
	&:after {
		content: '';
		.absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.3);
		width: 100%;
		height: 100%;
	}
	> div {
		.border-box;
		padding: 4% 20% 0 20%;
		.relative;
		z-index: 1;
		color: #fff;
		h1,h2,h3,h4,h5,h6 {
			color: #fff;
		}
		@media (max-width: 960px) {
			.hidden;
		}
	}
}

/* Sidebars and content holder styling */

.sidebar-hidden {
	.holder {
		aside {
			.hidden;
		}
	}
}

.sidebar-right {
	.post-wrap {
		.left;
	}
	.holder {
		aside {
			.left;
			padding-left: 50px;
		}
	}
}

.sidebar-left {
	.post-wrap {
		.right;
	}
	.holder {
		aside {
			.left;
			padding-right: 50px;
		}
	}
}

.holder {
	width: 100%;
	margin: 0 auto;
	margin-top: 50px;
	max-width: 1300px;
	@media (max-width: 960px) {
		margin-top: 10px;
	}
	.post-wrap {
		width: 70%;
	}
	aside {
		font-size: 14px;
		width: 30%;
		color: spin(#ddd - @body-background, 180);
		.border-box;
		max-width: 350px;
		@media (max-width: 960px) {
			max-width: none;
		}
		h1,h2,h3,h4,h5,h6 {
			font-weight: 300;
		}
		input {
			background: @body-background + #111;
			border: 0;
		}
		a {
			color: spin(#ddd - @body-background, 180);
			.animate;
		}
		h2 {
			color: spin(#fff - @body-background, 180);
			font-size: 16px;
			font-weight: 400;
			a {
				color: spin(#fff - @body-background, 180);
			}
		}
		> ul > li {
			padding-bottom: 15px;
			margin-bottom: 30px;
			border-bottom: 1px dotted @body-background + #111;
			&:last-child {
				border-bottom: 0;
			}
			a {
				&:hover {
					color: spin(#fff - @body-background, 180);
				}
			}
		}
	}
	@media(max-width: 960px) {
		.post-wrap {
			float: none;
			width: 100%;
		}
		aside {
			width: 100%;
			float: none !important;
			padding: 0 !important;
		}
	}
}


/* 

Main content styling

*/

.content {
	width: 100%;
	padding: 0 50px;
	.border-box;
	@media (max-width: 960px) {
		padding: 0 2%;
	}
}

/* 

Post view styling

*/

.wrapper {
	width: 100%;
	.view-post;
}

.default-featured {
	.relative;
	margin-top: 30px;
	.featured-image {
		.block;
		.cover;
		background-position: center center;
		height: 400px;
		height: 50vh;
		opacity: 0.9;
		.animate;
		&:hover {
			opacity: 1;
		}
	}
}

.custom-featured {
	.relative;
	margin-top: 30px;
}


.view-post {
	.post-wrap {
		> h1 {
			margin: 0 0 50px 0;
			padding: 0;
			font-size: 52px;
			.center;
			color: spin(#fff - @body-background, 180);
			@media (max-width: 960px) {
				margin: 20px 0;
			}
		}
	}
	/* .post-wrap */
	article {
		.left;
		margin: 0 0 50px 0;
		width: 100%;

		.inside-post-wrap {
			background: #fff;
			.left;
			width: 100%;
		}

		.post-category {
			padding: 40px 10% 0 10%;
			@media (max-width: 960px) {
				padding-left: 7%;
				padding-right: 7%;
			}
			a {
				font-size: 12px;
				.uppercase;
				.ib;
				color: @color1;
				margin-right: 10px;
				font-weight: 700;
				letter-spacing: 1px;
			}
			color: #eee;
		}

		.post-title {
			margin-top: 0;
			margin-bottom: 0;
			padding: 15px 10% 0 10%;
			font-size: 52px;
			.border-box;
			width: 100%;
			background: #fff;
			a {
				color: #333;
			}
			@media (max-width: 960px) {
				padding-left: 7%;
				padding-right: 7%;
				font-size: 42px;
				word-wrap: break-word;
			}
		}

		.post-content {
			margin-bottom: 1%;
			margin-top: 30px;
			.left;
			line-height: 170%;
			word-wrap: break-word;
			padding: 0 10%;
			width: 100%;
			.border-box;
			.post-content-styling;

			@media (max-width: 960px) {
				padding-left: 7%;
				padding-right: 7%;
			}
			.more-link {
				.block;
				text-decoration: none;
				margin: 30px 0 0 0;
				font-size: 14px;
				width: 100%;
				.center;
				.uppercase;
				span {
					.ib;
					color: #fff;
					background: @color1;
					padding: 4px 25px;
					.animate;
					&:hover {
						background: @color1 + #090909;
					}
				}
			}
		}

		.post-tags {
			.center;
			.ib;
			width: 100%;
			.border-box;
			padding: 0 10% 5% 10%;
			a {
				.mjr-button;
				.mjr-button-small;
				margin: 0 5px;
			}
		}

		.post-pages {
			.center;
			font-size: 14px;
			margin: 0 0 10px 0;
			.page-links-title {
				padding: 6px 10px 6px 0;
				.ib;
				.vat;
				line-height: 1;
				font-weight: normal;
			}
			> span {
				.mjr-button;
				.mjr-button-small;
				margin: 0;
			}
			a {
				.mjr-button;
				.mjr-button-small;
				background: #fff;
				color: #000;
				margin: 0;
				&:hover {
					color: #fff;
				}
			}
		}

		.post-footer {
			.left;
			width: 100%;
			font-size: 13px;
			background: @body-background + #0a0a0a;
			color: spin(#ccc - @body-background, 180);
			border: 0;
			> div {
				.table;
				padding: 20px 0;
				width: 100%;
				> div {
					.center;
					.tablecell;
					.border-box;
					padding: 0 20px;
					line-height: 100%;
					.vam;
					i {
						margin: 0 5px 0 0;
					}
				}
			}

			@media (max-width: 1250px) {
				.block;
				> div {
					.block;
					padding-bottom: 10px;
					> div {
						.block;
						margin-bottom: 10px;
					}
				}
			}

			a {
				color: spin(#eee - @body-background, 180);
				.animate;
				&:hover {
					color: spin(#fff - @body-background, 180);
				}
			}

			.post-sharer {
				font-size: 15px;
				a {
					.ib;
					margin: 0 3px;
				}
			}
		}

		.screen-reader-text {
			.hidden;
		}

	} /* article */
} /* .view-post */

/* 

Single page and post styling 

*/

.article-comments {
	width: 60%;
	margin: 0 20%;
	.border-box;
	@media (min-width: 1920px) {
		margin-left: 30%;
		margin-right: 30%;
		width: 40%;
	}
	@media (max-width: 1366px) {
		margin-left: 15%;
		margin-right: 15%;
		width: 70%;
	}
	@media (max-width: 1280px) {
		margin-left: 10%;
		margin-right: 10%;
		width: 80%;
	}
	@media (max-width: 960px) {
		margin-left: 2%;
		margin-right: 2%;
		width: 96%;
	}
}

body.single, body.page, body.attachment {
	.head-bg {
		padding: 15vh 0;
		margin-bottom: -50px;
		> div {
			.hidden;
		}
	}
	.content {
		.left;
		width: 100%;
		padding: 0;
		.inside-holder {
			.view-post;
			width: 100%;
			max-width: none;
			.custom-featured {
				height: 100vh;
				iframe {
					width: 100%;
					height: 500px;
					height: 100vh;
				}
				.fluid-width-video-wrapper, .custom-featured video {
					width: 100%;
					height: 500px;
					height: 100vh !important;
				}
				.video {
					.cover;
				}
			}
			article {
				.relative;
				z-index: 1;
				.left;
				margin-top: 50px;

				.article-comments;

				.featured-image {
					height: 500px;
					height: 50vh;
				}
				.post-category {
					background: #fff;
				}
				.post-title {
					background: #fff;
				}
				.post-content {
					margin-top: 20px;
				}
			} /* article */
		} /* .inside-holder */
	} /* .content */
}



body.page, body.attachment {
	.content {
		.inside-holder {
			article {
				margin-bottom: 50px;
				.post-title {
					padding-top: 40px;
				}
			} /* article */
		} /* .inside-holder */
	} /* .content */
}
/* 

Styling for single post or page with featured image

*/

body.has-featured {
	.default-featured {
		margin-top: 0;
		margin-bottom: -50px;
	}
	.head-bg {
		.hidden;
	}
} /* .has-featured */

/* 

Styling for single post or page with Custom Thumbnail

*/

body.custom-thumb {
	.custom-featured {
		margin-top: -100px;
	}
	.head-bg {
		.hidden;
	}
}

/*

Footer styling

*/

.bottom-footer {
	width: 100%;
	.left;
	background: @footer-bg;
	.sidebar {
		.left;
		width: 100%;
		padding: 50px 0 50px 0;
		font-size: 14px;
		input {
			background: @footer-bg + #111;
			border: 0;
		}
		a {
			.animate;
			color: spin(#bbb - @footer-bg, 180);
			&:hover {
				color: spin(#ccc - @footer-bg, 180);
			}
		}
		color: spin(#aaa - @footer-bg, 180);
		h2 {
			color: spin(#eee - @footer-bg, 180);
			font-size: 15px;
			a {
				color: spin(#eee - @footer-bg, 180);
			}
		}
		a.footer-logo {
			font-family: @logo-font;
			font-size: 24px;
			color: spin(#fff - @footer-bg, 180);
			margin: 0;
			padding: 0;
			line-height: 100%;
			text-transform: @logo-text-transform;
			&:hover {
				text-decoration: none;
			}
		}
		> ul {
			width: 84%;
			margin: 0 auto;
			ul {
				margin: 0;
				padding: 0;
			}
			> li {
				width: 23%;
				margin-right: 2%;
				&:last-child {
					margin-right: 1%;
				}
				&:first-child {
					margin-left: 1%;
				}

				@media(max-width: 1280px) {
					width: 49%;
					margin-right: 2%;
					margin-bottom: 20px;
					&:nth-child(2n) {
						margin-right: 0;
					}
					&:first-child {
						margin-left: 0;
					}
					&:last-child {
						margin-right: 0;
					}
				}

				@media(max-width: 960px) {
					width: 100%;
					margin-right: 0;
					margin-left: 0;
					margin-bottom: 20px;
					padding-bottom: 20px;
					border-bottom: 1px solid @footer-bg + #111;
				}
			}
		} /* ul */
	}
	.copyright {
		.left;
		width: 90%;
		.center;
		color: spin(#eee - @footer-bg, 180);
		font-size: 13px;
		padding: 35px 5% 35px 5%;
		background: @footer-bg + #090909;
	}
} /* > footer */

/* Extra fixes */

.post-password-required {
	.center;
}

.admin-bar {

	/* 32px and 46px (782 width) */

	&.single, &.page {
		.custom-featured {
			margin-top: -132px;
			@media (max-width: 782px) {
				margin-top: -146px;
			}
		}
	}
	.menu-button {
		top: 67px;
		@media (max-width: 782px) {
			top: 81px;
		}
	}
	.responsive-wrap {
		.responsive-nav {
			.close-button {
				top: 42px;
				@media (max-width: 782px) {
					top: 56px;
				}
			}
		}
	}
}