html { height: 100%; overflow: hidden; }
body { background: black; margin: 0; width: 100%; height: 100%; }

.scene {
  width: 500px;
  height: 500px;
  margin: 16px auto;
  left: 800px;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  left: 250px; /*Centers the book*/
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.page {
  z-index: 0;
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  pointer-events: none;

  -webkit-transition: 1.5s -webkit-transform;

  transition: 1.5s transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transform-origin: left center;  
  -ms-transform-origin: left center;  
  transform-origin: left center;
}
.front,
.back {
  position: absolute;
  
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  -webkit-backface-visibility: hidden;
  
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top left, #fff, #ccc);
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.page.active {
  z-index: 2;
  pointer-events: auto;
}
.page.active + .page {
  z-index: 1;
}
.page.flipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  pointer-events: auto;
  z-index: 3;
}
.page.prevFlipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  pointer-events: none;
  z-index: 2;
}

img.nolink {
  margin-bottom: 19px;
}

a.pagelink {
  font-family: 'Nunito Sans', sans-serif;
  width: 100%;
  display: inline-block;
  text-align: center;
}

p {
  margin: 0;
}
.hidden {
  display: none;
}