& when (@media-common = true) {
	.horizontal-menu.mgt-menu .navigation {
		background: none;
		> ul {
			padding: 0;
		}
		.level0 .level-top {
			border: none;
			font-size: 1.125rem;
			font-weight: 600;
			color: #222222;
			padding: 10px 15px 10px 0;
			display: block;
			line-height: inherit;
		}
		li {
			> a {
				font-size: 1rem;
				font-weight: 400;
				color: #222222;
				padding: 10px 30px 10px 0;
				border-top: 1px solid #f3f3f3;
				display: block;
				background: none;
				text-transform: none;
				border-left: none !important;
				> span {
					margin: 0 !important;
				}
				&:after {
					content: none;
				}
			}
			&.level0 + li.level0 > a.level-top {
				border-top: 1px solid #f3f3f3;
			}
			&.level1 > a {
				padding-left: 10px;
			}
			&[class*="level"]:not(.level1):not(.level0) > a {
				padding-left: 20px !important;
			}
			&.parent {
				position: relative;
				.submenu {
					position: static !important;
					border: none;
					box-shadow: none;
					padding: 0 !important;
				}
				> a {
					&.ui-state-active:before {
						content: "\e937" !important; 
					}
				}
				&.level0 {
					> a {
						&:before {
							content: "\e936";
							font-family: 'Linearicons';
							font-size: 0.75rem;
							color: #222;
							font-weight: bold;
							line-height: 1;
							cursor: pointer;
							position: absolute;
							right: 0;
							top: 0;
							display: block;
							padding: 17px 9px;
							line-height: 1;
						}
						&.ui-state-active:before {
							content: "\e937";
						}
					}
				}
			}
		}
	}
}

& when (@media-common = false) {
	.header-area:not(.right-slide-menu) .horizontal-menu.mgt-menu .navigation {
		@media (min-width: 992px){
			height: 100%;
			background: none;
			li.parent.level0 > a:before {
				content: none;
			}
			.level0 .submenu {
				padding: 20px 0;
				position: absolute !important;
				top: 100% !important;
				display: block !important;
				opacity: 0;
				visibility: hidden;
				border: none;
				box-shadow: 0px 0px 10px 0px rgba(35, 31, 32, 0.1);
				background: #fff;
				min-width: 220px;
				transition: all 300ms;
				-moz-transition: all 300ms;
				-webkit-transition: all 300ms;
				-ms-transition: all 300ms;
				-o-transition: all 300ms;
				transform: translateY(20px);
				-moz-transform: translateY(20px);
				-webkit-transform: translateY(20px);
				-ms-transform: translateY(20px);
				-o-transform: translateY(20px);
				li {
					margin: 0;
					position: relative;
					padding: 0 20px;
					> ul {
						left: 100%;
						top: -20px !important;
					}
					a {
						font-size: 0.9375rem;
						background: none !important;
						font-weight: 400;
						padding: 10px 0;
						color: #222;
						border-left: none !important;
						&:hover {
							&:extend(.color-primary);
						}
					}
				}
			}
			> ul {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				height: 100%;
				padding: 0;
				> li {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-align: center;
					align-items: center;
					margin: 0;
					> a {
						color: #222222;
						font-size: 0.9375rem;
						font-weight: 600;
						padding: 0 20px 2px;
						position: relative;
						display: block;
						line-height: inherit;
						border: none !important;
						&:after {
							content: "";
							display: block;
							position: absolute;
							height: 2px;
							left: 20px;
							right: 20px;
							background-color: #222222;
							top: 100%;
							transition: all 300ms;
							-moz-transition: all 300ms;
							-webkit-transition: all 300ms;
							-ms-transition: all 300ms;
							-o-transition: all 300ms;
							transform: scaleX(0);
							-moz-transform: scaleX(0);
							-webkit-transform: scaleX(0);
							-ms-transform: scaleX(0);
							-o-transform: scaleX(0);
						}
					}
					&.active > a:after,
					> a.ui-state-focus:after,
					> a:hover:after {
						transform: scaleX(1);
						-moz-transform: scaleX(1);
						-webkit-transform: scaleX(1);
						-ms-transform: scaleX(1);
						-o-transform: scaleX(1);
					}
				}
				li > a.ui-state-active + .submenu,
				li > a.ui-state-focus + .submenu {
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
					-moz-transform: translateY(0);
					-webkit-transform: translateY(0);
					-ms-transform: translateY(0);
					-o-transform: translateY(0);
				}
			}
		}
	}
}