@media (max-width: 78em){
    html{
        font-size: 60%; 
    }
    header .fa-bars{
        display: block;
    }
    header .main-nav{
        position:fixed;
        top:-100rem; left:7;
        width:87%;
        border-radius: 2rem;
        z-index: 1;
        opacity: 0.6;
        background: #fff;
        opacity: 30%;
        transition: .2s linear;
       
    }
    header .main-nav ul{
        flex-flow: column;
        padding: 2rem 0;
        text-align: center;
    }
    header .main-nav ul li{
        margin: 1rem 0;
        width: 100%;
        text-align: center;
        line-height: 0.5rem;
    }
    header .main-nav ul li a{
        font-size: 3rem;
        display: block;
       
    }

    header .nav-toggle{
        top:8.7rem;
        opacity: 1;
        margin-top: -2rem;
    }
    .main-nav-link.nav-cta:link,
    .main-nav-link.nav-cta:visited{
        height: 3rem;
        background-color: blue;
        padding-top: 1rem;
        
    }  
}

@media (max-width: 62em){
    
    html{
        font-size: 57%; 
    }
    
    .heading-primary-main{
        font-size: 4.5rem;
        letter-spacing: 2.5rem; 
     }
     .heading-primary-sub{
        font-size: 2.6rem;
        letter-spacing: .5rem; 
     }
    .marquee-content li img{
         width:55%;
         height:75%;
     }
     .outillage{
        text-align: center;
     }
     .outillage .row{
        grid-template-columns: 1fr;
     }
     .outillage .coupant .row {
        grid-template-columns: 1fr;
    }
     
}

@media (max-width: 57em){

    html{
        font-size: 54%; 
    }

    .heading-primary-main{
       font-size: 3.8rem;
       letter-spacing: 2rem; 
    }
    
    .heading-primary-sub{
       font-size: 2.2rem;
       letter-spacing: .3rem; 
    }
    .about .row{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .section-map .row{
        grid-template-columns: 1fr; 
    }

     /*          MOBILE NAVIGATION    */
    
    
  
    .grid{
        row-gap: 2.4rem;
    }
    .references .grid--4-cols{
        grid-template-columns: repeat(2,1fr);
    }

    header .fa-bars{
        display: block;
    }
    header .main-nav{
        position:fixed;
         left:7rem;
        width:70%;
        height: 70vh;
        border-radius: 2rem;
        background: #fff;
        align-items: center;
        opacity: 0.6;
        justify-content: center;
        transition: all .5s ease-in;
        z-index:5;
        
    }
    header .main-nav ul{
        flex-flow: column;
        padding: 2rem 0;
    }
    header .main-nav ul li{
        margin: 1rem 0;
        width: 100%;
        text-align: center;
        
    }
    header .main-nav ul li a{
        font-size: 3rem;
        display: block;
       
    }
    
    header .nav-toggle{
        top:8.7rem;
        opacity: 1;
        margin-top: -2rem;
    }
  
     .marquee-content li img{
        width:65%;
        height:75%;
    }

    .section-book {
        padding: 5rem 0;        
    }
    .book {
        background-image: linear-gradient( rgba(255, 255, 255, 0.9), 
                                           rgba(255, 255, 255, 0.9)), 
                                           url("IMG/IRIS-CADENAS.jpg");
        height:85rem;
      
        
        }

        .book_form {
            width: 100%;
        
        }
        .form_radio-group {
            width: 85%;
            margin-bottom: 2rem;
            display: inline-block;
         }
    
         .grid--4-cols{
            grid-template-columns: repeat(2,1fr);
        }
        
        .partenaire{
            visibility: hidden;
        }
        .featured{
            visibility:visible;
            margin-top: -45rem; 
        } 
        .featured img{
            width: 80%;
            height: 80%;
        }   
}

@media (max-width: 35em){
    .grid--4-cols{
        grid-template-columns: 1fr;
    }
    .btn-2 .btn--white{
        top:0rem;
    }
    .partenaire{
        height: 28rem;
    }    
        

}
    
    @media (max-width: 28em){

    html{
        font-size: 50%; 
    }

    

    .grid--4-cols{
        grid-template-columns: 1fr;
    }

    .heading-primary-main{
        font-size: 2.8rem;
        letter-spacing: 1.2rem; 
     } 
     
    .heading-primary-sub{
        font-size: 2.2rem;
        letter-spacing: .2rem; 
     }
     .marquee-content li img{
        width:75%;
        height:75%;
    }

    .book{
        height:85rem;
    }

    .form_radio-group {
        display:block;
        margin-bottom:1rem;
    }
    

    .grid--2-cols{
        grid-template-columns: 1fr;
    }
   
    
   .section-map .row{
       grid-template-columns: 1fr;

    }

   
    
}