.blanc{background-color:#FFF;}
h1,h2, p, ul, li,h3{color:#fff;}
h1{font-size:1.4em; margin:.5em 0 0 0; text-transform:uppercase; vertical-align:bottom;}
h1 span{font-size:.85em;vertical-align:bottom;}
h2{font-size:1.3em;margin:.2em 0 1em 0;text-transform:uppercase;}
h3{font-size:1.2em;margin:.3em 0 0 0;text-transform:uppercase;color:#919191;}
main.agricoles {  text-align:center;padding-top:2em; margin:0 auto;max-height:inherit; }
.container{width:96%;margin:0 auto;}
p.center{text-align:center;}

div.colonne{display:flex;justify-content:flex-start;flex-wrap:wrap; }
main h3{text-align:center;font-size:1.2em; margin-bottom:.5em; color:#fff; height:50px;text-transform:none;}
div.chartecouleur div.colonne article{width:125px; margin:1.5em auto 2em auto; border:1px dashed #aeadad; border-radius:10px; height:200px; background-color:#f9f9f9;}
div.chartecouleur div.colonne article p{vertical-align:middle; padding:.5em 0 0 0;margin:0 auto;text-align:center;height:30px;}
div.chartecouleur .couleurs{display:flex;justify-content:center; flex-wrap:wrap;  margin:2em 0; height:50px; align-items:flex-start; padding:0 .2em;}
div.chartecouleur .couleurs img{margin-left:.3em; margin-bottom:.5em;}
div.chartecouleur .couleurs img.first-child{margin-left:0; margin}

div.batiment div.colonne{display:flex;justify-content:flex-start;flex-wrap:wrap; }
main div.batiment h3{text-align:center;font-size:1.1em; margin-bottom:.5em; color:#fff; height:50px;text-transform:none;}
div.batiment div.colonne article{max-width:125px; margin:0 auto 4em auto;}
div.batiment .couleurs{display:flex;justify-content:center; flex-wrap:wrap;  margin:1em 0; height:100px; align-content:flex-start;align-items:flex-start;padding:0 .2em;}
div.batiment .couleurs img{margin:0 .1em .2em .1em;}
div.batiment .couleurs img.first-child{margin-left:0;}
div.batiment .couleurs img.last-child{margin-right:0;}
figure{text-align:center;margin-bottom:.5em;}
figcaption{font-size:.8em;padding:0 .2em;}
figure div{border-radius:50%; width:30px; height:30px; margin:.3em auto; -moz-box-shadow:1px 1px 12px  #ccc;-webkit-box-shadow: 1px 1px 12px  #ccc;  box-shadow:         1px 1px 12px  #ccc;}
main ul{text-align:center;margin-bottom:2em; list-style:disc;list-style-position:inside;}
main ul li{padding-left:0;}
.btn-produits{ background-color:#fff; color:#025da8; padding:10px 15px; font-weight:bold; text-decoration:none; text-transform:uppercase;font-size:.9em;}
main div.overlay h3{text-align:left;font-size:1.5em;margin:.5em 0 0 0;text-transform:uppercase;color:#919191;}
main div.overlay h4{text-align:left;font-size:1.3em;margin:.5em 0 .5em 0;text-transform:uppercase;color:#fff;}
div.overlay ol{list-style-type:decimal; color:#fff;margin-left:1.5em;}
div.overlay li{padding-bottom:1em; color:#fff; padding-left:.2em; line-height:1.3em;}
div.chartecouleur{background-color:#000000;padding:2em;margin-bottom:3em;}
div.batiment{background-color:#000000;padding:2em;margin-bottom:3em;}
div.chartecouleur img.imageprincipale,div.batiment img.imageprincipale{max-width:470px;width:75%;}
div.displayflex{margin:2em 0;}
div.fontreduit{background-color:#242424;padding:1em;}
div.fontreduit h2,div.fontreduit p{font-size:.95em;}
div.fontreduit h2.white{margin:1em 0;}
div.menusubstrate{background-color:#292929;padding:1em 0;}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 80%; /* 100% width */
    text-align: left; /* Centered text/links */
    margin: 10px auto 0 auto; /* 30px top margin to avoid conflict with the close button on smaller screens */
	background-color:#000;
	padding: 2em;
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    transition: 0.3s; /* Transition effects on hover (color) */
}

.overlay img{width:15%;}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 35px;
    font-size: 60px;
}
figure.betonniere {margin:3em 0;}
figure.betonniere figcaption{font-size:1.2em;margin:.5em 0;}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
/*CSS for mobile2 (336px and above)*/
@media (min-width: 21em) {
} 
/*CSS for mobileLandscape (400px and above)*/
@media (min-width: 25em) {
}   
 /*CSS for mobileLandscape2 (496px and above)*/
@media (min-width: 31em) {
}   
/*CSS for tablets (768px and above)*/
@media (min-width: 48em) {
/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 5%; /* 25% from the top */
    width: 50%; /* 100% width */
    text-align: left; /* Centered text/links */
    margin: 10px auto 0 auto; /* 30px top margin to avoid conflict with the close button on smaller screens */
	background-color:#000;
	padding: 2em;
}
main h1{font-size:1.8em; margin:.5em 0 .5em 0; text-transform:uppercase; vertical-align:bottom;text-align:left;}
main h1 span{font-size:.85em;vertical-align:bottom;}
main h2{font-size:1.7em;margin:.2em 0 .5em 0;text-transform:uppercase;text-align:left;}
main h2.betons{font-size:1.5em;margin-top:3em;}
main h2.center{text-align:center;}
main h3{font-size:1.4em;margin:.3em 0 0 0;text-transform:uppercase;color:#919191;text-align:left;}
main p{text-align:left;font-size:1.1em;margin:2em 2em;}
main div.displayflex p{margin:.5em 0 1em 1em;}
div.colonne article{margin-bottom:4em;  }
div.displayflex{display:flex;justify-content:flex-start; margin:2em 0;align-items:flex-start;}
figure.betonniere{display:inline-block;width:25%;vertical-align:middle;}
figure.betonniere figcaption{font-size:1.4em;}
div.beton{margin-top:1em;}
div.txtgauche{display:inline-block;width:74%;vertical-align:middle;}
}   
/* CSS for desktops (1024px and above) */
@media (min-width:64em) {
div.chartecouleur{margin-left:-2em;margin-right:-2em;}
div.batiment{margin-left:-2em;margin-right:-2em;}
/* à enlever lorsque le div est complèt */
div.chartecouleur div.colonne article{
    margin: 1.5em 1em 2em 1em;
}
}
@media (min-width: 92em) {
	.container{width:1150px; }
main {  width:1600px;  }
div.chartecouleur{margin-left:-4em;margin-right:-4em;}
div.batiment{margin-left:-4em;margin-right:-4em;}
}      
@media only print{
}