// to overwrite theme options
.main-header {

	.navbar-brand {
		padding: 22px 0;
		max-width: none !important;

	}
	.mobile-logo-default {

		~ .logo-default {
			display: none;
		}
	}
	.main-nav {
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5em;
		text-transform: none;
		letter-spacing: 0;
		text-align: left;
		
		> li {
			
			> a {
				font-size: inherit;
				font-weight: inherit;
				line-height: inherit;
				text-transform: inherit;
				letter-spacing: inherit;
			}
		}
	}
}

.navbar-header {
	padding-left: 25px;
	padding-right: 25px;
	justify-content: space-between;

	> * {
		flex: 0 0 33.3333333333%;
	}
}

.navbar-collapse {
	overflow-x: hidden;
	overflow-y: auto;
	color: #000;

	// Modules
	.social-icon {

		li {

			a {
				color: inherit;
				opacity: 0.7;

				&:hover {
					opacity: 1;
				}
			}
		}
	}
	.btn-naked,
	.btn-underlined {
		color: inherit;
		border-color: currentColor;
		
		&:before,
		&:after {
			background-color: currentColor;
		}
		&:before {
			opacity: 0.5;
		}
		.btn-txt {
			opacity: 0.7;
			transition: opacity 0.3s;
		}
		&:hover {
			color: inherit;

			.btn-txt {
				opacity: 1;
			}
		}
	}
}

ul.nav.main-nav {

	> li {
		padding-left: 0;
		padding-right: 0;
		
		> a {
			display: flex;
			padding: 15px 25px;
			border-bottom: 1px solid rgba(#000, 0.05);
			align-items: center;
			color: #000;

			&:hover {
				color: #000;
			}
		}
	}

	+ .header-module {
		margin-top: 15px;
	}
}

.mainbar-row > .navbar-header {
	margin-left: 15px;
	margin-right: 15px;
}

// Mobile nav Alignment
[data-mobile-nav-align=center] {

	.navbar-collapse {
		text-align: center;
		
		.header-module {
			align-items: center !important;
		}
	}
	ul.nav.main-nav {
		
		> li {

			> a {
				justify-content: center;
			}
		}
	}
}
[data-mobile-nav-align=right] {

	.navbar-collapse {
		
		.header-module {
			align-items: flex-end !important;
		}
	}
}

// Mobile nav styles
[data-mobile-nav-style=classic],
[data-mobile-nav-style=minimal] {

	.navbar-collapse {
		max-height: 75vh;
		box-shadow: 0 10px 50px rgba(#000, 0.05);
		background-color: #fff;
	}
}
[data-mobile-nav-style=modern],
[data-mobile-nav-style=minimal] {

	ul.nav.main-nav {
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 16px;

		> li {

			> a {
				border: none;
			}
		}
	}
}
[data-mobile-nav-style=modern] {

	&:before {
		content: '';
		display: inline-block;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0;
		transform: scale(1.75);
		background-image: linear-gradient(to top left, #1DE1BC 0%, #DA0BEE 100%);
		transition: opacity 0.3s, transform 0.3s;
		transition-delay: 0.05s;
	}
	#wrap {
		transition: transform 0.55s cubic-bezier(0.23, 1, 0.320, 1), height 0.3s;
	}
	.navbar-toggle {
		pointer-events: none;

		&.mobile-nav-trigger-cloned {
			pointer-events: all;
		}
	}
	// cloned via js.
	// appeneded to the #wrap
	.navbar-collapse-clone {
		display: flex !important;
		width: 70vw;
		height: 80vh !important;
		padding-top: 20px;
		border: none;
		position: fixed;
		top: 12vh;
		right: 0;
		z-index: 90;
		background: none !important;
		box-shadow: none;
		flex-direction: column;
		justify-content: center;
		transform: translate3d(25vw, 0, 0);
		opacity: 0;
		visibility: hidden;
		overflow: visible !important;
		transition-property: transform, opacity, visibility;
		transition-duration: 0.45s;
		transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);

		.nav-trigger {
			position: absolute;
			top: -20px;
			right: 0;
			z-index: 10;
			justify-content: flex-end;
			color: #fff;
			pointer-events: all;
			transform: none !important;
			transition: none !important;
			
			.bars {
				justify-content: center;
				padding-left: 8px;
				width: 42px;
				height: 42px;
				border: 2.4px solid rgba(#fff, 0.4);
				border-radius: 50em;
				transform: none !important;
				transition: none !important;
			}
			.bar {
				background-color: #fff;

				&:first-child,
				&:last-child {
					display: none;
				}
				&:nth-child(2) {
					transform: translateY(2px) rotate(135deg) !important;
					transition: none !important;
				}
			}
		}
		ul,
		ul.nav.main-nav{
			flex: 0 auto;

			.nav-item-children > li > a,
			> li > a {
				color: #fff;

				&:hover {
					color: #fff;
				}
			}
		}
		
	}
	.navbar-collapse-inner {
		display: block;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.megamenu {

		.megamenu-container {
			padding: 0 35px;
		}
		.vc_row,
		.ld-row,
		.ld-container,
		.megamenu-column,
		.vc_column-inner {
			width: 100%;
			border: none !important;
			background: none !important;
			padding: 0 !important;
			margin: 0 !important;
		}
		.ld-fancy-heading > * {
			color: #fff;
		}
	}

	// body
	.mobile-nav-activated & {

		&:before {
			transform: scale(1);
			opacity: 1;
			transition-delay: 0s;
		}
		
		#wrap {
			// height: 80vh;
			overflow: hidden;
			// transform: scale3d(0.85, 0.85, 1) translate3d(-80vw, 0, 0);
			background-color: #fff;
			transform: translate3d(-80vw, 0, 0);
		}
		.navbar-collapse-clone {
			transform: translate3d(0, 0, 0);
			opacity: 1;
			visibility: visible !important;
			transition-delay: 0.1s;
		}
	}

}
// html
// only for mobile nav modern style
.module-expanding,
.module-collapsing {
	overflow: hidden;
	
	[data-mobile-nav-style=modern] {
		
		#wrap {
			transition-property: transform, height;
			transition-duration: 0.45s;
			transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
			background-color: #fff;
			overflow: hidden;
		}
	}
}
.module-collapsing {
	
	[data-mobile-nav-style=modern] {
		
		#wrap {
			// height: 100vh;
			overflow: hidden;
		}
	}
}

