/*--------------------------------------------------------------------------------------------------------------*/
/*--- MENU ---*/
.com-menu {
    position: relative;
    display: inline;
    z-index: 998;
    background-color: transparent;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    width: 200px;
    font-family: "Open Sans", "Arial", sans-serif
    }
.com-menu ul {
    margin: 0;
    padding: 0
    }
.com-menu ul li {
    /* -- supprime la hauteur des li pour IE --*/
    display: inline
    }
.com-menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff
    }
.com-menu > ul > li > a {
    margin: 0 0 6px 0
    }
.com-menu ul li a:hover, .com-menu ul li.on a, .com-menu ul li a.lv1Over {
    display: block
    }
.com-menu > ul > li > a > span {
    background: #232659;
    color: #fff;
    padding: 5px 5px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold
    }
.com-menu > ul > li.lien01 > a > span {
    background: #14f6ea;
    color: #202656
    }
.com-menu > ul > li.lien02 > a > span {
    background: #e5fe58;
    color: #294f5a
    }
.com-menu > ul > li.lien03 > a > span {
    background: #b9fc57;
    color: #294f5a
    }
.com-menu > ul > li.lien04 > a > span {
    background: #038c70
    }
.com-menu > ul > li.lien05 > a > span {
    background: #00c590
    }
.com-menu > ul > li.lien06 > a > span {
    background: #38f8c5;
    color: #255057
    }
.com-menu > ul > li.lien07 > a > span {
    background: #b9fc57;
    color: #048d6f
    }
.com-menu > ul > li.lien01 > a > span:hover, .com-menu > ul > li.lien02 > a > span:hover, .com-menu > ul > li.lien03 > a > span:hover, .com-menu > ul > li.lien04 > a > span:hover, .com-menu > ul > li.lien05 > a > span:hover, .com-menu > ul > li.lien06 > a > span:hover, .com-menu > ul > li.lien07 > a > span:hover {
    background: #232659;
    color: #fff
    }
.com-menu ul li.lien_accueil {
    display: none
    }
/* --- SOUS MENU  --- */
.com-menu ul li ul, .com-menu ul.on li ul.on li ul, .com-menu ul.on li ul.on li ul.on li ul, .com-menu ul.on li ul.on li ul.on li ul.on li ul {
    display: none
    }
.com-menu ul li.on ul, .com-menu ul.on li ul.on li.on ul, .com-menu ul.on li ul.on li ul.on li.on ul, .com-menu ul.on li ul.on li ul.on li ul.on li.on ul {
    display: block;
    position: relative
    }
.com-menu ul li ul {
    margin: -5px 0 6px 0;
    padding: 0 0 0 0;
    width: 200px
    }
.com-menu ul li ul li {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    display: block;
    width: 200px;
    list-style-type: square
    }
.com-menu ul ul li a {
    margin: 1px 0 0 0;
    padding: 5px 0 5px 25px;
    display: block;
    font-weight: normal
    }
.com-menu ul li.lien01 ul li a {
    background: #14f6ea;
    color: #202656
    }
.com-menu ul li.lien02 ul li a {
    background: #e5fe58;
    color: #294f5a
    }
.com-menu ul li.lien03 ul li a {
    background: #b9fc57;
    color: #294f5a
    }
.com-menu ul li.lien04 ul li a {
    background: #038c70
    }
.com-menu ul li.lien05 ul li a {
    background: #00c590
    }
.com-menu ul li.lien06 ul li a {
    background: #38f8c5;
    color: #255057
    }
.com-menu ul li.lien07 ul li a {
    background: #b9fc57;
    color: #048d6f
    }
.com-menu ul li.lien01 ul li.on a, .com-menu ul li.lien01 ul li.on a span, .com-menu ul li.lien01 ul li a:hover, .com-menu ul li.lien01 ul li a:hover span, .com-menu ul li.lien02 ul li.on a, .com-menu ul li.lien02 ul li.on a span, .com-menu ul li.lien02 ul li a:hover, .com-menu ul li.lien02 ul li a:hover span, .com-menu ul li.lien03 ul li.on a, .com-menu ul li.lien03 ul li.on a span, .com-menu ul li.lien03 ul li a:hover, .com-menu ul li.lien03 ul li a:hover span, .com-menu ul li.lien04 ul li.on a, .com-menu ul li.lien04 ul li.on a span, .com-menu ul li.lien04 ul li a:hover, .com-menu ul li.lien04 ul li a:hover span, .com-menu ul li.lien05 ul li.on a, .com-menu ul li.lien05 ul li.on a span, .com-menu ul li.lien05 ul li a:hover, .com-menu ul li.lien05 ul li a:hover span, .com-menu ul li.lien06 ul li.on a, .com-menu ul li.lien06 ul li.on a span, .com-menu ul li.lien06 ul li a:hover, .com-menu ul li.lien06 ul li a:hover span, .com-menu ul li.lien07 ul li.on a, .com-menu ul li.lien07 ul li.on a span, .com-menu ul li.lien07 ul li a:hover, .com-menu ul li.lien07 ul li a:hover span {
    color: #274f57
    }
.com-menu ul li.lien01 ul li.on > a, .com-menu ul li.lien01 ul li a:hover, .com-menu ul li.lien02 ul li.on > a, .com-menu ul li.lien02 ul li a:hover, .com-menu ul li.lien03 ul li.on > a, .com-menu ul li.lien03 ul li a:hover, .com-menu ul li.lien04 ul li.on > a, .com-menu ul li.lien04 ul li a:hover, .com-menu ul li.lien05 ul li.on > a, .com-menu ul li.lien05 ul li a:hover, .com-menu ul li.lien06 ul li.on > a, .com-menu ul li.lien06 ul li a:hover, .com-menu ul li.lien07 ul li.on > a, .com-menu ul li.lien07 ul li a:hover {
    background-image: url(puce_01.png);
    background-repeat: no-repeat;
    background-position: 5px 9px;
    color: #274f57;
    font-weight: bold
    }
