//colors

@bg_nav: rgba(0, 0, 0, 0.8);
@bg_ss_menu: rgba(0, 0, 0, 0.8);
@ss_menu_after: rgba(0, 0, 0, 0);
@color_a: #fff;

//global toolkit

header nav{
	width: 100%;
	height: 4vw;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	background-color: @bg_nav;
}

header .nav_haute{
	position: fixed;
	top: 0;
}

header .nav_basse{
	position: fixed;
	top: 0;
}

.nav_basse .menu, nav .menu{
	width: 65%;
	height: 4vw;
	position: absolute;
	left: 30%;
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.nav_basse .nav_logo, nav .nav_logo{
	display: none;
}

.nav_haute .menu{
	width: 65%;
	height: 4vw;
	position: absolute;
	left: 30%;
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.nav_haute .nav_logo{
	height: 3vw;
	width: auto;
	position: absolute;
	top: 0.5vw;
	left: 2vw;
}

nav .menu .page{
	float: left;
	line-height: 4vw;
	border-bottom: 1.5vw solid rgba(255,255,255,0);
	font-size: 1.1vw;
	position: relative;
	width: 16%;
	float: left;
	margin: 0;
	z-index: 999;
}

nav .menu .page a{
	color: @color_a;
	display: block;
	text-align: center;
}

nav .menu .page #pec, nav .menu .page a:hover{
	background-color: #C62025;
}

.ss_menu{
	width: 18vw;
	position: absolute;
	top: 4.8vw;
	left: 0;
	display: none;
	padding: 1vw 0;
	background-color: @bg_nav;
}

.ss_menu:after{
	bottom: 100%; 
	left: 50%; 
	border: solid transparent; 
	content: " "; 
	height: 0; 
	width: 0; 
	position: absolute; 
	pointer-events: none; 
	border-color: @ss_menu_after;
	border-bottom-color: @bg_ss_menu;
	border-width: 0.6vw; 
	margin-left: -4vw;
}

.ss_menu li{
	float: left;
	width: 90%;
	padding: 0 5%;
	line-height: 1.3vw;
}

.ss_menu li a{
	display: block;
	color: @color_a !important;
	font-size: 1vw;
	padding: 1vw;
}

.ss_menu li a:hover{
	background-color: #C62025 !important;
	color: #fff;
}