@media only screen and (min-width: 1024px) {
    /* anything we need to cancel/hide here */
    .sub-menu-toggle { display: none; }
}

@media only screen and (max-width: 1023px) { 
    /* --- #08406B ~ #0B508B--- */
    
    #consommateurs #content,
    #commercants #content { padding-top: 0; }
    
    #consommateurs #content div.aside,
    #commercants #content div.aside {
        float: none;
        margin: 0;
        width: auto;
    }
    
    #carrousel-consommateurs .twocolumns {
        text-align: center;
    }
    
    #carrousel-consommateurs .twocolumns .section {
        float: none;
    }

    body#consommateurs #content div.twocolumns div.left {
        margin-left: 0;
    }

    body#consommateurs #content div.section .ruban,
    /*body#consommateurs #content div.aside .ruban,
    body#consommateurs #content div.aside h1.ruban,
    body#consommateurs #content div.aside h2.ruban,
    body#consommateurs #content div.left h2.ruban,
    body#consommateurs #content div.right h2.ruban,*/
    body#consommateurs #content div.section #entete_de_page span.ruban {
        background: #08406B; /* Old browsers */
        background: -moz-linear-gradient(left, #08406B 0%, #08406B 12%, #0B508B 23%, #0B508B 34%, #08406B 45%, #08406B 99%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #08406B 0%,#08406B 12%,#0B508B 23%,#0B508B 34%,#08406B 45%,#08406B 99%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #08406B 0%,#08406B 12%,#0B508B 23%,#0B508B 34%,#08406B 45%,#08406B 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08406B', endColorstr='#08406B',GradientType=1 ); /* IE6-9 */
    }

    /*body#consommateurs #content div.right h2.ruban span { background-image: none !important; }
    body#consommateurs #content div.section .ruban span:after, 
    body#consommateurs #content div.aside .ruban span:after, 
    body#consommateurs #content div.aside h1.ruban span:after, 
    body#consommateurs #content div.aside h2.ruban span:after {
        background: #0B5998;
    }*/
    
    body#consommateurs #content div.twocolumns div.section {
        box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    }


    
    body#consommateurs #content form.renseignements button,
    body#commercants #content form.renseignements button { float: none; }
    
    /*body#consommateurs #content div.aside,
    body#consommateurs #content div.section,
    body#commercants #content div.aside,
    body#commercants #content div.section {
        padding: 0 20px;
        box-sizing: border-box;
    }*/

    body#consommateurs #content div.aside.nav-section ul.nav-header ul.nav-section,
    body#commercants #content div.aside.nav-section ul.nav-header ul.nav-section {
        margin-left: 0;
        margin-right: 0;
    }
    
    #menu_gauche > * { display: none !important; }
    #menu_gauche .sub-menu-toggle,
    #menu_gauche.sub-menu-active > * { display: block !important; }
/*
    body#consommateurs #menu_gauche.sub-menu-active .sub-menu-toggle + .nav-header,
    body#commercants #menu_gauche.sub-menu-active .sub-menu-toggle + .nav-header { display: none !important; }
*/

}


@media only screen and (max-width: 767px) {
    #content #carrousel-consommateurs {
        width: auto;
        height: auto;
        margin: 0 0 20px 0;
        display: flex;
        flex-direction: column;
    }

    body#consommateurs #content #c20 div.twocolumns div.section.left {
        padding-bottom: 10px;
    }

    /*body#consommateurs #content #c20 div.twocolumns div.section.left .ruban {
        margin-top: 10px !important;
    }*/


    body#consommateurs #content #c20 div.twocolumns div.section.left,
    body#consommateurs #content #c20 div.twocolumns div.section.right {
        padding-top: 0px !important;
    }


    #consommateurs .menu-opc #accordion,
    #commercants .menu-opc #accordion {
        margin-bottom: 0;
    }
    
    .infosCarrousel {
        order: 0;
        width: 100%;
        padding-top: 55%;
    }
    .infosCarrousel:after {
        content: '';
        display: block;
        height: 48px;
        background-color: #bfccd2;
    }
    #content #carrousel-consommateurs .controls {
        bottom: -50px;
    }
    .slide-dots {
        bottom: 5px;
    }
    
    #content #carrousel-consommateurs .infosCarrousel ul {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 55%;
        width: 100%;
        height: auto;
    }

    #content #carrousel-consommateurs .infosCarrousel ul li,
    #content #carrousel-consommateurs .lien-visio {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }
    
    #content #carrousel-consommateurs .infosCarrousel ul li {
        background-size: cover;
        
    }
    
    #content #carrousel-consommateurs .menuCarrousel {
        width: 100%;
        order: 1;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul {
        position: relative;
        width: 100%;
        height: 55px;
        background: #0b6295;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity .5s ease-in-out;
        border: 0;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul:before {
        content: '';
        position: absolute;
        top: -12px;
        left: 40px;
        border-width: 0 12px 12px;
        border-style: solid;
        border-color: transparent transparent #0b6295;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul li a {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        border: 0;
        font-weight: 700;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul li.selected {
        margin-left: 0;
        background: #0b6295;
        opacity: 1;
    }
    
    #content #carrousel-consommateurs .menuCarrousel ul li.selected a {
        margin-left: 0;
    }
    
    #content div.article > div.conteneur-custom-1 {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
    }
}

@media only screen and (max-width: 468px) {
    #content div.csc-textpic-intext-right .csc-textpic-imagewrap { float: none; }
    #content div.csc-textpic-intext-right .csc-textpic-imagewrap img {
        width: 100%;
        height: auto;
        margin-bottom: 16px;
    }
}


@media only screen and (max-width: 399px) {
    body#consommateurs #content form.renseignements,
    body#commercants #content form.renseignements {
        margin-right: 25px;
        position: relative;
    }
    body#consommateurs #content form.renseignements input[type="text"],
    body#commercants #content form.renseignements input[type="text"] {
        display: block;
        width: calc(100% - 30px);
        float: none;
    }
    body#consommateurs #content form.renseignements button,
    body#commercants #content form.renseignements button {
        position: absolute;
        top: 0;
        right: -16px;
    }
}