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


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


.mobile ul.lg, .mobile .userbar2 .ethias, .mobile .userbar2, .mobile .userbar3 .menu2 { display: none; }

.mobile ul.lg.mobile { display: inline-block; }
.mobile ul.rs .mobileEthias { display: inline-block; }


.mobile .equalheight .row, .mobile .equalheight a, .mobile .block-4 .equalheight .row1, .mobile .block-4 .equalheight .row2, .mobile .block-4 .equalheight .row3 { height: auto !important; }

.mobile .wrapper { min-width: 10%; max-width: 100%; }

.mobile.front .content, .mobile .avantages .wrapper, .mobile .link .wrapper, .mobile .content  .wrapper { width: 98%; }
.mobile .postscript .wrapper { width: 95%; }
 

.mobile h1 { padding: 40px 0 20px; }
.mobile ol li { padding: 11px 0; }

.mobile header.original { visibility: visible !important;  }
.mobile .cloned, .mobile header.cloned.original { visibility: hidden !important; display: none !important; }

.mobile.mathias h2 { margin-top: 0px; }



/* -----------------------   mobile header   ------------------------------- */
.mm-page, #menu { z-index: 1; }
header { z-index: 0; }
.mobile #mobile .menu a { background: url(../img/header/menumobile.png) center no-repeat #0097d0; display: block; width: 94px; height: 41px; position: absolute; top: 58px; right: 10px; padding: 10px 30px; }

