/* MEDIAS QUERY STYLE CSS */


/* MEDIAS NAVIGATION */
/* ----------------- */
/* ----------------- */

@media (max-width: 1200px) {

    #navigation a {
        font-size: 2.2rem;
        padding: 1rem 5rem;
    }
}


@media (max-width: 768px) {

    #navigation a:not(:nth-child(5)) {
        display: none;
    }

    .icon {
        display: block;
        position: absolute;
        right: -3rem;
        top: -1.6rem;
        cursor: pointer;
        color: #373737;
        font-size: 3rem !important;
    }

    #navigation {
        width: 100%;
        text-align: center;
        height: 5rem;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transition: all 0.4s ease-in-out;
        border-bottom: 2px solid #373737;
    }

    #navigation.responsive {
        height: 38rem;
    }

    #navigation.responsive a:not(:nth-child(5)) {
        display: block;
        text-align: center;
        background: #F0EAD6;
        margin: 0;
        position: relative;
        top: 4rem;
        font-size: 3rem;

    }
}


/* MEDIAS HEADER ACCUEIL */
/* --------------------- */
/* --------------------- */

@media (max-width: 1200px) {

    header {
        height: 90vh;
    }

    h1 {
        top: 27rem;
        font-size: 9rem;
    }

    header h2 {
        top: 27rem;
        font-size: 3.5rem;
    }

    header #arrow {
        height: 6rem;
        width: 6rem;
        top: 80%;
        font-size: 3.5rem;
        line-height: 6rem;
    }
}


@media (max-width: 992px) {

    header {
        height: 80vh;
    }

    h1 {
        top: 20rem;
        font-size: 7rem;
    }

    header h2 {
        top: 23rem;
        font-size: 3.8rem;
    }

    header #arrow {
        top: 70%;
    }
}


@media (max-width: 768px) {

    header {
        height: 73vh;
    }

    h1 {
        top: 22rem;
        font-size: 6.2rem;
    }

    header h2 {
        top: 24rem;
        font-size: 2.4rem;
        width: 80%;
        margin: auto;
    }

    header #arrow {
        height: 5rem;
        width: 5rem;
        top: 65%;
        font-size: 2.5rem;
        line-height: 5rem;
    }
}


@media (max-width: 720px) {

    h1 {
        top: 22rem;
        font-size: 5rem;
    }
}


@media (max-width: 559px) {

    h1 {
        top: 22rem;
        font-size: 4.4rem;
    }
}


@media (max-width: 497px) {

    header {
        height: 60vh;
    }

    h1 {
        top: 20rem;
        font-size: 5.2rem;
        line-height: 5.5rem;
    }

    header h2 {
        top: 22rem;
        font-size: 2rem;
        width: 50%;
    }

    header #arrow {
        height: 4.5rem;
        width: 4.5rem;
        top: 54%;
        font-size: 2.5rem;
        line-height: 4.5rem;
    }
}


@media (max-width: 425px) {

    h1 {
        top: 18rem;
        font-size: 5.2rem;
        line-height: 5.5rem;
    }

    header h2 {
        top: 20rem;
        font-size: 2rem;
        width: 60%;
    }

    header #arrow {
        height: 4.5rem;
        width: 4.5rem;
        top: 54%;
        font-size: 2.5rem;
        line-height: 4.5rem;
    }
}





/* MEDIAS SECTION ABOUT */
/* -------------------- */
/* -------------------- */

@media (max-width: 900px) {

    .section-about {
        padding: 0 0 5rem 0;
    }

    .centerH {
        margin-bottom: 2rem !important;
    }

    .titreAbout {
        font-size: 3.7rem;
    }

    .row {
        max-width: 50rem;
        padding: 0 3rem;
    }

    .row [class^='col-']:not(:last-child) {
        margin-right: 0;
        margin-bottom: 6rem;
    }

    .row [class^='col-'] {
        width: 100% !important;
    }

    .composition_photo {
        float: left;
        position: relative;
        width: 33.333333%
    }

    .composition_photo--1 {
        top: 0;
        transform: scale(1.2);
    }

    .composition_photo--2 {
        top: -1rem;
        transform: scale(1.3);
        z-index: 20;
    }

    .composition_photo--3 {
        top: 1rem;
        left: 0;
        transform: scale(1.1);
    }
}


