@media only screen and (min-width: 1024px) {
    .mobile-nav-toggle,
    .side-menu-toggle,
    .sub-menu-toggle,
    .slide-dots,
    #header ul.nav li.piv-copy {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .accueil-mobile-main-link { display: none; }
}

@media only screen and (max-width: 1023px) {

    button.plus-moins {
        width: 100%;
        text-align: left;
    }

    #header div.pivRecherche div#conteneurRecherche {
        top: 0;
    }

    .show-for-mobile { display: block; }
    .hide-in-mobile { display: none !important; }

    /* --- WIDTH RESETS --- */
    body, div.innerwrap,
    #header ul.nav,
    #content div.aside {
        min-width: 0;
        width: auto;
    }

    #header ul.pivLiens {
        display: none;
    }

    #content div.section { width: 100%; }

    .table-scroll { overflow-x: auto; margin-bottom: 1em; }
    .table-scroll table { margin-bottom: 0; }


    /* --- HIDDEN IN MOBILE --- */
    .nav-portail, #header p.langage span,
    #header div.client ul.configuration,
    #header div.client ul.socials,
    .sidebar-flexible, .question-retroaction,
    .questionretroaction, .rssMenuGauche { display: none; }


    /* --- HEADER BASICS --- */
    #header {
        height: 90px;
        z-index: 5;
        background: none;
    }

    #header div.client {
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


    /* --- HEADER LOGO --- */
    #header p.logo {
        top: 0;
        bottom: auto;
        z-index: 6;
        height: inherit;
    }

    #header div.innerwrap { height: inherit; }
    #header div.client { overflow: visible; }


    /* --- MOBILE TOGGLE BUTTONS --- */
    .mobile-nav-toggle,
    .side-menu-toggle {
        display: block;
    }

    .mobile-nav-toggle {
        float: right;
        margin-top: 0px;
        margin-left: 0px;
        width: 45px;
        height: 33px;
        box-sizing: border-box;
    }

    .mobile-nav-toggle {
        position: relative;
        margin-right: 16px;
    }

    .mobile-nav-toggle span {
        height: 3px;
        background: #000;
        width: 25px;
        position: absolute;
        top: 15px;
        left: 10px;
        border-radius: 100px;
    }

    .mobile-nav-toggle span:before,
    .mobile-nav-toggle span:after {
        content: '';
        height: 3px;
        background: #000;
        width: 100%;
        position: absolute;
        left: 0;
        top: -8px;
        border-radius: 100px;
    }

    .mobile-nav-toggle span:after {
        top: 8px;
    }

    /* --- MOBILE NAV --- */
    .nav-wrapper { position: relative; }

    #header ul.nav {
        display: none;
        position: absolute;
        top: 5px;
        left: 0;
        bottom: auto;
        margin-top: 0;
        width: 100%;
        background: #E6EAED;
        box-shadow: 0 7px 13px 0 rgba(0,0,0,.5);
    }

    #header ul.nav.nav-active { display: block; }

    #header ul.nav li {
        display: block;
        float: none;
        width: auto;
        background: none;
    }

    #header ul.nav li.autres-clienteles > a {
        display: none;
    }

    #header ul.nav li.autres-clienteles > ul,
    #header ul.nav li.liens-mobile > ul,
    #header ul.nav li.piv-mobile > ul {
        display: block;
        margin: 0;
    }

    #header ul.nav li.liens-mobile > ul,
    #header ul.nav li.piv-mobile > ul {
        text-align: center ;
    }

    #header ul.nav li.liens-mobile > ul,
     #header ul.nav li.piv-mobile > ul {
        background: #3d6977;
    }

        #header ul.nav li.liens-mobile > ul li,
         #header ul.nav li.piv-mobile > ul li {
            display: inline-block;
        }

            #header ul.nav li.liens-mobile > ul li a,
            #header ul.nav li.piv-mobile > ul li a {
                color: #fff;
                border-bottom: 0 !important;
                padding: 12px 13px;
                font-size: 1.2em;
                line-height: 1.2em;
            }

            #header ul.nav li.liens-mobile > ul li a {
                padding: 12px 35px;
            }

    #header ul.nav li a {
        padding: 12px 0 12px 20px;
        border: 0;
        border-bottom: 1px solid #bfccd2 !important;
        text-align: left;
    }

    body#accueil #header ul.nav li.accueil a {
        padding-bottom: 9px;
        border-bottom-width: 4px;
        background-color: #bfccd2;
    }

    #header ul.nav li.consommateurs,
    #header ul.nav li.commercants,
    #header ul.nav li.autres-clienteles {
        font-weight: normal;
    }

    #header ul.nav li a small {
        display: inline;
        position: static;
        font-size: 0.85em;
        font-style: normal;
    }

    #header div.client ul.socials {
        margin: 0;
        padding: 0;
        border: 0;
        position: absolute;
        top: 50px;
        right: 81px;
        background: none;
    }
    #header div.client ul.socials a { margin-left: 4px; }

    #header .nav-wrapper .piv-copy {
        border-bottom: 0px;
    }

    #header .nav-wrapper .piv-copy .nav-portail {
        display: block;
        position: static;
        margin: 0;
        padding: 0;
        width: auto;
        height: auto;
        background: #416678;
    }
    #header .nav-wrapper .piv-copy .nav-portail li {
        padding-right: 0;
        width: 33.333%;
        float: left;
    }
    #header .nav-wrapper .piv-copy .nav-portail li:nth-child(1),
    #header .nav-wrapper .piv-copy .nav-portail li:nth-child(4) {
        display: none;
    }
    #header .nav-wrapper .piv-copy .nav-portail li a {
        top: 0;
        height: auto;
        padding: 15px 0 15px 20px;
        font-size: 1em;
    }


    /* --- LANGUAGE LINK --- */
    #header p.langage {
        position: absolute;
        top: 19px;
        right: 131px;
        background: none;
    }

    [lang="fr"] #header p.langage a:before { content: 'EN'; }
    [lang="en"] #header p.langage a:before { content: 'FR'; }


    /* --- SEARCH BAR --- */
    #header div.client form {
        display: none;
        position: absolute;
        top: 92px;
        left: 0;
        right: 0;
        background: #E6EAED;
        padding: 16px;
        border-bottom: 1px solid #bfccd2;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
    }
    #header div.client form.search-active { display: block; }

    #header div.client form input#txtRechercheHeader {
        width: calc(100% - 37px);
        height: 25px;
        box-sizing: border-box;
    }

    #header div.client form input#btnsearch {
        margin-left: 12px;
    }

    /* --- Bouton Gestion en ligne --- */

    .lienBouton, .lienBouton2 {
        text-align: center;
        height: auto;
        padding: 0.75em;
    }


    /* --- GABARIT: ACCUEIL [<1024] --- */


    #content div.aside .ruban,
    #content div.aside h1.ruban,
    #content div.aside h2.ruban {}


    #content div.aside .ruban,
    #content div.aside h1.ruban,
    #content div.aside h2.ruban,
    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,
    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban {
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/h2.866px.consommateur.mobile.png) left top;
        padding-bottom: 13px;
    }

    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,
    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban {
        width: calc(100% + 47px);
    }

    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban {
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/h2.866px.commercant.mobile.png) left top;
    }


    /*#content div.section .ruban,
    #content div.aside .ruban,
    #content div.aside h1.ruban,
    #content div.aside h2.ruban,
    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,
    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban,*/
    #content div.section #entete_de_page span.ruban {
        position: relative;
        display: block;
        margin: 0;
        float: none;
        padding-bottom: 0;
        width: auto;
        border-radius: 0;
        background: none;
    }

    body:not(#consommateurs, #commercants) #content div.section #entete_de_page span.ruban {
        background: #304A59; /* Old browsers */
        background: -moz-linear-gradient(left, #304A59 0%, #304A59 12%, #3e617e 23%, #3e617e 34%, #304A59 45%, #304A59 99%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #304A59 0%,#304A59 12%,#3e617e 23%,#3e617e 34%,#304A59 45%,#304A59 99%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #304A59 0%,#304A59 12%,#3e617e 23%,#3e617e 34%,#304A59 45%,#304A59 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }

    /*#content div.section .ruban,
    #content div.aside .ruban,
    #content div.aside h1.ruban,
    #content div.aside h2.ruban,
    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,
    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban {
        margin-left: -30px;
        margin-bottom: 16px;
    }*/


    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,
    body#commercants #content div.left h2.ruban,
    body#commercants #content div.right h2.ruban {
        margin-left: -26px;
    }

    /*#content div.section .ruban:before,
    #content div.section .ruban:after,
    #content div.aside .ruban:before,
    #content div.aside .ruban:after,
    #content div.aside h1.ruban:before,
    #content div.aside h1.ruban:after,
    #content div.aside h2.ruban:before,
    #content div.aside h2.ruban:after {
        content: '';
        position: absolute;
        left: 2px;
        right: 2px;
        z-index: 1;
        border-top: 1px dashed rgba(0,0,0,.25);
        border-bottom: 1px dashed rgba(255,255,255,.25);
    }*/

    /*#content div.section .ruban:before,
    #content div.aside .ruban:before,
    #content div.aside h1.ruban:before,
    #content div.aside h2.ruban:before {
        top: 3px;
    }*/

    /*#content div.section .ruban:after,
    #content div.aside .ruban:after,
    #content div.aside h1.ruban:after,
    #content div.aside h2.ruban:after {
        bottom: 3px;
    }*/

   #content div.section #entete_de_page span.ruban span
    /*#content div.aside .ruban span,
    #content div.aside h1.ruban span,
    #content div.aside h2.ruban span,
    body#consommateurs #content div.left h2.ruban span,
    body#consommateurs #content div.right h2.ruban span,
    body#commercants #content div.left h2.ruban span,
    body#commercants #content div.right h2.ruban span*/ {
        position: relative;
        padding: 13px 56px 11px 24px;
    }

    /*#content div.aside .ruban span,
    #content div.aside h1.ruban span,
    #content div.aside h2.ruban span {
        position: relative;
        padding: 9px 0 5px 25px;
        background: none;
    }

    body#consommateurs #content div.left h2.ruban span,
    body#consommateurs #content div.right h2.ruban span,
    body#commercants #content div.left h2.ruban span,
    body#commercants #content div.right h2.ruban span {
        position: relative;
        padding: 10px 0 4px 25px;
        background: none;
    }*/

    /*#content div.section .ruban span:before,
    #content div.aside .ruban span:before,
    #content div.aside h1.ruban span:before,
    #content div.aside h2.ruban span:before {
        content: '';
        position: absolute;
        left: 2px;
        bottom: -7px;
        z-index: 1;
        width: 3.5px;
        height: 7px;
        background: #293741;
        border-radius: 7px 0 0 7px;
        box-shadow: 0 -1px 0 0 #32546C, 0 -2px 0 0 #32546C, 0 -3px 0 0 #32546C, 0px -6px 1px 0px #32546C;
        transform: scaleX(2);
    }*/

    /*#content div.section .ruban span:after,
    #content div.aside .ruban span:after,
    #content div.aside h1.ruban span:after,
    #content div.aside h2.ruban span:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: #386A8D;
        border-left: 1px solid rgba(0,0,0,.9);
        border-radius: 0 8px 8px 0;
        color: #fff;
        font-size: 20px;
        padding: 0 9px;
        line-height: 40px;
    }*/

    #content div.section #entete_de_page span.ruban span,
    body#consommateurs #content div.section #entete_de_page span.ruban span,
    body#commercants #content div.section #entete_de_page span.ruban span {
        background: none;
    }


    #content div.section ul li.section-consommateurs,
    #content div.section ul li.section-consommateurs a,
    #content div.section ul li.section-consommateurs a img,
    #content div.section ul li.section-commercants,
    #content div.section ul li.section-commercants a,
    #content div.section ul li.section-commercants a img {
        max-width: 100%;
        height: auto !important;
    }

    body #content div p.plus a {
        font-weight: 700;
    }


    /* --- SUB-NAV TOGGLE --- */
    .accordion-header { display: none; }

    #consommateurs #content,
    #commercants #content,
    #actuatlites #content { background-position-y: 60px; }
    #content div.aside { margin: 0; }
    #content div.aside.nav-section {
        padding-top: 0;
        width: 100%;
        background: none;
    }

    #consommateurs .sub-menu-toggle,
    #commercants .sub-menu-toggle,
    #content #menu_gauche .sub-menu-toggle {
        position: relative;
        display: block;
        padding: 20px 60px 20px 20px;
        min-height: 60px;
        box-sizing: border-box;
        background-color: #304a59;
        color: #fff;
        line-height: 19px;
    }

    body#consommateurs .sub-menu-toggle {
        background-color: #0b6295 !important;
    }

    body#commercants .sub-menu-toggle {
        background-color: #0f7163 !important;
    }

    body#consommateurs #header ul.nav li.consommateurs a,
    body#commercants #header ul.nav li.commercants a,
    body#accueil #header ul.nav li.accueil a,
    body#actualites #header ul.nav li.actualites a,
    body#a-propos-de-l-office #header ul.nav li.a-propos-de-l-office a,
    body#nous-joindre #header ul.nav li.nous-joindre a,
    body#parents #header ul.nav li.autres-clienteles ul li:nth-child(1) a,
    body#zone-enseignants #header ul.nav li.autres-clienteles ul li:nth-child(2) a,
    body#medias #header ul.nav li.autres-clienteles ul li:nth-child(3) a,

    body#consommateurs #header ul.nav li.consommateurs a:hover,
    body#commercants #header ul.nav li.commercants a:hover,
    body#accueil #header ul.nav li.accueil a:hover,
    body#actualites #header ul.nav li.actualites a:hover,
    body#a-propos-de-l-office #header ul.nav li.a-propos-de-l-office a:hover,
    body#nous-joindre #header ul.nav li.nous-joindre a:hover,
    body#parents #header ul.nav li.autres-clienteles ul li:nth-child(1) a:hover,
    body#zone-enseignants #header ul.nav li.autres-clienteles ul li:nth-child(2) a:hover,
    body#medias #header ul.nav li.autres-clienteles ul li:nth-child(3) a:hover {
        border-color: #bfccd2;
        border-bottom: 1px;
        background: #bfccd2;
    }

    #content #menu_gauche .sub-menu-toggle h2 {
        color: #fff;
    }

    #consommateurs .sub-menu-toggle:hover,
    #consommateurs .sub-menu-toggle:focus,
    #consommateurs .sub-menu-toggle:active,
    #commercants .sub-menu-toggle:hover,
    #commercants .sub-menu-toggle:focus,
    #commercants .sub-menu-toggle:active,
    #content #menu_gauche .sub-menu-toggle:hover,
    #content #menu_gauche .sub-menu-toggle:focus,
    #content #menu_gauche .sub-menu-toggle:active {
        text-decoration: none;
    }

    .sub-menu-toggle:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-65%) rotate(45deg);
        transform-origin: 65% 65%;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: solid #fff;
        border-width: 0 4px 4px 0;
        /* transition: transform .5s ease-in-out; */
    }
    .sub-menu-toggle.sub-menu-active:after {
        transform: translateY(-65%) rotate(225deg);
    }

    .sub-menu-toggle h2 {
        margin: 0;
    }

    .sub-menu-toggle small {
        display: inline-block;
        margin-right: 4px;
    }

    #content div.section div.retour-a-la-page-precente {
        padding-top: 15px;
    }


    body#a-propos-de-l-office #content .section .bloc-presentation-album-laureat .twocolumns .section.right,
    body#a-propos-de-l-office #content .section .bloc-presentation-album-laureat .twocolumns .section.left {
        float: left;
        width: unset;
        margin-right: 15px;
    }

    #c9038 div.liste_activites {
        height: auto !important;
    }

    #c9038 div.liste_activites img {
            width: 109px;
            height: 74px;
            margin-top: 17px;
    }

    #content div.aside.nav-section #menu_gauche ul.nav-header > li.header > a { display: block; }
    #content div.aside.nav-section ul.nav-header li.header.fleche > a { width: auto; }
    #content div.aside ul.sous-menu {
        position: static;
        width: auto;
        border: none;
    }
    #content div.aside.nav-section ul.nav-header li.header.fleche > a {
        padding-right: 40px;
    }
    #content div.aside.nav-section ul.nav-header li.header.fleche > a:after {
        content: '';
        position: absolute;
        top: 40%;
        right: 16px;
        transform: scale(.5) translateY(-65%) rotate(45deg);
        transform-origin: 65% 65%;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: solid #304a59;
        border-width: 0 4px 4px 0;
    }
    #content div.aside.nav-section ul.nav-header li.header.fleche.focus > a:after {
        transform: scale(.5) translateY(-65%) rotate(225deg);
    }


    #consommateurs .accordion,
    #commercants .accordion {
        width: auto;
        max-width: none;
        border: 0;
    }

    .menu-opc {
        position: relative;
        z-index: 100;
        min-height: 0;
    }


    .menu-opc #accordion {
        position: relative;
        top: 0;
        left: 0;
        z-index: 4;
        width: 100%;
        /*display: none;*/


        /*
        max-height: 0;
        overflow: hidden;
        border-top-width: 0;
        border-bottom-width: 0;
        */
        /* transition: max-height .5s ease-in-out, border .5s ease-in-out; */
    }

    .sub-menu-active + .menu-opc #accordion {
        display: none;
        /*
        max-height: 400px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        */
    }

    .menu-opc .accordion .link:hover { text-decoration: none; }


    /* --- CONSO/COMM: SHARED CAROUSEL STYLES --- */
    #carrousel-consommateurs {
        margin-left: auto;
        margin-right: auto;
    }

    .infosCarrousel { position: relative }

    .slide-dots {
        position: absolute;
        right: 16px;
        bottom: 0;
        z-index: 1;
    }

    .jumpto-dot {
        display: inline-block;
        margin: 8px;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        background: #5D6A6F;
        border: 2px solid #fff;
        box-shadow: 0 0 4px 0 rgba(0,0,0,.25);
        transition: background .25s ease-in-out;
    }

    .jumpto-dot.dot-active { background: #0b4ca9; }

    .twocolumns { margin: 0 20px; }
    .twocolumns:after {
        content: '';
        display: block;
        clear: both;
    }

    body#consommateurs #content div.twocolumns div.section.left,
    body#consommateurs #content div.twocolumns div.section.right,
    body#commercants #content div.twocolumns div.section.left,
    body#commercants #content div.twocolumns div.section.right {
        width: 48%;
        height: auto;
        padding: 20px;
        box-sizing: border-box;
    }

    #content .twocolumns div.section.left { float: left; }
    #content .twocolumns div.section.right { float: right; }

    /*#content div.section #entete_de_page span.ruban,
    body#consommateurs #content div.section #entete_de_page span.ruban,
    body#commercants #content div.section #entete_de_page span.ruban {
        display: block;
        margin-left: 0;
        width: auto;
        border-radius: 0;
    }*/

    #actualites #content div.section #entete_de_page span.ruban span {
        padding-right: 148px;
    }
    #content div.section #entete_de_page span.ruban span:before,
    #content div.section #entete_de_page span.ruban span:after {
        content: none;
    }

    .submenu a.actif {
        z-index: 100;
        border-right: 1px solid #0b4ca9;
        border-bottom: 0;
        box-shadow: 0px 2px 5px #cccccc;
    }
    .submenu ul.actif {
        display: block;
        position: static;
        width: auto;
        border-top: 0;
    }

    #content div.section h1 a.categorie {
        background: #fff !important;
        padding-right: 14px;
        line-height: 1.2;
    }
    #content div.section form.verifiez-un-permis p { width: auto; }
    #content div.section form.verifiez-un-permis p input {
        width: calc(100% - 36px);
        box-sizing: border-box;
    }


    /* --- NEWS SECTION [<1024] --- */
    #actualites #content { padding-top: 0; }
    #actualites #content div.aside.nav-section ul.nav-header {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 2;
        margin: 0 20px;
    }
    #actualites #content div.aside.nav-section ul.nav-header ul.nav-section  {
        margin: 0 0 13px;
        padding-bottom: 16px;
    }
    .archive_selector, .select_trimestres, .select_annees {
        float: right;
        margin-top: -43px;
        position: absolute;
        z-index: 1;
        top: auto;
        right: 20px;
    }


    /* ABOUT & PDF DOCUMENTS */
    /*
    REGULAR: #DADFE3 ~ #C5CBCD
    CONSOMM: #729BB2 ~ #416175
    COMMERC: #77B8AE ~ #3F776F;
    */
    p.pdf {
        position: relative;
        height: auto;
        background: rgb(218,223,227); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(218,223,227,1) 0%, rgba(197,203,205,1) 50%, rgba(218,223,227,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(218,223,227,1) 0%,rgba(197,203,205,1) 50%,rgba(218,223,227,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(218,223,227,1) 0%,rgba(197,203,205,1) 50%,rgba(218,223,227,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadfe3', endColorstr='#dadfe3',GradientType=0 ); /* IE6-9 */
    }

    p.pdf:before, p.pdf:after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    p.pdf:before {
        right: 10px;
        border: solid transparent;
        border-width: 5px 0 5px 10px;
        border-left-color: #304a59;
    }
    p.pdf:after {
        right: 19px;
        width: 6px;
        border-style: solid;
        border-width: 2px 0;
        border-color: #304a59 transparent;
    }

    .deux_lignes p.pdf a {
        margin-top: 0 !important;
    }

    .regular_button_gradient {
        background: rgb(218,223,227); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(218,223,227,1) 0%, rgba(197,203,205,1) 50%, rgba(218,223,227,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(218,223,227,1) 0%,rgba(197,203,205,1) 50%,rgba(218,223,227,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(218,223,227,1) 0%,rgba(197,203,205,1) 50%,rgba(218,223,227,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadfe3', endColorstr='#dadfe3',GradientType=0 ); /* IE6-9 */
    }


    .consomm_button_gradient {
        background: rgb(98,142,168); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(98,142,168,1) 0%, rgba(65,97,117,1) 50%, rgba(98,142,168,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(98,142,168,1) 0%,rgba(65,97,117,1) 50%,rgba(98,142,168,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(98,142,168,1) 0%,rgba(65,97,117,1) 50%,rgba(98,142,168,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#628ea8', endColorstr='#628ea8',GradientType=0 ); /* IE6-9 */
    }


    .commerc_button_gradient {
        background: rgb(119,184,174); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(119,184,174,1) 0%, rgba(63,119,111,1) 50%, rgba(119,184,174,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(119,184,174,1) 0%,rgba(63,119,111,1) 50%,rgba(119,184,174,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(119,184,174,1) 0%,rgba(63,119,111,1) 50%,rgba(119,184,174,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77b8ae', endColorstr='#77b8ae',GradientType=0 ); /* IE6-9 */
    }

    body#a-propos-de-l-office #content,
    body#nous-joindre #content,
    body#medias #content { padding-top: 0; }

    body#nous-joindre #content div.sousmenu_page ul.cols-1 a:link {
        box-sizing: border-box;
        width: 100%;
    }

    body#nous-joindre h3.fieldset {
        display: block;
        float: none;
    }

    body#nous-joindre table.form {
        border-collapse: collapse;
        left: 0;
    }

    body#nous-joindre table.form-layout-other,
    body#nous-joindre table.form-layout-other tbody,
    body#nous-joindre table.form-layout-other tr {
        display: block;
        box-sizing: border-box;
        width: 100%;
    }
    body#nous-joindre table.form-layout-other tr {
        margin-bottom: 4px;
    }
    body#nous-joindre table.form-layout-other tr:after {
        content: '';
        display: block;
        clear: both;
    }
    body#nous-joindre table.form-layout-other td {
        float: left;
        margin-bottom: 4px;
        width: calc(50% - 5px);
        box-sizing: border-box;
    }
    body#nous-joindre table.form-layout-other td.input,
    body#nous-joindre table.form-layout-other td.select {
        width: 50%;
        margin-right: 0;
        padding-top: 0;
    }

    body#nous-joindre table.form-layout-other label,
    body#nous-joindre table.form-layout-other input,
    body#nous-joindre table.form-layout-other select,
    body#nous-joindre table.form-layout-other textarea {
        box-sizing: border-box;
        width: 100%;
    }
    body#nous-joindre table.form-layout-other td:first-child,
    body#nous-joindre table.form-layout-other label,
    body#nous-joindre table.form-layout-other input,
    body#nous-joindre table.form-layout-other select {
        height: 36px;
    }

    body#nous-joindre table.form-layout-other tr:last-child td {
        width: 100%;
        margin-right: 0;
    }

    body#nous-joindre table.form-layout-other + p.bouton input {
        margin-top: -8px;
        margin-bottom: 16px;
    }
    body#nous-joindre table.form-layout-other + p.bouton input {
        float: right;
        margin-right: 0;
    }

    #content div.sousmenu_page.nous-joindre ul.cols-2 {
        width: calc(100% - 20px);
    }

    div.question { margin-top: 10px; }

    div.media div.cols-1,
    div.media div.cols-2 {
        width: 50%;
        margin-left: 0;
    }

    #footer ul {
        display: none;
    }
}


