.book {
  width: 1495px;
  height:835px;
  /*background: #e3dfd8;*/
  background: url('../imgs/book.png') no-repeat center top;
  position: absolute;
  top: 520px;
  left: 992px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.Wrapper {
  width: 72vw;
  height: 24vw;
  position: relative;
  position: absolute;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.cardCont {
  width: 36vw;
  height: 24vw;
  left: 0%;
  position: absolute;
  pointer-events: none;
}

.cardFront,
.cardBack {
  pointer-events: all;
  position: absolute;
      left: 844px;
    top: 85px;
  /*-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;*/
  width: 477px;
  height: 618px;
  overflow: hidden;
  background: #c5beac;
}
.cardFront {
  border-top-right-radius: 1%;
  border-bottom-right-radius: 1%;
}
.cardBack {
  border-top-left-radius: 1%;
  border-bottom-left-radius: 1%;
  left: 367px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;
}

#page1:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  pointer-events: none;
}

#page2:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

#page3:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  pointer-events: none;
}

#page4:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

#page5:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  pointer-events: none;
}

#page6:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

#page7:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  pointer-events: none;
}

#page8:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}

#page9:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2;
  pointer-events: none;
}
#page10:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}


.cardBack h1,
.cardFront h1 {
  margin: 0px;
  font-size: 30px;
  padding: 10px 0px 10px 10px;
  border-bottom: solid 6px #aaa;
  border-top: solid 6px #aaa;
  background-color: black;
  color: white;
}

.cardBack h1 {
  border-color: #91e600;
}