
/* BANNER */
#shop #slider { width: 100%; display: block; height: 300px; position: relative; z-index: 9997; top: 100px;  }
#shop #slider .slide { height: 300px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
#shop #slider .mask_slider { height: 300px; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3) }
#shop #slider .centered { z-index: 1; position: relative; padding-top: 110px;}
#shop #slider h1 { width: auto; float: left; color: #fff; font-size: 50px; line-height: 50px; font-weight: 300; font-family: Oswald  }
#shop #slider h1:after {
    transition: all ease-in-out .2s;
    background: #fff;
    content: "";
    display: block;
    height: 3px;
    width: 70px;
    margin-left: 0px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    #shop #slider { width: 100%; display: block; height: 200px; position: relative; z-index: 9997; top: 100px;  }
    #shop #slider .slide { height: 200px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
    #shop #slider .mask_slider { height: 200px; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3) }
    #shop #slider .centered { z-index: 1; position: relative; padding-top: 60px; width: calc(100% - 20px); margin-left: 20px}
    #shop #slider h1 { width: auto; float: left; color: #fff; font-size: 40px; line-height: 40px; font-weight: 300; font-family: Oswald  }
}


/* HOME FIRST */ 
#shop #corps { width: 100%; background: #fff; clear:both; float: left; position: relative }
#shop .content { width:1200px; display: table; margin: auto; }
#shop .centered a { display:block; float: left; line-height: 30px; font-size: 16px; margin-right: 24px; color: #000; font-weight: 300; transition: .3s all; text-transform: uppercase; }
#shop .centered a:after {
    transition: all ease-in-out .2s;
    background: #000;
    content: "";
    display: block;
    height: 1px;
    width: 0%;
}
#shop .centered a:hover:after {
    width: 100%;
}

#shop .centered .active:after { width: 100%; }

@media (max-width: 768px) {
    #shop .content { margin:auto; width:calc(100% - 40px); margin-left:20px; }
    #shop .centered a { font-size: 15px; margin-right: 8px; }

    
}

#shop .produit { float: left; width: 370px; height: 555px; padding: 5px; margin-right: 25px; margin-bottom: 25px; background: #ece9e5; position: relative; overflow: hidden; cursor: pointer; font-family: Raleway  }
#shop .nomargin { margin-right: 0px; }
#shop .produit .img1 { position: absolute; top: 5px; left: 5px; width: 370px; z-index: 1;  }
#shop .produit .img2 { position: absolute; top: 5px; left: 5px; width: 370px; z-index: 2; opacity: 0; transition: .3s all; }
#shop .produit .infos { position: absolute; bottom: 5px; left: 5px; width: 340px; padding: 25px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; z-index: 3; background: #fff; display:none; }
#shop .produit .title { color: #333; font-size: 22px; line-height: 24px; float: left; }
#shop .produit .price { color: #333; font-size: 24px; line-height: 24px; float: right;  }
#shop .produit a { display:block; float: left; line-height: 40px; font-size: 16px; width: calc(100% + 50px); margin-left: -25px; text-align: center; color: #fff; font-weight: 300; letter-spacing: 1px; background: rgba(0,0,0,0.8);  transition: .3s all; text-transform: uppercase;  }
#shop .produit a:hover { background: rgba(0,0,0,1); color:#fff }

@media (max-width: 768px) {
    #shop .produit { width: calc(100% - 10px); margin-right: 0px; margin-bottom: 20px;  }
    #shop .produit .img1 { position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); z-index: 1;  }
    #shop .produit .img2 { display: none;}
    #shop .produit .infos { position: absolute; bottom: 0px; left: 5px; width: calc(100% - 40px); padding: 25px; padding-left: 15px; padding-right: 15px; padding-bottom: 0px; z-index: 3; background: #fff; display:block; }
    #shop .produit .title { font-size: 18px; }
    #shop .produit .price { font-size: 20px; }
    
}


