ul#autoWidth {
    height: 460px;
}

ul#autoWidth::after {
    height: 460px;
}

.book-container {
    width: 200px;
    height: 300px;
    /*margin: 30px 30px 10px 30px;*/
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 800px;
}

.book-container-vedette {
    height: 300px;
    /*margin: 13px 0px 13px 10px;*/
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 800px;
}

.product_discount_ombre {
    position: absolute;
    top: 15px; /*7*/
    left: 0px; /*7*/
    height: 0;
    width: 0;
    border-top: 54px solid rgb(75, 75, 75);
    border-right: 54px solid transparent;
}

.product_discount {
    position: absolute;
    top: 16px; /*7*/
    left: 2px; /*7*/
    height: 0;
    width: 0;
    border-top: 54px solid red;
    border-right: 54px solid transparent;
}

.product_discount span {
    font-size: 15px;
    font-weight: 700;
    padding: 16px 0px;
    color: #fff;
    line-height: 18px;
    position: absolute;
    top: -60px;
    transform: rotate(-45deg)
    /*background: #ea3a3c;*/
}


.product_discount_publications_ombre {
    position: absolute;
    top: -11px; /*15*/
    left: -22px; /*0*/
    height: 0;
    width: 0;
    border-top: 54px solid rgb(75, 75, 75);
    border-right: 54px solid transparent;
}

.product_discount_publications {
    position: absolute;
    top: -10px; /*16*/
    left: -20px; /*2*/
    height: 0;
    width: 0;
    border-top: 54px solid red;
    border-right: 54px solid transparent;
}

.product_discount_publications span {
    font-size: 15px;
    font-weight: 700;
    padding: 16px 0px;
    color: #fff;
    line-height: 18px;
    position: absolute;
    top: -60px;
    left: 0px;
    transform: rotate(-45deg)
}


.product_discountlivre_ombre {
    position: absolute;
    top: -5px; 
    left: 20px; 
    height: 0;
    width: 0;
    border-top: 54px solid rgb(75, 75, 75);
    border-right: 54px solid transparent;
}

.product_discountlivre {
    position: absolute;
    top: -4px; 
    left: 22px; 
    height: 0;
    width: 0;
    border-top: 54px solid red;
    border-right: 54px solid transparent;
}

.product_discountlivre span {
    font-size: 15px;
    font-weight: 700;
    padding: 16px 0px;
    color: #fff;
    line-height: 18px;
    position: absolute;
    top: -60px;
    left: 0px;
    transform: rotate(-45deg)
}


.product_discount_publicationspage_ombre {
    position: absolute;
    top: -5px; 
    left: -17px; 
    height: 0;
    width: 0;
    border-top: 54px solid rgb(75, 75, 75);
    border-right: 54px solid transparent;
}

.product_discount_publicationspage {
    position: absolute;
    top: -4px; 
    left: -15px; 
    height: 0;
    width: 0;
    border-top: 54px solid red;
    border-right: 54px solid transparent;
}

.product_discount_publicationspage span {
    font-size: 15px;
    font-weight: 700;
    padding: 16px 0px;
    color: #fff;
    line-height: 18px;
    position: absolute;
    top: -60px;
    left: 0px;
    transform: rotate(-45deg)
}


.price {
    font-family: 'Helvetica-Reg';
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    padding-bottom: 0px;
}

.old_price {
    font-family: 'Helvetica-Reg';
    font-size: 1rem;
    font-weight: bold;
    color: #8f8f8f;
    padding-bottom: 0px;
    padding-right: 5px;
}

.new_price {
    font-family: 'Helvetica-Reg';
    font-size: 1rem;
    font-weight: bold;
    color: #00a300;
    padding-bottom: 0px;
    padding-right: 5px;
}


.cover-vedette {
    transform: rotateY(0deg);
    position: relative;
    transform-style: preserve-3d;
    /*width: 200px;*/
    width: 100%;
    max-width: 200px;
    height: 300px;
    transition: transform 1s ease;
    margin: 7px auto;
}

