@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 */

	.logo-wrap {
		.relative;
		.header-bg;
		z-index: 1;
		height: 500px;
		height: 50vh;
		&:before {
			.cont;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
		}
		h1.logo {
			.absolute;
			z-index: 1000;
			top: 250px;
			top: 25vh;
			width: 100%;
			left: 0;
			.center;
			margin: 0;
			padding: 0;
			font-size: 64px;
			text-transform: @logo-text-transform;
			word-wrap: break-word;
			line-height: 0;
			font-family: @logo-font, sans-serif;
			.hidden;
			&.retina {
				img {
					max-width: 50%;
				}
			}
			@media (max-width: 960px) {
				font-size: 50px;
				line-height: 130%;
			}
			@media (max-width: 480px) {
				font-size: 42px;
			}
			a {
				color: #fff;
				.ib;
			}

			> div {
				.hidden;
			}

			&.lead {
				top: 20vh;
				> div {
					.block;
					margin-top: 60px;
					font-family: @body-font;
					font-size: 28px;
					color: #fff;
					text-transform: none;
				}
			}
		}
		@media (max-width: 960px) {
			height: 350px;
			h1.logo {
				top: 175px;
				&.lead {
					top: 175px;
					> div {
						.hidden;
					}
				}
			}
		}
	} /* .logo-wrap */

	.video-container {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: -1;
		video {
			min-width: 100%;
			min-height: 100%;
		}
	}

	.social-wrap {
		position: absolute;
		top: 20px;
		right: 20px;
		a {
			color: #fff;
			font-size: 18px;
		}
	}

	.main-nav {
		.absolute;
		top: 500px;
		top: 50vh;
		z-index: 2;
		.border-box;
		width: 100%;
		.center;
		margin-top: -55px;
		@media (max-width: 960px) {
			.hidden;
		}
		div > ul {
			.ib;
			> li {
				.left;
				border-top: rgba(255,255,255,0.8) 1px solid;
				padding: 10px;
				margin-top: 1px;
				.relative;
				a {
					.block;
					color: #f5f5f5;
					.uppercase;
					padding: 7px 16px;
					font-size: 14px;
				}
				&.current-menu-item, &.current_page_item, &.current-cat, &:hover {
					border-top: rgba(255,255,255,1) 3px solid;
					margin: 0;
					padding-top: 9px;
					> a {
						color: #fff;
					}
				}
				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;
						.box-shadow(0px, 1px, 2px, 0.1);
						padding: 0;
						margin: 0;
						&:hover {
							a {
								color: #aaa;
							}
						}
						&.current-menu-item, &.current_page_item, &.current-cat {
							> a {
								color: #eee;
								border-bottom: 0;
								&:hover {
									color: #eee;
								}
							}
						}
						span {
							.fa;
							.fa-angle-right;
							color: #aaa;
							.right;
							margin: 3px 0 0 0;
						}
						a {
							color: #aaa;
							border-bottom: 0;
							margin: 0;
							padding: 6px 15px;
							.block;
							.animate;
							&:hover {
								color: #aaa;
							}
						}

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

						ul {
							.absolute;
							top: 0;
							left: 100%;
						}
					}
				}
			}
		}
	}

} /* .wrapper > header */

/* Sidebars and content holder styling */

