.books  {
    margin-top: 20px;
    margin-bottom: 20px;
  }
 
  /* Fallback styles */
    .book {
      display: inline-block;
      box-shadow: 5px 5px 20px #333;
      margin: 10px;
	  width:200px;
    }

    .book img { vertical-align: middle; }
	.book img { height: 300px; }
    /*
     *  I'd recommend using Modernized to detect 3d transform support
     *  which will add a "csstransforms3d" class to the html element
     */

    .csstransforms3d  .books {
      -moz-perspective: 280px;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }

    .csstransforms3d  .book {
      position: relative;
      outline: 1px solid transparent;
      -moz-perspective: 280px;
      -moz-transform: rotateY(-3deg);
      -webkit-transform: perspective(300) rotateY(-3deg);
      box-shadow: none;
      margin: 0;
    }

    .csstransforms3d  .book img {
      position: relative;
      max-width: 100%;
    }

    .csstransforms3d  .book:before,
    .csstransforms3d  .book:after {
      position: absolute;
      top: 2%;
      height: 96%;
      content: ' ';
      z-index: -1;
    }

    .csstransforms3d  .book:before {
      width: 100%;
      left: 7.5%;
      background-color: #aaa;
      box-shadow: 5px 5px 20px #333;
    }

    .csstransforms3d  .book:after {
      width: 5%;
      left: 100%;
      background-color: #EFEFEF;
      box-shadow: inset 0px 0px 5px #aaa;
      -moz-transform: rotateY(20deg);
      -webkit-transform: perspective(100) rotateY(20deg);
    }

    .csstransforms3d  #book2:before { background-color: #223944; }
    .csstransforms3d  #book3:before { background-color:  #555; }

/* Large devices (desktops, less than 1366px) */
@media (max-width: 1366.02px) {
  .book { width: 154px; }
  .book { height: 220px; }
  .book img { height: 220px; }
}

@media only screen and (max-width: 991.98px) {
  .book { width: 100px; }
  .book { height: 160px; }
  .book img { height: 160px; }

}