// Mobile nav color schemes
[data-mobile-nav-scheme=gray] {

	.navbar-collapse {
		background-color: #f9f9f9;
		color: #000;
	}
	.main-nav .lqd-custom-menu,
	ul.nav.main-nav {

		> li {

			> a {
				color: #000;
			}

			&:hover {
				color: #000;
			}
		}
	}
}
[data-mobile-nav-scheme=dark] {

	.navbar-collapse {
		background-color: #191D18;
		color: #fff;
	}
	.main-nav .lqd-custom-menu,
	ul.nav.main-nav {

		> li {
			
			> a {
				border-color: rgba(#fff, 0.1);
				color: #fff;

				&:hover {
					color: #fff;
				}
			}
		}
	}
	.submenu-expander {
		background-color: rgba(#fff, 0.05);
	}
}

// Header scheme
[data-mobile-header-scheme=light] {

	.navbar-header {
		background-color: #fff;

	}
	.lqd-mobile-modules-container {
		
		.social-icon {
	
			a {

				&,
				&:hover {
					color: #000;
				}
			}
		}
		.ld-module-trigger {
			color: #000 !important;
		}
	}
}
[data-mobile-header-scheme=gray] {

	.main-header {

		.navbar-header {
			background-color: #f6f6f6;
		}
		.lqd-mobile-modules-container {
			
			.social-icon {
		
				a {
	
					&,
					&:hover {
						color: #000;
					}
				}
			}
		}
		.ld-module-trigger {
			color: #000 !important;
		}
	}
}
[data-mobile-header-scheme=dark] {

	.navbar-header {
		background-color: #191D18;

	}
	.lqd-mobile-modules-container {
		
		.social-icon {
	
			a {

				&,
				&:hover {
					color: #000;
				}
			}
		}
		.ld-module-trigger {
			color: #fff !important;
		}
		.ld-search-form-container {
			background-color: #191D18;
		}
		.ld-search-form {
	
			input {
				border-color: rgba(#fff, 0.45);
				color: #fff;
			}
			.input-icon {
				color: #fff;
	
				&:hover {
					background-color: rgba(#fff, 0.1);
				}
			}
		}
	}
	.nav-trigger {

		.bar {
			background-color: #fff;
		}
	}
}

// RTL
html[dir=rtl] {

	[data-mobile-nav-style=modern] {
		
		.navbar-collapse-clone {
			right: 10vw;
		}
	}
}