.holder {
	width: 100%;
	margin: 0 auto;
	max-width: 1040px;
	@media(max-width: 1100px) {
		.post-wrap, .inside-post-wrap {
			float: none !important;
		}
	}
	aside {
		font-size: 15px;
		width: 240px;
		color: #666;
		h2 {
			color: #777;
			font-size: 14px;
			border-bottom: 1px solid #777;
			padding-bottom: 20px;
			a {
				color: #777;
			}
		}
		> ul > li {
			margin-bottom: 30px;
			a {
				&:hover {
					.underline;
				}
			}

			&.widget_recent_entries, &.widget_pages, &.widget_categories, &.widget_recent_comments, &.widget_meta, &.widget_archive, &.PI_SimpleTwitterTweets, &.widget_nav_menu {
				li {
					padding: 10px 0;
					border-bottom: 1px dotted negation(@footer-bg, #333);
					margin-bottom: 0;
					&:last-child {
						border-bottom: 0;
					}
					&:first-child {
						padding-top: 0;
					}
				}
			}
		}
	}
}

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

.sidebar-right {
	.post-wrap {
		.left;
	}
	.inside-post-wrap {
		.left;
	}
	.holder {
		aside {
			.left;
			margin-left: 40px;
			border-left: 1px dotted #ccc;
			padding-left: 39px;
		}
	}
}

.sidebar-left {
	.post-wrap {
		.right;
	}
	.inside-post-wrap {
		.right;
	}
	.holder {
		aside {
			.left;
			margin-right: 40px;
			border-right: 1px dotted #ccc;
			padding-right: 39px;
		}
	}
}


@media(max-width: 1100px) {
	.holder {
		aside {
			.center;
			width: 96%;
			border-right: 0 !important;
			border-left: 0 !important;
			margin: 0 2% !important;
			padding: 0 !important;
		}
	}
}

/*

Main content styling

*/

.content {
	width: 100%;
}

/*

Post view styling

*/

.wrapper {
	.view-post;
}


.view-post {
	.logo-wrap {
		margin-bottom: 50px;
	}
	.post-wrap {
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
		> h1 {
			margin: 0 0 50px 0;
			padding: 0;
			.uppercase;
			.center;
		}
	}
	/* .post-wrap */
	article {
		.left;
		padding: 0 0 20px 0;
		margin: 0 0 50px 0;
		border-bottom: 1px solid #eee;
		width: 100%;

		.post-category {
			.center;
			.uppercase;
			margin-bottom: 10px;
			a {
				color: #999;
				font-size: 13px;
				letter-spacing: 2px;
			}
		}

		.post-title {
			margin-top: 0;
			margin-bottom: 10px;
			padding: 0;
			.center;
			padding: 0 5%;
			font-size: 46px;
			.uppercase;
			font-weight: 700;
			a {
				color: #333;
			}
			@media (max-width: 960px) {
				padding: 0 7%;
				font-size: 42px;
				word-wrap: break-word;
			}
			@media (max-width: 782px) {
				font-size: 32px;
			}
			@media (max-width: 480px) {
				font-size: 24px;
			}
		}

		.post-header {
			margin-bottom: 20px;
			color: #999;
			font-size: 13px;
			.uppercase;
			.center;
			a {
				.animate;
				color: #999;
				&:hover {
					color: #444;
				}
			}
			.post-category a {
				letter-spacing: 0px;
			}
			> div {
				.ib;
				> div, a {
					.ib;
				}
				&:before {
					.ib;
					content: '/';
					margin: 0 10px;
					color: #ddd;
				}
				&:first-child {
					&:before {
						.hidden;
					}
				}
				@media (max-width: 960px) {
					.block;
					margin: 0 0 10px 0;
					&:before {
						.hidden;
					}
				}
			}
			.screen-reader-text {
				.hidden;
			}
		} /* .post-header */

		.default-featured {
			.featured-image {
				.block;
				.cover;
				background-position: center center;
				height: 400px;
				@media (max-width: 960px) {
					height: 350px;
				}
			}
		}

		.post-content {
			margin-top: 30px;
			.left;
			width: 100%;
			line-height: 170%;
			word-wrap: break-word;
			.more-link {
				.block;
				text-decoration: none;
				margin: 30px 0 0 0;
				color: #666;
				.uppercase;
				font-size: 14px;
				width: 100%;
				.center;
				span {
					.mjr-button;
					background: #f1f1f1;
					color: #777;
					&:hover {
						background: #eee;
					}
				}
			}
		}
		.post-footer {
			.center;
			.left;
			width: 100%;
			margin-bottom: 10px;
			.post-tags {
				margin-bottom: 20px;
				a {
					.mjr-button;
					.mjr-button-small;
					margin: 10px 10px 10px 10px;
				}
			}
			.post-pages {
				font-size: 14px;
				.uppercase;
				.page-links-title {
					padding: 6px 10px;
					.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;
					}
				}
			}
		}
		@media (max-width: 960px) {
			.post-header, .post-footer, .post-content {
				width: 96%;
				margin-left: 2%;
				margin-right: 2%;
			}
		}
	} /* article */
} /* .view-post */

