/*==========================================================
 VC Element H Menu flottant 
==========================================================*/
body {
	position: 		relative;
}

.h-vc-menu-flottant-wrap {
    position:		fixed;
    top:			0;
    right:			2%;
    bottom:			0;
    /*left:			0;*/

    overflow-x:		hidden;
    overflow-y:		auto;

    z-index:		15;
}

.h-vc-menu-flottant-inner {
    display:		-webkit-box;
    display:		-ms-flexbox;
    display:		flex;
    -webkit-box-align:	center;
    -ms-flex-align:	center;
    align-items:	center;
    justify-content:    flex-end;

    /*margin:         6.5rem 2% 2rem auto;*/
    margin:			6.5rem 0 2rem;
    min-height:		calc(100% - (6.5rem + 2rem));

    width:			100%;
    /*max-width:      35px;*/
	max-width:		42px;

    transition:     width 0.3s, max-width 0.3s;
}

.h-vc-menu-flottant-inner:hover {
    max-width:      240px;
}

ul.h-vc-menu-flottant-menu > li:after, ul.h-vc-menu-flottant-menu > li a:before, ul.h-vc-menu-flottant-menu > li a:after {
	content: 		" ";
	display: 		block;
	position: 		absolute;
}

ul.h-vc-menu-flottant-menu {
    /*margin:         0 10px 0 10px;*/
	margin: 		0 0 0 8px;
    width:			100%;
}


ul.h-vc-menu-flottant-menu > li {
	position: 		relative;
}


ul.h-vc-menu-flottant-menu > li:after {
	top: 			0;
    /*right:          0;*/
	right: 			15px;
	bottom: 		0;
	width: 			2px;
	z-index: 		1;

	/*background-color:  #5FA181;*/
}

ul.h-vc-menu-flottant-menu > li:first-child:after {
	top: 			50%;
}

ul.h-vc-menu-flottant-menu > li:last-child:after {
	bottom: 		50%;
}

ul.h-vc-menu-flottant-menu > li a {
    position:       relative;
    display:        flex;
    flex-direction: row;
    align-items:    center;
    justify-content:	center;
    text-align: 	center;
    /*margin-right:   18px;*/
	margin-right: 	33px;
	padding: 		0;
    min-height: 	24px;
}

ul.h-vc-menu-flottant-menu > li a span {
    padding:        6px 10px;
    font-family:    'Montserrat', sans-serif;
    font-size:      11px;
    font-weight:    600;
    width: 			100%;

    white-space:    nowrap; 
    overflow:       hidden;
    text-overflow:  ellipsis;
}

ul.h-vc-menu-flottant-menu > li a:not(:hover):before {
	opacity: 		0;
}

ul.h-vc-menu-flottant-menu > li a:not(:hover) span {
	opacity: 		0;
}

ul.h-vc-menu-flottant-menu > li a:not(.active):hover, ul.h-vc-menu-flottant-menu > li a:not(.active):focus {
	/*color: 			#9CC424;*/
}

ul.h-vc-menu-flottant-menu > li a:after {
    right:          -4px;
    width:          10px;
    height:         10px;
    margin-right: 	-18px;
    border-radius:          50%;
    -moz-border-radius:     50%;
    -webkit-border-radius:  50%;
    z-index: 		2;
    /*background-color:   #5FA181;*/
}

ul.h-vc-menu-flottant-menu > li a span, ul.h-vc-menu-flottant-menu > li a:after {
	box-shadow: 		0 2px 7px 0 rgba( 0,0,0,0.2 );
	-moz-box-shadow: 	0 2px 7px 0 rgba( 0,0,0,0.2 );
	-webkit-box-shadow: 0 2px 7px 0 rgba( 0,0,0,0.2 );
}

ul.h-vc-menu-flottant-menu > li a.active {
}

ul.h-vc-menu-flottant-menu > li a.active span, ul.h-vc-menu-flottant-menu > li a:not(.active):hover span {
	/*padding-top:    6px;*/
    /*padding-bottom: 6px;*/
    /*background-color:   #9CC424;*/
    /*color: 			#FFF;*/
}

ul.h-vc-menu-flottant-menu > li a.active:before, ul.h-vc-menu-flottant-menu > li a:not(.active):hover:before {
    right: 			-10px;
    border: 		5px solid transparent;
    /*border-left-color: 	#9CC424;*/
}

ul.h-vc-menu-flottant-menu > li a.active:after, ul.h-vc-menu-flottant-menu > li a:not(.active):hover:after {
	right: 			-7px;
    width:          16px;
    height:			16px;
    /*background: 	#9CC424;*/
}

ul.h-vc-menu-flottant-menu > li a span,
ul.h-vc-menu-flottant-menu > li a:before,
ul.h-vc-menu-flottant-menu > li a:after {
    transition:			background-color 0.2s, opacity 0.2s, width 0.2s, height 0.2s, left 0.2s, right 0.2s;
    -moz-transition:	background-color 0.2s, opacity 0.2s, width 0.2s, height 0.2s, left 0.2s, right 0.2s;
    -webkit-transition:	background-color 0.2s, opacity 0.2s, width 0.2s, height 0.2s, left 0.2s, right 0.2s;
}

@media ( max-width: 575px ) {
    .h-vc-menu-flottant-wrap {
        right:      0;
    }
}