:root {
    --height-header: 70px;
    --height-header-second: 65px;
}
@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */
    font-family: 'cac_champagneregular';
    src: url('../fonts/Plumpfull.ttf');
}

.clearfix-header {
    display: flex;
    justify-content: space-between;
    height: var(--height-header-second);
}


@media screen and (max-width: 768px) {
    .clearfix-header {
        justify-content: center;
    }

   /* .navbar-header {
        height: 3px;
        line-height: 30px;
    }*/
}

.clearfix-header__element:last-child, .clearfix-header__element:first-child {
    align-self: flex-end;
}


.vtitle {
    /*width: 100%;*/
    text-align: center;
    font-size: 30px;
    /*  float: left;
    position: relative;
    top: 8px;
    left: 25px;*/
    text-shadow: -5px -5px 12px black;
    color: #f6ea07;
    /* font-family: 'cac_champagneregular';*/
}

.vdescription {
    /*width: 100%;*/
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    /*float: left;
    position: relative;
    top: 22px;
    left: 18px;*/
    color: white;
    font-family: Tahoma;
}


/*.clearfixImg {
    display: flex;
    justify-content: space-between;
    background-color: black;
}*/

/****************************AGRICE******************************/
.agrice_title .first_main_app {
    margin: 0;
    z-index: 0;
    background-color: #ccae66;
}

.agrice_title .clearfix {
    /*padding: 0px;*/
  /*  margin: 0px -3px 0px -3px;*/
    /*height: 90px;*/
    background-image: url('../Images/titreAgrice.png');
    background-repeat: no-repeat;
    background-size:cover;
  /*  padding-left: 850px;
    padding-top: 30px*/
}



.agrice_title > header {
    /*width: 129%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;*/
}

/*.agrice_title > header {
	padding: 2.875em 1.875em 1.875em;
}*/
.agrice_title > header {
    /*padding: 0.5% 0.5% 0.5%;*/
}

    .agrice_title > header h1 {
        font-size: 2.125em;
        line-height: 1.3;
        margin: 0;
        float: left;
        font-weight: 800;
    }

    .agrice_title > header span {
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5em;
        padding: 0 0 0.6em 0.1em;
    }

    .agrice_title > header nav {
        float: right;
    }

        .agrice_title > header nav a {
            display: block;
            float: left;
            position: relative;
            width: 2.5em;
            height: 2.5em;
            background: #fff;
            border-radius: 50%;
            color: transparent;
            margin: 0 0.1em;
            border: 4px solid #165f1c;
            text-indent: -8000px;
        }

            .agrice_title > header nav a:after {
                content: attr(data-info);
                color: #165f1c;
                position: absolute;
                width: 600%;
                top: 120%;
                text-align: right;
                right: 0;
                opacity: 0;
                pointer-events: none;
            }

            .agrice_title > header nav a:hover:after {
                opacity: 1;
            }

            .agrice_title > header nav a:hover {
                background: #165f1c;
            }



                .agrice_title > header nav a:hover:before {
                    color: #fff;
                }


.agrice_navBar {
    width: 100%;
    border-bottom: 4px solid #0d7618;
    background-image: -moz-radial-gradient(5px);
    background-image: -webkit-linear-gradient(top, #0d7618, #000);
    background-image: -moz-linear-gradient(top, #0d7618, #000);
    background-image: -o-linear-gradient(top, #0d7618, #000);
    background-image: linear-gradient(to bottom, #0d7618, #000);
    -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    z-index: 5;
}

    /* general ul style */
    .agrice_navBar ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        z-index: 5;
    }

    /* first level ul style */
    .agrice_navBar > ul,
    .agrice_navBar .cbp-hrsub-inner {
        z-index: 5;
    }

        .agrice_navBar > ul > li {
            display: inline-block;
            z-index: 5;
        }

            .agrice_navBar > ul > li > a {
                font-weight: 600;
                color: #fff;
                display: inline-block;
                padding: 0px;
                word-wrap: break-word;
                margin: 10px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
                -webkit-transition: all 0.30s ease-in-out;
                -moz-transition: all 0.30s ease-in-out;
                -o-transition: all 0.30s ease-in-out;
                font-size: 14px;
                z-index: 5;
            }

                .agrice_navBar > ul > li > a:active {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }


                .agrice_navBar > ul > li > a:focus {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }

    /* sub-menu */
    .agrice_navBar .cbp-hrsub {
        display: none;
        position: absolute;
        background: #fff;
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        left: 0;
     /*   background-image: url(imagess/main.jpg);*/
        margin: 0 auto;
        margin-top: 0px;
        border: 1px solid #CCCCCC;
        border-bottom: 2px solid #0d7618;
        border-top: 2px solid #0d7618;
        box-shadow: 1px 1px 12px #555;
        z-index: 5;
    }

        .agrice_navBar .cbp-hrsub a:hover {
            color: #70d70a;
            z-index: 5;
        }

            .agrice_navBar .cbp-hrsub a:hover #cadre #cmb_rech .cmb_rech {
                display: none
            }

.cbp-hropen .cbp-hrsub {
    display: block;
    position: absolute;
    z-index: 5;
    padding-bottom: 3em;
}

.agrice_navBar .cbp-hrsub ul li:hover ul {
    /*display:block;*/
    z-index: 5;
}

.agrice_navBar .cbp-hrsub li:hover ul li {
    float: none;
    z-index: 5;
}

#menu li ul {
    /*position:absolute;*/
    z-index: 5;
}

.agrice_navBar .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 0.1em 0;
    z-index: 5;
}

