/* Variables */
figure.book-render {
  top: 30px;
  position: relative;
  width: 300px;
  height: 400px;
  border-right: 1px #fff solid;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform: perspective(600px) rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
  -ms-transform: perspective(600px) rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
  transform: perspective(600px) rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
}
figure.book-render:before {
  /* page side */
  width: 30px;
  height: 410px;
  position: absolute;
  border: 1px #ddd solid;
  content: "";
  right: 0px;
  background: #fff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(#ffffff, #dddddd);
  background-image: -webkit-linear-gradient(#ffffff, #dddddd);
  background-image: linear-gradient(#ffffff, #dddddd);
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(30px, -7px, 0px);
  -ms-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(30px, -7px, 0px);
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(30px, -7px, 0px);
  transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(30px, -7px, 0px);
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 12px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 12px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 12px;
}
figure.book-render:after {
  /* back cover */
  width: 300px;
  height: 410px;
  position: absolute;
  border-right: 1px #ddd solid;
  content: "";
  top: 0;
  right: 0;
  background: url(https://i.imgur.com/N3bgKRG.png);
  /* I need this to provide the back cover color */
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(36px, -7px, -20px);
  -ms-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(36px, -7px, -20px);
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(36px, -7px, -20px);
  transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(36px, -7px, -20px);
  -moz-box-shadow: transparent 0px 6px 12px;
  -webkit-box-shadow: transparent 0px 6px 12px;
  box-shadow: transparent 0px 6px 12px;
}
figure.book-render:hover {
  border-right: 0 #fff solid;
  -moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
figure.book-render:hover:after, figure.book-render:hover:before {
  height: 400px;
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -3px);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -3px);
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -3px);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -3px);
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
figure.book-render:hover:before {
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, -2px);
  -ms-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, -2px);
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, -2px);
  transform: perspective(600px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, -2px);
  -moz-box-shadow: transparent 0px 6px 12px;
  -webkit-box-shadow: transparent 0px 6px 12px;
  box-shadow: transparent 0px 6px 12px;
}