@media (max-width: 600px) {
        .titreAbout {
            font-size: 3rem;
        }
}


/* MEDIAS SECTION TARIFS */
/* --------------------- */
/* --------------------- */

@media (max-width: 768px) {

    #tarifs h2 {
        font-size: 5rem;
        margin: 0;
        padding-top: 5rem;
    }

    #containerFlex {
        height: 160rem;
        flex-direction: column;
        padding-bottom: 1rem;
    }
}


/* MEDIAS SECTION CAROUSEL */
/* ----------------------- */
/* ----------------------- */

@media (max-width: 1200px) {

    #phraseSlide {
        height: 50rem;
    }

    .cadre {
        width: 80rem;
        height: 30rem;
        transform: translate(-50%, -50%);
    }

    .carousel .changeHidden .element {
        font-size: 6rem;
    }

    .carousel .changeHidden {
        height: 13rem;
        width: 100rem;
    }
}


@media (max-width: 992px) {

    .cadre {
        height: 20rem;
        width: 50rem;
    }

    .carousel .changeHidden {
        width: 100%;
    }

    .carousel .changeHidden .element {
        font-size: 4rem;
    }
}


@media (Max-width: 768px) {

    #phraseSlide {
        height: 35rem;
    }

    .cadre {
        width: 40rem;
        height: 15rem;
    }

    .carousel .changeHidden .element {
        font-size: 3.2rem;
    }

    .carousel .changeHidden {
        height: 13rem;
    }
}


@media (max-width: 425px) {

    #phraseSlide {
        height: 30rem;
    }

    .cadre {
        width: 30rem;
    }
    
    .carousel .changeHidden .element {
        font-size: 2.2rem;
    }

}


/* MEDIAS SECTION ÉQUIPE */
/* --------------------- */
/* --------------------- */

@media (max-width: 1200px) {

    #equipe {
        height: 70rem;
    }
}


@media (max-width: 992px) {

    #equipe {
        height: 65rem;
    }

    #equipe h3 {
        font-size: 4.5rem;
    }

    #equipe p {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .team {
        margin: 2rem;
    }
}


@media (max-width: 768px) {

    #equipe {
        height: 180rem;
        background: linear-gradient(to right, rgba(55,55,55,0.1), rgb(243,235,209));
        padding-bottom: 5rem;
    }

    #equipe h3 {
        font-size: 3.5rem;
        margin: 5rem 0 2rem 0;
    }

    #equipe p {
        display: block;
        margin: auto;
        font-size: 1.8rem;
        width: 70%;
    }

    .containerFlexTeam {
        height: 165rem;
        flex-direction: column;
    }

    .team {
        width: 30rem;
        margin: 2rem;
    }

    .pic2  {
        background-position: 50% 35%;
    }
}



@media (max-width: 425px) {

    #equipe {
        height: 185rem;
    }
}



/* MEDIAS SECTION CONTACT */
/* ---------------------- */
/* ---------------------- */

@media (max-width:768px) {
    
    #contact {
        height: 85rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 6rem;
    
    }

    #contact #titleCompany {
        font-size: 5.3rem;
    }
    
    #contact h3 {
        font-size: 4.5rem;
    }
    
    #contact h3 span{
        font-size: 3rem;
    }
    
    /* --- medias sociaux --- */
    .medias {
        font-size: 8rem;
       
    }
}



@media (max-width:425px) {

/*       
    #contact {
        height: 90rem;
        width: 100%;
    } */


    #contact h2 {
        font-size: 3.5rem;
        line-height: 6rem;
    }

    #contact h3 .fas{
        font-size: 3.4rem;
    }
    
    #contact h3 {
        font-size: 3rem;
    }

    #contact #adresse span {
        font-size: 2.3rem;
    }

    /* --- medias sociaux --- */
    .medias {
        font-size: 4.5rem;
        width: 3.5rem;
        margin: 2.5rem;

    }

    .copyright{
        font-size: 0.8rem;
    }

}