@media only screen and (min-width: 900px) and (max-width: 1023px) {
    /* --- GABARIT: ACCUEIL [900~1023]  --- */
    /* #32546C #376283 <-- ruban colors */
    #accueil #content div.section {
        width: 50%;
    }

    #content div.section ul li.section-consommateurs,
    #content div.section ul li.section-commercants {
        width: 50%;
    }

    #accueil #content div.aside {
        float: right;
        position: relative;
        width: calc(50% - 50px);
        margin-top: -33px;
        margin-right: 32px;
        box-sizing: border-box;

        background: #fff; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    #accueil #content div.aside:before {
        content: '';
        position: absolute;
        top: 0;
        left: 2px;
        right: 3px;
        bottom: 0;
        z-index: -1;
        border-left: 1px solid #44738a;
        border-right: 1px solid #1c2f38;
    }
}


@media only screen and (min-width: 768px) and (max-width: 899px) {
    /* --- GABARIT: ACCUEL [768~899] --- */
    #content div.section ul li.section-consommateurs,
    #content div.section ul li.section-commercants {
        width: 30%;
    }
    #content div.section ul li.autres-clienteles {
        float: left;
        margin: 128px 0 24px !important; /* @#*! */
        width: 40%;
        color: #000;
        font-size: 18px;
        font-weight: 700;
    }
    #content div.section ul li.secondaire {
        float: left;
        width: 40%;
        margin-left: 0;
    }
    #accueil #content div.section ul li.secondaire a {
        margin: 0 0 16px !important;
        width: 60%;
    }
}