.mobile .userbar1 { margin: 0; min-width: 10px; }
.mobile .userbar1 ul.rs { margin: 10px 0; }
.mobile .userbar1 ul.lg.mobile li ul { position: absolute; left: 0; top: 37px; }
.mobile .userbar1 .userbar1 li.mobileEthias { display: inline-block; }
.mobile .userbar1 ul.lg.mobile li a { background: url(../img/header/mobileFlecheLg.png) no-repeat center 23px #0097d0; color: white; padding: 10px 11px; border-radius: 19px; font-family: 'MetaBold'; }
.mobile .userbar1 ul.lg.mobile li ul li a { background: #f18700; }
.mobile .userbar1 ul.lg.mobile li ul li:hover a { background: #e85213; }
.mobile .userbar1 ul.lg li:hover a { color: white; }
.mobile .userbar1 .border { display: none; }
.mobile .userbar1 ul.rs, .mobile .userbar1 ul.lg { padding-left: 0; padding-right: 0; position: relative; }


.mobile .userbar3 { height: 51px; }

.mobile .userbar1 .logo-mobile { background-image: url(../img/header/logomobile.png); background-repeat: no-repeat; background-size: contain; background-position: left bottom; width: 87px; height: 86px; bottom: 0; max-width: 100%; position: absolute; top: 18px; z-index: 0; left: 4%; }
.habitation.mobile .userbar1 .logo-mobile, .abc.habitation.mobile .userbar1 .logo-mobile { background-image: url(../img/header/logomobile-starter.png); }
.mobile .userbar1 .logo-mobile a { display: block; width: 100%; height: 100%; }
.mobile .logo-desktop { display: none; }
.mobile .logo-mobile { display: block; }
.mobile .userbar3 .wrapper { margin: 0; position: absolute; top: 4px; max-width: 33%; }

.front .content .titre01 { font-size: 35px; }


.mobile.index .userbar1 .logo-mobile, .mobile.etc .userbar1 .logo-mobile { background-image: url(../img/header/logomobile-com.png); top: 30px; }



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

html.mm-opened .mm-page, .mm-menu > .mm-panel { background: #0097d0; }
.mm-list > li:hover { background: #156d96; }
.mm-list { background: #156d96; }
.mm-menu .mm-list > li.active { background: #156d96; } 
.mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: #156d96; }
      
.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: #156d96; }
.mm-menu .mm-list li.active a { color: #156d96; }
.mm-menu .mm-list > li.active > a.mm-subopen:after, .mm-menu .mm-list > li.active > a.mm-subclose:before { border-color: #156d96; }
.mm-list > li { background: #156d96; margin: 6px 0; }
.mm-list > li ul li { background: #156d96; }
.mm-list > li.mm-opened > a { background: #f18700; }
.mm-list > li.mm-opened ul li a:hover { color: #f18700; }










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


.front.mobile #branding { height: auto; min-height: none;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 0; overflow: hidden; margin-bottom: 3%; }
.front.mobile #branding .slogan { display: none; }
.mobile .slogan-mobile { display: block; padding-top: 10px; text-align: center; }
.mobile .slogan-mobile img { max-width: 96%; }
.front.mobile #branding .panneau { background-size: contain; bottom: 0; width: 23%; height: 152px; background-repeat: no-repeat; background-image: url("../img/branding/panneau-mobile.png"); top: 6px; right: 36px; }
.front.mobile #branding .panneau a { font-size: 5vw; margin: auto; width: 88%; line-height: normal; padding: 14% 0; }
.front.mobile #branding .panneau a img { max-width: 34%; }

.mobile .slogan-patch-auto-mobile { display:block; position: absolute; top: 1px; left: 5px;}
.mobile .slogan-patch-auto-mobile img { width: 60%;}




























/* -----------------------   content  ------------------------------- */
.front.mobile .content {  margin: auto; min-width: 10px; }
.front.mobile #url-overlay .content { min-width: unset; }


.front .content .titre03 { font-size: 35px; }

.mobile #url-overlay .content .btn a.btn-vert { margin: 15px auto; }
.mobile #url-overlay .content .btn a.btn-vert:last-child { margin-bottom: 0; }
.mobile #url-overlay .page-overlay-1 { padding-bottom: 168px; }
.mobile #url-overlay .content .btn { margin-bottom: 0; }






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

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

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

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

.mobile .content-alter .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-alter .bloc-2 { width: 89%; }
 .mobile .content-alter .bloc-2 .bloc-2-contain { background-size: cover;  }
}

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


























/* -----------------------   avantages  ------------------------------- */

.mobile .avantages .wrapper { min-width: 10px;  padding-top: 6px; padding-bottom: 3px; background-size: contain; }
.mobile .avantages .row { display: block; margin: auto; }
.mobile .avantages .row a { display: block; width: 95%; margin: 15px auto; }

.mobile .avantages .row.row2.pastille, .mobile .avantages .row.row1.pastille { display: inline-block; width: 48%; }
.mobile .avantages .row.pastille a { border: 6px solid white; font-size: 20px; padding: 18px 0; width: 153px; }




/* -----------------------   avantages sans lien  ------------------------------- */

.mobile .avantages .row .no-a { display: block; width: 95%; margin: 15px auto;}
.mobile .avantages .row .no-a a { display: block; width: 95%; margin: 15px auto; }

.mobile .avantages .row .no-a .row2.pastille, .mobile .avantages .row .no-a .row1.pastille { display: inline-block; width: 48%; }
.mobile .avantages .row .no-a .pastille a { border: 6px solid white; font-size: 20px; padding: 18px 0; width: 253px; }































/* -----------------------   overlay  ------------------------------- */

.mobile #url-overlay {  min-width: 10px; }
.mobile #url-overlay { margin: 14% auto; }
.mobile div#url-overlay { width: 100%; margin: 53px 0; }
.mobile #url-overlay header { display: block; }
.mobile #url-overlay #region-content { padding: 10px; }
.mobile div#close { top: 10px; }

.mobile #url-overlay .header { height: auto; }


.mobile #url-overlay .page-overlay-3 { padding-bottom: 108px; }



































/* -----------------------   parents  ------------------------------- */


.parents.mobile .block-11 .row { display: block; width: 100%; }
.parents.mobile .block-11 .row2 { text-align: center; }
.parents.mobile .block-11 .row2 img { margin: 10px auto; }



































/* -----------------------   etc  ------------------------------- */

.etc.mobile .pastille { border-radius: 5px; padding: 8px; display: block; width: 100%; letter-spacing: 0.03em; }
.etc.mobile .pastille br { float: left; }
.etc.mobile .block-13 .level { display: block; width: 100%; border-right: 0; border-bottom: 1px dotted #b4b6b6; padding-bottom: 26px; }
.etc.mobile .block-13 .level .block-13-img { height: auto; }
.etc.mobile .block-13 .level:last-child { border-bottom: 0; padding-top: 40px; }
































/* -----------------------   link  ------------------------------- */

.mobile .link { background: white; }
.mobile .link .wrapper {  background-size: contain; min-width: 10px; }
.mobile .link .wrapper .row { display: block; margin: auto; width: 80%; }


.mobile .link .wrapper .row { padding: 24px 0; }




















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

.mobile .postscript .wrapper {  padding-bottom: 25px; min-width: 10px; }
.mobile .postscript .wrapper .row { display: block; }
.mobile .postscript .wrapper .row4 { display: table-row; }
.mobile .postscript .wrapper .row4 a img { padding-top: 25px; }

.mobile .postscript .wrapper .row-group { padding-top: 28px; }
.mobile .postscript .wrapper .row-group .row { display: block; width: 100%; }
.mobile .postscript .wrapper .row.row1 { width: 50%; }
.mobile .postscript .wrapper .row-group .row.row3 { margin-top: 28px; }






















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


.mobile .footer ul li { border: 0; display: block; line-height: 1.3em; }
.mobile .footer ul li a { text-decoration: none; }























/* -----------------------   apps  ------------------------------- */

.apps.mobile .content .equalheight .row { height: auto !important; display: block; width: 100%; }
.apps.mobile .content .equalheight .row { min-height: 10px; }
.apps.mobile .content .equalheight .row.border-1 { width: 100%; background-image: url(../img/apps/border-1-mobile.png); background-repeat: no-repeat; background-position: top center; background-size: contain; height: 50px; display: block; margin: 30px 0 0; }


























/* -----------------------   abc  ------------------------------- */

.abc.mobile .tabs .ui-state-default { border:0 ; background: url(../img/abc/tabs-mobile.png) no-repeat; display: inline-block; width: auto; max-width: 26%; height: 200px; }
.abc.habitation.mobile .tabs .ui-state-default { max-width: none; }
.abc.mobile .tabs.ui-tabs .ui-tabs-nav .ui-tabs-anchor { width: 100%; height: 100%; }
.abc.mobile .tabs.ui-tabs .ui-tabs-nav .ui-tabs-anchor .tabs-content { height: 100%; white-space: pre-line; max-width: 90px; }
.abc.habitation.mobile .tabs.ui-tabs .ui-tabs-nav .ui-tabs-anchor .tabs-content { max-width: 92px; }
.abc.mobile #tabs-a .block-1 .row.row1 { width: auto; } 
.abc.mobile #tabs-a .block-1 .row { display: block; }
.abc.mobile .col-left .row1 { margin-bottom: 10px; }
.abc.mobile .content .col-left { width: 100%; }
.abc.mobile .content .col-border { width: 100%; }
.abc.mobile .content .col-right { width: 100%; text-align: center; }
.abc.mobile .content .col-right .level1, .abc.mobile .content .col-right .level2 { display: block; text-align: center; margin: 0 auto; }
.abc.mobile .tabs.ui-tabs .ui-tabs-nav li { margin: 0 9px; }
.abc.mobile .col-left .row1 { width: auto; }
.abc.mobile .col-left .block-2 .row2, .abc.mobile #tabs-a .block-5 .row2 { margin-bottom: 0; }

.abc.mobile #tabs-a .block-4 .col { display: block; width: 100%; }
.abc.mobile .col-left .block-4 .row1 { margin: 0; }
.abc.mobile .col-left .block-4 .row2 { width: 100%; }

.abc.mobile .col-border { background-image: url(../img/abc/border-mobile.png); background-repeat: no-repeat; background-position: top center; background-size: contain; min-height: 5px; width: 100%; } 

.abc.mobile .col-left .block-2 .row2, .abc.mobile .col-left .row2 { margin-bottom: 0; width: 100%; }
.abc.mobile .col-left .pastille, .abc.mobile .col-left .pastille { border-radius: 7px; padding: 5px; }
.abc.mobile .col-left .pastille br, .abc.mobile .col-left .pastille br { float: left; }
.abc.mobile #tabs-a .block-3 .pastille { padding: 5px; }
.abc.mobile .col-left .block-3 .row2, .abc.mobile .col-left .block-6 .row2, .abc.mobile #tabs-a .block-5 .row2 { margin: 0; }
.abc.mobile #tabs-a .block-3 { margin: 30px 0 0 0; }
.abc.mobile #tabs-a .block-3 .row1 { padding: 17px 0 0 0; }

.abc.mobile .content .col-right .level1 a, .abc.mobile .content .col-right .level2 a { margin: 0 auto; }

.abc.mobile .col-left #tabs-c a h3 { width: 84%; }
.abc.mobile .col-left #tabs-c a h3 img { top: 34px; }

.abc.mobile .col-left #tabs-c .block-10 a { color: white; text-decoration: none; background: #f18700; border-radius: 7px; position: relative; }
.abc.mobile .col-left #tabs-c .block-10 a:hover { background: #0097d0; }
.abc.mobile #tabs-c .block-10 .pastille { width: 83%; padding: 10px; text-align: left; }
.abc.mobile #tabs-c .block-10 .pastille img { position: absolute; top: 34px; right: 10px; }


.mathias.mobile .content .col-left { width: 100%; }
.mathias.mobile .content .col-border { width: 100%; }
.mathias.mobile .content .col-right { width: 100%; text-align: center; }


.mathias.mobile .col-border { background-image: url(../img/abc/border-mobile.png); background-repeat: no-repeat; background-position: top center; background-size: contain; min-height: 5px; width: 100%; } 
.mathias.mobile .col-right .level0 { border: 0; }





.mobile .avantages .row .equalheight a p img { bottom: -23px; }

.mobile.habitation #branding .slogan { display: none; }
.mobile.habitation #branding .branding-bg { display: none; }
.mobile.habitation #branding { height: auto; margin-bottom: 10px; }
.mobile.habitation .content { padding-top: 0; }
.mobile.habitation .page-overlay--habitation-1 .overlay-habitation-1 { background: #0097d0; width: 100%; padding: 15px; height: auto; }


.mobile.index .content .row { display: block; max-width: 98%; margin: auto; }
.mobile.index .content .row.row2 { margin-top: 50px; }