*{
    margin: 0px;
    padding: 0px;
    font-family: Avenir, sans-serif;
    font-weight: bold;
  font-size: 1.0vw;
}

nav{
   width: 90%;
     margin: 0 auto;
	 padding-bottom: 0.5em;
	 padding-top: 0.5em;
	    background:linear-gradient(-45deg,#00BF85 15%, yellow 50%, green 95%);
    position: sticky;
   height:5.5vw;	
    transform-origin: 0% -50%;
    animation: 2s slidein2;
	top: 0%;

}

nav ul{
    list-style-type: none;
      flex-direction : row;
    display: flex;   
	
}

.deroulant a:hover {
 *font-size: 1.5vw;
}
.sous a:hover {
*font-size: inherit;
*font-size: 1.2vw;;
}

nav ul li{
    flex: 1 1 auto;
    text-align: center;
    position: relative; 
*border-radius: 50px;
     border-right: 2px solid;
     color: white;
  }

nav a{
    display: block;
    text-decoration: none;
    color: white;*#993300;*#7FFFD4;
    * border-right: 2px solid;
*border-left: 2px solid;*jmp
    padding-right: 0px;
padding-top: 15px;
padding-bottom: 0px;
*background-color: RGBa(255,238,0,50)
max-height: 60px;
white-space: nowrap;
}

#menu a:hover > .sous {
height: auto;
max-height: 60px;
}
#menu a >.sous {
max-height: 0;
 overflow: hidden;
*display: block;
    transition: all 2s ease-in-out;
}

.sous a:hover{
    height: auto;
max-height: 100px;
    color: white;
    border-bottom: 2px solid gold;
  animation-name: couleur;
    animation-duration: 3s;
animation-iteration-count: infinite;
}

.sous ul li {
color: RGBa(255,235,3,50);
background-color: yellow;
}

.sous {
    display: none;
    *box-shadow: 0px 1px 40px white;
* background-color: RGBa(255,238,0,50);*#008B00;
    position: absolute; 
    width: auto;
    z-index: 1000;
*list-style-type: none;
*overflow: hidden;
flex: 1 1 auto;
transform-origin: 0% -50%;
animation: 2s slidein;

}

.sous2, .sous2_g, .sous2_g_h1, .sous2_h, .sous2_m , .sous2_g_h2 {
    display: none;
    /*background-color: white;*RGBa(0,175,178,255);*#008B00;*/
    position: absolute;
	white-space: nowrap;
    width: auto;
    left: 100%;
    top: 0px;
    /*z-index: 500;*/
list-style-type: none;
transform-origin: 0% -50%;
animation: 2s slidein;
}


.sous3, .sous3_g, .sous3_g2, .sous4, .sous4_g {
    display: none;
    *box-shadow: 0px 1px 40px white;
 *background-color: white;*RGBa(0,175,178,255);*#008B00;
    position: absolute;
    white-space: nowrap; 
    width: auto;
*left: 100%;
top: 0px;
    z-index: 1000;
list-style-type: none;
transform-origin: 0% -50%;
animation: 2s slidein;
}
.sous4_g {
left: -210%;
}

nav .sous2 a, nav .sous2_g a, nav .sous2_g_h1 a,nav .sous2_g_h2 a, nav .sous2_h a, nav .sous2_m a{
	color: black;
}

.sous li:hover .sous2 {
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
  }

.sous2 li:hover .sous3{
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;

}
.sous2_g_h1 li:hover .sous3_g{
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;
}
.sous2_g_h2 li:hover .sous3_g{
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;

}
.sous2_g_h1 li:hover .sous3_g2{
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
}
.sous2_g li:hover .sous3_g2{
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
background-color: white;*RGBa(0,175,178,255);*#008B00;

}

nav > .sous4 li a {
background-color: white;
*jmp
}
nav > .sous4_g li a {
background-color: white;
*jmp
}


.sous3 li:hover .sous4 {
    display: flex;
 
    flex-direction : column;
    flex-flow: column wrap;
  * jmp  
}
.sous3_g li:hover .sous4_g {
    display: flex; 
    flex-direction : column;
    flex-flow: column wrap;
  * jmp  
}



nav > ul li:hover .sous {
    display: flex;
*flex: 1 1 auto;
    flex-flow: column wrap;

}

#texte .sous .class_li a:active {background:blue; color:red; } 




.sous li{
    flex: 1 1 auto;
    text-align: left;
    width: auto;
	background-color: RGBa(203,16,33,255);

}
nav .sous3 li a{
    flex: 1 1 auto;
    text-align: left;
    width: auto;
	background-color: RGBa(162,208,0,50);
}
nav .sous3_g li a, .sous3_g2 li a{
    flex: 1 1 auto;
    text-align: left;
    width: auto;
	background-color: RGBa(162,208,0,50);
}
.sous a{
    padding: 10px;
   border-bottom: 2px solid  white;
/*border-radius: 50px;*/
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,0,150);
    font-size: 1vw;
}
.deroulant a:hover {
 font-size: 1vw;
 /*width: 100%;*/
}

nav ul a:hover {
  color: yellow;
  font-size: 1vw;
 
}
nav ul a:hover > nav {
	 width: 100%;
}
.sous2 li:hover .sous3 
{
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;

}


     
 @media only screen and (max-width:800px) {   /*smartphone*/

 #menu {
	left: -45%;
    top: 5%;	
 }

