*{box-sizing:border-box;}
body{margin:0; padding:0; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif; background: url(../picture_library/bkg.jpg) center fixed;}

div#page{}

/* Layout */
header{width:100%;z-index:1000; background-color:rgba(87, 87, 87, 1.0); height:72px; position:fixed; top:0px;}
header nav{padding-top:6px;}

main{margin-top:86px;}

footer{background-color:rgba(124, 111, 98, 1); min-height:500px;}

.margin{}


/* Formating generics */
a{color: #C3AF99;}
a:link{text-decoration:none;}
a:hover{opacity:0.9;}
h1{}
h2{color:#fff;}
h3{}
h4{}
h5{}
h6{}
p{font-size:10px; line-height:18px;}
/*strong{color:#fff;}*/

ul{}
ul li{}

form{max-width:1020px; margin:0 auto;}
label{display: block; width:100%; background: rgba(218, 218, 218, 0.8); color:rgba(87, 87, 87, 1); padding:10px 10px; margin:2px; vertical-align: middle;}

input[type="text"], textarea{display:block; border:0; width:86%; background:transparent; padding:10px 0px; vertical-align: middle; color:rgba(0, 0, 0, 1); font-size:1.0em; font-family:Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;}
textarea{vertical-align: top; min-height:300px;}
input[type="text"]:focus, textarea:focus{border:none; box-shadow:none; outline:none;}
label:focus{box-shadow:0 0 10px rgba(0, 0, 0, 0.5)}
button{background:#c3b09a; color:rgba(87, 87, 87, 1); border:0px; width:100%; margin:2px; padding:30px; font-size:1.8em; text-transform: lowercase; cursor:pointer;}

input[type="submit"], textarea{background: transparent; border:0px; font-size:1.0em; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif; color: rgba(87, 87, 87, 1); text-transform: lowercase;}



/* Specifics */

img.menu-mobile{float:right; outline:none; height:60px; display:block; cursor:pointer;}
a.logo img{width:70%; min-width:350px; max-width:500px; display:block; margin:20px auto;}

footer p{color:#c3b09a; font-size:12px; padding:50px 0px; margin:0;}


/* section - accueil & projets*/
section{}
section a{position:relative; display: block; width:100%; margin:0;}
section.projets a{height:250px; overflow:hidden;}
section img{display: block; width:100%;}
section:not(.projets) img:not(.mobile){display: none;}
section span{position:absolute; bottom:20px;left:10px; font-size:1.6em; color:#575756; text-transform:lowercase;}
section.projets span{padding:20px 20px 0 20px; top:0; left:0; width:100%; height:100%; color:#c3b09a;}

/*section.projets span{background: rgba(218, 218, 218, 0.2);}



/* realisation */
article{position: relative;} /* background:rgba(148, 143, 119, 0.65);*/
article img{width:100%; display: block;}
article p{width:100%; background: rgba(148, 148, 148, 0.65); color:white; padding:15px 10px; margin:0; position: absolute; bottom:0;}

aside{position: relative; background:rgba(124,111,98,1);}
aside.photos{position: relative; background:rgba(195, 176, 154, 0.8);}
aside.contact{position: relative; background:rgba(124,111,98,1);}
aside img{width:100%; display: block; box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);}
aside p{width:100%; background: rgba(87, 87, 87, 0.65); color:white; padding:15px 10px; margin:0; position: absolute; bottom:0;}


/* Menus */
nav ul.menu{display:none; margin:0;}
nav ul.menumobile{display:block; position:absolute; z-index:1000; top:150px; padding:0; list-style:none; width:100%;}
nav ul.menumobile li{}
nav ul.menumobile li a{display: block; color:#c3b09a; background-color:rgba(124, 111, 98, 1); padding:30px 10px; font-size:24px; text-decoration: none; border-bottom:1px solid #c3b09a;}
nav ul.menumobile li:last-child a{border-bottom:0px;}

nav ul.social{margin:0; padding:0; list-style:none; width:70%; float:left;}
nav ul.social li{}
nav ul.social li a{}
nav ul.social li a img{width:60px; float:left;}



@media (min-width:700px){
  
    .margin{max-width:1010px; width:60%; margin:auto; position:relative; padding:0;}
    
    input[type="text"], textarea{display:inline-block; padding:10px 10px;}
    textarea{padding:0px 10px;width:100%;}
    button{margin:20px 2px; border-radius:20px;}
    
    /* realisation */
    article{ margin:24px auto;} /*padding:12% 15%;*/
    article img{width:100%; display: block; box-shadow:0 0 30px 10px rgba(0, 0, 0, 0.5);}
    article p{width:35%; background: rgba(87, 87, 87, 1); color:rgba(148, 143, 119, 1); font-size:0.9em; min-height:100px; padding:15px 10px; margin:0; position: absolute; bottom:auto; top:7.5%; left:-24%}
	
    aside{padding:10% 15%; margin:40px auto;}
    aside img{width:100%; display: block;}
    aside p{width:35%; background: rgba(87, 87, 87, 1); color:rgba(148, 143, 119, 1); font-size:0.9em; min-height:100px; padding:15px 10px; margin:0; position: absolute; bottom:auto; top:7.5%; left:-24%}

}


@media (min-width:910px){
    

    
    img.menu-mobile{display:none;}

    a.logo img{position:relative; left:-45%;}
    
    footer{background:transparent;}
    
    section{display: flex; justify-content: space-between; flex-wrap: wrap;}
    section a{width:47%; margin:0 0 40px 0;}
    section.projets a{width:31%; height:auto; margin:0 0 20px 0; overflow:visible;}
    section:not(.projets) img{display:none;}
    section:not(.projets) img:not(.mobile){display: block;}
    section span{position:absolute; display:block; top:20%; left:20px; font-size:1.1em; color:#575756;}
    

    

    
    /* Menus */
    
    nav ul.social{margin:0; padding:0; list-style:none; width:35%; float:left;}
    
    nav ul.menu{margin:20px 0 0 0; padding:0; list-style:none; width:60%; float:right; display:flex;}
    nav ul.menu li{flex:1;}
    nav ul.menu li a{display: block; text-align: center; color:#c3b09a; font-size:24px; text-decoration: none;}

}