body {
  font-family:sans-serif;
}
.bookWrapper {
  width:700px;
  height:450px; //multiply by 1.3 to get proper height
}
.bookBg {
  position:relative;
  background-color: #000000;
  width:100%;
  height:100%;
  border-radius: 12px;  
}
.centerClass {
  position:absolute;
  left:50%;
  top:50%;
}
.pageBg {
  background-color: #ffffff;
  width:652px; 
  height:422px;
  border-radius: 0px;
}
.spineCenter {
  width:2px; 
  height:422px;
  border-radius: 0px;
  background:rgba(101,101,101,.4);
}
.pageWrapper {
  position:relative;
  width:325px;
  height:422px;
  float: left;
  -webkit-font-smoothing:antialiased;
}
.pageFace {
  position:absolute;
  width:325px;
  height:422px;
  overflow:hidden;
  text-align: center;
}
.front {
  background: linear-gradient(to right,  #d9d9d9 0%,#f9f9f9 3%,#ffffff 8%,#ffffff 100%);
  
}
.back {
  background: linear-gradient(to right,  #ffffff 0%,#ffffff 92%,#f9f9f9 97%,#d9d9d9 100%);
}
.pageFoldRight {
  position: absolute;
    width:  0px;
    height: 0px;
    top:  0;
    right: 0;
    border-left-width: 1px;
    border-left-color: #DDDDDD;
    border-left-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDD;
    border-bottom-style: solid;
    box-shadow: -5px 5px 10px #dddddd;
}
.pageFoldLeft {
   position: absolute;
    width:  0px;
    height: 0px;
    top:  0;
    left: 0;
    border-right-width: 1px;
    border-right-color: #DDDDDD;
    border-right-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDD;
    border-bottom-style: solid;
    box-shadow: 5px 5px 10px #dddddd;
}