@charset "UTF-8";
	/************************* parametrage de la formulaire de login **************************************/
	#logoutclick	{
    	/*FONT-WEIGHT: bold;*/
    	background : #FF9900;
	font-family:Arial, Helvetica, sans-serif;
	font-size : 1em;
    	color:#000000;
    	Cursor: pointer;
    	padding : 5px 8px;
        border :#fff 1px outset;
    	/*BORDER-LEFT: #fff 1px outset;
    	BORDER-RIGHT: #fff 1px outset;
    	BORDER-TOP: #fff 1px outset;
    	BORDER-BOTTOM: #fff 1px outset;*/
        border-radius: 4px;
}
	  /************************* parametrage de la barre de menu **************************************/
	.nav {
            display:flex;
            width:55vw;
            /*overflow: auto; /* hidden;*/
	}
	.nav > .menu {
            display:flex;
            /*flex : auto; /*1;
            /*flex-direction :row;*/
            width: 55vw;  /*calc( 55vw + 50px);*/
            height: 50px;
            margin: 0px;
            padding: 0px;
	 }

	.nav > .menu > li {
            display : flex ;
            justify-content: center ;
            align-items : center;
            flex : auto;
            width : 11vw;
	}
	.nav > .menu > li:first-child {
            /*display : flex;*/
            flex : auto;
            /*flex : 1 1 50px;*/
            width : 50px;
            max-width:50px;
		
	   }	  
	.nav > .menu > li:nth-child(2) {
	 	display : none;
	   }
	 .nav > .menu > li > a {
            display: flex;
            /*flex :1;*/
            text-align:center;
            text-decoration: none;
            border:none;
		/*line-height:50px;*/
		/*margin: auto ;*/
            }
	.nav > .menu > li > a > img {
		display:block; /* IE fix */
		/*width : 50px;
		max-width:50px;*/
		height: 50px;
		max-height:50px;
            }

	 /*-------------------------------formulaire de recherche ----------------------------------------*/
	engSearch > form {
	  	display : flex;
		width : 25vw;
		height:50px;
		flex-direction:row;
		justify-content: flex-start;
		/*border:1px solid black;*/
                border-radius: 4px;
	}
	engSearch > form > .inp, engSearch > form > .sub {
		display:flex;		
		/*min-width: 0; /* fix for min-width: auto */
	}
	engSearch > form > .inp {
		width : calc( 25vw - 50px);
                max-height:50px; 
	}
	engSearch > form > .sub {
		width : 50px;
	}

	engSearch > form > div > input[type=text]
	 {
		flex:1;
		font-size:1em;
		background:#FFFFFF;
                max-height: 50px;
		/*font-family:Verdana, Arial, Helvetica, sans-serif;*/
		padding:0px 0px 0px 20px;
		border:1px solid black;
                text-decoration: none;
                border-radius: 4px;
                
	}
        engSearch > form > div > input[type=text]:active {
		border : none;
                text-decoration: none;
	}
	engSearch > form > div > input[type=submit] {
		flex:auto;
		max-height:50px;
		background-color:#FFFFFF;
		background-image: url(../images/ui/loupe50.jpg);
                background-size: cover;
		background-repeat: no-repeat;  
		margin:0px;
		cursor: pointer;
                border:1px solid black;
		/*border-left :#000000 1px solid ;*/
                border-radius: 4px;
	 }
	 engSearch > form > div > input[type=submit]:hover {
	 }
	/*------------------------------- fin formulaire de recherche ----------------------------------------*/