@media only screen and (max-width: 899px) {
    /* --- GABARIT: ACCUEIL [<900] --- */
    #accueil #content { padding-top: 0; }
    #accueil #content div.section { margin-top: 2px; }
    #accueil #content div.aside {
        margin: 0 20px;
        box-shadow: 0 4px 8px -2px rgba(0,0,0,.5);
        background: #FFF;
        padding-top: 0px;
        float: left;

    }

    #accueil #content div.section:after,
    #accueil #content div.aside:after {
        content: '';
        display: block;
        clear: both;
    }

    #accueil #content div.aside {
        float: none;
    }

    div.clearAccueil {
        clear: both;
    }

    #content div.section ul li.secondaire a {
        border-left: 4px solid #009df2 !important;
        border-right: 0px !important;
        border-bottom: none !important;
        padding: 6px 36px 6px 15px !important;
        display: block;
        position: relative;
        background: #FFF;
        float: left;
        text-align: left;
        font-size: 1.2em !important;
        color: #515151;
        margin: 0 0 16px !important;
        box-shadow: 0 0 4px -2px rgba(0,0,0,.25);
        width: 70%;
    }

    #content div.section ul li.secondaire a span {
        right: 10px !important;
        font-size: 2.4em;
        top: 2px;
    }
}


@media only screen and (max-width: 767px) {

    #btnreset,
    .tx-solr-submit {
        width: 100% !important;
        margin-top: 7px;
    }

    .tx-solr-q {
        width: 96% !important;
    }

    #content {
        background-image: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/background-mobile.jpg);
    }

    div.article,
    div.manuelle {
        font-size: 1.15em;
    }

    div.news-single h2 {
        line-height: 1.2em;
    }

    /* --- GABARIT: ACCUEIL [<768] --- */
    body#accueil .section-consommateurs img,
    body#accueil .section-commercants img {
        display: none;
    }
    body#accueil #content .section li.section-consommateurs,
    body#accueil #content .section li.section-commercants {
        float: none;
        display: block;
        margin: 0 20px 15px 20px;
    }

    body#accueil #content div.section {
        padding-top: 32px;
    }

    body#accueil #content .section li.section-consommateurs a,
    body#accueil #content .section li.section-commercants a {
        font-family: 'Glober', sans-serif;
        box-sizing: border-box;
        padding: 10px 50px 10px 24px;
        background: #fff;
        text-align: left;
        box-shadow: 1px 1px 5px 0px rgba(0,0,0,.25);
        background: url('/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/chevron-mobile.png') no-repeat center right #fff;
        background-size: auto;
    }

    body#accueil #content .section li.section-consommateurs a{
        border-left: 4px solid #006197;
    }
    body#accueil #content .section li.section-commercants a{
        border-left: 4px solid #007164;
    }
    .accueil-mobile-main-link {
        display: block;
        font-weight: 700;
        /* #006197 consommateurs */
        /* #007164 commercants */
    }

    .accueil-mobile-main-link small {
        display: block;
        font-size: .75em;
        line-height: 1;
        font-weight: 400;
    }

    #content div.section ul li.section-consommateurs a, #content div.section ul li.section-commercants a {
        width: 100%;
    }

    #content div.section ul li.section-consommateurs, #content div.section ul li.section-commercants {
        width: auto;
    }

    body#accueil #content .section li.section-consommateurs, body#accueil #content .section li.section-commercants {
        max-width: 100%;
    }

