/* RESPONSIVE */



/*---------------------------------------------------*/
/*     > 1366 = LARGE                                */
/*---------------------------------------------------*/
/*
@media screen and (min-width: 1367px) {
    
    
}
*/

/*---------------------------------------------------*/
/*     ENTRE 1025 et 1366 = LAPTOPS                  */
/*---------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    #colonne_gauche { width:250px; }
    #logo-resp { display:none; }
    #grille, #pied, #contenu { left:250px;width:calc(100% - 300px); }
    #contenu_horizDrag { left:205px; }
    #accueil { left:250px;margin-top: 0px;width:calc(100% - 250px); }

    #menu-hamburger, #menu-close { display:none; }

    #contenu-texte-resp { display:none; }
    #contenu-texte { display:block; }
    #contenu-image { width:60%; }

     .projet-galerie { height: 620px; }
    .projet-galerie-resp { display:none; }

    .case, .case-unit { width:42%;margin:30px 4%;border:solid 0px red; }
    .case img { width:100%;height:auto; }
}


/*---------------------------------------------------*/
/*     IPAD                                          */
/*---------------------------------------------------*/
@media screen and (min-width: 761px) and (max-width: 1024px) {
    #colonne_gauche { 
        top:0;left:0;width:100%;height:100px; 
        display:none;
    }
    #logo-resp { display:block;margin: 33px 0 0 30px; }
    #menu { display:none; }
    #contenu { margin-top:150px; }
    #contenu_horizDrag { margin-top: 100px;left:0px;width:100%; }
    #grille, #pied, #contenu { left:40px;width:calc(100% - 70px); }
    #accueil { left:0;width:100%;margin-top: 30px;height:calc(100vh - 130px); }
    #menu-hamburger { display:block;top:3px; }
    #menu-hamburger.horizscroll { display:block;position:absolute; }
    .case, .case-unit { width:46%;margin:10px 2%;border:solid 0px red; }
    .case img { width:100%;height:auto; }

    #projet-bandeau { position: absolute;left: 30px;top: 100px; }
    #projet-retour { top:130px; }
    #projet-retour.horizscroll { position: absolute;top:130px; }

    #contenu-texte-resp { display:block; }
    #contenu-texte { display:none; }
    #contenu-image { width:100%;margin-right:0; }

    .projet-galerie { height: 550px; }
    .projet-galerie-resp { display:none; }

    #project-sheet, .project-sheet-text-fixed { display:none; }
    .projet-galerie-resp.horizscroll { display:block;margin-top:150px;width:100%;left:0;padding:0 30px; }
    .project-sheet-text-resp { display:block; }
}


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

@media screen and (max-width: 760px) {
    #colonne_gauche { 
        top:0;left:0;width:100%;height:150px; 
         display:none;
    }
    #logo-resp { display:block;margin: 33px 0 0 5%; }
    #logo { width:50%;background-position:center center; }
    #menu { display:none; }
    #grille { left:5%;width:90%;margin-top:150px; }
    #accueil { left:0;width:100%;margin-top:30px;height:calc(100vh - 130px); }
    #contenu { left:5%;width:90%;margin-top:100px; }
    #contenu_horizDrag { margin-top: 100px;left:0;width:100%; }
    #pied { left:5%;width:90%; }
    #menu-hamburger { display:block; }
    #menu-hamburger.horizscroll { display:block;position:absolute; }
    #menu-hamburger, #menu-close { right:5%;top:3px;}
    .case { width:100%;border:solid 0px blue;margin:0 0 10px 0; }
    .case img { width:100%;max-width:640px;height:auto; }

    #projet-bandeau { position: absolute;left: 5%;top: 100px; }
    #projet-retour { top:130px; }
    #projet-retour.horizscroll { position: absolute;top:130px; }

    #contenu-texte-resp { display:block; }
    #contenu-texte { display:none; }
    #contenu-image { width:100%;margin-right:0; }

    .projet-galerie { display:none; }
    .projet-galerie-resp { display:block;margin-top:50px;width:100%;left:0;padding:0 5%; }
    .projet-galerie-resp.horizscroll { display:block;margin-top:150px;width:100%;left:0;padding:0 5%; }
    #owl-legend { font-size: 12px; }
    
    #project-sheet, .project-sheet-text-fixed { display:none; }
    .project-sheet-text-resp { display:block; }
}