/* RESPONSIVE */








/*---------------------------------------------------*/
/*     ENTRE 1025 et 1440 = LAPTOPS                  */
/*---------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    
    .contenu { margin: 75px 0px 0px 235px;width:640px; }
    .book-contenu { margin: 75px 0px 0px 235px; }
    .titre { font-size: 72px; }
    .soustitre { font-size: 60px; }
    .labeur { max-width: 640px;margin-top: 75px;-webkit-columns: 1;-moz-columns: 1;columns: 1; }

    #nav { top:28px; }
    #nav div { font-size: 20px;padding: 6px 20px 4px 20px; }
    #hamburger, #close { display:none; }

    #bandeau div { padding-right: 37.5px; }
    .bandeau-element { font-size:20px; }

    #titre-mobile { display: none; }


    #equipe, .membre-fiche { 
    /* width: calc(100% - 215px); */
    width: 80%;
    }
    .membre, #emploi { width: 250px;height: 250px;
    margin: 25px 25px; }
    .membre-fiche-labeur .membre-fiche-download { display:none; }


    #filtres div { font-size:12px; }
    #filtres #tout_afficher { font-size:13px; }
    .grid-item { width: 24%; }
    .grid-item--width2 { width:  49%; }
    .grid-item--width3 { width:  74%; }

    #voir-infos, #voir-galerie { 
        font-size:16px;
        width: 215px;height: 50px;
        top: 25px;right: 50px;
        padding-top: 16px; 
        background-position: 40px 20px;
        background-size: 11px;
    }
    #voir-infos:hover, #voir-galerie:hover { 
        background-position: 40px 20px;
        background-size: 11px;
    }
    .projet-soustitre div { font-size:36px; }
    .projet-galerie { height: 620px; }
    

    .masonry-vignette, .masonry-vignette-unit { /* width: 31.33%; */ width:48%; }

    .projet-contenu { margin: 135px 0px 0px 50px;width:calc(100% - 335px); }
    .projet-lieu { font-size: 32px; }
    .projet-date { font-size: 24px; }
    .projet-categorie { font-size: 18px; }
    .projet-chapeau { margin-top: 0px;font-size: 20px;line-height: 1.5em; }


    .actu { width: 42%;margin: 25px 4%; }
}


/*---------------------------------------------------*/
/*     ENTRE 1025 et 1280 = LAPTOPS                  */
/*---------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .membre-fiche-gauche, .membre-fiche-filet { display:none; }
    .membre-fiche-labeur .membre-fiche-download { display:block; }
    .membre-nom { padding: 37px 25px 0 37px; }
    .membre-qualite { padding: 25px 25px 0 37px; }
}


/*---------------------------------------------------*/
/*     IPAD                                  */
/*---------------------------------------------------*/
@media screen and (min-width: 761px) and (max-width: 1024px) {
    
    #accueil26-ThierryMaytraud, 
    #accueil26-ThierryMaytraud .accueil26-survol, 
    #accueil26-ThierryMaytraud .accueil26-img { width:42%; }
    #accueil26-team, 
    #accueil26-accueil26-team .accueil26-survol, 
    #accueil26-team .accueil26-img { width:50%; }

    #hommage-contenu { 
        background-position: left center; 
        background-size: 140%;
    }

    #nav { display:none; }
    #hamburger { display:block; }

    #bandeau { padding-left: 50px; }
    #bandeau div { padding-right: 25px; }

    #titre-mobile { display: block; }

    .contenu, .book-contenu { margin: 75px 0px 0px 50px;width:calc(100% - 100px); }
    .labeur { max-width: 640px;-webkit-columns: 1;-moz-columns: 1;columns: 1; }

    #equipe, .membre-fiche { margin: 65px 0px 0px 50px;width: calc(100% - 100px); }
    .membre, #emploi { width: 250px;height: 250px;
    margin: 20px 20px; }
    .membre-fiche-gauche, .membre-fiche-filet { display:none; }
    .membre-fiche-labeur .membre-fiche-download { display:block; }
    .membre-nom { padding: 37px 25px 0 37px; }
    .membre-qualite { padding: 25px 25px 0 37px; }

    .grid-item { width: 32.30%; }
    .grid-item--width2 { width:  65.63%; }
    .grid-item--width3 { width:  99.96%; }

    #voir-infos, #voir-galerie { 
        font-size:20px;
        width: 215px;height: 50px;
        top: 25px;left: 50%;margin-left: -108px;
        padding-top: 13px; 
        background-position: 25px 19px;
        background-size: 11px;
    }
    #voir-infos:hover, #voir-galerie:hover { 
        background-position: 25px 19px;
        background-size: 11px;
    }
    .projet-soustitre div { font-size:36px; }
    .projet-galerie { height: 550px; }
    

    .masonry-vignette, .masonry-vignette-unit { width: 48%; }

    .actu { width: 46%;margin: 25px 2%; }


    .projet-contenu { margin: 135px 0px 0px 50px;width:calc(100% - 100px); }
    .projet-chapeau { font-size:20px; }
    #pied-contenu { line-height: 1.4em; }
    .pied-adresse, .pied-contact { font-size: 16px; }
    .pied-bottom { font-size: 11px; }

}
/*---------------------------------------------------*/
/*     < 760 = SMALL                       */
/*---------------------------------------------------*/