.com-menu ul ul ul {
    margin: 5px 0 4px 0;
    padding: 0
    }
.com-menu ul ul ul li a {
    font-size: 0.85em;
    color: #000;
    padding-left: 25px;
    padding-right: 5px;
    margin: 0;
    border-bottom: 1px solid #20486c;
    font-weight: normal
    }
/*---- 3EME NIVEAU ----*/
.com-menu ul.on li ul.on li.on ul {
    display: none
    }
.com-menu ul ul li {
    position: relative
    }
.com-menu ul.on li ul li:hover ul, .com-menu ul.on li ul.on li.on:hover ul, .com-menu ul ul li:hover ul {
    display: block;
    position: absolute;
    left: 198px;
    top: -5px;
    width: 150px;
    padding-left: 5px;
    background: url(pixou.png) repeat center center
    }
.com-menu ul ul li:hover ul.on {
    position: relative;
    left: 0;
    top: auto;
    width: auto;
    border-left: none;
    padding-left: 0
    }
/*----- iPads (portrait) ----------- */
@media only screen and (max-width: 962px) {
    /*----- Styles----- */
    .com-menu {
        width: 640px;
        display: block;
        margin: auto
        }
    body.accueil .com-menu {
        width: 440px
        }
    .com-menu ul li.lien_accueil {
        display: block
        }
    .com-menu > ul {
        -webkit-transition: 2s ease;
        -moz-transition: 2s ease;
        -o-transition: 2s ease;
        -ms-transition: 2s ease;
        transition: 2s ease;
        max-height: 38px;
        overflow: hidden
        }
    .com-menu > ul:hover {
        max-height: 1000px
        }
    .com-menu ul li.lien_accueil a span {
        display: none
        }
    .com-menu ul li.lien_accueil a:after {
        content: "MENU"
        }
    .com-menu ul li.lien_accueil a {
        color: #274f57;
        background: url(flecheMenuTab.png) no-repeat 616px 16px #b8fc57
        }
    body.accueil .com-menu ul li.lien_accueil a {
        background: url(flecheMenuTab.png) no-repeat 415px 16px #b8fc57
        }
    .com-menu ul li a span {
        background: transparent;
        color: #fff
        }
    .com-menu ul li a {
        background: #232659;
        display: block;
        width: 100%;
        text-decoration: none;
        padding: 8px 12px;
        color: #fff
        }
    .com-menu > ul > li.lien01 > a > span, .com-menu > ul > li.lien02 > a > span, .com-menu > ul > li.lien03 > a > span, .com-menu > ul > li.lien04 > a > span, .com-menu > ul > li.lien05 > a > span, .com-menu > ul > li.lien06 > a > span, .com-menu > ul > li.lien07 > a > span {
        background-color: transparent;
        color: #fff
        }
    .com-menu ul li.lien01.on a span, .com-menu ul li.lien01.on a, .com-menu ul li.lien02.on a span, .com-menu ul li.lien02.on a, .com-menu ul li.lien03.on a span, .com-menu ul li.lien03.on a, .com-menu ul li.lien04.on a span, .com-menu ul li.lien04.on a, .com-menu ul li.lien05.on a span, .com-menu ul li.lien05.on a, .com-menu ul li.lien06.on a span, .com-menu ul li.lien06.on a, .com-menu ul li.lien07.on a span, .com-menu ul li.lien07.on a, .com-menu ul li.lien01 a:hover span, .com-menu ul li.lien02 a:hover span, .com-menu ul li.lien03 a:hover span, .com-menu ul li.lien04 a:hover span, .com-menu ul li.lien05 a:hover span, .com-menu ul li.lien06 a:hover span, .com-menu ul li.lien07 a:hover span, .com-menu ul li a:hover span, .com-menu ul li a:hover {
        color: #274f57;
        background: #b8fc57
        }
    .com-menu > ul > li > a {
        text-transform: uppercase;
        font-size: 2em;
        font-weight: bold;
        padding: 10px 12px;
        margin: 0
        }
    .com-menu ul li ul, .com-menu ul li ul li {
        width: 630px
        }
    .com-menu ul li ul {
        margin: 5px 0
        }
    .com-menu ul li.lien01 ul li a, .com-menu ul li.lien02 ul li a, .com-menu ul li.lien03 ul li a, .com-menu ul li.lien04 ul li a, .com-menu ul li.lien05 ul li a, .com-menu ul li.lien06 ul li a, .com-menu ul li.lien07 ul li a, .com-menu ul li.lien01 ul li a span, .com-menu ul li.lien02 ul li a span, .com-menu ul li.lien03 ul li a span, .com-menu ul li.lien04 ul li a span, .com-menu ul li.lien05 ul li a span, .com-menu ul li.lien06 ul li a span, .com-menu ul li.lien07 ul li a span, .com-menu ul ul li a {
        margin: 0;
        background: #b8fc57;
        color: #274f57
        }
    .com-menu ul ul li:hover ul {
        display: block;
        position: absolute;
        left: 198px;
        bottom: 20%;
        width: 150px;
        padding-left: 5px;
        background: url(pixou.png) repeat center center;
        z-index: 100
        }
    .com-menu ul ul li:hover ul.on {
        width: 100%
        }
    }