
.masthead.masthead-mobile-header,
.masthead.masthead-mobile-header:not(.mixed-header) {
	background: @mobile-header-bg-color;
}
.mobile-sticky-header-overlay {
	background-color: @mobile-overlay-bg-color;
}
.dt-mobile-header {
	background-color: @mobile-menu-bg-color;
	width: @mobile-menu-width;
	.right-mobile-menu .show-mobile-header & {
		right: @mobile-menu-width
	}
}
.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
	background: @customColor !important;
}
.dt-mobile-menu-icon {
	
	&:not(.floating-btn) {
		.mobile-menu-icon-bg-on & {
			background-color: @accent-bg-color;
			.accent-gradient & {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
			.custom-mixin-bg (@mobile-toggle-menu-bg-color);
			width: @mobile-hamburger-bg-size;
			height: @mobile-hamburger-bg-size;
			.border-radius (@radius: @mobile-toggle-menu-border-radius);
		}
	}
}
.floating-mobile-menu-icon .dt-mobile-menu-icon.floating-btn {
	.border-radius;
}
.dt-close-mobile-menu-icon {
	.show-mobile-header & {
		left: @mobile-menu-width - 30;
	}
	.right-mobile-menu .show-mobile-header & {
		left: auto;
		right: 0;
	}
}
@media screen and (max-width: @mobile-menu-width) {
	.dt-close-mobile-menu-icon {
		.show-mobile-header & {
			left: calc(100% ~"-" 30px);
		}
		.right-mobile-menu .show-mobile-header & {
			left: auto;
			right: 0;
		}
	}
	.right-mobile-menu .show-mobile-header .dt-mobile-header {
		right: 100%;
	}
}
.dt-mobile-menu-icon .lines,
.dt-mobile-menu-icon .lines:before,
.dt-mobile-menu-icon .lines:after {
	background-color: @mobile-toggle-menu-color;
	// .mixed-header &,
	// .classic-header & {
	// 	background-color: @additional-logo-elements-color;
	// }
}
/*Mobile-branding*/
.mobile-branding > a,
.mobile-branding > img {
	padding: @mobile-logo-top-padding @mobile-logo-right-padding @mobile-logo-bottom-padding @mobile-logo-left-padding;
	.transparent .masthead:not(.mixed-header) & {
		padding: @transparent-mobile-logo-top-padding @transparent-mobile-logo-right-padding @transparent-mobile-logo-bottom-padding @transparent-mobile-logo-left-padding;
	}
}
.sticky-mobile-logo-first-switch,
.sticky-mobile-logo-second-switch {
	.transparent .masthead.sticky-mobile-on & {
		padding: @mobile-logo-top-padding @mobile-logo-right-padding @mobile-logo-bottom-padding @mobile-logo-left-padding;
	}
}
/*Mobile menu*/
.mobile-main-nav > li > a {
	padding: @mobile-menu-font-size/2 + 8 30px @mobile-menu-font-size/2 + 8 0;
}
.dt-mobile-header .next-level-button {
	padding: @mobile-menu-font-size/2 + 8 0;
	top: 0;
	line-height: @mobile-menu-font-size+4;
}
.dt-mobile-header .next-level-button:before {
	line-height: @mobile-menu-font-size+4;
}
.mobile-main-nav > li > .sub-nav:last-child {
	margin-bottom: @mobile-menu-font-size/2 + 8;
}

	.mobile-main-nav li > a .menu-text {
		font: @mobile-menu-font-style @mobile-menu-font-variant @mobile-menu-font-weight @mobile-menu-font-size~"/"@mobile-menu-font-size+4 @mobile-menu-font-family;
		color: @mobile-menu-color;
		text-transform: @mobile-menu-text-transform;
	}
	.mobile-main-nav > .menu-item > a i[class^="fa"] {
		font-size: @mobile-menu-font-size;
	}

	.mobile-main-nav li > a {
		color: @mobile-menu-color;
	}
	.mobile-main-nav li.act > a {
		color: @mobile-menu-active-color;
	}
	.mobile-main-nav li.act > a .menu-text,
	.mobile-main-nav li.act > a .subtitle-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .subtitle-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .menu-text {
		color: @mobile-menu-active-color;
		.text-gradient (@startColor: @mobile-menu-active-color, @endColor: @mobile-menu-active-color-2);
	}
	.mobile-main-nav li:not(.act) > a:hover .subtitle-text,
	.mobile-main-nav li:not(.act) > a:hover .menu-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li:not(.act) > a:hover .menu-text  {
		color: @mobile-menu-hover-color;
		.text-gradient (@startColor: @mobile-menu-hover-color, @endColor: @mobile-menu-hover-color-2);
	}
	.mobile-main-nav li:not(.act) > a:hover,
	.dt-mobile-header .mobile-main-nav .sub-nav > li:not(.act) > a:hover {
		color: @mobile-menu-hover-color;
	}
	.mobile-main-nav > li.has-children > a:after,
	.mobile-main-nav .next-level-button,
	.mobile-main-nav > li.menu-item-language > a:after {
		color: fade(@mobile-menu-color, 27%);
	}
	.mobile-main-nav > li:before {
		border-color: fade(@mobile-menu-color, 8%);
	}
		.mobile-main-nav .sub-nav > li > a,
		#page .mobile-main-nav .sub-nav li {
			padding: (@mobile-sub-menu-font-size - 4)/2 + 2 0px (@mobile-sub-menu-font-size - 4)/2 + 2 0;
		}
			.dt-mobile-header .mobile-main-nav li .sub-nav > li > a .menu-text {
				font: @mobile-sub-menu-font-style @mobile-sub-menu-font-variant @mobile-sub-menu-font-weight @mobile-sub-menu-font-size~"/"@mobile-sub-menu-font-size+4 @mobile-sub-menu-font-family;
				color: @mobile-menu-color;
				text-transform: @mobile-sub-menu-text-transform;
			}
			.mobile-main-nav .sub-nav > .menu-item > a i[class^="fa"] {
				font-size: @mobile-sub-menu-font-size;
			}
				.mobile-main-nav .sub-nav li > a .menu-text,
				.mobile-main-nav .sub-nav li > a i[class^="fa"] {
					font-size: @mobile-sub-menu-font-size - 4;
					line-height: @mobile-sub-menu-font-size;
				}
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children > a:after,
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children:not(.act):hover > a:after,
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children.act > a:after,
		.mobile-main-nav .sub-nav li.has-children a:after,
		.mobile-main-nav .sub-nav .next-level-button {
			color: fade(@mobile-menu-color, 27%);
		}
		.mobile-main-nav .sub-nav .next-level-button {
			padding: (@mobile-sub-menu-font-size - 4)/2 + 2 0;
			top: 0;
			//top: (@mobile-sub-menu-font-size - 4)/2 + 2;
			line-height: @mobile-sub-menu-font-size+4;
		}
		.mobile-main-nav .sub-nav .next-level-button:before {
			line-height: @mobile-sub-menu-font-size+4;
		}
		.mobile-main-nav  > li.has-children > a {
			max-width: calc(100% ~'-' 30px);
		}
		.mobile-main-nav .sub-nav > li.has-children > a {
			max-width: calc(100% ~'-' 30px);
		}
.dt-close-mobile-menu-icon span {
	.accent-bg-mixin;
}
