#header #logo {
    height:100px;
    margin-top:20px;
    margin-left:20px;
    margin-bottom:25px;
    vertical-align: middle;
}

#header .title {
    font-size: 3em;
    position: relative;
    left:20px;
}

#header .headerright {
    float:right;
    padding:20px;
    margin-right: 50px;
}

#header .blocklangs {  
    float:left;
    background:#EEE;
    position: relative;
}
#menu .listePicto{
    position: absolute;
    right: 48px;
    display:inline-block;
}
#menu .listePicto li{
    vertical-align: top;
    display:inline-block;
    margin: 8px 2px;
    margin-bottom: 7px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: white;
    background-image: url(../images/header/rondBleu.png);
    background-repeat: no-repeat;
    color: #4C4D51;
    position: relative;
    z-index: 1;
}
#menu .listePicto li .fa{
    margin-top: 8px;
    font-size: 16px;   
}
#menu .listePicto li i{
    display: inline-block;
    margin: 6px;
    font-size: 17px;
    color: #406D73;
}

#menu .listePicto .material-icons{
    font-size: 17px;
}
#menu .listePicto .title {
    text-transform: none;
    letter-spacing: 0px;
    display: block;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    color: #666666;
    position: absolute;
    z-index: -1;
    opacity: 0;
    text-align: center;
    left: 0;
    width: 125px;
    margin-left: -45px;
    margin-top: 6px;
    background: #FFF;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 14px;
    font-family: Lato;
    border: 1px solid #406D73;
}
#menu .listePicto a:hover + .title {
    z-index: 2;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    opacity: 1;
}
#menu .listePicto .title:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #406D73 transparent;
}
#header .blocklangs a , #header .blocklangs .a {
    display: block;
    text-transform: uppercase;
    padding:2px 5px;
    font-weight:bold;
    color:#292929; 
    padding-top:10px;
    padding-bottom:9px;
    background:#EEE;
    text-align: center;
    width:40px;
    cursor: pointer;
}

#header .blocklangs a.current , #header .blocklangs a:hover {
    background:#286075;
    color:white;
    text-decoration: none;
}

#header .blocklangs .langs {
    position: absolute;
    top:34px;
    left:0;
    display: none;
}

#header .blocklangs:hover .langs {
    display:block;
}

#header #boxAccount {
    float:left; 
    padding:0 15px;
}

#menu {
    background: white;
    color: #4C4C51;
    height: 45px;
    position: relative;
    z-index: 1;
    font-family: "latoregular", Arial;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Premier niveau du menu */

#menu ul {
    text-align: center;
}

#menu ul li.m.active:after{
    content: " ";
    display: block;
    width: 100%;
    height: 15px;
    background-image: url(../images/header/oiseauMenu.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    bottom: -3px;
    z-index: 100;
}

#menu ul li.m {
    display: inline-block;
    position: relative;
}

#menu ul li.m a.m, #menu ul li.m.telephone {
    display: inline-block;
    padding: 14px 22px;
}
#menu ul li.m.telephone a:hover{
    text-decoration: none;
}
#menu ul li.m.telephone{
    font-family: "latobold", Arial;
    color: #3F6C72;
}

#menu ul li.m.telephone .material-icons{
    font-size: 18px;
    line-height: 0px;
    position: relative;
    top: 3px;
}

#menu ul li a.m:hover {
    color: #3F6C72;
    cursor:pointer;
    text-decoration: none;
}

/* Second niveau du menu */

#menu ul.sm {
    z-index: 10;
    position:absolute;
    top:45px;
    left:0;
    display: none;
    background:#406D73;
    color: white;
}

#menu ul.sm li.sm {
    float: none;
    width: 188px;
    font-size: 14px;
    line-height: 18px;
}

#menu ul.sm li.sm a.sm {
    display: block;
    padding: 10px 24px;
}

#menu ul.sm li.sm a.sm:hover {
    background:#028398;
    cursor:pointer;
    text-decoration: none;
}

