@media screen and (max-width: 1500px) {
/*body {background-color:purple}*/
#page { width: 90%;}
}
@media screen and (max-width:1200px) {
/*body {background-color:blue}*/
#conteneur { width:92%;}
}
@media screen and (max-width:1000px) {
/*body {background-color:green}*/
#menuf li {margin: 15px auto;}
}
@media screen and (max-width:900px) {
/*body {background-color:black}*/
}

@media (max-width:800px) {
/*body { background-color:#36624b;}*/
}


@media (max-width: 800px)
{body {margin:0}
.phone {display:none}
.phonea {display:block}
.contact {display:none;}
.contactm {display:block;}
#left {padding:0;}
#page {padding:0;     width: 100%;}
.charm {display: none;}
#content {box-shadow:none;width: 69%;}
.phone {    font-size: 90%; line-height: 30px;}
.links {border-spacing:5px;}
#footer {border-top:1px solid  rgb(168, 169, 42); margin-top:15px}
.contactm {color: #a8a92a; text-decoration:none; font-style:italic;}
.contactm a {color: #e9a02f; text-decoration:none;}
.contactm a:hover {color: #a8a92a;}
}

@media (max-width:688px)
{

#top,  #menufm, #menuam {display:block;}
#left, #menuf, #menua {display:none;}
/*h2 a {color:#36624b; }*/
#page {    padding: 0; width: 100%;}
div#header h5 {font-variant: normal;font-weight: lighter; font-size: 110%;}
#header {background-color:#36624b; padding:5px}
.logom {float:left; margin-right:10px; }
#header h5 a { color: #e9a02f;text-decoration: none;letter-spacing: 0.05em;}
.speak {text-align:center; border-top:1px solid rgb(168, 169, 42);; position: relative; margin-top: 10px; margin-top: 20px; padding: 5px 0;}

#menufm, #menuam  {margin: 0 auto;font-variant: small-caps; background-color: #213A2D;}
#menufm ul,#menuam ul{padding:0 0 0 10px;margin: 0; text-align: center;}
#menufm li, #menuam li { background-color: rgb(168, 169, 42);list-style: none;margin: 8px auto; display:inline-block; padding:5px}
#menufm li a, #menuam li a {color: #36624b; text-decoration:none; font-weight:lighter;}
#menufm li a:hover, #menuam li a:hover {color: #ce1a47;}
div#main {margin-top: 20px;}
#content {margin:0 0 0 0%; float: none;}
#footer {background-color:#36624b; text-align:center}
#tophaut {background-color: #213A2D;}
}
@media (max-width:688px) {/*format paysage*/
body {padding:0;padding-bottom:10px; font-size:0.9em }
div#page {width: 100%;}
}

@media (max-width:590px) {
}

@media (max-width: 590px)
{

.logom {float:left; margin-right:10px;}

.leftb {width: 96%;float: none; text-align:justify	}
.rightb {width: 96%;float: none; text-align:justify} 
.centerb{padding:10px; background: #244835;}
table { margin: 0 auto; float: none!important;}
.links   {width: 100%; margin:10px auto }

.txtform {color: #ccb697;padding-right: 15px; width: 50%; float: left;text-align: right;}
}


@media (max-width:450px) {/*format portrait*/
table.links, table.legal {display:none}
table.linksmob, table.legalmob {display:block}
p.img {text-align: center; }
div#header  {text-align:center}
div#header h5 {text-align:left}
#header h5 a { letter-spacing:0;}
img.logom {width: 150px; margin-bottom: 15px; padding-top: 25px;}
#menufm li a {font-size: 1.2em;}
a.popup:hover span {display: none!important}
.links   { border-spacing: 0px;}
table.linksmob {background:none}
table.linksmob td {width: 48%;vertical-align: top;}
table.linksmob li {text-align: left;}
table.legalmob { border-spacing: 5px; width:90%;margin:0 auto}
table.legalmob td {width: 48%;vertical-align: top; text-align: left;font-size: 0.9em;}
table.legalmob td a {color:#36624b}
span.txtform { width: 25%;}/*formulaire contact*/
input[type="text"] {width: 60%;}
}