/* HOME Intermédiaire*/

/*General*/
#home_intercontent {background:#fff; height:auto; position:relative; padding-top:20px;}
.productWrapper {margin-left:19px;}
.firstProduct {margin-left:0px!important;}
#home_interModules {width:994px; margin-left:auto; margin-right:auto;}
#home_interModules .hplAllBrands {top:20px;}

/*Intro SEO*/
#IntroSEO {width:994px; height:0px; font-family:"Averta Regular"; font-size:13px; color:#666666; line-height:17px; padding-top:20px;}
#home_intercontent .seo_intro {background:#fff; padding:14px 0 30px 0; font-family:"Averta Regular"; font-size:13px; color:#666666; line-height:18px; text-align: justify; cursor: pointer;}
#home_intercontent .seo_intro span { font-size:11px; color: #333; text-transform: uppercase; font-weight: bold;}
#home_intercontent .seo_intro:hover span { color: #000; text-decoration: underline; }
#home_intercontent .seo_intro p:last-of-type {display: inline; padding-right: 4px;}
@media screen and (max-width: 1024px) {
    #home_intercontent .seo_intro {
        padding: 0 10px;
    }
    #home_intercontent .seo_intro p:last-of-type {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

#selection {width:732px; display:inline-block; margin-left:18px;}
@media screen and (max-width: 1024px) {
    #selection {
        width: 100%;
        margin: 0;
    }
}
/*Slider*/
#slider {width:740px; height:300px;}
@media screen and (max-width: 1024px) {
    #slider {
        width: 100%;
    }
    #slider .misesEnAvant {
        width: 100% !important;
    }
    #slider  .misesEnAvant .loader {
        width: 100%;
    }
    #slider .misesEnAvant .spinner {
        left: 50%;
        transform: translateX(-50%);
    }
    #selection .misesEnAvant #slider a img {width: 100%!important; height: auto!important}
}
@media screen and (max-width: 480px) {
    #slider, #slider .misesEnAvant, .misesEnAvant .loader {
        height: 150px;
    }
    
    #slider .misesEnAvant .spinner {margin: 70px auto 0;}
}

/*Top Categories*/
#topCategories {width:740px; max-height:484px; /*Trick pour supprimer l'espacement entre les enfants du au inline-block. Il faut impérativement définir une taille de police sur les enfants*/ font-size:0; padding: 40px 0;}
.blocCategorie {width:232px; height:232px; display:inline-block; margin:0; padding:0;}
.blocTitre {/* Pour les navigateurs ne supportant pas RGBa */background-color: rgb(0, 0, 0);/* RGBa with 0.6 opacity */background-color: rgba(0, 0, 0, 0.6); color:#FFFFFF;
            font-family:"Averta Regular"; font-size:13px; padding-left:12px;}
.left {margin-right:22px;}
.right {margin-left:22px;}
.top {margin-bottom:20px;}
.bottom {margin-top:20px;}
.catlist {margin-top:20px;}
@media screen and (max-width: 1024px) {
    #topCategories {
        width: calc(100% - 20px);
        padding: 40px 10px;
    }
}

.vignetteSousCat a {transition:all 250ms ease-in-out 0s;}
.vignetteSousCat .transition {transition:all 250ms ease-in-out 0s;}
.vignetteSousCat {float:left; height:232px; margin:0 0 22px 22px; position:relative; width:232px; display:block;}
.vignetteSousCat.first {margin:0!important;}
.vignetteSousCat span {background:none repeat scroll 0 0 rgba(0, 0, 0, 0.6); color:#FFFFFF; display:block; font-family:Averta Regular; font-size:12px; height:30px; line-height:31px;
                       padding-left:12px; position:absolute; top:0; width:220px; z-index:1;}
.vignetteSousCat a:hover span {background:none repeat scroll 0 0; z-index:100;}
.vignetteSousCat .image-frame {height:232px; overflow:hidden; width: 232px; z-index:0;}
.vignetteSousCat .image-frame .zoom-image {transform: scale(1.0);}
.vignetteSousCat .image-frame .zoom-image:hover {transform: scale(1.06);}

/*Top Produits*/
#topProduits {width:994px; height:520px; margin-top:0px;}
#topProduits .active {font-family: Averta-Light; font-size:28px; color:#666666; display:inline-block; line-height:56px; height:55px; vertical-align:middle;}
#topProduits .inactive {font-family: Averta-Light; font-size:28px; color:#CCCCCC; display:inline-block; line-height:56px; height:55px; vertical-align:middle; cursor:pointer;
                       border-bottom:3px solid rgba(0,0,0,0.00); transition: all 250ms ease-out;-moz-transition: all 250ms ease-out;-webkit-transition: all 250ms ease-out;
                       -o-transition: all 250ms ease-out;}