/* --------- Ipad Pro --------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* ------- SECTION ACCUEIL ------- */

@media (max-width: 1024px) {

    header {
        height: 70vh;
    }
    
    h1{
        top: 33rem;
        font-size: 9rem;
        
    }
    
    header h2 {
        top: 33rem;
        font-size: 4.2rem;
        width: 100%;
    }
    
    header #arrow {
        height: 6.5rem;
        width: 6.5rem;
        top: 60%;
        font-size: 4rem;
        line-height: 6.5rem;
    
    }


    /* ------- SECTION CONTACT ------- */

    #contact {
        height: 155rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 6rem;
    
    }

    #contact #titleCompany {
        font-size: 5.3rem;
    }
    
    #contact h3 {
        font-size: 4.5rem;
    }
    
    #contact h3 span{
        font-size: 3rem;
    }
    
    /* --- medias sociaux --- */
    .medias {
        font-size: 8rem;
       
    }
}


/* --------- Ipad Mini --------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

@media (max-width: 768px) {

    /* ------- SECTION ACCUEIL ------- */

    header {
        height: 70vh;
    }
    
    h1{
        top: 20rem;
        font-size: 6.5rem;
        
    }
    
    header h2 {
        top: 20rem;
        font-size: 3rem;
        width: 60%;
    }
    
    header #arrow {
        height: 5.5rem;
        width: 5.5rem;
        top: 60%;
        font-size: 3rem;
        line-height: 5.5rem;
   
    }

    /* ------- SECTION CONTACT ------- */

    #contact {
        height: 123rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 6rem;
    
    }

    #contact #titleCompany {
        font-size: 5.3rem;
    }
    
    #contact h3 {
        font-size: 4.5rem;
    }
    
    #contact h3 span{
        font-size: 3rem;
    }
    
    /* --- medias sociaux --- */
    .medias {
        font-size: 8rem;
        color: #3c3c3c;
    }
}



/* --------- Iphone 6/7/8 et plus --------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

@media (max-width: 414px) {

    /* ------- SECTION ACCUEIL ------- */

    header h1 {
        top: 13rem;
        font-size: 5.7rem;
        line-height: 5.6rem;
    }

    header h2 {
        top: 16rem;
        font-size: 2.5rem;
        width: 60%;
    }
        
    header #arrow {
        height: 5.5rem;
        width: 5.5rem;
        top: 53%;
        font-size: 4rem;
        line-height: 5.3rem
    }


    /* ------- SECTION CONTACT ------- */

     #contact {
        height: 87rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 3.54rem;
    
    }

    #contact #titleCompany {
        line-height: 6rem;
    }

    #contact h3 .fas {
        font-size: 4rem;
    }
    
    #contact h3 {
        font-size: 3.5rem;
    }
    
    #contact h3 span{
        font-size: 3rem;
    }

    #contact #adresse span {
        font-size: 2.5rem;
    }
    
    /* --- medias sociaux --- */
    .flexMedias {
        margin-right: 1.5rem;
    }

    .medias {
        font-size: 6.5rem;
        margin: 2.5rem;
      
    }

}


/* --------- Pixel 2 --------- */
/* ----------------------------------------- */
/* ----------------------------------------- */

/* ------- SECTION ACCUEIL ------- */