/*

Single page and post styling

*/

body.single, body.page, body.attachment {
	.wrapper > header {
		.logo-wrap {
			margin-bottom: 50px;
		}
	}
	.content {
		width: 100%;
		.inside-holder {
			.view-post;
			width: 100%;
			max-width: none;
			.comments {
				max-width: 720px;
				margin: 0 auto;
			}
			#disqus_thread {
				margin: 0 auto;
				max-width: 720px;
				iframe {
					padding-top: 50px;
					padding-bottom: 50px;
				}
			}
			article {
				margin: 0 auto;
				padding: 0;
				.default-featured {
					.featured-image {
						.relative;
						height: 500px;
						height: 50vh;
						@media (max-width: 960px) {
							height: 350px;
						}
						&:before {
							.cont;
							width: 100%;
							height: 100%;
							background: rgba(0,0,0,0.2);
						}
					}
				}
				.custom-featured {
					iframe {
						width: 100%;
						height: 500px;
						height: 100vh;
						@media (max-width: 960px) {
							height: 350px;
						}
					}
					.fluid-width-video-wrapper, .custom-featured video {
						width: 100%;
						height: 500px;
						height: 100vh !important;
						@media (max-width: 960px) {
							height: 350px;
						}
					}
					.video {
						.cover;
					}
					.sidedock {
						z-index: 1001;
					}
				}
				.inside-post-wrap {
					width: 720px;
					margin: 0 auto;
					@media (max-width: 1250px) {
						width: auto;
						max-width: 720px;
					}
				}
				.post-content {
					margin-top: 30px;
				}
			} /* article */
		} /* .inside-holder */
	} /* .content */
}

body.page {
	.content {
		.inside-holder {
			article {
				padding-bottom: 30px;
				border-bottom: 0;
				.post-content {
					margin-top: 40px;
				}
			}
		}
	}
}

/*

Styling for single post or page with featured image

*/

body.has-featured {
	.wrapper > header {
		.logo-wrap {
			height: 0px;
			margin-top: 0;
			margin-bottom: 0;
			&:before {
				background: rgba(0,0,0,0.5);
			}
		}
	}
	.content {
		.inside-holder {
			article {
				.post-category {
					margin-top: 50px;
				}
			}
			aside {
				margin-top: 50px;
			}
		}
	}
	&.page {
		.content {
			.inside-holder {
				article {
					.post-title {
						margin-top: 50px;
					}
				}
			}
		}
	}
} /* .has-featured */

/*

Styling for single post or page with Custom Thumbnail

*/

body.custom-thumb {
	.responsive-wrap {
		.block;
	}
	.wrapper > header {
		.logo-wrap {
			height: 0px;
			margin-top: 0;
			margin-bottom: 0;
			&:before {
				background: rgba(0,0,0,0.5);
			}
			h1.logo {
				line-height: 100%;
				top: 20px;
			}
		}
		.main-nav {
			.hidden;
		}
	}
}

body.page-template-full-width {
	.wrapper > header {
		.logo-wrap {
			margin-bottom: 0;
		}
	}
	.content {
		.left;
	}
}

/*

Footer styling

*/

