@media screen and (max-device-width:480px), screen and (max-width:780px)  {

#wrapper {
	
width:480px;
padding:0;
margin:0 auto;
}


}








html {
height:100%;
width:100%;
margin:0;
padding:0;
}

body {
margin:0;
padding:0;
font-size:1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#grand {
display:none;
background:url(../img/noir.png);
position:absolute;
z-index:100;
top:0px;
left:0px;
text-align:center;
width:100%;
}

#legende1 a, #legende2 a{color:white;}
#legende1 img, #legende2 img{border:1px solid orange;}
#legende1, #legende2{
color: white;
display:none;
padding-top:100px;
width:100%;
margin:auto;
text-align:center;
}


#wrapper {
	
width:100%;
padding:0;
margin:0 auto;
}

#header {
background-image:url(../img/ban.png);
background-repeat:no-repeat;
background-position:100% 0;
}

#logo {
height:157px;
padding:8px 0 0 8px;
}

#logo img {
border:none;
}

#titre {
position:absolute;
z-index:20;
text-align:center;
margin:0   0 0 150px;
padding: 8px 0 0 10%;
}

h1 {
margin:0;
padding:0;
font-variant: small-caps;
font-size:1.6em;
color:#204a87;
text-shadow: 2px 2px #ccc;
}

h2 {
padding: 18px 0 0 0;
color:#369;
font-size:0.9em;
text-shadow: 1px 1px 1px #ccc;
}

h2 strong {
color:#666;
font-size:1.15em;
font-weight:lighter;
line-height:25px;
}

.bch {
font-weight:bold;
color:#333;
font-size:1.15em;
}

.tele {color:red;}


#menu {
width:100%;
position:absolute;
z-index:30;
clear:left;
}

#navbar {
margin:0;
padding:0;
}

#navbar ul{
margin:0;
padding:0;
list-style:none;
}

.menu1 {
text-align:center;
float:left;
width:16.5%;
font-size:16px;
padding:12px 0 12px 0;
background:url(../img/nav.jpg);
background-repeat:no-repeat;
background-position: 100% 0;
}

.menu1_v {
text-align:center;
float:left;
width:16.5%;
font-size:16px;
padding:12px 0 12px 0;

background:url(../img/nav_2.jpg);
background-repeat:no-repeat;
background-position: 100% 0;

}



#fin {background:url(../img/nav_fin.jpg);
background-repeat:no-repeat;
background-position: 100% 0;
height:40px;
}


.sm {
font-size:14px;
border:1px solid #214b87;
}




.menu1 a{
margin:0 0 9px 0;
display:block;
color:#ffa500;
text-decoration:none;
}

.menu1 a:visited{color:#ffa500;}
.menu1 a:link:hover {color:#f60;text-decoration:underline}
.menu1 a:visited:hover{color:#f60;text-decoration:underline;}

.menu1_v a{
margin:0 0 9px 0;
display:block;
color:#ffa500;
text-decoration:none;
}

.menu1_v a:visited{color:#ffa500;}
.menu1_v a:link:hover {color:#f60;text-decoration:underline}
.menu1_v a:visited:hover{color:#f60;text-decoration:underline;}


#smenu1, #smenu2, #smenu3, #smenu4, #smenu5{
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
display:none;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a{
display:block;
background:#204A87;
}

#navbar li li a{
margin:0;
}
/* Navigation dans le menu */

.menu1 span {
margin:0 0 9px 0;
display:block;
color:#ccc;
font-weight:bold;
}

.menu1_v span {
margin:0 0 9px 0;
display:block;
color:#ccc;
font-weight:bold;
}


/*---------content-----------------*/

#content {
clear:left;
}

#slog {
text-align:right;
font-size:1.9em;
color:#444;
padding:40px 10px 0 0;
text-shadow: 2px 2px 2px #aaa;
}


h3 {
font-size:1em;
font-weight:normal;
text-align:center;
padding:15px 40px;
color:#003;
}

h3 em {
font-weight:bold;
font-size:0.95em;
}


#col_1 {
margin:auto;
width:90%;
text-align:center;
}

#c_1, #c_2, #c_3 {
float:left;
width:33%;
}


.text{
text-align:left;
margin:20px 18% 0 18%;
float:left;
}


.m {
background-image:url(../img/fond.jpg);
padding:20px;
border:1px solid gray;
}
.mm {background-image:url(../img/cadre_2.png);
padding:20px;
border:1px solid gray;}


#mail {
padding:30px 0;
text-align:center;
clear:left;
font-size:0.6em;
}


#mail a {color:#69c;}
#mail a:visited {color:#69c;}
#mail a:link:hover {color:#214b87;}
#mail a:visited:hover {color:#214b87;}



/*---------------footer-----------------*/

#footer {
z-index:5;
height:200px;
background:url(../img/footer.png);
background-repeat:no-repeat;
background-position:center;
text-align:center;
}

#info {
color:#666;
font-size:0.8em;
}

/*________famille__________*/

#ou {
padding:0 0 0 15px;font-size:0.9em;
}

#ou a {color:#ffa500/*#214b87/*#69c*/;}
#ou span {color:#ccc;}
#ou strong {color:red;font-weight:normal;}

#gauche {
float:left;
width:70%;
}

#gauche p {
color:#4f87c2/*#214b87*/;
text-decoration:none;
font-size:1em;

}

#gauche strong{
text-shadow:3px 3px 3px #ccc;
line-height:30px;
font-size:1.2em;
color:#204a87;
padding:0;
margin:0;border-bottom:1px dotted orange;
}

.s_fam{
clear:left;
height:220px;
text-align:center;
padding-left:8%;
}


.i {
float:left;
margin-top:20px;

}

.i img{
background-image:url(../img/fond.jpg);
padding:20px;
}

.t {
float:left;
text-align:left;
width:55%;
padding: 0 0 0 5%;
}

.t a{color:#4f87c2/*#214b87*/;
text-decoration:none;
font-size:1em;}

.t span {color:darkblue;
font-size:0.9em;}

#suite a {text-shadow:1px 1px 0px #ccc;}
#suite span {color:#4f8700;font-size:1em;}

#droite {
border-left:1px solid #69c;
/*margin-top:15px;*/
padding-top:15px;
float:right;
width:29%;
text-align:center;
background:url(../img/fond_droite.png);
background-repeat:repeat-y;
background-position:right;
}

#droite ul {
list-style:none;
margin:0;
padding:0;
}

#droite li {
margin:0 0 20px 0;
padding:0;
}

#droite img{border:1px solid #f57900;}

#droite a {
text-decoration:none;
color:#69c;
font-size:0.9em;
}
#droite span {
color:#f57900;
font-size:1.1em;
letter-spacing:3px;

}
/*______Activite batiment____________*/
#gauche h3 {
text-shadow:1px 1px 6px #69c;
font-weight:bold;
font-size:1.8em;
text-align:center;
margin:0;
padding:25px 0 25px 0;
color:#214b87;
}

.t ul {
list-style-type:square;
padding:30px 0 0 10px ;
margin:0;
color:#555753;
font-size:0.9em;
}

hr {margin:10px 100px ;
color:#ccc;
}