html, body
{ 
margin:0;
padding:0;
width:100%;
font-family: 'Open Sans', sans-serif; /* dans les pages, il est fait appel a une police Google */
color:navy;
font-size: 100%;
}

img, object, canvas, video, audio, picture
{
display: block;
margin: 0 auto;
margin-bottom: 5px;
max-width: 100%;
height: auto;
}

h1
{
font-size: 1.1em;
font-style: normal;
font-weight: normal;
color: orange;
clear:left;
}

h2
{
font-size: 1em;
font-style: normal;
font-weight: normal;
clear:left;
}

p
{
font-size: 0.9em;
font-style: normal;
font-weight: normal;
margin: 5px;
clear:left;
}
.animate-zoom {animation:animatezoom 3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-opacity{animation:opac 3s}@keyframes opac{from{opacity:0} to{opacity:1}}
.devis
{
font-size: 1.1em;
color:green;
text-align:center;
}

.documentation
{
font-size: 0.9em;
text-align:center;
}

ul
{
text-decoration: none;
list-style-type: none;
}

li
{
font-size: 1em;
color:navy;
line-height: 150%;
text-decoration: none;
list-style-type:square;
text-indent:0px;
}

a
{
text-decoration: none;
color:navy;
}

a:visited
{
text-decoration: none;
color:gray;
}

a:hover, a:focus, a:active
{
text-decoration: none;
color: red;
}

div#devis
{
padding:2%;
padding-top:0.5%;
margin-top: 1%;
margin-left: 1%;
margin-right:0.5%;
font-size: 1.2em; 
font-weight: bold;
text-align: center;
color: orange;
float: left;
width: 47%;
height: 90px;
position: fixed;
z-index: 15;
box-shadow: 0px 0px 3px #333;
}

div#contenu
{
padding:1%;
margin-top:1%; /* avec le devis, c'est 140px */
margin-left:1%;
margin-right:0.5%;
float: left;
width: 49%;
min-height:1800px;
position: relative;
z-index: 10;
box-shadow: 0px 0px 3px #333; /* decalage droite, decalage horizontal, largeur, couleur */ 
}

div#menu
{
padding:1%;
margin-top:1%;
margin-left:0.5%;
margin-right:0.5%;
float: left;
width: 20.5%;
min-height:1800px;
position: relative;
z-index: 5;
box-shadow: 0px 0px 3px #333; /* decalage droite, decalage horizontal, largeur, couleur */ 
}

div#menu_mobile
{
padding:0%;
margin-top:1%;
margin-left:88%;
margin-right:1%;
float: left;
width: 0%;
height: 0px;
position: fixed;
z-index: 4;
}

div#liens-utiles-construction-verviers
{
padding:1%;
margin-top:1%;
margin-left:0.5%;
margin-right:1%;
float: left;
width: 20.5%;
min-height:1800px;
position: relative;
z-index: 1;
box-shadow: 0px 0px 3px #333; /* decalage droite, decalage horizontal, largeur, couleur */ 
}

/* application d'un responsive-design pour ecran en-dessous de 800 pixels */ 

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

html, body
{ 
margin:0;
padding:0;
width:100%;
font-family: 'Open Sans', sans-serif; /* dans les pages, il est fait appel à  une police Google */
color:navy;
font-size: 100%;
}

h1
{
padding-right: 15%;
font-size: 1.1em;
font-style: normal;
font-weight: normal;
color: orange;
clear:left;
}

li {
font-size: 1.2em;
padding-bottom: 5px;
padding-top: 5px;
margin-left: 1%;
}

div#devis
{
padding:1%;
margin-top: 1%;
margin-left: 1%;
margin-right:0.5%;
float: left;
width: 84%;
height: 80px;
position: fixed;
z-index: 15;
text-align:center;
}

div#menu
{
float: left;
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
margin-left:1%;
margin-top:1%;
margin-right:1%;
width:96%;
min-height: 200px;
position: relative;
z-index: 2;
}

div#menu_mobile
{
padding:1%;
margin-top:1%;
margin-left:84%;
margin-right:5%;
float: left;
width: 12%;
height: 80px;
position: fixed;
z-index: 4;
}

div#contenu
{
float: left;
padding-left: 1%;
padding-top: 1%;
padding-right:1%;
margin-left:1%;
margin-top:1%; /* avec le devis, c'est 100px */
margin-right:1%;
width: 96%;
min-height: 200px;
position: relative;
z-index: 1;
}

div#liens-utiles-construction-verviers
{
float: left;
padding-left: 1%;
padding-top: 1%;
padding-right:1%;
margin-left:1%;
margin-top:1%;
margin-right:1%;
width: 96%;
min-height: 200px;
position: relative;
z-index: 3;
}