@import "logo";
@import "menu";
@import "header-customize";
@sticky_height: 80px;
@sticky_height_mobile: 70px;
/**
* Header Desktop
* ----------------------------------------------------------------------------
*/
@media screen and (min-width: (@header_responsive_breakpoint + 1px)) {
	header.mobile-header {
		display: none;
	}

	header.main-header {
		position: relative;
		z-index: 999;
		.header-inner {
			display: table;
			width: 100%;
			table-layout: fixed;
			position: relative;
		}
		&.header-float {
			position: absolute;
			left: 0;
			right: 0;
		}

		&.header-3 {
			.header-above{
				height: @logo_max_height - @navigation_height;
			
			}
			.primary-menu {
				display: block;
				.transform(translateY(50%));
				-webkit-transition: color .5s, background .5s;
				-moz-transition: color .5s, background .5s;
				-ms-transition: color .5s, background .5s;
				-o-transition: color .5s, background .5s;
				transition: color .5s, background .5s;
				.btn {
					padding-top: (@navigation_height - 22) /2 !important;
					padding-bottom: (@navigation_height - 22) /2 !important;
				}
				&.affix {
					.transform(translateY(0));
					.main-menu {
						padding-left: 0;
					}
				}
			}
			.primary-menu-inner {
				display: table;
				width: 100%;
			}
			.main-menu {
				padding-left: 60px;
				.transition(padding-left .3s);
			}
			.logo-header{
				height: @logo_max_height - (@navigation_height/2);
			}
		}

		&.header-4 {
			.primary-menu {
				display: block;
			}
			.header-above .header-customize {
				width: 35%;
				white-space: normal;
			}
			.logo-header {
				width: 30%;
				text-align: center;
			}
		}

		&.header-5 {
			.primary-menu {
				display: block;
			}
			.header-above .header-customize {
				width: 35%;
				white-space: normal;
			}
			.logo-header {
				width: 30%;
				text-align: center;
			}
		}

		&.header-vertical {
			.fixed();
			top: 0;
			bottom: 0;
			width: 300px;
			z-index: 100000;
			left: 0;
			.header-above {
				display: table;
				width: 100%;
				text-align: center;
			}
			.logo-header {
				width: 100%;
			}
			.primary-menu {
				display: block;
				position: relative;
				.no-menu {
					padding: 0 20px;
					line-height: 24px;
				}
			}

			ul.header-customize {
				display: block;
				white-space: normal;
				text-align: center;
				padding: 50px 20px 20px 20px;
				> li {
					margin-bottom: @header_customize_nav_spacing;
					margin-right: 0;
					display: block;
					&:first-child {
						padding-left: 0;
					}
					&:last-child {
						margin-bottom: 0 !important;
					}
				}
			}
		}

	}

	body.header-left {
		padding-left: 300px;
	}

	body.header-right {
		padding-right: 300px;
		header.main-header.header-vertical {
			left: auto;
			right: 0;
		}
	}

	body.framed,
	body.boxed,
	body.bordered {
		background-color: #eee;
	}

	body.framed,
	body.boxed {
		#gf-wrapper {
			max-width: 1236px;
			margin: auto;
			position: relative;
		}
		.header-sticky.affix {
			max-width: 1236px;
		}
	}

	body.framed {
		#gf-wrapper {
			margin-top: 50px;
			margin-bottom: 50px;
		}
	}

	body.bordered {
		#gf-wrapper {
			margin: 30px;
		}
		&:before,
		&:after {
			content: '';
			display: block;
			position: fixed;
			left: 0;
			right: 0;
			z-index: 9999;
			background: inherit;
			height: 30px;
		}

		&:before {
			top: 0;
		}

		&:after {
			bottom: 0;
		}
		&.admin-bar {
			&:before {
				top: 32px;
			}
		}

		.back-to-top {
			bottom: 40px;
			right: 40px;
		}

	}
}

.main-header .header-sticky-wrapper.affix-wrap {
	height: @sticky_height;
}
.mobile-header .header-sticky-wrapper.affix-wrap {
	height: @sticky_height_mobile;
}
.header-sticky {
	position: relative;
	z-index: 999;
	.transition(all .5s);
	.mobile-header-inner,
	.header-inner {
		.transition(all .5s);
	}
	&.affix {
		.fixed();
		left: 0;
		right: 0;
		margin: auto;
		.primary-menu {
			.no-menu {
				line-height: @sticky_height;
			}
		}

		.main-menu {
			> li {
				padding-top: (@sticky_height - 44px)/2;
				padding-bottom: (@sticky_height - 44px)/2;
			}
		}

		.mobile-header-inner,
		.header-inner {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}

		.logo-header {
			height: @sticky_height;
			img {
				max-height: @sticky_height;
				padding-top: 5px;
				padding-bottom: 5px;
			}
			&.has-logo-sticky {
				.main-logo {
					display: none;
				}
				.sticky-logo {
					display: block;
				}
			}
		}

		&.gf-border-bottom,
		.gf-border-bottom {
			border-bottom: none;
		}


		.mobile-logo-header {
			height: @sticky_height_mobile;
			img {
				max-height: @sticky_height_mobile;
				padding-top: 5px;
				padding-bottom: 5px;
			}
		}

	}
	&.header-hidden {
		.transform(translate(0, -100%));
	}
}
@media (min-width: 1200px) {
	.header-full-width > .container {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 1199px) {
	.header-full-width .header-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/**
* Header Mobile
* ----------------------------------------------------------------------------
*/
@media (max-width: @header_responsive_breakpoint) {
	header.main-header {
		display: none;
	}

	header.mobile-header {
		display: block;
		position: relative;
		z-index: 999;
		.mobile-header-inner {
			display: table;
			width: 100%;
			.mobile-header-nav,
			.mobile-header-menu {
				display: table-cell;
				vertical-align: middle;
			}
		}

		.mobile-header-nav-inner {
			display: table;
			width: 100%;
		}

		&.header-1 {
			.mobile-header-inner {
				table-layout: fixed;
			}
			.mobile-logo-header {
				text-align: center;
				width: 40%;
			}
			.header-customize,
			.mobile-header-menu {
				width: 30%;
			}
			.header-customize {
				text-align: right;
				white-space: normal;
			}
		}

		&.header-2 {
			.mobile-logo-header {
				width: 100%;
			}

			ul.header-customize-mobile {
				> li:last-child {
					padding-right: @header_customize_mobile_spacing;
				}

			}
		}

		&.header-3 {
			.mobile-logo-header {
				width: 100%;
				text-align: right;
			}
			ul.header-customize-mobile {
				> li:first-child {
					padding-left: @header_customize_mobile_spacing;
				}
			}
		}

	}

	.mobile-header-search {
		border-top: 1px solid @border_color;
		border-bottom: 1px solid @border_color;
		.search-form {
			.search-field {
				border-color: transparent !important;
				background-color: transparent !important;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
				padding-left: 0;
				padding-right: 40px;
				height: 45px;
			}
			.search-submit {
				font-size: 0;
				line-height: 1;
				background-color: transparent !important;
				border-color: transparent !important;
				&:extend(.disable-color);
				top: 0;
				bottom: 0;
				margin: auto;
				right: -20px;
				i {
					display: inline-block;
					font-size: 16px;
					line-height: 20px;
				}
			}
		}
	}
}

@media (max-width: 480px) {
	header.mobile-header {
		&.header-1 {
			.mobile-logo-header {
				width: 60%;
			}
			.header-customize,
			.mobile-header-menu {
				width: 20%;
			}
		}
	}
}