.cover-vedette>:first-child {
    position: absolute;
    /*background: #0d47a1aa;*/
    /*width: 200px;*/
    width: 100%;
    max-width: 200px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    /*box-shadow: 5px 5px 20px #666;*/
    box-shadow: 1px 0px 5px #666;
}

.cover-vedette::after {
    content: '';
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 3px;
    background: rgba(0, 0, 0, 0.06);
    box-shadow: 1px 0 5px rgba(255, 255, 255, 0.1);
}

.ih-item.square .info {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: 1px 0px 5px #666;
}

.ih-item.square .info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8px;
    bottom: 0;
    width: 3px;
    background: rgba(0, 0, 0, 0.06);
    box-shadow: -2px 0 5px rgba(255, 255, 255, 0.1);
}

.info h5 {
    color: #79cdff;
    font-size: 0.9rem;
    font-weight: 400;
}

.info .price-book {
    color: #7aff00;
    font-weight: 600;
    font-size: 1.1rem;
}

.book-liens {
    position: absolute;
    top: 91%;
    left: 50%;
    margin: 0;
    background: #fff;
    z-index: 3;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.booklien {
    line-height: 27px;
    padding: 0 15.5px;
    border-right: 1px solid #e5e5e5;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    color: #666666;
}

.booklien:last-child {
    border-right: none;
}

.booklien:hover {
    color: rgb(189, 33, 48);
}

.book {
    transform: rotateY(0deg);
    position: relative;
    transform-style: preserve-3d;
    width: 200px;
    height: 300px;
    transition: transform 1s ease;
    /*animation: 1s ease 0s 1 initAnimation;*/
}

.book:hover {
    transform: rotateY(30deg);
    animation: 1s ease 0s 1 initAnimation;
}

@keyframes initAnimation {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(30deg);
    }
}

.book> :first-child {
    position: absolute;
    background: #0d47a1aa;
    width: 200px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    /*box-shadow: 5px 5px 20px #666;*/
    box-shadow: 1px 0px 5px #666;
}

.book::before {
    content: ' ';
    background: rgb(255, 255, 255);
    height: calc(300px - 2 * 3px);
    width: 50px;
    top: 3px;
    position: absolute;
    /*transform: translateX(calc(200px - 50px / 2 - 3px)) rotateY(90deg) translateX(calc(50px / 2));*/
    transform: translateX(calc(-38px / 2)) rotateY(90deg) translateX(calc(60px - 50px / 2 - 3px));
}

.book::after {
    content: ' ';
    position: absolute;
    left: 0;
    width: 200px;
    height: 300px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #01060f;
    transform: translateZ(-50px);
    /*box-shadow: -10px 0 50px 10px #666;*/
}

.img-cover {
    width: 200px;
    height: 300px;
}

.cover-img::after {
    content: '';
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 3px;
    background: rgba(0, 0, 0, 0.06);
    box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.book>div {
    position: absolute;
    border-radius: 0 3px 3px 0;
    box-shadow: inset -4px 0px 10px rgba(0, 0, 0, 0.1);
    height: 300px;
    width: 200px;
    /*right: 2px;*/
}

.book-btns {
    position: absolute;
    opacity: 0;
    top: 55%;
    left: 50%;
    margin: auto;
    background: #fff;
    z-index: 3;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book:hover .book-btns {
    opacity: 1;
    top: 50%;
    height: 47px;
}

.btn-book {
    line-height: 47px;
    padding: 0 15.5px;
    border-right: 1px solid #e5e5e5;
}

.btn-book:first-child {
    padding: 0 15.5px;
    border-left: 1px solid #e5e5e5;
}

.book-btns a {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    color: #666666;
}

.btn-book:hover {
    color: rgb(189, 33, 48);
}


/************** @media screen******************/