.lf-product {
    min-height: 200px;
    height: 300px;
    padding: 0 5px;
    -webkit-transition: height .8s ease;
       -moz-transition: height .8s ease;
        -ms-transition: height .8s ease;
            transition: height .8s ease;
}

#lf_products header {
    padding-left: 20px;
    padding-right: 20px;
}

#lf_products.lf-grid,
#lf_products .lf-grid {
    margin-left: -20px;
    margin-right: -20px;
}

#lf_products .lf-product {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
}

@media screen and (max-width: 720px) {
    .lf-product h3{
        font-size: 200%;
    }
    .lf-product .lf-product-front p,
    .lf-product footer strong {
        font-size: 130%;
    }
    .lf-product .lf-product-front mark {
        font-size: inherit;
    }
}

@media screen and (max-width: 992px) {
    
    #lf_products header {
        padding-left: 5px;
        padding-right: 5px;
    }

    #lf_products .lf-grid {
        margin-left: -5px;
        margin-right: -5px;
    }

    #lf_products .lf-product {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 30px;
    }    

    #lf_products .lf-grid > .lf-product:last-child,
    #lf_products .lf-grid > .lf-product:last-child,
    #lf_products .lf-grid > .lf-product:last-child {
        margin-bottom: 0;
    }

}

@media screen and (min-width: 200px) and (max-width: 300px) {
    .lf-product {
        height: 300px;
    }
}

@media screen and (min-width: 300px) and (max-width: 335px) {
    .lf-product {
        height: 380px;
    }
}

@media screen and (min-width: 335px) and (max-width: 400px) {
    .lf-product {
        height: 420px;
    }
}

@media screen and (min-width: 400px) and (max-width: 480px) {
    .lf-product {
        height: 450px;
    }
}

@media screen and (min-width: 480px) and (max-width: 620px) {
    .lf-product {
        height: 380px;
    }
}

@media screen and (min-width: 620px) and (max-width: 650px) {
    .lf-product {
        height: 400px;
    }
}

@media screen and (min-width: 650px) and (max-width: 670px) {
    .lf-product {
        height: 410px;
    }
}

@media screen and (min-width: 670px) and (max-width: 720px) {
    .lf-product {
        height: 425px;
    }
}

@media screen and (min-width: 720px) and (max-width: 780px) {
    .lf-product {
        height: 400px;
    }
}

@media screen and (min-width: 780px) and (max-width: 850px) {
    .lf-product {
        height: 425px;
    }
}

@media screen and (min-width: 850px) and (max-width: 992px) {
    .lf-product {
        height: 450px;
    }
}

@media screen and (min-width: 992px) {
    .lf-product {
        height: 400px;
    }
}

.lf-product-container {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #b9b9b9;
    padding: 10px;
    position: relative;
    cursor: pointer;
    z-index: 6;
    overflow: hidden;
}

.lf-product img {
    width: 70%;
}

.lf-product button {
    max-width: 80%;
}

.lf-product i:before {
    font-size: 150%;
}

.lf-product-front img,
.lf-product-front h3,
.lf-product-front p,
.lf-product-front strong {
    margin-bottom: 3px;
    margin-top: 0;
}

.lf-product-front img,
.lf-product-front h3,
.lf-product-front p,
.lf-product-front strong {
    -webkit-transition: .5s ease .2s;
       -moz-transition: .5s ease .2s;
        -ms-transition: .5s ease .2s;
            transition: .5s ease .2s;
}

.lf-product-container > footer {
    position: absolute;
    bottom: 10px;
    z-index: 5;
    left: 0;
    text-align: center;
    width: 100%;
}

.lf-product-container > footer > strong {
    display: block;
    margin-bottom: 5px;
}

.lf-product-deliver-type {
    display: block;
    top: -1px;
    right: -1px;
    width: 100%;
    text-align: right;
    position: absolute;
}

.lf-product-deliver-type img {
    width: 20%;
}

/* back product seulement pour desktop */

@media screen and (min-width: 720px) {

    .lf-product-back {
        background-color: rgba(255, 255, 255, 0.85);
        position: absolute;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        top: 100%;
        left: 0;
        opacity: 0;
        display: block;
        padding: 10px;
    }

    .lf-product-back > .lf-wrapper > div {
        width: 70%;
        margin: 20px auto 0 auto;
    }

    .lf-product-container:hover .lf-product-front h3,
    .lf-product-container:hover .lf-product-front p,
    .lf-product-container:hover .lf-product-front strong {
        opacity: 0;
    }

    .lf-product-container .lf-product-back > .lf-wrapper > footer {
        position: absolute;
        bottom: 47px;
        text-align: center;
        width: 100%;
    }

    .lf-product-container .lf-product-back > .lf-wrapper > div > footer {
        margin-top: 3px;
    }

    .lf-product-deliver-type {
        display: none;
    }
}

#lf_products > section > .lf-grid h2 {
    margin: 30px 0;
}