.bottom-footer {

	width: 100%;

	.left;

	.relative;
	z-index: 2;

	color: #707070;
	background: @footer-bg;

	h1,h2,h3,h4,h5,h6 {
		color: #777;
	}

	a {
		.animate;
		color: #444;
		&:hover {
			opacity: 0.8;
		}
	}

	.sidebar > ul {
		.border-box;
		.center;
		width: 100%;
		padding: 50px 0 1px 0;

		display: flex;

		@media (max-width: 1024px) {
			display: block;
		}

		> li {
			.border-box;
			padding: 0 30px;
			
			@media (max-width: 1024px) {
				padding: 0 20px;
				max-width: none;
			}

			font-size: 16px;
			margin-bottom: 49px;
			text-align: left;
			flex: 1;
			> h2 {
				font-size: 14px;
				margin: 0 0 15px 0;
				padding: 0 0 15px 0;
				border-bottom: 1px solid #777;
			}
			&.widget_recent_entries, &.widget_pages, &.widget_categories, &.widget_recent_comments, &.widget_meta, &.widget_archive, &.PI_SimpleTwitterTweets, &.widget_nav_menu {
				li {
					padding: 10px 0;
					border-bottom: 1px dotted #d6d6d6;
					&:last-child {
						border-bottom: 0;
					}
					&:first-child {
						padding-top: 0;
					}
				}
			}
		}
		.tagcloud {
			a {
				padding: 2px 5px;
				.uppercase;
				margin: 0 5px 10px 0;
				font-size: 13px !important;
				border: 1px solid #707070;
			}
		}
		.footer-logo {
			line-height: 100%;
			font-family: @logo-font;
			font-size: 48px;
			margin: 0;
			padding: 0 0 15px 0;
		}
	}
	.copyright {
		.left;
		width: 90%;
		.center;
		color: #aaa;
		font-size: 13px;
		padding: 50px 5% 50px 5%;
		background: @footer-bg + #111;
	}
} /* > footer */


/* Menu Button */

.fader {
	opacity: 0;
	z-index: 1000;
	.fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	content: '';
	width: 100%;
	height: 100%;
	pointer-events: none;
	.animate;
}

body.menu-active {
	.responsive-wrap {
		 .responsive-nav {
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			-webkit-transition: -webkit-transform 0.8s;
			transition: transform 0.8s;
			-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
			transition-timing-function: cubic-bezier(0.7,0,0.3,1);
		}
		.menu-button {
			opacity: 0;
		}
	}
	.fader {
		pointer-events: auto;
		opacity: 1;
	}
}

.responsive-wrap {

	/* Main navigation */

	.hidden;

	@media(max-width: 960px) {
		.block;
	}

	.menu-button {
		.absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		margin: 20px;
		padding: 0;
		width: 2.5em;
		height: 2.25em;
		border: none;
		text-indent: 2.5em;
		font-size: 1.5em;
		color: transparent;
		background: #333;
		&:before {
			.animate;
			position: absolute;
			top: 0.7em;
			right: 0.7em;
			bottom: 0.7em;
			left: 0.7em;
			background: linear-gradient(#fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
			content: '';
		}
		&:hover {
			&:before {
				opacity: 0.8;
			}
		}
	}

	.responsive-nav {

		@menu-width: 260px;
		@close-button-width: 10px;

		.fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		width: @menu-width;
		height: 100%;
		background: @main-nav-bg;
		padding: 5em 1.5em 0;
		font-size: 16px;
		-webkit-transform: translate3d(-@menu-width + -@close-button-width,0,0);
		transform: translate3d(-@menu-width + -@close-button-width,0,0);
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
		transition-timing-function: cubic-bezier(0.7,0,0.3,1);
		.border-box;

		ul {
			padding: 20px;
			li {
				margin: 0 0 15px 0;
				ul {
					margin: 15px 0 0 15px;
					padding: 0;
					.hidden;
					li {
						a {
							color: #999;
						}
					}
				}
				a {
					color: #ccc;
				}
			}
		}

		/* Close Button */
		.close-button {
			width: @close-button-width;
			height: 100%;
			position: absolute;
			left: @menu-width;
			top: 0;
			padding: 0;
			overflow: hidden;
			border: none;
			color: transparent;
			background: @main-nav-bg + #111;
			&:hover {
				background: @main-nav-bg + #222;
			}
		}

	} /* .responsive-nav */
} /* .responsive-wrap */

/* Extra fixes */

.post-password-required {
	.center;
}

.admin-bar {
	.menu-button {
		margin-top: 52px;
		@media (max-width: 782px) {
			margin-top: 66px;
		}
	}
	header {
		.main-nav {
			margin-top: -23px;
		}
	}
	&.custom-thumb {
		.custom-featured {
			margin-top: -32px;
		}
	}
}