/* =============== =============== =============== */
/* =============== MOBILE PORTRAIT =============== */
/* =============== =============== =============== */

/* Marges */
* {margin: 0; padding: 0;}
p {max-width: 740px;}
html {min-width: 320px}


/* Button */
.button { border: 2px solid #001b2c; display: inline-block; padding: 10px 20px;   margin: 30px 0 0; box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;}
.voir-le-site .button { margin: 10px 0;}
.button.button-mail {  font-family: "EB garamond", serif;  text-transform: lowercase;  letter-spacing: normal;}
.button:hover, 
.button.invert { border: 2px solid #fff; color:#fff;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.button.invert:hover { background: #fff; color: #001b2c;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.button:hover { background: #001b2c; color: #fff;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
a.button-in-text {  font-family: 'gibsonsemibold', sans-serif;font-size: 0.65em;border: 1px solid #fff;padding: 15px 30px;text-transform: uppercase;letter-spacing: 0.1em;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
a.button-in-text:hover {background: #fff; color: #EF662E;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

/* Separateur */
hr {border: none; width: 62px; height: 4px; margin: 20px auto 30px; background: url(../img/layout/separateur-dark.png) no-repeat;}
hr.separateur-white {background-image: url(../img/layout/separateur-white.png);}
.no-display-mobile {display: none;}
.no-display-tablet {display: block}


/* Gutter */
.gutter { padding-left:35px; padding-right:35px; }
.hgutter { padding-top:35px; padding-bottom:35px; }
.double-hgutter { padding-top:70px; padding-bottom:70px; }

#video-cover { display:none; }


/* =============== ================ =============== */
/* =============== MOBILE LANDSCAPE =============== */
/* =============== ================ =============== */

@media (min-width: 440px ){
    
    
    
}

/* =============== ================ =============== */
/* =============== TABLET LANDSCAPE =============== */
/* =============== ================ =============== */

@media (min-width: 700px ){

	/* Separateur */
	hr { width:93px; height: 5px; margin: 30px auto 30px;} 
    .no-display-mobile {display: inline-block;}
    .no-display-tablet {display: none!important}

    /* Gutter */
	.gutter { padding-left:60px; padding-right:60px; }
    .hgutter { padding-top:60px; padding-bottom:60px; }
	.double-hgutter { padding-top:120px; padding-bottom:120px; }
    
    .half { width:50%; float: left; box-sizing: border-box;
        -moz-box-sizing:border-box;  
        -webkit-box-sizing:border-box;
    }
    
    .button { padding: 15px 30px;}

    /* Video lightbox */
    #video-cover { width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.75); z-index:2000; display:none; }
    #video-cover .close { width:60px; height:60px; position:absolute; top:0; right:0; background:#000 url(../img/layout/menu-close-light.png) no-repeat center; background-size:25px; cursor:pointer; text-indent: -99999px; }
    #video-cover .video-offset { width:100%; top:50%; left:50%; position:absolute; }
    #video-cover .video-offset .video { width:80%!important; padding-top:45%!important; left:-40%;  position:absolute; }
    #video-cover .video-offset .video iframe { position:absolute;  width:100%; height:100%; top:-50%; left:0; }
    
}

/* =============== =============== =============== */
/* =============== TABLET PORTRAIT =============== */
/* =============== =============== =============== */

@media (min-width: 1000px ){

    
    
}

/* =============== ============== =============== */
/* =============== LAPTOP DESKTOP =============== */
/* =============== ============== =============== */

@media (min-width: 1200px ){

	/* Separateur */
	hr { width:130px; height: 6px;margin: 40px auto 40px;} 
    
    /* Gutter */
	.gutter { padding-left:80px; padding-right:80px; }
    .hgutter { padding-top:80px; padding-bottom:80px; }
	.double-hgutter { padding-top:160px; padding-bottom:160px; }
    
    .button { padding: 20px 40px;}

    #video-cover .close { width:100px; height:100px; background-size:40px; }
    
}

/* =============== ================= =============== */
/* =============== BIG SREEN DESKTOP =============== */
/* =============== ================= =============== */

@media (min-width: 1500px ){

    .gutter { padding-left:100px; padding-right:100px; }
    .hgutter { padding-top:100px; padding-bottom:100px; }
	.double-hgutter { padding-top:200px; padding-bottom:200px; }
    
}