/* CSS specifique HOME PAGE */

.rubLinks > li.rubSell .msgDepotMenu{
    padding-top: 5px;
}

.line   {margin: 0 0 15px;}
.line1  {margin-top: 10px;}
.line2  {overflow: hidden;}

.cat_utils .line2 {float:right;}

#pavePub {
    float: right;
    min-width: 300px;
    margin-right: 2px;
}

.pubHomeTablet h2 {
    border-bottom: 1px solid #c8c8c8;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* images principales home page*/
.homeMainImg {
    max-width: 100%;
    height: 335px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size:  cover;
        -moz-background-size: cover;
          -o-background-size: cover;
             background-size: cover;
}

/* SearchEngine Promoneuve */
#specIE7            {color: white;}
#specIE7 ul         {overflow: hidden;}
#specIE7 ul li      {display: table; margin-bottom: 5px; clear: both;}
#specIE7 ul li img  {display: table-cell; width: 15px; margin-right: 10px;}
#specIE7 ul li span {display: table-cell;}

/* SearchEngine */
.searchEngine {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: block;
    padding: 0;
    box-sizing: border-box;
}

/* SearchEngine - */
.searchEngine .searchEngineFields                                   {background-color: rgba(0, 0, 0, 0.8); clear: both; /*background: black; filter: alpha(opacity=80);*/}
.searchEngine .searchEngineFields.categoriesFields,
.searchEngine .searchEngineFields.selectFields > div                {margin: 0 auto; max-width: 748px;}
.cat_loisir .searchEngine .searchEngineFields.categoriesFields,
.cat_loisir .searchEngine .searchEngineFields.selectFields > div    {max-width: 690px;}
.searchEngine .searchEngineFields.categoriesFields                  {overflow: hidden;}
.searchEngine .searchEngineFields.selectFields                      {padding: 10px 0;}

/* SearchEngine - Compteur et lien Recherche avancee */
.searchEngine .categoriesFields #compteur,
.searchEngine .categoriesFields .advancedSearch         {color: white; float: right; line-height: 35px; padding-top: 10px;}
.searchEngine .categoriesFields #compteur               {font-weight: bold;}
.searchEngine .categoriesFields .advancedSearch         {margin: 0 15px 0 45px; text-decoration: underline;}

/* SearchEngine -  Logos Categories (auto, moto, utils, loisirs) */
.searchEngine .categoriesFields .searchEngineCat {
    font-size: 0;
    white-space: nowrap;
    width: 300px;
    float: left;
}

.searchEngine .categoriesFields .searchEngineCat li {
    position: relative;
    display: inline-block;
    width: 21%;
    text-align: center;
    vertical-align: top;
}

.searchEngine  .categoriesFields .searchEngineCat a {
    display: block;
    height: 25px;
    padding: 10px 0;
}

.searchEngine .categoriesFields .searchEngineCat li a i {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    margin-top: -3px;
}

.searchEngine .categoriesFields .searchEngineCat li.active a i,
.searchEngine .categoriesFields .searchEngineCat li:hover a i {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.searchEngine .categoriesFields .searchEngineCat .searchEngineCatSelector {
    bottom: 0;
    position: absolute;
    width: 100%;
}

/* SearchEngine -  Selects et bouton valider */
.searchEngine .selectFields #Valider                        {border-radius:0; padding:0; width:140px;}

.searchEngine .selectFields #occasForm > div                {float:left;}

.selectContainer, .inputContainer                           {border:0; border-radius: 0px; float: left; margin: 0 1px 0 0;}
.cat_auto .selectContainer, .cat_auto .inputContainer       {width: 99px;}
.cat_moto .selectContainer, .cat_moto .inputContainer       {width: 120px;}
.cat_utils .selectContainer, .cat_utils .inputContainer     {width: 99px;}
.cat_loisir .selectContainer, .cat_loisir .inputContainer   {width: 108px;}

.inputContainer.number input:focus + .formatted             {display: none;}
.inputContainer.number .formatted {
    overflow: hidden;
    height: 40px;
    margin: -40px 30px 0 5px;
    line-height: 40px;
    font-weight: bold;
    user-select: none;
}

.multiSelectContainer > .dropdown                           {width: 280px!important;}

/* Liens d'acces rapides fastAccessPages (Sprites90px bleus) */
.fastAccessPages                            {overflow: hidden; margin-bottom: 40px;}
.fastAccessPages .circ                      {float:left; margin-right:15px;}
.fastAccessPages a                          {color: #333; float: left; margin-left: 2%; width: 31%;}
.fastAccessPages a h2                       {margin-top: 10px;}
.fastAccessPages img                        {float: left; max-width: 90px; width: 35%;}
.fastAccessPages > a:hover .circ.bgBlue,
.fastAccessPages > a:focus .circ.bgBlue,
.fastAccessPages > a:active .circ.bgBlue    {background-color: #027094!important;}
.fastAccessLine                             {overflow: hidden;}
.fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles > div {width: 50%; float:left; padding-right:15px; box-sizing: border-box;}
.fastAccessVehicles li                      {float:left; text-align: center; margin-bottom: 10px; margin-right:2%; width: 32%;}
.fastAccessVehicles li:nth-child(3n)        {margin-right:0}
.fastAccessVehicles li a                    {display: block;}

.fastAccessLineRegionsContainer             {display:flex; justify-content:space-between;}

.cat_utils .fastAccessLineRegions .fastAccessVehicles h2,
.cat_utils .fastAccessLineRegions .fastAccessLineRegionsContainer {margin-right: 15px;}

.fastAccessVehicles h2 {
    font-weight: bold;
    color: #333;
    padding-bottom: 5px;
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 10px;
}

.fastAccessVehicles .cat_scooter,
.fastAccessVehicles .cat_quad                            {display: none!important;}

/* Bloc Mieux acheter et Mieux vendre */
.commLine                   {color: #333; margin-bottom: 50px;}
.commLine1 ul               {overflow: hidden;}
.commLine li                {display: inline-block; float: left; width: 50%;}
.commLine li .imgComm img   {max-width: 100%;}
.commLine li .imgComm a     {margin-right: 7%;}

/* Bloc dernieres annonces publiees */
.zoomAds                    {overflow: hidden;}
.zoomAds li                 {float: left; margin: 0 1%; width: 12%;}
.zoomAds li:first-child     {margin-left: 2%;}
.zoomAds li a               {color: #333; text-align: center;}
.zoomAds li a img           {border: 1px solid #ddd; margin-bottom: 10px; width: 100%;}
.zoomAds li a *             {display: block;}

/* ******************************************************************************************************
 *                                              Desktop                                                 *
 ****************************************************************************************************** */
@media only screen and (min-width:1201px){

    .fastAccessVehicles li:last-child                           {float:right; margin-right:0}
    .fastAccessLineRegions .fastAccessVehicles li:last-child    {float:left;}
    body:not(.cat_utils) .fastAccessLineRegions {margin-top:40px;}

    .cat_loisir .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles > div                   {width: 100%;}
    .cat_loisir .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles li                      {width: 15%; margin-right:2%;}
    .cat_loisir .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles li:nth-child(3n)        {margin-right:2%;}
    .cat_loisir .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles li:nth-child(6n)        {margin-right:0;}
    .cat_loisir .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles li:last-child           {float:left; margin-right:0;}

    .fastAccessVehicles h2,
    .zoomTitle {
        padding-left:10px;
    }

    .topRegions {padding:0 15px;}
    .cat_utils .topRegions {padding:0 0 0 15px;}

}

/* ******************************************************************************************************
 *                                              Tablette                                                *
 ****************************************************************************************************** */
@media only screen and (min-width:768px) and (max-width:1200px){

    .responsive #pavePub                                    {float:none !important;}
    .responsive .containerContent .line                     {margin-left:10px; margin-right:10px;}
    .responsive .fastAccessPages .circ                      {float:none; margin-right:0;}

    .responsive .fastAccessLine:not(.fastAccessLineRegions) .fastAccessVehicles > div   {margin-bottom:20px; padding-right:15px!important;}

    .responsive .commLine li                                {margin-bottom: 20px;}
    .responsive .commLine li .imgComm                       {width: 40%;}
    .responsive .commLine .btnDepositAnnounce,
    .responsive .commLine .btnSearchPro                     {margin-top: 25px !important;}
    .responsive .commLine .achatVenteVehic .placeAd,
    .responsive .commLine .achatVenteVehic .searchPros      {width:100% !important;}
    .responsive .commLine .achatVenteVehic .searchPros      {margin-top:30px !important;}

}

/* ******************************************************************************************************
 *                                              Mobile                                                  *
 ****************************************************************************************************** */
@media only screen and (max-width: 767px) {

    .containerContent .line                                     {margin-left:10px; margin-right:10px;}

    .searchEngine                                               {background-color:rgba(0, 0, 0, 0.8); position:inherit; padding:10px 10px 0; }
    .searchEngine .categoriesFields #compteur                   {padding-top:0;}
    .searchEngine .searchEngineFields                           {background-color: transparent; padding:0;}
    .searchEngine .searchEngineCat                              {border-bottom:1px solid white; float:none; width:auto;}

    .searchEngine #occasForm                                    {clear: both;}
    .searchEngine #occasForm > div                              {clear: both; float: none !important; width:100% !important;}
    .searchEngine #occasForm .multiSelectContainer > .dropdown  {width: 100%!important; border-top:1px solid #c8c8c8;}
    .searchEngine #occasForm > div.maxPriceInput                {box-sizing:border-box; float:left !important; clear:left; width:50% !important; padding-right:2%; margin-right:0;}
    .searchEngine #occasForm > div.energieSelect                {box-sizing:border-box; float:right !important; clear:right; width:50% !important; padding-left:2%; margin-right:0;}
    .searchEngine #occasForm > div.energieSelect .dropdown      {right:0; width:200%;}
    .searchEngine #Valider                                      {border-radius:3px; width:100% !important;}

    .cat_auto .selectContainer, .cat_auto .inputContainer,
    .cat_moto .selectContainer, .cat_moto .inputContainer,
    .cat_utils .selectContainer, .cat_utils .inputContainer,
    .cat_loisir .selectContainer, .cat_loisir .inputContainer   {border-radius: 3px !important; margin-bottom:10px; width:100%;}
    .cat_auto .regionSelect .selectContainer                    {width:100%;}

    .promoneuveSelectField                                      {display:inline-block; overflow: hidden; vertical-align: middle; width:100%!important;}
    .promoneuveSelectField > span                               {width:100%;}
    .promoneuveSelectField button                               {border: 1px solid #c8c8c8; margin-bottom:10px; width: 50%; white-space: nowrap;}
    .promoneuveSelectField button:first-of-type                 {border-radius: 5px 0 0 5px;}
    .promoneuveSelectField button:last-of-type                  {border-radius: 0 5px 5px 0; border-left: 0;}
    .promoneuveSelectField button.active                        {font-weight: bold; background-color: white !important;}

    .responsive .commLine                                       {margin-bottom: 10px;}
    .responsive .commLine ul                                    {padding-bottom: 3px;}
    .responsive .commLine li                                    {clear: both; float: none; margin-bottom: 40px; width: 100%;}
    .responsive .commLine li:last-child                         {margin-bottom: 5px;}
    .responsive .commLine li img                                {display: none;}
    .responsive .commLine .zoomTitle                            {margin-top: 0;}
    .responsive .commLine .btnDepositAnnounce,
    .responsive .commLine .btnSearchPro                         {margin-top: 25px !important; text-align: center;}
    .responsive .commLine .achatVenteVehic img                  {display: none;}
    .responsive .commLine .achatVenteVehic .w50                 {width: 100% !important;}
    .responsive .commLine .achatVenteVehic .floatL              {float: none !important;}
    .responsive .commLine .achatVenteVehic .mR60,
    .responsive .commLine .achatVenteVehic .mL60                {margin-left: 0 !important; margin-right: 0 !important;}
    .responsive .commLine .achatVenteVehic > div:first-child    {margin-bottom:25px;}

    .responsive .fastAccessLine                                 {width:100%;}
    .responsive .fastAccessVehicles                             {padding:0;}
    .responsive .fastAccessVehicles > div                       {margin-bottom:20px; padding-right:0px;}
    .responsive .fastAccessVehicles li                          {margin-right:2%; width: 49%;}
    .responsive .fastAccessVehicles li:nth-child(even)          {margin-right: 0;}

    #mapping > div {margin:0 auto;}

}