/*
 *  HEADER
 * .header-mobile h2 a{ height: 104px; width: 276px; }
 * .header-mobile #nav li a{ font-size: 10px; height: 104px; width: 87px; }
 * .header-mobile #nav li.recherche a{ width: 84px; }
**/
.header-mobile { position: relative;}
.header-mobile .innerwrap{ background: #fff no-repeat center top; background-size: auto 100%; height: 4.72727em;}
.header-mobile h2{ font-size: 1em; margin: 0; padding: 0; }
.header-mobile h2 a{ background: url(../images/mobile/320px/office-de-la-protection-du-consommateur-logo.png); background-size: auto 100%; display: block; height: 4.7272727273em; overflow: hidden; text-indent: -9999em; width: 12.5454545455em; }
.header-mobile #nav{ margin: 0; padding: 0; position: absolute; right: 0; text-align: right; top: 0;} 
.header-mobile #nav li{ display: inline; list-style: none; margin: 0; padding: 0; }
.header-mobile #nav li a{ display: block; float: left; color: transparent; font-size: 0.4545454545em; height: 10.4em; overflow: hidden; width: 8.7em; }
.header-mobile #nav li a span { display:none; }
.header-mobile #nav li.accueil a{ background: url(../images/mobile/320px/header-nav-accueil.png) no-repeat; background-size: auto 100%; }
.header-mobile #nav li.nous-joindre a{ background: url(../images/mobile/320px/header-nav-nous-joindre.png) no-repeat; background-size: auto 100%; }
.header-mobile #nav li.recherche a{ background: url(../images/mobile/320px/header-nav-recherche.png) no-repeat; background-size: auto 100%; width: 8.4em; }
.header-mobile #nav li a img{ display: block; width: 100%; }
.header-mobile #nav li a span {display: none; }

/*
 * Page specific : Form.find
**/
form.find dt{ font-style: italic; font-weight: normal; margin: 0 0 0.1666666667em 0; }
form.find dd{ height: 2.6666666667em; }
form.find input[type=text],
form.find input[type=email]{ 
    border: 1px solid #67b5ea; display:block; 
    float: left; font-size: 1.1em; /*padding: 4px 5px;*/
    height: 1.8888888889em; line-height: 1.8888888889em; 
    vertical-align: middle; width: 15.6250000000em; 
    background: url(../images/mobile/320px/input-bg.png) repeat-x left top;
}
form.find input[type=submit],#rechercherCommercant input.btnGoRecherche,
form.find button{
    background: url(../images/mobile/320px/consommateurs/form-find-submit.png) no-repeat left center;
    background-size: auto 100%; border: 0; display: block; float: left; font-size: 1em; 
    height: 2.6666666667em; margin-top: -0.1666666667em; margin-left: 0.3333333333em; 
    overflow: hidden; padding: 0; width: 4.1111111111em; text-indent: -9999px; 
    vertical-align: middle;
}
#zone-enseignants form.find dd { display: flex; }
#zone-enseignants #header-search form.find dd input[type=text] {
    width: 100%;
    flex: 1 1 0px;
}
#header-search form.find dd input[type=submit] { flex: 0 0 auto; }
/* Form header search */
#header-search {display:none;}
#header-search form.find {padding:22px 22px 5px 22px;background:#5a737a;}
#header-search form.find dt{display:none;}
#header-search form.find dd input[type=text]{width: 80%/*16.7em*/;border:none;}
#header-search form.find dd input[type=submit] {width:3.41em;margin-top: 0;background-image:url(../images/mobile/320px/search.png);background-stretch:100%;}
  
.header-mobile h2 { width: 32%; }
.header-mobile h2 a { width: 100%; padding-top: 40%; height: 0; }
.header-mobile h2 a img { display: none !important; }
.header-mobile #nav { width: 10.25%; height: auto; }
.header-mobile #nav li.recherche a { width: 100%; height: auto; }
@media only screen and (max-width: 480px) {
    .header-mobile h2 { width: 40%; }
    .header-mobile #nav { width: 13%; }
}

/*
 * PORTAILS
 * #portails{ margin-bottom: 8px; }
**/  
#portails{ background: #fff url(../images/mobile/320px/portails.png) repeat-x left top; background-size: 100% auto; margin-bottom: 0.3636363636em; }
#portails .innerwrap{ width: auto; }
#portails ul{ margin: 0; padding: 0; }
#portails ul li{ display: inline; list-style: none; margin: 0; padding: 0; }
#portails ul li a{ background: #fff no-repeat left top; background-size: 100% 100%; display: block; }
#portails ul li a span{ display: none; }
#portails ul li a img{ display: block; visibility: hidden; width: 100%; }
#portails li.consommateurs a{ background-image: url(../images/mobile/320px/consommateurs-inactive.png?1212355);  }
html[lang="en"] #portails li.consommateurs a{ background-image: url(../images/mobile/320px/consommateurs-inactive-en.png?1212355);  }
#portails li.commercants a{ background-image: url(../images/mobile/320px/commercants-inactive.png?1212355);  }
html[lang="en"] #portails li.commercants a{ background-image: url(../images/mobile/320px/commercants-inactive-en.png?1212355);  }
.consommateurs #portails li.consommateurs a{ background-image: url(../images/mobile/320px/consommateurs-active.png?1212355);  }
html[lang="en"]  .consommateurs #portails li.consommateurs a{ background-image: url(../images/mobile/320px/consommateurs-active-en.png?1212355);  }
.commercants #portails li.commercants a{ background-image: url(../images/mobile/320px/commercants-active.png?1212355);  }
html[lang="en"]  .commercants #portails li.commercants a{ background-image: url(../images/mobile/320px/commercants-active-en.png?1212355);  }

#portails ul:after { content: ''; display: block; clear: both; }
#portails ul li { float: left; width: 50%; overflow: hidden; }
#portails ul li a { display: block; position: relative; padding-top: 31%; background-size: 100%; }
#portails ul li a img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }