/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1400PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    html {
        font-size: 95%;
        -webkit-text-size-adjust: 95%;
        -ms-text-size-adjust: 95%;
    }
    
    
    
}


/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1340 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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


}


/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1280 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
        margin: 0 0 20px 0;
    }

    h2 {
        font-size: 2.5rem;
        line-height: 2.3rem;
        margin: 0 0 30px 0;
    }

    h3 {
        font-size: 1.7rem;
        line-height: 1.9rem;
    }

    h3 .small {
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    h4 {
        font-size: 1.3rem;
        line-height: 1.5rem;
    }

    h5 {
        font-size: 1rem;
        line-height: 1.3rem;
    }
    
    .flex-item-moitie iframe {
        height: 280px;    
    }
    
    .owl-carousel iframe {
        height: 130px;    
    }
    
    .big,
    p.big {
        font-size: 1.1rem;
        line-height: 1.4rem;
    }

    .container-header ul li {
        padding: 0 10px;
        margin: 0 5px;
    }
    
    .container-accueil .content-logo-home {
        width: 100%;    
    }
    
    .padding-left-desktop {
        padding: 0 var(--leftright);    
    }

    
    .padding-left-desktop .flex-item-tiers {
        width: 48%;    
    }
    
    .padding-left-desktop .flex-item-deux-tiers {
        width: 100%;    
    }
    
    .owl-carousel#carrousel-actus {
        width: 100%;
        margin-top: 40px;
    }
    
    
    .container-mot .flex-item-quart {
        width: 48%;
        margin-bottom: 20px;
    }
    
    .container-mot .flex-item-moitie {
        width: 100%;    
    }
    
    h3.header-accordion {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }
    
    h3.header-accordion::after {
        width: 20px;
        height: 20px;
        top: 50%;
        line-height: 20px;
        font-size: .9rem;
        border: 1px solid var(--noir);
    }
    
    
    
    
    
    
}


/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1170 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    section {
        padding: 30px 0;
    }
    
    h2::after {
        height: 40px;
        width: 250px;
        bottom: -10px;
    }
    
    h1 {
        font-size: 2rem;
        line-height: 2rem;
    }

    h2 {
        font-size: 2rem;
        line-height: 2rem;
        margin: 0 0 20px 0;
    }

    h3 {
        font-size: 1.3rem;
        line-height: 1.5rem;
    }

    h4 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    h5 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    .rangee-image-seule .legende-image-banniere {
        font-size: 1.8rem;
        line-height: 2rem;
    }
    
    .rangee-image-seule .legende-image-banniere::before {
        width: 30px;
        height: 160px;
        left: -60px;
    }
    
    footer.footer .nav li {
        padding: 6px 10px;    
    }
    
    footer.footer #menu-menu-reseaux-sociaux::before {
        display: none;
    }
    
    
    
}


/**********************************************************************************************************************************************************/
/*************************************************************************** MAXI 1024 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    .rangee-page {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .owl-carousel#carrousel-photos {
        padding-left: 0;
        width: 100%;
    }

    .owl-carousel#carrousel-photos .item {
        height: 280px;
        max-height: 70vh;
    }

    .owl-carousel#carrousel-photos .owl-nav {
        display: none;
    }
    
    .top-page {
        max-height: 25vh;    
    }
    
    .container-titre {
        width: 76%;    
    }
    
    .contenu-flexible .flex-item-quart,
    .contenu-flexible .flex-item-trois-quart,
    .contenu-flexible .flex-item-moitie,
    .contenu-flexible .flex-item-tiers,
    .contenu-flexible .flex-item-deux-tiers {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .zone-contenu-adherents .flex-item-tiers,
    .zone-contenu-adherents .flex-item-deux-tiers {
        width: 48%;
    }
    
    .container-header .flex-item-quart {
        width: auto;    
    }
    
    body.home .container-header {
        padding: 15px 0;
    }
    
    .wrapthinthin {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .wrapthinthin.bkg-doreclair,
    .wrapthinthin.bkg-noir {
        width: 95%;
        margin: 0 auto;
    }
    
    
}



/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 768 PX *****************************************************************/
/**********************************************************************************************************************************************************/

@media only screen and (max-width: 768px) {
    
    #toTop {
        display: none !important;
    }
    
    .flex-item-moitie {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .flex-item-quart {
        width: 48%;
        margin-bottom: 20px;
    }
    
    .flex-item-cinq {
        width: 31%;
        margin-bottom: 20px;
    }

    .flex-item-tiers,
    .flex-item-deux-tiers {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .padding40 {
        padding: 30px;
    }

    .padding30 {
        padding: 20px;
    }

    .mobile-only {
        display: block;    
    }
    
    .no-mobile {
        display: none !important;
    }
    
    .rangee-image-seule {
        max-height: 40vh;    
    }
    
    .rangee-page {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .marginbottom_banner {
        margin-bottom: 140px;
    }
    
    .superbig {
        font-size: 1.8rem;
        line-height: 2rem;
        margin-bottom: 15px;
    }
    
    .desktop-only {
        display: none;
    }
    
    .content-logo-home .container-flex-nowrap {
        flex-wrap: wrap;    
    }
    
    .content-logo-home .container-flex-nowrap .flex-item-auto {
        width: 100%;
        text-align: center;
        padding: 0 40px;
    }

    .content-logo-home .container-flex-nowrap .flex-item-auto .logo-home {
        margin: 0 auto 40px;
    }
    
    
    .padding-left-desktop .flex-item-tiers {
        width: 100%;
    }
    
    .container-image-carrousel,
    .owl-carousel#carrousel-adherent .item,
    .owl-carousel#carrousel-actus .item,
    .owl-carousel#carrousel-photos .item {
        height: 300px;    
    }
    
    .module-logo-partenaire {
        width: 31%;    
    }
    
    footer.footer .flex-item-quart,
    footer.footer .flex-item-moitie {
        width: 100%;
        text-align: center;
    }
    
    .logo-footer {
        margin: 0 auto 30px;
    }
    
    footer.footer .right {
        text-align: center;
    }
    
    header.header .flex-item-quart.right {
        text-align: center;
    }
    
    .content-logo-home .flex-item-auto {
        width: 100%;
        text-align: center;
    }
    
    .logo-home {
        width: 150px;
        height: 150px;
        margin: 0 auto 15px;
    }
    
    body.home h1 {
        font-size: 1.3rem;
        line-height: 1.5rem;
    }
    
    .contenu-flexible.flex-item-quart,
    .contenu-flexible.flex-item-trois-quart,
    .contenu-flexible .flex-item-quart,
    .contenu-flexible .flex-item-trois-quart {
        width: 100%;
    }
    
    .container-flex-start {
        column-gap: 4%;    
    }
    
    .flex-item-quart.module-personne {
        width: 48%;    
    }
    
    h1 {
        font-size: 1.7rem;
        line-height: 1.7rem;
    }

    h2 {
        font-size: 1.7rem;
        line-height: 1.8rem;
    }

    h3 {
        font-size: 1.1rem;
        line-height: 1.3rem;
    }
    
    .big, p.big {
        font-size: 1rem;
        line-height: 1.4rem;
    }
    
    .flex-item-quart,
    .flex-item-trois-quart {
        width: 100%;    
    }
    
    .zone-contenu-adherents .flex-item-tiers,
    .zone-contenu-adherents .flex-item-deux-tiers {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .container-actus .flex-item-tiers,
    #guides-container .flex-item-quart {
        width: 48%;
    }
    
    .zone-filtres .flex-item-tiers {
        width: 32%;    
    }
    
    .item-liste-adherent {
        width: 48%;    
    }
    
    .container-liste-adherents {
        padding-right: 0;    
    }
    
    .map-adherents,
    .container-liste-adherents {
        height: 450px;    
    }
    
    body.single-adherent_type .flex-item-moitie.right {
        text-align: left;
    }
    
    .bloc-partage {
        text-align: left;
    }
    
    
}




/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 600 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    .flex-item-cinq {
        width: 48%;
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        height: 40px;
        width: 40px;
    }

    .owl-prev::before,
    .owl-next::before {
        height: 40px;
        width: 40px;
        font-size: 1.2rem;
        line-height: 40px;
    }
    
    
    .center h2::after, h2.aligncenter::after, h2.center::after,
    h2::after {
        left: auto;
        height: 20px;
        position: relative;
        bottom: auto;
    }
    
    .container-image-carrousel,
    .owl-carousel#carrousel-adherent .item,
    .owl-carousel#carrousel-actus .item,
    .owl-carousel#carrousel-photos .item {
        height: 400px;    
    }
    
    .container-image-carrousel img {
        height: auto;    
    }
    
    .rangee-image-seule .legende-image-banniere,
    .rangee-image-seule .legende-image-banniere.blanc {
        font-size: 1.2rem;
        line-height: 1.5rem;
        bottom: 15px;
        width: 80%;
        left: 10%;
        top: auto;
        max-width: 100%;
        background: #fff;
        color: var(--noir);
        text-align: center;
        padding: 15px;
    }
    
    .rangee-image-seule .legende-image-banniere::before {
        display: none;
    }
    
    .acf-field {
        width: 100% !important;    
    }
    
    .groupe-internet .acf-table td {
        display: block;
    }
    
    .groupe-internet .acf-table td:not(.acf-field-6437b64110eb0){
        padding: 0 16px 16px 16px !important;    
    }
    
    
    .acf-form-submit {
        position: relative;
        right: auto;
        bottom: 0;
        margin-top: 30px;
    }
    
    input[type=submit],
    .acf-form-submit input[type=submit] {
        width: 100%;   
    }
    
    .acf-fields > .acf-field {
        padding: 8px 0;    
    }
    
    header.header .flex-item-auto.right.marginzero {
        text-align: right;
        width: 50%;
        padding-right: 40px;
    }
    
    header.header .flex-item-auto.right.marginzero ul li {
        padding: 0;
        margin: 0;
    }
    
    .container-input.adresse-non-remplie button#reset_adresse {
        right: 0;
        top: -60px;
    }
    
    .zone-filtres .flex-item-tiers {
        width: 48%;
    }
    
    .zone-filtres .flex-item-tiers:first-child {
        width: 100%;
    }
    
    #carrousel-adherent::after {
        display: none;
    }
    
    header.header #inner-header,
    header.header.scroll #inner-header {
        /*background: var(--noir);*/
    }

    header.header .container-header,
    header.header.scroll .container-header,
    body.home header.header.scroll .container-header {
        padding: 10px 0;
    }

    header.header .logo-header,
    header.header.scroll .logo-header {
        width: 50px;
        height: 50px;
    }

    header.header ul li a,
    header.header.scroll ul li a {
        font-size: .9rem;
    }
    
    #content {
        padding-top: 70px;    
    }
    
    
    
    
}




/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 480 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    section {
        padding: 20px 0;
    }
    
    .flex-item-quart iframe,
    .flex-item-tiers iframe,
    .flex-item-moitie iframe,
    .flex-item-moitie iframe {
        height: 250px;    
    }
    
    .flex-item-trois-quart {
        width: 100%;    
    }
    
    .flex-item-tiers,
    .flex-item-quart {
        width: 100%;
    }

    .container-image-actu {
        height: 160px;    
    }
    
    
}




/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 375 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    
}