.noOveflow {
  overflow: hidden;
}

.flipbookViewport {
  width: 100%;
  height: 785px;
  position: relative;
}

.flipbookViewport .flipbookContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
}

.flipbookViewport .flipbook {
	width: 1110px;
	height: 785px;
	left: -555px;
	top: -392px;
}

.flipbookViewport .page {
	width: 555px;
	height: 785px;
	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);
}

.flipbookViewport .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;
}

.flipbookViewport .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 0px #ccc;
	-moz-box-shadow: 0 0 0px #ccc;
	-o-box-shadow: 0 0 0px #ccc;
	-ms-box-shadow: 0 0 0px #ccc;
	box-shadow: 0 0 0px #ccc;
}

@media screen and (max-width: 800px) {

  .flipbookViewport {
    width: 700px;
    height: 495px;
  }

  .flipbookViewport .flipbookContainer {
    top: 50%;
    left: 50%;
  }

  .flipbookViewport .flipbook {
  	width: 700px;
  	height: 495px;
  	left: -350px;
  	top: -247px;
  }

  .flipbookViewport .page {
  	width: 350px;
  	height: 495px;
  }

}