@media screen and (min-width: 641px) and (max-width: 760px) {

    #accueil26-conteneur { left: 3vw;width: 94vw; }
    #accueil26-ThierryMaytraud, 
    #accueil26-ThierryMaytraud .accueil26-survol, 
    #accueil26-ThierryMaytraud .accueil26-img { width:42%; }
    #accueil26-team, 
    #accueil26-accueil26-team .accueil26-survol, 
    #accueil26-team .accueil26-img { width:55%; }

    #hommage-contenu { 
        background-position: left center; 
        background-size: 160%;
    }

    #nav { display:none; }
    #hamburger { display:block; }
    .element-smartphone { font-size: 48px; }

    #bandeau { padding-left: 50px; }
    #bandeau div { padding-right: 12.5px;padding-top:12px; }
    .bandeau-element {  font-size: 20px; }

    #titre-mobile { display: none; }

    .contenu, .book-contenu { margin: 75px 0px 0px 50px;width:calc(100% - 100px);max-width:600px; }
    .titre { font-size: 64px; }
    .soustitre { font-size: 48px; }
    .labeur { max-width: 640px;-webkit-columns: 1;-moz-columns: 1;columns: 1; }

    #equipe, .membre-fiche { margin: 65px 0px 0px 50px;width: calc(100% - 50px); }
    .membre, #emploi { width: 225px;height: 225px;
    margin: 20px 20px; }
    .membre-fiche-gauche, .membre-fiche-filet { display:none; }
    .membre-fiche-labeur .membre-fiche-download { display:block; }
    .membre-nom { padding: 25px 25px 0 25px; }
    .membre-qualite { padding: 25px 25px 0 25px; }

    .grid-item { width: 49%; }
    .grid-item--width2 { width:  99%; }
    .grid-item--width3 { width:  99%; }

    #voir-infos, #voir-galerie { 
        font-size:20px;
        width: 215px;height: 50px;
        top: 25px;left: 50%;margin-left: -80px;
        padding-top: 13px; 
        background-position: 25px 19px;
        background-size: 11px;

    }
    #voir-infos:hover, #voir-galerie:hover { 
        background-position: 25px 19px;
        background-size: 11px;
    }
    .projet-soustitre div { font-size:30px; }
    .projet-galerie { height: 520px; }
    #owl-legend { font-size: 12px; }

    .masonry-vignette, .masonry-vignette-unit { width: 98%; }

     .actu { width: 94%;margin: 25px 3%; }

     #contact-logo-agence { height:22px; }

    .projet-contenu { margin: 135px 0px 0px 50px;width:calc(100% - 100px);max-width:600px; }
    .projet-chapeau { font-size:20px; }

    #pied-contenu { line-height: 1.4em; }
    .pied-adresse, .pied-contact { font-size: 15px; }
    .pied-bottom { font-size: 10px; }
}
/*---------------------------------------------------*/
/*     < 640 = SMALL                       */
/*---------------------------------------------------*/

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


    #accueil26-conteneur { left: 3vw;width: 94vw; }
    #accueil26-ThierryMaytraud, 
    #accueil26-ThierryMaytraud .accueil26-survol, 
    #accueil26-ThierryMaytraud .accueil26-img { width:42%; }
    #accueil26-team, 
    #accueil26-accueil26-team .accueil26-survol, 
    #accueil26-team .accueil26-img { width:55%; }
    
    #hommage-contenu { 
        background-position: left center; 
        background-size: 210%;
    }
    #hommage-fond { 
        display: none;
    }


    #nav { display:none; }
    #hamburger { display:block; }
    .element-smartphone { font-size: 40px; }
    
    #bandeau { padding-left: 50px; }
    #bandeau div { padding-right: 12.5px;padding-top:12px; }
    .bandeau-element {  font-size: 20px; }

    #titre-mobile { display: none; }

    .contenu, .book-contenu { margin: 75px 0px 0px 50px;width:calc(100% - 100px); }
    .titre { font-size: 52px; }
    .soustitre { font-size: 48px; }
    .labeur { font-size: 18px;-webkit-columns: 1;-moz-columns: 1;columns: 1; }

    #equipe, .membre-fiche { margin: 65px 0px 0px 50px;width: calc(100% - 100px); }
    .membre, #emploi { width: 350px;height: 350px;
    margin: 25px 25px; }
    .membre-fiche-gauche, .membre-fiche-filet { display:none; }
    .membre-fiche-droite { width:100%; }
    .membre-fiche-labeur { font-size:18px; }
    .membre-fiche-labeur .membre-fiche-download { display:block; }

    .grid-item { width: 99%; }
    .grid-item--width2 { width:  99%; }
    .grid-item--width3 { width:  99%; }

    #voir-infos, #voir-galerie { display: none; }
    .projet-soustitre div { font-size:30px; }
    .projet-galerie { height: 480px; }
    #projet-galerie-conteneur { height: 360px; }
    #projet-galerie-vignettes { height: 75px; }
    #owl-legend { font-size: 12px; }

    .masonry-vignette, .masonry-vignette-unit { width: 98%; }

    .projet-contenu { margin: 135px 0px 0px 50px;width:calc(100% - 100px); }
    .projet-chapeau { font-size:20px; }

    .actu { width: 94%;margin: 25px 3%; }

    #contact-logo-agence { height:22px; }

    #pied-contenu { line-height: 1.4em; }
    .pied-adresse, .pied-contact { font-size: 15px; }
    .pied-bottom { font-size: 10px; }
}