#menu ul.m li.m:hover .sm {
    display: block;
    text-align: left;
}

/* Elements cachés */

#menu .menutab {
    display: none
}

#menu .mmenu {
    display:none;
    padding:7px 30px;
}

/*  ------------------------------------------------
    IDCOOKIE
    ------------------------------------------------ */

#idcookie {
    color:#FFF;
    background:rgba(0,0,0,0.7);
    position: fixed;
    bottom:20px;
    right:20px;
    width:270px;
    z-index:9999;
    box-shadow: 0px -1px 3px rgba(0,0,0,0.3);
    padding:10px 20px;
    padding-right:30px;
}

#idcookie span , #idcookie a {
    display: inline-block;
}

#idcookie .buttoncookie {
    display:inline-block;
    padding:10px;
    font-size: 1.5em;
    position: absolute;
    right:10px;
    top:0;
}

#idcookie .buttoncookie:hover {
    cursor: pointer;
    background:#000;
    color:#FFF;
    text-decoration: none;
}

.boutonAccueil{
    margin: 8px 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background-image: url(../../../../web/templates_main/frontend/images/elements/rond.jpg);
    background-repeat: no-repeat;
    color: #4C4D51;
    position: absolute;
    z-index: 1;
}

.boutonAccueil:hover{
    color: #3F6C72;
}

.boutonAccueil i {
    display: inline-block;
    margin: 6px;
    font-size: 17px;
}
.petitLogo{
    position: absolute;
    top: 5px;
    left: 45px;
}
/*  ------------------------------------------------
    RESPONSIVE
    ------------------------------------------------ */

@media screen and (max-width: 1400px) {
    .petitLogo {
        left: 5px;
    }
}
@media screen and (max-width: 1280px) {
    .menu2 .socialfixed {
        top: 57px !important;
        left: 128px;
    }
    #menu.menu2 ul.m {
        top: 70px;
    }
    .petitLogo {
        position: static;
        margin-top: 10px;
        margin-left: 22px;
    }
    #menu .listePicto {
        right: auto;
        left: 19px;
        margin-top: 10px;
    }
    
    #menu ul li.m.active:after{
        display: none;
    }

    #header {
        text-align: center;
    }

    #header .headerright {
        background:#444;
        position: fixed;
        bottom:0;
        left:0;
        width: 100%;
        padding:10px 20px;
        text-align: center;
        z-index: 1;
    }

    #header .headerright .bbottom {
        color:white;
        margin:0 20px;
        font-size:35px;
    }

    #header .headerright .bbottom:hover {
        text-decoration: none;
    }

    #header .blocklangs .langs {
        top:auto;
        bottom:34px;
    }

    #menu {
        position:fixed;
        top:0;
        margin-left:0;
        margin-top:0;
        height:auto;
        width:250px;
        left:-250px;
        height:100%;
        z-index: 1001;
    }

    /* Menu responsive */

    #menu ul li.m , #menu ul li.sm {
        display: block;
        float:none;
        width:auto;
    }

    #menu ul.m , #menu ul.sm {
        position: relative;
        top:0;
        left:0;
        text-align: left;
    }

    #menu ul.m {
        top: 50px;
    }

    /*#menu ul.m ul {
        padding-left:15px;
    }*/
    #menu ul.sm li.sm{
        width: 100%;
    }
    #menu li.m.open ul.sm {
        display: block;
    }

    #menu.menuactive {
        left:0;
    }

    body.menuactive .bodyinner {
        position: relative;
        left:250px;
    }

    body.menuactive #header .headerright {
        left:250px;
    }

    #menu .menutab {
        color: white;
        background:#286075;
        display:block;    
        position:absolute;
        text-align:center;
        width:50px;
        top:0;
        right:-50px;
        padding:10px 0px;
        cursor: pointer;
    }

    #menu .mmenu {
        display:block;
    }

    .boutonAccueil{
        margin-left: 20px;
        margin-top: 10px;
    }
    .socialfixed{
        left: 60px;
        top: 2px !important;
    }
}

