.book-cover {
                        background: #fff;
                        border: 1px solid #ddd;
                        transition: all .5s ease 0s;
                        perspective: 1000px;
                        box-shadow: 10px 10px 10px rgb(0, 0, 0, .2)
                }

                .book-cover img {
                        transition: all .5s ease 0s;
                        transform-origin: left center;
                        filter: grayscale(.8);
                }

                .book-cover:hover img {
                        transform: rotateY(-30deg);
                        transform-style: flat;
                        filter: grayscale(0);
                }


                .book2-cover {
                        transition: all .5s ease 0s;
                        perspective: 1500px;
                }

                .book2-cover img {
                        transform: rotateX(15deg);
                        transition: all .5s ease 0s;
                        transform-origin: bottom;
                        filter: grayscale(.8);
                }

                .book2-cover:hover img {
                        -webkit-transform: rotateX(0deg) translateZ(100px);
                        transform: rotateX(0deg) translateZ(100px);
                        -webkit-transform-style: preserve-3d;
                        transform-style: preserve-3d;
                        filter: grayscale(0);
                }

                .readmore {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        opacity: 0;
                        transition: all .5s ease 0s;
                }

                .book2-cover:hover .readmore {
                        opacity: 100;
                        transition: all .5s ease 0s;
                }

                .book2-shadow {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        bottom: -2px;
                }

                .book2-cover:hover .book2-shadow img {
                        opacity: 0;
                }

                .book2-shadow img {
                        width: 100%;
                }

                .p-relative {
                        position: relative;
                }


                /*.bookshelf {
    background-image: url(file:///Z:/OpenServer4/OSPanel/domains/typo/books/cover/bookshelf.png);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}*/

                .bookshelf {
                        position: absolute;
                        width: 100%;
                        left: 0;
                        bottom: -110px;
                }

                .bookshelf img {
                        width: 100%;
                }

			 @media (max-width: 576px) {
                .bookshelf {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: -40px;
                }
			}

                @media (min-width: 576px) {
                  
                  .bookshelf {
                      position: absolute;
                      width: 100%;
                      left: 0;
                      bottom: -45px;
                  }
                  }

                @media (min-width: 768px) {
                        .bookshelf {
                                position: absolute;
                                width: 120%;
                                max-width: 120%;
                                left: -10%;
                                bottom: -75px;
                        }

                        .book2-shadow {
                                width: 240px;
                        }

                }

                @media (min-width: 992px) {
                        .bookshelf {
                                        position: absolute;
                                        width: 96%;
                                        left: 2%;
                                        bottom: -80px;
                        }
                }

                @media (min-width: 1200px) {
                        .bookshelf {
                                position: absolute;
                                width: 96%;
                                left: 2%;
                                bottom: -95px;
                        }
                        .book2-shadow {
                                width: 190px;
                        }
                }

                @media (min-width: 1400px) {
                        .bookshelf {
                                position: absolute;
                                width: 96%;
                                left: 2%;
                                bottom: -110px;
                        }
                        .book2-shadow {
                                width: 220px;
                        }
                }