.agrice_navBar .cbp-hrsub-inner:before,
.agrice_navBar .cbp-hrsub-inner:after {
    content: " ";
    /*display: table;*/
    z-index: 5;
}

.agrice_navBar .cbp-hrsub-inner:after {
    clear: both;
    z-index: 5;
}

.agrice_navBar .cbp-hrsub-inner > div a {
    line-height: 22px;
    text-align: left;
    font-family: 'Times New Roman';
    color: #000;
    z-index: 5;
}

.agrice_navBar .cbp-hrsub h4 {
    color: #196920;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 10px;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
    z-index: 5;
}

/* Examples for media queries */
/*
@media screen and (max-width: 52.75em) {

    .agrice_navBar {
        font-size: 80%;
    }
}

@media screen and (max-width: 43em) {

    .agrice_navBar {
        font-size: 120%;
        border: none;
    }

        .agrice_navBar > ul,
        .agrice_navBar .cbp-hrsub-inner {
            width: 100%;
            padding: 0;
        }

        .agrice_navBar .cbp-hrsub-inner {
            padding: 0 2em;
            font-size: 75%;
        }

        .agrice_navBar > ul > li {
            display: block;
            border-bottom: 4px solid #47a3da;
        }


        .agrice_navBar .cbp-hrsub {
            position: relative;
        }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }
}

@media screen and (max-width: 36em) {
    .agrice_navBar .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}*/



/****************************AGROMEX******************************/
:root {
    --agromex-color-primary: #ccae66;
}


.agromex_title .first_main_app {
    margin: 0;
    z-index: 0;
    background-color: var(--agromex-color-primary);
}

.agromex_title .clearfix {
    /* padding: 0px;*/
    /*margin: 0px -3px 0px -3px;*/
    height: var(--height-header);
    background-image: url('../Images/titreAgromex.png');
    background-repeat: no-repeat;
    background-size: 100% 72px;
    /*   padding-left: 850px;
    padding-top: 30px*/
}



.agromex_title > header {
    /*width: 129%;
    max-width: 70em;*/
    /*margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;*/
}

/*.agromex_title > header {
	padding: 2.875em 1.875em 1.875em;
}*/
.agromex_title > header {
   /* padding: 0.5% 0.5% 0.5%;*/
}

.agromex_title > header h1 {
    font-size: 2.125em;
    line-height: 1.3;
    margin: 0;
    float: left;
    font-weight: 800;
}

.agromex_title > header span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.6em 0.1em;
}

.agromex_title > header nav {
    float: right;
}

.agromex_title > header nav a {
    display: block;
    float: left;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    color: transparent;
    margin: 0 0.1em;
    border: 4px solid #5f5416;
    text-indent: -8000px;
}

.agromex_title > header nav a:after {
    content: attr(data-info);
    color: #5f5416;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.agromex_title > header nav a:hover:after {
    opacity: 1;
}

.agromex_title > header nav a:hover {
    background: #5f5416;
}



.agromex_title > header nav a:hover:before {
    color: #fff;
}

