/* 
    Created on : 2 févr. 2016, 12:09:23
    Author     : Durançon M&J
*/

* {
    margin: 0;
    padding: 0;
}
img {
    border: none;
}

.clear {
    clear: both;
}
/*--STYLE DU MENU DE NAVIGATION--*/

#container-menu {/*barre de menusur 100%*/
    width: 100%;
    background-color: #734635 ;/*brun*/
    position: absolute;
    top: 88px;
    text-align: center;
    min-width: 277px;
}

#container-menu nav {
    display: inline-block;
    position: relative;
    width: 100%;
}

#container-menu a {
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 8px 10px;
    text-decoration: none;
    text-transform: uppercase;
}

/* STYLE PICTO ACCUEIL*/
.icon-home::before {
    font-size: 20px;
    margin: -4px auto;
}

/*FIN STYLE PICTO ACCUEIL*/
.icon-menu:before {
   font-family: "fontello";
   content: '\e800';
   color : #ffffff;
   font-size: 30px;
 } 

.menu-320 {/*a expliquer*/
    background-color: #734635;
    display: none;
    position: absolute;
    text-align: center;
    top: -46px;
    height: 46px;
}

.menu-320 img {
    width: 100%;
}

#container-menu a:hover {/*foncer le lien de menu au survol*/
    background-color: rgba(0,0,0,0.3); 
}

.selected{/*mettre en veleur le menu sélectionné*/
    background-color: rgba(0,0,0,0.3); 
}

li {
    display: inline-block;
    list-style-type: none;
    position: relative;
}

li li {
    display: block;
    text-align: left;
}

li li li {
    float: none;
    text-align: left;
}

ul ul {/*container du sous-menu de niveau 1*/
    background-color: #8e826b;/*brun*/
    display: none;
    left: 0;
    position: absolute;
    top: 33px;
    width: 215px;
    z-index: 1;
}

ul ul ul {/*container du sous-menu de niveau 2*/
    background-color: #9e9689;/*brun clair*/
    display: none;
    left: 215px;
    position: absolute;
    top: 0px;  
}

li:hover .first-menu {
    display: block;
    text-align: left;
}

li li:hover .two-menu {
    display: block;
    text-align: left;
}

/*--FIN DE STYLE DU MENU DE NAVIGATION--*/


/********Media queries********/

@media all and (max-width: 1190px) and (min-width: 1024px){

    #container-menu nav {
        margin-left: 148px;
        width: 85%;
    }

}

@media all and (max-width: 839px){
    
    
    #container-menu {
        position: absolute;
        text-align: left;
        top: 141px;
        width: 100%;
        z-index: 10;
    } 
     
    .menu-320 {
        display: block;
    }
    
    
    .menu-320 > li {
        display: block;
    }
    
    #container-menu nav li {
        display: none;
        border-top: 1px solid #ababab;
    }
    
    #container-menu nav {
        display: block;
    }
    
    #container-menu:hover li {
        display: block;
    }
        
    ul ul {
        display: block;
        left: 0;
        position: relative;
        top: 0;
        width: 100%;
        z-index: 1;
        background-color: #8e826b;
    }

    
    li li {
        padding-left: 20px;
    }
    

    ul ul ul {
        background-color: #9e9689;
        display: block;
        left: 0px;
        position: relative;
        top: 0;
        width: 100%;
    }


    li li li {
        float: none;
        padding-left: 50px;
        text-align: left;
    }

    
}