.book {
    top:50%;
    left:50%;
    width: 100%;
    height: 100vh;
    transform-style: preserve-3d;
    position: relative;
    height: 500px;
    cursor: pointer;
    backface-visibility: visible;

  }
 
  .front, .back, .page1, .page2, .page3, .page4, .page5, .page6 {
    transform-style: preserve-3d;
    position: absolute;
    width: 500px;
    height: 100%;
    top: 0; left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
  }
  
  .front, .back {
    /* background: navy; */
    background-image: url(../images/bg-404.jpg);
  }
  
  .front, .page1, .page3, .page5 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
  }
  
  .back, .page2, .page4, .page6 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
  }
  
  .page1 { 
    background: #efefef;
  }
  
  .page2 {
    background: #efefef;
  }
  
  .page3 {
     background: coral; /*#f5f5f5; */
     color: white;
  }
  
  .page4 {
     background: coral; /*#f5f5f5; */
     color: white;
  }
  
  .page5 {
    background: #fafafa;
  }
  
  .page6 {
    background: #fdfdfd;
  }
  
  .book:hover .front {
    transform: rotateY(-160deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page1 {
    transform: rotateY(-150deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page2 {
    transform: rotateY(-30deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page3 {
    transform: rotateY(-140deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page4 {
    transform: rotateY(-40deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page5 {
    transform: rotateY(-130deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .page6 {
    transform: rotateY(-50deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  }
  
  .book:hover .back {
    transform: rotateY(-20deg) scale(1.1);
  }

  .book:hover .textop5 {
    transform: rotateY(-50deg) scale(1.1);
  
  }