@media (max-width: 411px) {

    header h1 {
        top: 12rem;
        font-size: 5.5rem;
        line-height: 5.5rem;
    }

    header h2 {
        top: 15rem;
        font-size: 2.3rem;
        width: 60%;
    }
        
    header #arrow {
        height: 5.5rem;
        width: 5.5rem;
        top: 53%;
        font-size: 4rem;
        line-height: 5.3rem
    }


    /* ------- SECTION CONTACT ------- */

    #contact {
        height: 83rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 3.5rem;
    
    }

    #contact #titleCompany {
        font-size: 5rem;
        line-height: 6rem;
    }
    
    #contact h3 {
        font-size: 3rem;
    }
    
    /* #contact h3 span{
        font-size: 1.3rem;
    } */
    
    /* --- medias sociaux --- */
    .flexMedias {
        margin-right: 1.5rem;
    }

    .medias {
        font-size: 6rem;
        margin: 2rem
    }
}


/* --------- Iphone 6/7/8 --------- */
/* ----------------------------------------------- */
/* ----------------------------------------------- */

@media (max-width: 375px) {

    /* ------- SECTION ACCUEIL ------- */

    header h1 {
        top: 12rem;
        font-size: 4.8rem;
        line-height: 5.5rem;
    }

    header h2 {
        top: 13.5rem;
        font-size: 2rem;
        width: 60%;
    }
        
    header #arrow {
        height: 4.8rem;
        width: 4.8rem;
        top: 53%;
        font-size: 3.5rem;
        line-height: 4.5rem
    }


    /* ------- SECTION CONTACT ------- */

     #contact {
        height: 78rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 3.5rem;
    
    }

    #contact #titleCompany {
        font-size: 5rem;
        line-height: 6rem;
    }
    
    #contact h3 {
        font-size: 3rem;
    }
    
    /* #contact h3 span{
        font-size: 1.3rem;
    } */
    
    /* --- medias sociaux --- */
    .flexMedias {
        margin-right: 1.5rem;
    }

    .medias {
        font-size: 5.5rem;
       
    }

}


/* --------- Galaxy 5 --------- */
/* ----------------------------------------------- */
/* ----------------------------------------------- */

@media (max-width: 360px) {

    
    /* ------- SECTION ACCUEIL ------- */

    header h1 {
        top: 12rem;
        font-size: 4.8rem;
        line-height: 5.5rem;
    }

    header h2 {
        top: 13rem;
        font-size: 1.9rem;
        width: 60%;
    }
        
    header #arrow {
        height: 4.3rem;
        width: 4.3rem;
        top: 53%;
        font-size: 3rem;
        line-height: 4.2rem
    }


    /* ------- SECTION CONTACT ------- */

    #contact {
        height: 73rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 3rem;
    
    }

    #contact #titleCompany {
        font-size: 4rem;
        line-height: 5rem;
    }
    
    #contact h3 {
        font-size: 3rem;
    }
    
    /* #contact h3 span{
        font-size: 2.3rem;
    } */
    
    /* --- medias sociaux --- */
    .flexMedias {
        margin-right: 1.5rem;
    }
    .medias {
        font-size: 5.5rem;
    }

}

/* --------- Iphone 5 --------- */
/* -------------------------------------------- */
/* -------------------------------------------- */

@media (max-width:320px) {

    /* ------- SECTION ACCUEIL ------- */

    header h1 {
        top: 10rem;
        font-size: 4.3rem;
        line-height: 5rem;
    }

    header h2 {
        top: 11rem;
        font-size: 1.9rem;
        width: 60%;
    }
        
    header #arrow {
        height: 4rem;
        width: 4rem;
        top: 53%;
        font-size: 2rem;
        line-height: 4.2rem
    }


    
    /* ------- SECTION CONTACT ------- */

      #contact {
        height: 69rem;
        width: 100%;
    }
   
    #contact h2 {
        font-size: 3rem;
    
    }

    #contact #titleCompany {
        font-size: 4rem;
        line-height: 5rem;
    }

    #contact h3 .fas {
        font-size: 3.3rem;
    }
    
    #contact h3 {
        font-size: 2.7rem;
    }
    
    #contact h3 span{
        font-size: 2rem !important;
    }
    
   
    /* --- medias sociaux --- */
    .flexMedias {
        margin-right: 1.5rem;
    }
    .medias {
        font-size: 5.5rem;
    }

}