//==============================================================================
// DESKTOP MENU
//==============================================================================
@media screen and (min-width: (@responsive_breakpoint + 1px)){
	// BASE CLASS
	//==========================================================================
	.x-col-1-12{width:8.33333333333333%;}
	.x-col-2-12{width:16.6666666666667%;}
	.x-col-3-12{width:25%;}
	.x-col-4-12{width:33.3333333333333%;}
	.x-col-5-12{width:41.6666666666667%;}
	.x-col-6-12{width:50%;}
	.x-col-7-12{width:58.3333333333333%;}
	.x-col-8-12{width:66.6666666666667%;}
	.x-col-9-12{width:75%;}
	.x-col-10-12{width:83.3333333333333%;}
	.x-col-11-12{width:91.6666666666667%;}
	.x-col-12-12{width:100%;}
	.x-col-1-11{width:9.09090909090909%;}
	.x-col-2-11{width:18.1818181818182%;}
	.x-col-3-11{width:27.2727272727273%;}
	.x-col-4-11{width:36.3636363636364%;}
	.x-col-5-11{width:45.4545454545455%;}
	.x-col-6-11{width:54.5454545454545%;}
	.x-col-7-11{width:63.6363636363636%;}
	.x-col-8-11{width:72.7272727272727%;}
	.x-col-9-11{width:81.8181818181818%;}
	.x-col-10-11{width:90.9090909090909%;}
	.x-col-1-10{width:10%;}
	.x-col-2-10{width:20%;}
	.x-col-3-10{width:30%;}
	.x-col-4-10{width:40%;}
	.x-col-5-10{width:50%;}
	.x-col-6-10{width:60%;}
	.x-col-7-10{width:70%;}
	.x-col-8-10{width:80%;}
	.x-col-9-10{width:90%;}
	.x-col-1-8{width:12.5%;}
	.x-col-3-8{width:37.5%;}
	.x-col-5-8{width:62.5%;}
	.x-col-7-8{width:87.5%;}
	.x-col-1-9{width:11.1111111111111%;}
	.x-col-2-9{width:22.2222222222222%;}
	.x-col-4-9{width:44.4444444444444%;}
	.x-col-5-9{width:55.5555555555556%;}
	.x-col-7-9{width:77.7777777777778%;}
	.x-col-8-9{width:88.8888888888889%;}
	.x-col-1-7{width:14.2857142857143%;}
	.x-col-2-7{width:28.5714285714286%;}
	.x-col-3-7{width:42.8571428571429%;}
	.x-col-4-7{width:57.1428571428571%;}
	.x-col-5-7{width:71.4285714285714%;}
	.x-col-6-7{width:85.7142857142857%;}
	.x-col {
		display:block;
		float: left;
	}
	.x-clear {clear: both;}
	.x-new-row {clear: both;}

	li.x-pos-static {
		position: static;
	}
	li.x-text-align-right {
		text-align: right;
	}
	li.x-text-align-left {
		text-align: left;
	}
	li.x-text-align-center {
		text-align: center;
	}
	span.x-disable-text {
		display: none;
	}
	i.x-menu-icon.x-icon-left {
		padding-right: 10px;
	}
	i.x-menu-icon.x-icon-right {
		padding-left: 10px;
	}
	i.x-menu-icon.x-icon-left.x-disable-text {
		padding-right: 0;
	}
	i.x-menu-icon.x-icon-right.x-disable-text {
		padding-left: 0;
	}
	li > a.x-disable-menu-item {
		display: none!important;
	}
	li.x-new-row:after {
		content: "";
		display: block;
		clear: both;
	}

	// UL List
	.x-list-style-none {
		list-style: none;
		list-style-position: inside;
	}
	.x-list-style-disc {
		list-style: disc!important;
		list-style-position: inside!important;
	}
	.x-list-style-square {
		list-style: square!important;
		list-style-position: inside!important;
	}
	.x-list-style-circle {
		list-style: circle!important;
		list-style-position: inside!important;
	}

	//Image
	li.x-image-layout-image-only a.x-menu-a-text{
		display: none;
	}
	li.x-image-layout-image-only p.x-description {
		display: none;
	}
	li.x-image-layout-above {
		> a.x-image + a.x-menu-a-text {
			margin-top: 10px;
		}
	}
	.x-sub-menu-standard .x-sub-menu.x-pos-left-menu-parent,
	.x-sub-menu-standard .x-sub-menu.x-pos-left-menu-bar{
		right: 100%;
		left: auto;
	}
	.x-sub-menu.x-pos-full {
		left: 0;
		right: 0;
	}

	// X-NAV-MENU
	//==========================================================================
	.x-nav-menu {
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
		img {
			max-width: 100%;
			height: auto;
		}
		* {
			color: inherit;
			box-sizing: border-box;
		}

		// MENU ITEM NAV
		> .x-menu-item {
			display: inline-block;
			line-height: @main_menu_height;
			> a b.x-caret {
				display: none;
			}

			+ .x-menu-item {
				margin-left: 40px;
			}
		}
	}

    .x-sub-menu {
	    height: 0;
	    visibility: hidden;
	    overflow: hidden;
	    position: absolute;
	    opacity: 0;
	    top: 100%;
	    padding: 0;
	    margin: 0;
	    color: #444;
	    z-index: -1;
		list-style: none;
	    background-color: #fff;
	    border-bottom: solid 2px @p_color;
	    -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.15);
	    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.15);
	    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.15);

		.x-menu-item {
			position: relative;
			min-width: 210px;
			white-space: nowrap;
		}
    }
	.x-menu-item {
		line-height: 38px;
		b.x-caret {
			&:before {
				content: "\f105";
				font-family: 'fontawesome';
			}
		}
	}
	.x-active > .x-sub-menu {
		overflow: visible;
		visibility: visible;
		opacity: 1;
		height: auto;
		z-index: 999;
	}
	.x-menu-a-text {
		font-family: @s_font;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.01em;
	}
	p.x-description {
		font-style: italic;
		font-size: 0.9em;
		line-height: 30px;
	}
    .x-sub-menu {
	    a.x-menu-a-text {
		    text-transform: none;
	    }
    }

    // MENU STANDARD
    .x-sub-menu-standard {
	    padding: 10px 0;

	    > .x-menu-item {
		    b.x-caret {
			    position: absolute;
			    right: 20px;
			    transition: all 0.5s;
		    }
	    }
	    a.x-menu-a-text {
		    padding: 0 20px;
		    color: inherit;
		    -webkit-transition: background 0.3s ease-out;
		    -moz-transition: background 0.3s ease-out;
		    -ms-transition: background 0.3s ease-out;
		    -o-transition: background 0.3s ease-out;
		    transition: background 0.3s ease-out;
		    display: block;

			&:before {
				content: "\f105";
				font-family: 'fontawesome';
				opacity: 0;
				margin-left: -10px;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
				-ms-transition: all 0.3s;
				-o-transition: all 0.3s;
				transition: all 0.3s;
			}
		    > span.x-menu-text,
		    > i.x-menu-icon {
			    -webkit-transition: all 0.3s;
			    -moz-transition: all 0.3s;
			    -ms-transition: all 0.3s;
			    -o-transition: all 0.3s;
			    transition: all 0.3s;
		    }
		    &:hover {
			    background-color: rgba(red(@p_color), green(@p_color), blue(@p_color), 0.6);
			    color: #fff;
			    > i.x-menu-icon,
			    > span.x-menu-text {
				    padding-left: 10px;
			    }
			    > i.x-menu-icon + span.x-menu-text {
				    padding-left: 0;
			    }
			    &:before {
				    margin-left: 0;
				    opacity: 1;
			    }
			    > b.x-caret {
				    opacity: 0;
			    }
		    }
	    }

	    .x-sub-menu {
		    top: 0;
		    left: 100%;
		    right: auto;
	    }
    }

    // MULTI COLUMN
	.x-sub-menu-multi-column {
		padding-bottom: 30px;
		display: flex;
		&.no-padding {
			padding: 0;
		}
		&:after {
			content: "";
			display: block;
			clear: both;
		}
		> .x-menu-item {
			padding-left: 15px;
			padding-right: 15px;
			margin-top: 30px;
			min-width: 0;

			+ .x-menu-item {
				border-left: solid 1px rgba(0,0,0, 0.1);
			}
		}
		a.x-menu-a-text ,
		p.x-description {
			padding-left: 15px;
			padding-right: 15px;
		}

		.x-sub-menu {
			padding-top: 0;
			padding-bottom: 0;
			height: auto;
			visibility: visible;
			opacity: 1;
			position: static;
			background-color: transparent;
			-webkit-box-shadow: none;
			-moz-box-shadow:    none;
			box-shadow:         none;
			border:none;
			z-index: 999;
			overflow: visible;
		}
		li.x-active {
			> ul.x-sub-menu {
				visibility: visible!important;
				opacity: 1!important;
				overflow: visible!important;
			}
		}
		.x-header-column > a {
			font-size: 1em;
			color: #444;
			position: relative;
			line-height: 1;
			display: block;
			margin-bottom: 20px;
			text-transform: uppercase;
			font-family: @p_font;
		}
		b.x-caret {
			display: none;
		}
	}

    // TABS
	.x-tabs.x-item-menu-tab {
		position: static;
		padding: 0;
		margin: 0;

		> .x-menu-a-text {
			display: none;
		}
	}
	.x-sub-menu-tab {
		> .x-menu-item {
			position: static;
		}
		> li > ul.x-sub-menu {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			border-bottom: 0;
			visibility: hidden;
			overflow: hidden;
			opacity: 0;
			height: 0;
			padding-bottom: 30px;
		}
		> li.x-menu-active {
			background-color: rgba(0,0,0, 0.1);
			> a.x-menu-a-text {
				display: block;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					right: 0;
					border-top: solid 8px transparent;
					border-bottom: solid 8px transparent;
					border-right: solid 8px #fff;
					height: 16px;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
			> ul.x-sub-menu {
				visibility: visible;
				overflow: visible;
				opacity: 1;
				height: auto;
			}
		}
		.x-menu-item {
			min-width: 0;
		}
	}
	.x-tabs > .x-sub-menu-tab {
		background-color: #f6f6f6;
	}
    .x-nav-menu.dark {

    }
	.sub-menu-dark {
		.x-sub-menu {
			background-color: #111;
			color: #ccc;
		}
		.x-sub-menu-multi-column > .x-menu-item + .x-menu-item {
			border-left-color: rgba(255, 255, 255, 0.15);
		}
		.x-tabs > .x-sub-menu-tab {
			background-color: rgba(255, 255, 255, 0.1);
		}
		.x-sub-menu-tab > li.x-menu-active {
			background-color: rgba(255, 255, 255, 0.1);
		}
		.x-sub-menu-tab > li.x-menu-active > a.x-menu-a-text:after {
			border-right-color: #111;
		}
		.x-sub-menu-multi-column .x-header-column > a {
			color: #fff;
		}
	}

	// ACTIVE MENU STYLE
	.x-nav-menu{
		a:focus {
			color: inherit;
		}
		.x-sub-menu-standard {
			> li.current-menu-ancestor > a.x-menu-a-text,
			> li.current-menu-parent > a.x-menu-a-text,
			> li.current-menu-item > a.x-menu-a-text,
			> li.menu-current > a.x-menu-a-text{
				color: @p_color;
			}
		}

		> li.x-menu-item > a{
			color: inherit;
			position: relative;
			&:after {
				content: '';
				background-color: @s_color;
				height: 4px;
				width: 0;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				margin-top: 5px;
				margin-left: auto;
				margin-right: auto;
				.transition(all 0.3s);
			}
		}
		> li.current-menu-ancestor > a,
		> li.current-menu-parent > a,
		> li.menu-current > a.x-menu-a-text,
		> li > a.x-menu-a-text:hover,
		> li.x-menu-item:hover > a {
			&:after {
				width: 100%;
			}
		}
	}
}

//==============================================================================
// MOBILE MENU
//==============================================================================
@media screen and (max-width: @responsive_breakpoint){
	i.x-icon-left {
		margin-right: 10px;
	}
	i.x-icon-right {
		margin-left: 10px;
	}
    .x-sub-menu {
	    display: none;
    }
}