/*
    #content div.section ul li.section-consommateurs,
    #content div.section ul li.section-commercants {
        width: 50%;
    }
    #content div.section ul li.section-consommateurs {
        position: relative;
        text-align: right;
    }
    #content div.section ul li.section-commercants {
        text-align: left;
    }
    #content div.section ul li.section-consommateurs a,
    #content div.section ul li.section-commercants a {
        display: inline-block;
    }
*/

    #accueil #content div.section ul { text-align: center; margin-bottom: 25px; }
    #content div.section ul li.autres-clienteles {
        float: none;
        clear: both;
        width: auto;
        font-size: 1.2em;
        font-weight: bold;
        text-align: left;
        color: #000;
        margin: 30px 20px 15px 20px !important;
    }
    #content div.section ul li.secondaire {
        display: block;
    }
    #content div.section ul li.secondaire a {
        float: none;
        width: auto;
        margin: 0 20px 15px 20px !important;
    }
    #content ~ #slogan p { padding: 10px 40px; }
    #content ~ #slogan p strong {
        background: none;
        line-height: 1.2;
    }

    #content #wrap_contenu .twocolumns {
        /*padding-bottom: 20px;
        box-shadow: 0 0 8px 0 rgba(0,0,0,.5);*/
    }

    body#consommateurs #content div.twocolumns div.section.left,
    body#consommateurs #content div.twocolumns div.section.right,
    body#commercants #content div.twocolumns div.section.left,
    body#commercants #content div.twocolumns div.section.right {
        width: 100%;
    }

    #content div.sousmenu_page ul { width: 100%; }

    #content div.sousmenu_page ul ul li { margin-top: 4px; }

    /* --- NEWS SECTION STYLES [<768] --- */
    div.articles_all_communiques,
    div.articles_all_cat_2,
    div.article_actu {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    /* --- ABOUT & OTHERS [<768] --- */
    p.plus_de_nouvelle {
        margin-left: 0;
    }


    @keyframes showHint {
        0% { right: 4px; }
        50% { right: 12px; }
        100% { right: 4px; }
    }

    .show-hint { position: relative; }

    .show-hint:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 4px;
        width: 24px;
        height: 24px;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/scroll-hand.svg) 50% 50% no-repeat;
        background-size: contain;
        opacity: .65;
        -webkit-animation-name: showHint;
                animation-name: showHint;
        -webkit-animation-duration: 1s;
                animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }

    body#nous-joindre table.form-layout-other tr {
        margin-bottom: 6px;
    }

    body#nous-joindre table.form-layout-other td,
    body#nous-joindre table.form-layout-other td.input,
    body#nous-joindre table.form-layout-other td.select {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2px;
    }

    div.media div.cols-1,
    div.media div.cols-2 { width: 100%; }

    div#c6694 div.media {
        display: flex;
        flex-direction: column;
    }
    div#c6694 div.cols-1 { order: 1; }
    div#c6694 div.cols-2 { order: 0; }
    div#c6694 div.cols-2 > p { margin: 1em 0 0; }

    /* --- AUTRES PAGES (div id="content" class="sys") --- */
    #content.sys div.innerwrap {
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0 20px;
    }

    #content .tx-dropdownsitemap-pi1 .level_1 > span {
        display: block;
        padding-right: 32px;
    }

    body#accueil div.section ul li:nth-child(4) a {
        margin-left: 20px !important;
    }

}