nav{
   width: 12%;
  	 text-align: right;
	 
    }
nav a {
	border-bottom: 1px solid;
    padding-bottom: 10px;
white-space: nowrap;	
	}
.deroulant a:hover {
 font-size: 1.2vw;
}
	
nav ul {
   display: flex;	
    flex-direction : column;
 background:linear-gradient(-45deg,#00BF85 15%, yellow 50%, green 95%);
 border-bottom: 2px solid;
 
}
nav .sous_h ul{
	display: flex;
    flex-direction : column;
    background:linear-gradient(-45deg,#00BF85 15%, yellow 50%, green 95%);
    border-bottom: 2px solid;
}
.sous2_h ul, .sous2_g_h1 ul, .sous2_m ul, .sous2_g_h2 ul{ 
  *display: flex;
  *flex-direction : row;
 background:linear-gradient(-45deg,#00BF85 15%, yellow 50%, green 95%);
 border-bottom: 2px solid;
}
.sous li:hover .sous2_h{
    display: flex;
	flex-direction : row;
    
   
}

.sous2_h li:hover .sous3 {
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;
}


.sous li:hover .sous2_g_h1{
    display: flex;
	flex-direction : row;
   
}
.sous li:hover .sous2_g_h2{
    display: flex;
	flex-direction : row;
   
}
.sous2_g_h li:hover .sous2_h1 {
	/*visibility: hidden;*/
	color: red;
	background : 0;
}
.sous2_g_h li:hover .sous3_g {
    display: flex; 
	flex-direction : column;
   flex-flow: column wrap;
}
.sous li:hover .sous2_m {
    display: flex;
	flex-direction : row;
    
}
.sous {
    left: 100%;
    top: 0%;
z-index: 100;
}	
 
.sous2  {
	*left: 10vw;
		top: -50%;		
}

.sous2_g {
    *left: 20vw;
	top: -20%;
}	
.sous2_h {
	left: scrollWidth; /*16vw;*/
	top: 5vw;		
}
.sous2_g_h1 {
    left: 16vw;
	top: 0%;
z-index: 500;
}	
.sous2_g_h2 {
    left: 98%;
	top: 0%;
z-index: 500;
}	

.sous2_m {
    left: scrollWidth;/*16vw;*/
	top: -73%;
}	

.sous3 {
	left: 0vw;
	top: 100%;
}

.sous2_b {
*left: -2.5vw;
*top: 5.2vw;
}
.sous2_g {
*left: -4.5vw;
}

.sous3_g, .sous3_g2 {
	display: none;
    left: 0vw;
	top: 100%;
	z-index: 100;
}}

@media only screen and (min-width: 800px) {
	
	.sous2_g_h li:hover .sous3_g {
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;
}
.sous2_h li:hover .sous3 {
    display: flex; 
	flex-direction : column;
    flex-flow: column wrap;
}
.sous li:hover .sous2_h{
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
 }

.sous li:hover .sous2_g_h1 {
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
}
.sous li:hover .sous2_g_h2 {
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
}
.sous li:hover .sous2_m {
    display: flex;
	flex-direction : column;
    flex-flow: column wrap;
}
	@keyframes couleur{
    from{
         color: RGBa(0,0,0,0);
    }
  
    50%{
        color: orange;*RGB(255,127,0);*#ffcc66;
      }
 
    to{
        background-color: transparent;
    }
}
	
.deroulant > a::after
{
    content: "\25bc";
    font-size: 1.2vw;*18px;
    display: block;
    margin-top: -10px;
    color: RGBa(0,0,0,0); *RGBa(255,235,3,250);
    animation-name: couleur;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}
.sous li > a::after
{
    content: "\0025BA ";/*0025C4*/
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
    color: RGBa(0,0,0,0); *RGBa(255,235,3,250);
    animation-name: couleur;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.sous li > a::before
{
    content: "\0025C4";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
    color: RGBa(0,0,0,0); *RGBa(255,235,3,250);
    animation-name: couleur;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
nav .f1 > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
 nav .f0 > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
 nav .f0 > a::after
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
 nav .f1 .sous2 li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline; 
    *margin-top: -18px;
 }
  nav .f1 .sous2 li > a::after
{
    content: "";
    font-size: 1.2vw;
    display: inline; 
    *margin-top: -18px;
 }
 nav .sous .sous2 > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
.sous2_h li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }

 
 .sous2_g_h1 li > a::after
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
  .sous2_g_h2 li > a::after
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
 }
 .sous3_g li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
}
 .sous2_g_h1 .sous3_g2 li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
}
 .sous2_g .sous3_g2 li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
}

 .sous2_m li > a::before
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
}
 .sous2_m li > a::after
{
    content: "";
    font-size: 1.2vw;
    display: inline;
    *margin-top: -18px;
}
.sous {
 max-width: 45vw;
}
.sous2 {
left: 100%;
	}
.sous2_b {
left: -2.5vw;
top: -3.2vw;
}
.sous2_m {
	top: -3vw;
	left:0%;
	
}
.sous2_g, .sous2_g_h1 {
left: -4.5vw;
}
.sous2_g_h2 {
left: -7.5vw;
}
.sous3 {
left: 100%;
:after: inherit;
}
.sous3 li > a::after {
	content: "";
}
.sous3_g {
width: auto;
   left: -8vw;
}
.sous3_g2 {
   width: auto;
   left: -6vw;
}
@keyframes slidein {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes slidein2 {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }

}}