/*------------------------ media-queries ----------------------*/
@media screen and (max-width: 960px) {
	  /* Decoration */
	.nav {
		width:60vw;
	}
	.nav > .menu {
		width:60vw;
	}
	.nav > .menu > li {
		flex : 1 1 13vw;
		}	
	engSearch > form {
		width : 40vw;
	}
	engSearch > form > .inp {
		width : calc( 40vw - 50px );
		max-height:50px; 
	}
	engSearch > form > .sub {
		width : 50px;
	}
}
@media screen and (max-width: 640px) {
	.nav {
		width : 92px; /* 20vw ;*/
		/*border:red 1px solid;*/
	}
	.nav > .menu {
		/*flex : 1 1 100px; /*vw;*/
		width : 100px; /*20vw; */
		justify-content: flex-start ;
		align-items : flex-start;
		/*border: 1px solid black;*/
		padding:0px;
	}
	/* ul li */
	.nav > .menu > li:first-child {
		display:flex;
                max-height:46px; 
		/*width : 46px;*/
		max-width:46px; /*IE fix width */
	  }
	.nav > .menu > li:nth-child(2)  {
		display:flex;
		/*width : 46px;*/
                max-height:46px; 
		max-width :46px; /*IE fix width */
                justify-content: center;
                align-items: center;
	}
	.nav > .menu > li > a, 	.nav > .menu > li:nth-child(2)  {
		display:block;
		width : 46px;
	}
        .nav > .menu > li > a > img {
		height: 46px;
		max-height:46px;
            }
	.nav > .menu > li > img {
		/*display  : block;*/
		width : 46px;
		height : 46px;
	}
	.menu > li:nth-child(n+3) {
	   display : none;
	   }
/******************************* menu vertical ****************************/
 
	 .vmenu {
	display:flex; /*block;*/
	flex-flow : row wrap;
	width : 96vw;
	overflow:hidden;
	position:relative;
	max-height: 0px;
	padding:0px;
	margin-left: -46px;
	background-color:#FF3300 ; /* orange */
	/*transition: visibility 0.5s;*/
	/*transition: max-height 1s ease;*/
	border-radius: 0 0 8px 8px;
	}

	.nav > .menu > li:nth-child(2):hover > .vmenu  {
	/*max-height : 210px;
	background-color:#FF3300;*/
	}
        
        .container-bottom-slide {
           
        }
        
        
	.vmenu > li {
            /*display:block;*/
            display: block; /*1 1 45vw;*/
            width:48vw;
            height :70px;
            /*justify-content: center;
            align-content: center;*/
            line-height:70px;
            text-align: center ;
            border : 1px solid black;
            /*margin-left:0px;
 
	}
        /*.vmenu > li:hover {
            background-color:#00FF99;
            font: normal 1.5em "Fira Sans", "Helvetica Neue", sans-serif; /*normal 18px/1.5*/
        /*}*/
        }
	.vmenu > li > a {
            display:block;
            width:48vw;
            height:70px;
            line-height : 70px;
            font-size : 1.2em ; /* "Fira Sans", "Helvetica Neue", sans-serif; /*normal 18px/1.5*/       
            background-color:#FF3300;
            transition: all 1s ease;
	}      
        .vmenu > li > a:hover {
            font-size : 1.5em;
            line-height:70px;
            background-color:#00FF99;
            /*font: normal 1.5em "Fira Sans", "Helvetica Neue", sans-serif; /*normal 18px/1.5*/
        }
        
/********************************fin menu vertical ****************************/
	engSearch > form {
		width : calc(96vw - 92px ); /*70vw;*/
                max-width: calc(96vw - 92px );
                height:46px;
	}	
	engSearch > form > .inp {
		width : calc(96vw - 92px - 46px); /*calc(70vw - 46px);*/
                max-width: calc(96vw - 92px - 46px); 
		max-height:46px; 
	}
	engSearch > form > .sub {
		width : 46px;
	}
        engSearch > form > div > input[type=text] {
                max-height: 46px;
         }
        engSearch > form > div > input[type=submit] {
                /*height: 46px;*/
		max-height: 46px;
		background-image: url(../images/ui/loupe46.jpg);
                background-size: cover;
	 }
        /*engSearchn > form > input[type=submit] > {	
	 	
		height: 46px;
		max-height: 46px;
		background-image: url(../images/ui/loupe46.jpg);
	}*/
}
@media screen and (max-width: 500px) {

	.nav {
		/*width : 25vw; /*104px;*/
	}
}
/*************** Decoration *******************************/

	.nav > .menu > li {
                
                color: #FF9900;
		border : black 1px solid ;
		background: rgba(0,0,0,0.3); /*linear-gradient( to top ,rgba(0,0,0,1), 20%,rgba(0,0,0,0.3)); /* rgba(0,0,0,0.30));*/
		border-radius : 4px ;
                background-size: 100% 100%;
                transition : all 0.3s; /*background 0.5s;
		/*color:#FFFFFF ;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 1);*/
	}
	.nav > .menu > li:first-child {
		background: none;
	}
	.nav > .menu > li:hover {
                color: #FF9900;
                background: rgba(0,0,0,0.5); /*background: linear-gradient( to top ,rgba(0,0,0,0.8), 20%,rgba(0,0,0,0.1));*/
                /*background-size: 100% 100%;
		/*border : white 1px solid;*/	
	}
	.nav {
		/*background:#FF3333 ;*/
	}
	engSearch form {
		/*width : 65vw;*/
	}
	engSearch .inp {
		/*width : calc(65vw - 46px);*/
		/*height:46px; */
	}