/* .mobile nav#menu { visibility: visible; } */


.mobile .only-mobile { display: block; }
.mobile .only-desktop { display: none; }



.mobile .wrapper { min-width: 10%; max-width: 100%; width: auto; overflow: hidden; }
.mobile header .wrapper, .mobile #branding .wrapper { overflow: visible; }


.mobile #branding-2 .wrapper, .mobile .content2 .wrapper, .mobile .content .wrapper, .mobile .postscript .wrapper { padding: 0 15px; }


.devis.mobile input[type="text"] { width: auto !important; max-width: 100%; }




/* -----------------------   mobile header   ------------------------------- */

.mm-page, #menu { z-index: 2; }
header { z-index: 0; }
.mobile #mobile .menu a { background: url(../img/header/menumobile.png) 98% 4px no-repeat #3ea7c0; display: block; width: 60%; height: 44px; position: absolute; top: 48px; right: 0px; padding: 10px 45px; text-align: right; font-size: 20px; color: white; text-decoration: none; line-height: 23px; }

.mobile .userbar1 .userbar1 li.mobileEthias { display: inline-block; }

.mobile .userbar1 .lg a { color: silver; text-decoration: none; background: url(../img/header/fleche-mobile.png) no-repeat center 28px; display: block; padding: 10px 0; font-size: 21px; text-transform: uppercase; }
.mobile .userbar1 .lg:hover a { color: #0097d0; text-decoration: none; background: url(../img/header/fleche-mobile-hover.png) no-repeat center 28px; }

.mobile .userbar1 { text-align: right; margin: 8px 0 0 0; height: 34px; }
.mobile .userbar1 a.myethias, .mobile .userbar1 a.contact, .mobile .userbar1 .lg.mobile { display: inline-block; vertical-align: top; margin: 5px; }

.mobile .userbar1 a.myethias { color: #ee2f06; text-decoration: none; background: url(../img/header/myethias-mobile.png) no-repeat right center; padding: 12px 47px 12px 0; }
.mobile .userbar1 a.contact { background: url(../img/header/contact-mobile.png) center top no-repeat; width: 39px; height: 45px; padding: 9px; }

.mobile header .logo a { left: 0px; background: url("../img/header/logo-mobile.png") center no-repeat white; width: 28%; }

.mobile #mobile .menu { background: red; width: 100%; }

.mobile .userbar2 { display: block; width: 100%; height: 47px; }
.mobile header { height: 90px; }
.mobile header .ombre { bottom: -65px; }

/* -----------------------   menu mobile  ------------------------------- */

html.mm-opened .mm-page, .mm-menu > .mm-panel { background: #3da6be; }
.mm-list > li:hover { background: #3da6be; }
.mm-list { background: #3da6be; }
.mm-menu .mm-list > li.active { background: #3da6be; } 
.mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: #3da6be; }
      
.mm-menu .mm-list li.active, .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: #3da6be; }
.mm-menu .mm-list li.active a { color: #3da6be; }
.mm-menu .mm-list > li.active > a.mm-subopen:after, .mm-menu .mm-list > li.active > a.mm-subclose:before { border-color: #3da6be; }
.mm-list > li { background: #3da6be; margin: 6px 0; }
.mm-list > li ul li { background: #3da6be; }
.mm-list > li.mm-opened > a { background: #f18700; }
.mm-list > li.mm-opened ul li a:hover { color: #f18700; }

.mm-list > li > a, .mm-list > li > span { background: url(../img/header/menumobile-borderli.png) repeat-x center bottom; padding: 11px 10px 14px 20px; font-size: 16px; }
.mm-list > li:first-child a { background: none; }
.mm-menu > .mm-list { padding: 20px 14px 40px; }

.mm-list > li.niv2 { background: #51afc5; margin: 0; list-style: disc; }
.mm-list > li.niv2.niv2a a { background: none; border-bottom: 1px solid #a8d7e2; }
.mm-list > li.niv2 a { padding-left: 35px; }

.mm-list > li.niv2 a:before { content: ''; list-style: circle; display: inline-block; width: 5px; height: 5px; left: -8px; position: relative; background: white; top: -3px; border-radius: 10px; }





.mobile header .ombre {
	 background: url("../img/mobile/ombre01.png") no-repeat scroll center right rgba(0, 0, 0, 0);
    bottom: -61px;
    display: block;
    height: 14px;
    position: absolute;
    width: 100%;
    z-index: 10;
}


















/* -----------------------   branding  ------------------------------- */

.mobile #branding { height: 289px; }
.mobile #branding .wrapper { height: 289px; }

.mobile #branding .slogan { padding: 10px; line-height: 6vw; float: none; margin: auto; text-align: center; }
.mobile #branding .slogan h1 { font-size: 5.5vw; }
.mobile #branding .slogan h2 { font-size: 4.4vw; }


.mobile #branding #branding-bg { background-size: cover; background-position: center; }
.mobile #branding .visu-voiture, .mobile.fr #branding .visu-voiture, .mobile.nl #branding .visu-voiture { background-size: contain; left: -40px; width: 90%; top: 90px; }
.mobile #branding .visu-pastille { height: 289px; position: absolute; top: 66px; width: 100%; }

.mobile.fr #branding .visu-pastille-ethiassien { background-position: left 0; left: 12px;  background-size: contain; bottom: -6px; height: 289px; position: absolute;  width: auto; }
.mobile.fr #branding .visu-pastille-content { bottom: -81px; left: -15px; font-size: 12px; line-height: normal; }



.mobile #branding .visu-pastille-content span { line-height: 3px; }
.mobile #branding .visu-pastille-content span.pastille-1 { line-height: 29px; font-size: 29px; }
.mobile #branding .visu-pastille-content span.pastille-2 { font-size: 16px; }

.mobile.nl #branding .visu-pastille-ethiassien { background-position: left 0; left: 12px; background-size: contain; bottom: -6px; height: 289px; position: absolute; width: auto; }
.mobile.nl #branding .visu-pastille-content { bottom: -65px; left: -16px; font-size: 13px; line-height: normal; }

.mobile.nl #branding-2 .row.row1 h3 { font-size: 27px; }


.mobile #branding .visu-pastille-content span { font-size: 27px; }



.mobile #branding .snew { left: -129px; bottom: 0px; }
.mobile #branding .panneau-content { font-size: 23px; line-height: 34px; padding-top: 10px; }
.mobile #branding .panneau-content span { font-size: 50px; }
.mobile #branding .panneau { background: url("../img/branding/bulle-mobile.png") no-repeat scroll 0 0; width: 115px; left: 82px; z-index: 1; }

.mobile #branding .visu { z-index: 0; bottom: 0; position: relative; float: left; padding-right: 200px; right: -152px; }

.mobile .content-bis .citation { padding: 20px; }
.mobile .content-bis .citation .citation-content { position: relative; padding: 55px 0; width: 100%; display: block; }
.mobile .content-bis .citation .citation-content:before { left: 0; top: 0px; }
.mobile .content-bis .citation .citation-content:after { right: 0; bottom: 0; }
.fr.mobile .content-bis .citation .pastille { background: url(../img/content/pastille-fr.png) center no-repeat; width: 100%; display: block; }
.nl.mobile .content-bis .citation .pastille { background: url(../img/content/pastille-nl.png) center no-repeat; }


.mobile #branding .rs .rs-fb { background: url(../img/branding/facebook-mobile.png) center bottom no-repeat #3b5998; width: 12px; padding: 7px 11px; background-size: contain; }
.mobile #branding .rs .rs-twitter { background: url(../img/branding/twitter-mobile.png) center no-repeat #5ea9dd; width: 12px; padding: 7px 11px; background-size: contain; }


.mobile #branding .rs { bottom: -51px; right: 9px; }

















/* -----------------------   branding  2 ------------------------------- */

.mobile #branding-2 { padding-top: 76px; }
.mobile #branding-2 .row.row1,.mobile #branding-2 .row.row2 { display: block; width: 100%; }
.mobile #branding-2 .row.row1 { border-right: 0;  }
.mobile #branding-2 .row.row1 h3 { font-size: 5vw; line-height: normal; }
.mobile #branding-2 .row.row1 h3 strong { font-size: 9vw; }
.mobile #branding-2 .row.row2 { padding: 10px 0; }
.mobile #branding-2 .row.row2 a { margin: 20px auto 0; }

.mobile #branding-2 .row.row2 h3 { display: none; }


























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

.mobile .content h3 { margin: 15px 0; }
.mobile .content h3:first-child { margin-top: 0; }
.mobile .content .row.row1, .mobile .content .row.row2 { display: block; width: 99%; }

.mobile .content .row.row2 .row2-content { right: 0; width: 100%; max-width: 270px; background-size: contain;  }

.mobile .content .bloc-2 { height: 21px; position: absolute; bottom: 0px; }

.mobile .content .bloc-2 .bloc-2-contain { top: 1px; background: url("../img/content/bloc-2-mobile.png") no-repeat center bottom; height: 100%; }

@media only screen and (max-width:398px) {
 .mobile .content .bloc-2 { width: 89%; }
 .mobile .content .bloc-2 .bloc-2-contain { background-size: cover;  }
}

.mobile .content .wrapper .groupe-ethiassien { background: url(../img/content/groupe-ethiassien-mobile.png) no-repeat center bottom; background-size: auto; bottom: 0px; }
.mobile .content .wrapper { padding-bottom: 120px; }


.mobile .content { padding: 40px 0 0 0; }


















/* -----------------------   postscript ------------------------------- */

.mobile .postscript .row.row1 { text-align: left; }
.mobile .postscript img { border-radius: 15px; }
.mobile .postscript .row.row1 p { display: block; padding-left: 0; }
.mobile .postscript .row.row1 input { max-width: 60%; width: auto; }
.mobile .postscript .row.row2 ul li { display: block; padding: 8px 0; text-align: left; }
.mobile .postscript .row.row2 ul li a, .mobile .postscript .row.row2 ul li:first-child a { line-height: normal; border-right: 0; padding: 0; }






























/* -----------------------   devis ------------------------------- */

.devis.devis-1.mobile .block-rmq { max-width: 99%; }

.devis.devis-2.mobile .content .wrapper > div { width: 100%; }
.devis.devis-2.mobile .content .wrapper div.libelle { width: 80%; }
.devis.devis-2.mobile .content .wrapper li:first-child { margin-bottom: 30px; padding-bottom: 44px; }

.devis.devis-3.mobile .content .formulaire td { display: block; }
.devis.devis-3.mobile .content .formulaire td.libelle { text-align: left; }

.devis.devis-4.mobile .content .formulaire td { display: block; padding-left: 0; }
.devis.devis-4.mobile .content .formulaire td.libelle { text-align: left; }
.devis.devis-4.mobile .content .formulaire { padding-left: 0px; }
.devis.devis-4.mobile .content .formulaire ul, .devis.devis-4.mobile .content .formulaire td:first-child { width: 100%; }
.devis.devis-4.mobile .content .formulaire ul .libelle { width: 80%; }
.devis.devis-4.mobile .content .formulaire ul { padding-left: 5px; }
.devis.devis-4.mobile .content .formulaire > table { width: 100%; }

.devis.devis-3.mobile .content .rs input[type="text"] { width: 100%; }
.devis.devis-3.mobile .content .rs .inputradio { display: block; vertical-align: top; }



.devis.devis-5.mobile .content .formulaire > table { width: 100%; }
.devis.devis-5.mobile .content .formulaire ul .libelle { width: 80%; }
.devis.devis-5.mobile .content .wrapper > div { width: 100%; }



.devis.devis-6.mobile .content ul .libelle { width: 90%; }
.devis.devis-6.mobile .content .wrapper li:last-child { padding-bottom: 0px; }

.mobile #branding-2 .bloc-1 { width: 83%; }
.mobile.parents #branding-2 .bloc-1 { margin: 10px auto; width: 80%; }


.mobile .postscript .row.row2 .tree-1 { display: none; }
.mobile .postscript .row.row2 .tree-2 { right: -16px; }