body {
    overflow-x: hidden;
}
.flipbook {
    margin: auto!important;
}

.flipbook-viewport .page{
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.page.p2::before,.page.p4::before,.page.p6::before,.page.p8::before,.page.p10::before,.page.p12::before,.page.p14::before,.page.p16::before,.page.p18::before,.page.p20::before{
  content: "";
  position: absolute;
  top: 0;
  right: -2px;                
  width: 56px;
  height: 100%;
  z-index: 5;
  pointer-events: none;

   
  background: linear-gradient(to left,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.02) 85%,
    rgba(0,0,0,0.02) 60%,
    rgba(0,0,0,0) 100%
  );
}
 .page.p3::before,.page.p5::before,.page.p7::before,.page.p9::before,.page.p11::before,.page.p13::before,.page.p15::before,.page.p17::before,.page.p19::before,.page.p21::before{
  content: "";
  position: absolute;
  top: 0;
  left: -2px;          
  width: 46px;        
  height: 100%;
  z-index: 2;
  pointer-events: none;

  
  background: linear-gradient(to right,
   rgba(0,0,0,0.3),
    rgba(0,0,0,0.02) 85%,
    rgba(0,0,0,0.02) 60%,
    rgba(0,0,0,0) 100%
  );
}