.agromex_navBar {
    width: 100%;
    border-bottom: 4px solid #765a0d;
    background-image: -moz-radial-gradient(5px);
    background-image: -webkit-linear-gradient(top, #765a0d, #000);
    background-image: -moz-linear-gradient(top, #765a0d, #000);
    background-image: -o-linear-gradient(top, #765a0d, #000);
    background-image: linear-gradient(to bottom, #765a0d, #000);
    -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    z-index: 5;
}

    /* general ul style */
    .agromex_navBar ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        z-index: 5;
    }

    /* first level ul style */
    .agromex_navBar > ul,
    .agromex_navBar .cbp-hrsub-inner {
        width: 100%;
        /*max-width: 70em;*/
        z-index: 5;
    }

        .agromex_navBar > ul > li {
            display: inline-block;
            z-index: 5;
        }

            .agromex_navBar > ul > li > a {
                font-weight: 600;
                color: #fff;
                display: inline-block;
                padding: 0px;
                word-wrap: break-word;
                margin: 10px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
                -webkit-transition: all 0.30s ease-in-out;
                -moz-transition: all 0.30s ease-in-out;
                -o-transition: all 0.30s ease-in-out;
                font-size: 14px;
                z-index: 5;
            }

                .agromex_navBar > ul > li > a:active {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }


                .agromex_navBar > ul > li > a:focus {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;    
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }

    /* sub-menu */
    .agromex_navBar .cbp-hrsub {
        display: none;
        position: absolute;
        background: #fff;
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        left: 0;
      /*  background-image: url(imagess/main.jpg);*/
        margin: 0 auto;
        margin-top: 0px;
        border: 1px solid #CCCCCC;
        border-bottom: 2px solid #765a0d;
        border-top: 2px solid #765a0d;
        box-shadow: 1px 1px 12px #555;
        z-index: 5;
    }

        .agromex_navBar .cbp-hrsub a:hover {
            color: #d7960a;
            z-index: 5;
        }

            .agromex_navBar .cbp-hrsub a:hover #cadre #cmb_rech .cmb_rech {
                display: none
            }

    .agromex_navBar .cbp-hropen .cbp-hrsub {
        display: block;
        position: absolute;
        z-index: 5;
        padding-bottom: 3em;
    }

    .agromex_navBar .cbp-hrsub ul li:hover ul {
        /*display:block;*/
        z-index: 5;
    }

    .agromex_navBar .cbp-hrsub li:hover ul li {
        float: none;
        z-index: 5;
    }

#menu li ul {
    /*position:absolute;*/
    z-index: 5;
}

.agromex_navBar .cbp-hrsub-inner > div {
    /*width: 33%;*/
    float: left;
    padding: 0 0.1em 0;
    z-index: 5;
}

.agromex_navBar .cbp-hrsub-inner:before,
.agromex_navBar .cbp-hrsub-inner:after {
    content: " ";
    /*display: table;*/
    z-index: 5;
}

.agromex_navBar .cbp-hrsub-inner:after {
    clear: both;
    z-index: 5;
}

.agromex_navBar .cbp-hrsub-inner > div a {
    line-height: 22px;
    text-align: left;
    font-family: 'Times New Roman';
    color: #000;
    z-index: 5;
}

.agromex_navBar .cbp-hrsub h4 {
    color: #694a19;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 10px;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
    z-index: 5;
}

/* Examples for media queries */
@media screen and (max-width: 768px) {
    .agromex_title .clearfix {
        background-image: url('../Images/titreAgromexMobile.png');
    }

    .agromex_title .navbar-toggle {
        background-color: #f9d888;
    }

    .navig_bar {
        background-color: var(--agromex-color-primary)
    }
    
}

/*@media screen and (max-width: 52.75em) {

    .agromex_navBar {
        font-size: 80%;
    }
}
*/
/*@media screen and (max-width: 43em) {

    .agromex_navBar {
        font-size: 120%;
        border: none;
    }

        .agromex_navBar > ul,
        .agromex_navBar .cbp-hrsub-inner {
            width: 100%;
            padding: 0;
        }

        .agromex_navBar .cbp-hrsub-inner {
            padding: 0 2em;
            font-size: 75%;
        }

        .agromex_navBar > ul > li {
            display: block;
            border-bottom: 4px solid #47a3da;
        }



        .agromex_navBar .cbp-hrsub {
            position: relative;
        }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }
}

@media screen and (max-width: 36em) {
    .agromex_navBar .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}*/



/***********************REEL**************************/
:root {
    --reel-color-primary: #cd1010;
}


.reel_title .first_main_app {
    margin: 0;
    z-index: 0;
    background-color: var(--reel-color-primary);
}

.reel_title .clearfix {
    /* padding: 0px;*/
    /*margin: 0px -3px 0px -3px;*/
    height: var(--height-header);
    background-image: url('../Images/titrereel.png');
    background-repeat: no-repeat;
    background-size: 100% 72px;
    /*   padding-left: 850px;
    padding-top: 30px*/
}



.reel_title > header {
    /*width: 129%;
    max-width: 70em;*/
    /*margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;*/
}

/*.reel_title > header {
	padding: 2.875em 1.875em 1.875em;
}*/
.reel_title > header {
    /* padding: 0.5% 0.5% 0.5%;*/
}

    .reel_title > header h1 {
        font-size: 2.125em;
        line-height: 1.3;
        margin: 0;
        float: left;
        font-weight: 800;
    }

    .reel_title > header span {
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5em;
        padding: 0 0 0.6em 0.1em;
    }

    .reel_title > header nav {
        float: right;
    }

        .reel_title > header nav a {
            display: block;
            float: left;
            position: relative;
            width: 2.5em;
            height: 2.5em;
            background: #fff;
            border-radius: 50%;
            color: transparent;
            margin: 0 0.1em;
            border: 4px solid #ed4e4c;
            text-indent: -8000px;
        }

            .reel_title > header nav a:after {
                content: attr(data-info);
                color: #ed4e4c;
                position: absolute;
                width: 600%;
                top: 120%;
                text-align: right;
                right: 0;
                opacity: 0;
                pointer-events: none;
            }

            .reel_title > header nav a:hover:after {
                opacity: 1;
            }

            .reel_title > header nav a:hover {
                background: #ed4e4c;
            }



                .reel_title > header nav a:hover:before {
                    color: #fff;
                }

.reel_navBar {
    width: 100%;
    border-bottom: 4px solid #ed5f5f;
    background-image: -moz-radial-gradient(5px);
    background-image: -webkit-linear-gradient(top, #ed5f5f, #c42f2f);
    background-image: -moz-linear-gradient(top, #ed5f5f, #c42f2f);
    background-image: -o-linear-gradient(top, #ed5f5f, #c42f2f);
    background-image: linear-gradient(to bottom, #ed5f5f, #c42f2f);
    -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    z-index: 5;
}

    /* general ul style */
    .reel_navBar ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        z-index: 5;
    }

    /* first level ul style */
    .reel_navBar > ul,
    .reel_navBar .cbp-hrsub-inner {
        width: 100%;
        /*max-width: 70em;*/
        z-index: 5;
    }

        .reel_navBar > ul > li {
            display: inline-block;
            z-index: 5;
        }

            .reel_navBar > ul > li > a {
                font-weight: 600;
                color: #fff;
                display: inline-block;
                padding: 0px;
                word-wrap: break-word;
                margin: 10px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
                -webkit-transition: all 0.30s ease-in-out;
                -moz-transition: all 0.30s ease-in-out;
                -o-transition: all 0.30s ease-in-out;
                font-size: 14px;
                z-index: 5;
            }

                .reel_navBar > ul > li > a:active {
                    color: #d70a0a;
                    word-wrap: break-word;
                    background: #860b0b;
                    -moz-box-shadow: 0 0 8px #860b0b;
                    -webkit-box-shadow: 0 0 8px #860b0b;
                    box-shadow: 0 0 8px #860b0b;
                    z-index: 5;
                }


                .reel_navBar > ul > li > a:focus {
                    color: #d70a0a;
                    word-wrap: break-word;
                    background: #860b0b;
                    -moz-box-shadow: 0 0 8px #860b0b;
                    -webkit-box-shadow: 0 0 8px #860b0b;
                    box-shadow: 0 0 8px #860b0b;
                    z-index: 5;
                }

    /* sub-menu */
    .reel_navBar .cbp-hrsub {
        display: none;
        position: absolute;
        background: #fff;
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        left: 0;
        /*  background-image: url(imagess/main.jpg);*/
        margin: 0 auto;
        margin-top: 0px;
        border: 1px solid #CCCCCC;
        border-bottom: 2px solid #ed5f5f;
        border-top: 2px solid #ed5f5f;
        box-shadow: 1px 1px 12px #555;
        z-index: 5;
    }

        .reel_navBar .cbp-hrsub a:hover {
            color: #d70a0a;
            z-index: 5;
        }

            .reel_navBar .cbp-hrsub a:hover #cadre #cmb_rech .cmb_rech {
                display: none
            }

    .reel_navBar .cbp-hropen .cbp-hrsub {
        display: block;
        position: absolute;
        z-index: 5;
        padding-bottom: 3em;
    }

    .reel_navBar .cbp-hrsub ul li:hover ul {
        /*display:block;*/
        z-index: 5;
    }

    .reel_navBar .cbp-hrsub li:hover ul li {
        float: none;
        z-index: 5;
    }

#menu li ul {
    /*position:absolute;*/
    z-index: 5;
}

.reel_navBar .cbp-hrsub-inner > div {
    /*width: 33%;*/
    float: left;
    padding: 0 0.1em 0;
    z-index: 5;
}

.reel_navBar .cbp-hrsub-inner:before,
.reel_navBar .cbp-hrsub-inner:after {
    content: " ";
    /*display: table;*/
    z-index: 5;
}

.reel_navBar .cbp-hrsub-inner:after {
    clear: both;
    z-index: 5;
}

.reel_navBar .cbp-hrsub-inner > div a {
    line-height: 22px;
    text-align: left;
    font-family: 'Times New Roman';
    color: #000;
    z-index: 5;
}

.reel_navBar .cbp-hrsub h4 {
    color: #694a19;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 10px;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
    z-index: 5;
}

/* Examples for media queries */
@media screen and (max-width: 768px) {
    .reel_title .clearfix {
        background-image: url('../Images/titrereelMobile.png');
    }

    .reel_title .navbar-toggle {
        background-color: #f9d888;
    }

    .navig_bar {
        background-color: var(--reel-color-primary)
    }
}

/*@media screen and (max-width: 52.75em) {

    .reel_navBar {
        font-size: 80%;
    }
}
*/
/*@media screen and (max-width: 43em) {

    .reel_navBar {
        font-size: 120%;
        border: none;
    }

        .reel_navBar > ul,
        .reel_navBar .cbp-hrsub-inner {
            width: 100%;
            padding: 0;
        }

        .reel_navBar .cbp-hrsub-inner {
            padding: 0 2em;
            font-size: 75%;
        }

        .reel_navBar > ul > li {
            display: block;
            border-bottom: 4px solid #47a3da;
        }



        .reel_navBar .cbp-hrsub {
            position: relative;
        }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }
}

@media screen and (max-width: 36em) {
    .reel_navBar .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}*/



/****************************softcompta******************************/
.softcompta_title .first_main_app {
    margin: 0;
    z-index: 0;
    background-color: #ccae66;
}

.softcompta_title .clearfix {
    /*padding: 0px;
    margin: 0px -3px 0px -3px;
    height: 90px;*/
    background-image: url('/Images/titresoftcompta.png');
    background-repeat: no-repeat;
    /*padding-left: 850px;
    padding-top: 30px*/
}



.softcompta_title > header {
   /* width: 129%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;*/
}

/*.softcompta_title > header {
	padding: 2.875em 1.875em 1.875em;
}*/
.softcompta_title > header {
   /* padding: 0.5% 0.5% 0.5%;*/
}

    .softcompta_title > header h1 {
        font-size: 2.125em;
        line-height: 1.3;
        margin: 0;
        float: left;
        font-weight: 800;
    }

    .softcompta_title > header span {
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5em;
        padding: 0 0 0.6em 0.1em;
    }

    .softcompta_title > header nav {
        float: right;
    }

        .softcompta_title > header nav a {
            display: block;
            float: left;
            position: relative;
            width: 2.5em;
            height: 2.5em;
            background: #fff;
            border-radius: 50%;
            color: transparent;
            margin: 0 0.1em;
            border: 4px solid #377cfa;
            text-indent: -8000px;
        }

            .softcompta_title > header nav a:after {
                content: attr(data-info);
                color: #377cfa;
                position: absolute;
                width: 600%;
                top: 120%;
                text-align: right;
                right: 0;
                opacity: 0;
                pointer-events: none;
            }

            .softcompta_title > header nav a:hover:after {
                opacity: 1;
            }

            .softcompta_title > header nav a:hover {
                background: #377cfa;
            }



                .softcompta_title > header nav a:hover:before {
                    color: #fff;
                }

.softcompta_navBar {
    width: 100%;
    border-bottom: 4px solid #224d9d;
    background-image: -moz-radial-gradient(5px);
    background-image: -webkit-linear-gradient(top, #224d9d, #000);
    background-image: -moz-linear-gradient(top, #224d9d, #000);
    background-image: -o-linear-gradient(top, #224d9d, #000);
    background-image: linear-gradient(to bottom, #224d9d, #000);
    -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
    z-index: 5;
}

    /* general ul style */
    .softcompta_navBar ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        z-index: 5;
    }

    /* first level ul style */
    .softcompta_navBar > ul,
    .softcompta_navBar .cbp-hrsub-inner {
        width: 100%;
        max-width: 70em;
        z-index: 5;
    }

        .softcompta_navBar > ul > li {
            display: inline-block;
            z-index: 5;
        }

            .softcompta_navBar > ul > li > a {
                font-weight: 600;
                color: #fff;
                display: inline-block;
                padding: 0px;
                word-wrap: break-word;
                margin: 10px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
                -webkit-transition: all 0.30s ease-in-out;
                -moz-transition: all 0.30s ease-in-out;
                -o-transition: all 0.30s ease-in-out;
                font-size: 14px;
                z-index: 5;
            }

                .softcompta_navBar > ul > li > a:active {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }


                .softcompta_navBar > ul > li > a:focus {
                    color: #d7960a;
                    word-wrap: break-word;
                    background: #866d0b;
                    -moz-box-shadow: 0 0 8px #866d0b;
                    -webkit-box-shadow: 0 0 8px #866d0b;
                    box-shadow: 0 0 8px #866d0b;
                    z-index: 5;
                }

    /* sub-menu */
    .softcompta_navBar .cbp-hrsub {
        display: none;
        position: absolute;
        background: #fff;
        width: 100%;
        max-height: 500px;
        overflow-y: scroll;
        left: 0;
        /*background-image: url(imagess/main.jpg);*/
        margin: 0 auto;
        margin-top: 0px;
        border: 1px solid #CCCCCC;
        border-bottom: 2px solid #224d9d;
        border-top: 2px solid #224d9d;
        box-shadow: 1px 1px 12px #555;
        z-index: 5;
    }

        .softcompta_navBar .cbp-hrsub a:hover {
            color: #b4d8fc;
            z-index: 5;
        }

            .softcompta_navBar .cbp-hrsub a:hover #cadre #cmb_rech .cmb_rech {
                display: none
            }

    .softcompta_navBar .cbp-hropen .cbp-hrsub {
        display: block;
        position: absolute;
        z-index: 5;
        padding-bottom: 3em;
    }

    .softcompta_navBar .cbp-hrsub ul li:hover ul {
        /*display:block;*/
        z-index: 5;
    }

    .softcompta_navBar .cbp-hrsub li:hover ul li {
        float: none;
        z-index: 5;
    }

#menu li ul {
    /*position:absolute;*/
    z-index: 5;
}

.softcompta_navBar .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 0.1em 0;
    z-index: 5;
}

.softcompta_navBar .cbp-hrsub-inner:before,
.softcompta_navBar .cbp-hrsub-inner:after {
    content: " ";
    /*display: table;*/
    z-index: 5;
}

.softcompta_navBar .cbp-hrsub-inner:after {
    clear: both;
    z-index: 5;
}

.softcompta_navBar .cbp-hrsub-inner > div a {
    line-height: 22px;
    text-align: left;
    font-family: 'Times New Roman';
    color: #000;
    z-index: 5;
}

.softcompta_navBar .cbp-hrsub h4 {
    color: #192269;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 10px;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
    z-index: 5;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .softcompta_navBar {
        font-size: 80%;
    }
}

@media screen and (max-width: 43em) {

    .softcompta_navBar {
        font-size: 120%;
        border: none;
    }

        .softcompta_navBar > ul,
        .softcompta_navBar .cbp-hrsub-inner {
            width: 100%;
            padding: 0;
        }

        .softcompta_navBar .cbp-hrsub-inner {
            padding: 0 2em;
            font-size: 75%;
        }

        .softcompta_navBar > ul > li {
            display: block;
            border-bottom: 4px solid #47a3da;
        }


        .softcompta_navBar .cbp-hrsub {
            position: relative;
        }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }
}

@media screen and (max-width: 36em) {
    .softcompta_navBar .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}