a.bars{
	svg {
		display: none;
	}
}
.main-menu-active{
	a.bars{
		svg{
			display: inline-block;
			width: 20px;
			height: 20px;
			fill:@brand-primary;
			stroke:@brand-primary;
		}
		span:nth-child(1){
			display: none;
		}
	}
}

.header-xs{
	position: relative;
}

.ragione-sociale{
	color: #333333;
	@media only screen and (max-width:@screen-xs-max) {
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 50px;
		font-size: 16px
	}
	@media only screen and (min-width:@screen-sm) {
		display: block;
		font-size:30px;
	}
	@media only screen and (min-width:@screen-md) {
		display: block;
		font-size:36px;
	}
}

.dealer-logo{
	text-indent: -1000em;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	margin:0 auto;
	height: 50px;
	width: 214px;
	margin:0 auto;
	@media only screen and (min-width:@screen-sm) {
		background-position: center left;
		height: 80px;
		width: 342px;
		margin:0;
	}
}


#main-menu{



	z-index: 1000;
	position: relative;
	background-color: #fff;
	color: #808890;
	height: 50px;
	box-shadow: 5px 4px 20px rgba(0, 0, 0, 0.1);
	font: 12px / 13px "VW Head";
	font-weight: bold;

	
	@media only screen and (max-width:@screen-sm) {
		background-color: #bdc2c6;
		.pos-sticky;
		top:60px;
	}
	> ul{
		position: fixed;
		top: 110px;
		left: 0;
		right: 0;
		overflow: hidden;
		overflow-y: auto;
		bottom: 0;
		background-color: #fff;
		display: none;
		margin:0;
		padding: 0;
		list-style-type: none;
		> li{
			border-bottom: 1px solid #dee1e3;
			&.active{
				ul{
					padding-left: 110px;
					padding-bottom: 30px;
					li{
						list-style-type: none;
						a{ 
							line-height: 20px;
						}
					}
				}
			}
		}
	}
	a{
		line-height: 55px;
		
		color:#808890;
		.icon-wrapper{
			margin-left: 50px;
			margin-right: 30px;
			vertical-align: middle;
			display: inline-block;
			line-height: normal;
			width: 30px;
			height: 30px;
			> svg{
				
				fill: #808890;
				width:100%;
				height: 100%;
			}
		}
		&:hover{
			text-decoration: none;
		}
	}
	a.bars{
		cursor: pointer;
		display: block;
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		width: 50px;
		font-size:30px;
		color:@brand-primary;
		line-height: 50px;
		text-align: center;
	}
	li.logo{display: none;}
	.header-xs{
		.logo{
			position: absolute;
			display: block;
			padding: 9px 0 9px 15px;
			width: auto !important;
			img{
				width:auto !important;
				max-height: 32px;
				display: block;
			}
		}
	}
}


.main-menu-active{
	overflow: hidden;
	#main-menu > ul{
		display: block;
	}
}
@media only screen and (min-width:@screen-sm) {
	.main-menu-active{
		overflow: auto;
	}


	.main-menu-active #main-menu, #main-menu{
		height: auto;
		top: 0;
		position: fixed;
		display: block;
		min-width: 96px;
		max-width: 116px;
		height: 100%;
		padding: 0;
		box-shadow: none;
		.header-xs{
			display: none;
		}
		.submenu {
			position: fixed;
			top: 0;
			left: 96px;
			bottom: 0;
			overflow-y: auto;
			display: none;
			background: #fff;
			z-index: 400;
			box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.1);
			ul{
				margin: 0;
				padding: 0 15px;
				padding-top: 60px;
				list-style-type: none;
				li{
					line-height: 50px;
					border-bottom: 1px solid #f1f2f3;
				}
			}
		}

		&.enable-submenu{
			.submenu {
				display: block;
			}
		}

		> ul{
			
			
			display: block;
			z-index: 500;
			background-color: #fff;
			padding: 0;
			overflow: auto;
			box-shadow: 5px 4px 20px rgba(0, 0, 0, 0.1);
			min-height: 100%;
			position: fixed;
			top:0;
			left: 0;
			width: 96px;
			bottom: 0;
			> li {
				position: relative;
				display: block;
				min-height: 85px;
				border-bottom: none;

				> ul{
					display: none;
				}
				

				> div{
					position: absolute;
					display: table;
					height: 85px;
					width: 100%;
				}

				&.logo{
					display: block;
					height: 120px;
					div{
						height: 120px;
						img{
							display: block;
							margin: 0 auto;
							margin-top:40px;
							max-width: 70px;
							height: auto !important;
						}
					}
				}
			}
			> li:not(:first-child) {
				border-top: 1px solid #dee1e3
			}

			> li:not(:first-child) a {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				min-height: 85px
			}

			> li:not(:first-child) a span {
				display: block;
				text-align: center
			}
			&.active{
				position: static;
				top: auto;
				left: auto;
				right: auto;
				bottom: auto;
			}
		}
		a{
			margin-left: 0;
			margin-right: 0;
			color:#828b92;
			line-height: 1;
			.icon-wrapper{    
				height: 30px;
				display: block;
				width: 30px;
				margin: 0 auto; 
				margin-bottom: 10px;
				> svg{
					width:100%;
					height: 100%;
				}
			}
			
		}
		a:hover, li.active a{
			svg{ fill:@brand-primary;}
			color:#000;
			text-decoration: none;
		}
		
	}
}