@media only screen and (max-width: 599px) {
    body#nous-joindre #content div.sousmenu_page ul.cols-1 a:link {
        width: 100%;
        margin-right: 0;
    }

    body#a-propos-de-l-office #content .section .bloc-presentation-album-laureat .twocolumns .section.right,
    body#a-propos-de-l-office #content .section .bloc-presentation-album-laureat .twocolumns .section.left {
        width: 100%;
    }

    #c9038 img:first-of-type {
            width: 100%;
            height: auto;
    }

    div.news-single div.images-news {
        width: 100%;
    }

    dl.dates dt {
        width: 7.85em;
    }
}


@media only screen and (max-width: 399px) {
    #header { height: 98px; }
    #content { /*margin-top: -12px;*/ }
    #header p.logo { left: 4px; }
    #header p.logo img {
        width: 150px;
        height: auto;
        margin-top: 7px;
    }

    #header div.client form {
        top: 83px;
    }

    /* --- LANGUAGE LINK / SOCIALS [<400] --- */
    #header p.langage { top: 14px; }
    #header div.client ul.socials { top: 44px; }
    #header ul.nav { top: 13px; }

    div#conteneurRechercheMobile input#txtRechercheHeader {
        width: 85%;
    }

    /* GABARIT: ACCUEIL [<400] */
