.imgProd {
    width: 150px;
    height: 150px;
    float: left;
    margin: 0 5px;
    border: 1px solid #e3d3d3;
}

.canvas_img {
    display: inline-block;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
}

    .canvas_img > div {
        height: 100%;
    }

    .canvas_img div > div {
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
    }

    .canvas_img div.cover_img_100perc {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
    }

    .canvas_img div.cover_img {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
    }

/*canvas XS*/

.imgProd_XS {
    width: 70px;
    height: 50px;
    float: left;
    margin: 0 5px;
    border: 1px solid #e3d3d3;
}

.canvas_img_XS {
    display: inline-block;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
}

    .canvas_img_XS > div {
        height: 100%;
    }

    .canvas_img_XS div > div {
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
    }

    .canvas_img_XS div.cover_img_100perc {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
    }


    .canvas_img_XS div.cover_img_80px {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 80px;
    }

    .canvas_img_XS div.cover_img_150px {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 150px;
    }

    .canvas_img_XS div.cover_img_200px {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 200px;
    }

    .canvas_img_XS div.cover_img_300px {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
        height: 300px;
    }

    .canvas_img_XS div.cover_img {
        background-size: contain;
        margin: 0 auto;
        cursor: pointer;
    }