.flipbook-wrap {
    position: relative;
    width: 600px;
    margin: auto;
  }
  
  .sample-flipbook{
      width: 800px;
      height: 400px;
    margin-right: auto;
    margin-left: auto;
      -webkit-transition:margin-left 0.2s;
      -moz-transition:margin-left 0.2s;
      -ms-transition:margin-left 0.2s;
      -o-transition:margin-left 0.2s;
      transition:margin-left 0.2s;
  }
  
  .sample-flipbook .page{
      width:400px;
      height:400px;
      background-color:white;
      line-height:300px;
      font-size:20px;
    
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .sample-flipbook .page-wrapper{
      -webkit-perspective:2000px;
      -moz-perspective:2000px;
      -ms-perspective:2000px;
      -o-perspective:2000px;
      perspective:2000px;
  }
  
  .sample-flipbook .hard{
      background:#ccc !important;
      color:#333;
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      font-weight:bold;
  }
  
  .sample-flipbook .odd{
      background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
      background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      
  }
  
  .sample-flipbook .even{
      background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
      background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
      background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
      background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
      background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
      background-image:linear-gradient(left, #fff 95%, #dadada 100%);
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
  }
  
  img {
    max-width: 100%;
  }
  
  .btn {
    font-size: 30px;
    color: black;
    text-decoration: none;
    
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
  }
  
  .next {
    right: -50px;
  }
  
  .prev {
    left: -50px;
  }