#topProduits .inactive:hover {color:#666666;}
#topProduits .allCat {text-align:right; text-transform:uppercase; vertical-align:middle; display:inline-block; line-height:56px; height:56px; vertical-align:middle; float:right; cursor:pointer;}
#topProduits .allCat a {font-family:"Averta Regular"; font-size:11px; color:#999999;}
#topProduits .allCat a:hover {text-decoration:none;}
#topProduits .espacement {margin-left:20px; margin-right:20px; height:13px; width:1px; border-left:1px solid #d9d9d9; vertical-align:middle; display:inline-block;}
#topProduitMenu {border-bottom:1px solid #d9d9d9; width:994px; height:56px; margin-bottom:20px; margin-top:54px;}
#topProduitBlocs {width:994px; height:340px; margin-top:20px; margin-bottom:20px; font-size:0;}
#topProduitNouveautes {width:994px; height:340px;}
#topProduitVentes {width:994px; height:340px; display:none;}
#topProduitConsultes {width:994px; height:340px; display:none;}
.topProduitBloc {width:232px; height:340px; display:inline-block; margin:0; padding:0; vertical-align:top; font-size:12px;}
.topProduitBlocsSeparator {width:22px; height:340px; margin:0; padding:0; display:inline-block;}
@media screen and (max-width: 1024px) {
    #topProduits {
        width: calc(100% - 20px);
        height: auto;
        padding: 0 10px;
    }
    #topProduitMenu {
        margin-top: 20px;
        width: 100%;
    }
    #topProduits .active, #topProduits .inactive {
        font-size: 20px;
    }
    #topProduitBlocs {
        width: 100%;
        height: auto;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #topProduitNouveautes, #topProduitVentes, #topProduitConsultes{
        width: 100%;
        height: auto;        
    }
}
@media screen and (max-width: 768px) {
    #topProduitMenu {
        margin-top: 0;
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        height: 41px;
        margin-bottom: 40px;
    }
    #topProduits .active, #topProduits .inactive {
        font-size: 16px;
        line-height: 44px;
        height: 40px;
    }
    #topProduits .allCat {
        width: 100%;
        text-align: right;
        line-height: 30px;
        height: 30px;
    }
}
@media screen and (max-width: 480px) {
   #topProduits .active, #topProduits .inactive {
        font-size: 14px;
    }
   #topProduits .espacement {
        margin-left: 5px;
        margin-right: 5px;
   }
    #topProduits .allCat a{
        font-size: 10px;
    }
}

/*Promos*/
.promos {width:994px; height:520px; margin:20px 0;}
.promos .titreTop {font-family:Averta-Light; font-size:28px; line-height:56px; height:56px; vertical-align:middle; display:inline-block; color:#ec3838;}
.promos .allCat {font-family:"Averta Regular"; font-size:11px; color:#999999; text-align:right; text-transform:uppercase; vertical-align:middle; display:inline-block; line-height:56px; height:56px;
                 vertical-align:middle; float:right; cursor:pointer;}
.promos .allCat a {font-family:"Averta Regular"; font-size:11px; color:#999999;}
.promos .allCat a:hover {text-decoration:none;}
.promos .promoTitle {border-bottom:1px solid #D9D9D9; width:994px; height:56px; margin-bottom:20px;}
@media screen and (max-width: 1024px) {
    .promos {
        width: calc(100% - 20px);
        padding: 0 10px;
        height: auto;
        margin-top: 0;
    }
    .promos .promoTitle {
        width: 100%;
        height: auto;
    }
}

/*Marques*/
#marques {width:994px; height:200px; margin-top:20px;}

.divMarquesVedettes {height:177px; padding:10px 0px; position:relative;}
.divMarquesVedettes a:hover {text-decoration:none;}
/* marques vedettes */
.hplAllBrands {position:absolute; top:20px; right:0px; text-transform:uppercase; font-size:11px; color:#999999;}
.hplAllBrands:hover {color:#333333;}
.divMarquesVedettes .titre {font-family:Averta-Light; font-size:28px; height:28px; line-height:28px; color:#666666; border-bottom:1px solid #d9d9d9; margin-bottom:20px; padding-bottom:12px;}

@media screen and (max-width: 1024px) {
    #marques {
        width: calc(100% - 20px);
        padding: 0 10px;
    }
}
@media screen and (max-width: 768px) {
    .hplAllBrands {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        text-align: center;
        display: inline-block;
    }
    .divMarquesVedettes .titre {
        text-align: center;
        margin-bottom: 10px;
        font-size: 24px;
    }
}
@media screen and (max-width: 480px) {
    .divMarquesVedettes .titre  {
        font-size: 18px;
        line-height: 24px;
    }
}