/* To reduce width of one side by 40px: leaf_0:width & left -40, .page-holder:width -80, page front etc -40   */
/* To reduce height by 40px: .hold margin-top +40 height -40, moleskin: height -40, page-holder: -40, .leaf front etc -40, leaf_0 -40  */
/* Remember that the front cover isn't a picture, may need to fiddle with the size of this using padding on .book_cover_front. Lign up the open pages first. */
/* Default sizing 1rem = 16px */


.book-container{                /* Leave untouched and adjust others if changing size of the book.  */
  width: 75rem;       /* Was 1200px */
  margin: auto;
  position: relative;
  display: block;
  height: 56.875rem;    /* Doesn't seem to  matter too much (unless a background colour is impoartant).   */
  margin-top:-13.75rem; /* This also determines the top of the .leaf div, which determines where the page sits and swings from.  */
  margin-left:-37.5rem;
}

#moleskin{
  background-image: url(../images/bg-right.png);
  position: absolute; top: 12.625rem; left:38.125rem;
  background-repeat: no-repeat;
  background-size:100% 100%;
  height:45.125rem;
  width: 41.875rem;

}

.front{pointer-events: auto;} /*  Sets the child elements to work like normal*/

#leaf_0{
  z-index: 20;
  position:absolute;
  pointer-events:none;  /* currently 'auto' stops the RHS responding on all pages.*/
  background-color: rgba(184, 86, 86, 0.3);
}

.page-holder{
  height: 56.25rem;
  width: 75rem;
  left: 0.625rem;
  position: absolute;
  overflow: hidden;
  pointer-events: none;  /*Needed for pointer events to work below*/
}

.leaf{
  height: 200%;
  width: 100%;
  top: -50%;
  left: 0%;
  position: absolute;
  overflow: hidden;
  transform: rotateZ(-30deg);
  transition: transform 1s, left 1s;
  transform-origin: 100% 37.5%;
  pointer-events: none;
}

.leaf>.front,
.leaf .back-holder,
.leaf .back{
  height: 41.25rem;     /* This is the one that actually determines the page height  */
  width: 37.5rem;
  position: absolute;
  background-size: cover;
  transition: transform 1s, left 1s;
  background:white;
  background-size:100% 100%;
}

.leaf>.front{
  top: 37.5%;  /* This forces the book leaves down to the bottom of the leaf container, must match the transform-origin property of .leaf class */
  left: 50%;
  transform: rotateZ(30deg) translateX(0);
  transform-origin: 100% 0%;
  /* Inside the page edges for curving effect change the H offset to reduce effect*/
  box-shadow: inset 9.375rem 0px 6.25rem -6.25rem rgba(0, 0, 0, 0.5);
}

.leaf .back-holder{
  left: 100%;
  top: 0;
  transition: left 1s, transform 1s;
  transform-origin: 0% 0%;
  transform: rotateZ(-60deg);
}

.leaf .back{
  left: 0%;
  top: 0;
  transform: rotateZ(0deg);
  transform-origin: 0% 0%;
  transition: top 1s, left 1s;
  box-shadow: inset -9.375rem 0px 6.25rem -6.25rem rgba(0, 0, 0, 0.5);
}

.leaf .back:after {  /* Having .leaf here doesn't seem to do much  */
  content: ' ';
  position: absolute;
  height: 100%;
  transform: rotateZ(0 deg);
  transform-origin: 0% 100%;
  width: 150%;
}

.page-holder.turn_forward .leaf{
  transform: rotateZ(-0deg);
  left: -50%;
}

.page-holder.turn_forward .leaf>.front{
  transform: rotateZ(0deg) translateX(100%);
}

.page-holder.turn_forward .back-holder{
  left: 0%;
  transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  top: 0;
}

.page-holder.turn_forward .back{
  left: -100%;
}

#leaf_0 {
  position: absolute;
  top:12.5rem;
  left:38.125rem;
  background-color: transparent;
  width: 40.3125rem;
  height: 45.25rem;
  perspective: 125rem;   /* I don't want it messing with the page position by going off-screen, reduce later if possible */
}

.book_cover_inner {
  z-index: 551;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-origin: left;
  transform-style: preserve-3d;
}

#leaf_0.openbook .book_cover_inner{   /*  Check up what's going on here, why is there no comma?  */
  transform: rotateY(-180deg);
}

.book_cover_front, .book_cover_back {
  position: absolute;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
}

.book_cover_front {
  box-sizing: border-box;
  padding:15px 10px 30px 0;
}

.book_cover_back {
  box-sizing: border-box;
  padding:25px 0px 40px 50px;
  pointer-events: auto;
}

#front_cover_content {
    background-color: #303030;
    border-radius: 0px 25px 25px 0px;
    width:100%;
    height:100%;
    padding: 30px;
    text-align: right;
    box-sizing: border-box;
}

.left_content, .right_content{
  box-sizing: border-box;
  padding: 1rem 1.5rem 1rem 1.5rem;
  height:100%;
  width: 100%;
  justify-content: center;
}

.left_content > p, .right_content > p{
  color:#303030;
  text-align: justify;
}

.left_content > h3, .right_content > h3{
  font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
  color:#505050;
  font-size: 1.5rem;
}

.book_data > p {
font-size: 0.8rem;
line-height: 1.2rem;
color:#303030;
text-align: left;
}

.book_link {  /* Use this links in the main content site */
	color: #707070;
	margin:0;
	text-decoration: none;
}

.book_data_link {  /* Use this links in the main content site */
	font-size: .8rem;
  color: #707070;
}

#front_cover_content > p{
  text-align: right;
  color: #DAA520;
  font-family: TimesNewRoman, Times New Roman, Times, Georgia, serif;
  font-size: 1.5rem;
  line-height: 2rem;
}

.book_cover_back {
  backface-visibility: hidden;
  background-image: url(../images/bg-left.png);
  background-size:100% 100%;
  color:   #404040;
  transform: rotateY(180deg);
}

#next_leaf{
  z-index: 570;
  position: absolute;
  top:33.75rem;
  right:-2.1875rem;
}

#last_leaf{
  z-index: 570;
  position: absolute;
  top:33.75rem;
  left:-10px;
}

/* Things to change on screens for 1366x768 laptops or smaller */

@media (max-height: 700px) {  /* just reducing the height a little so smaller laptops and maybe tablets still work */

  #moleskin{
    height:40.125rem;
  }

  .leaf>.front,
  .leaf .back-holder,
  .leaf .back{
  height: 36.25rem;
  }

  #leaf_0 {
  height: 40.25rem;
  perspective: 125rem;
  }

  .hold{          /* Push everything up so that the book and the close button overlap to save space */
    margin-top:-17rem;
  }
}