/*
    #content div.section ul li.section-consommateurs,
    #content div.section ul li.section-commercants {
        width: 100%;
        text-align: center;
    }
    #content div.section ul li.section-consommateurs {
        margin-left: -12px;
    }
    #content div.section ul li.section-consommateurs a {
        height: 390px;
        overflow: hidden;
    }
    #content div.section ul li.section-commercants {
        margin-left: 18px;
        margin-top: -40px;
    }
*/
    body#accueil #content .section li.section-consommateurs,
    body#accueil #content .section li.section-commercants{
        width: auto;
        max-width: none;
        margin-left: 16px;
        margin-right: 16px;
    }

    #content div.section ul li.secondaire {
        display: block;
        text-align: center;
    }

    #accueil #content div.aside {
        margin: 0 20px;
    }

    p.pdf, .deux_lignes p.pdf { width: 100% !important; }

    body#consommateurs #content h2.ruban,
    body#commercants #content h2.ruban {
        font-size: 1.15em;
    }

    #content div.aside .ruban span,
    #content div.aside h1.ruban span,
    #content div.aside h2.ruban span,
    body#consommateurs #content div.left h2.ruban span,
    body#consommateurs #content div.right h2.ruban span,
    body#commercants #content div.left h2.ruban span,
    body#commercants #content div.right h2.ruban span {
        padding-left: 20px;
    }
}