/* Generated by less 1.7.0 */
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
  font-size: 15px;
  background: #000;
}
.pageContainer {
  position: relative;
  margin: 0 auto;
  min-width: 1300px;
  height: 850px;
  background: url(../images/background.jpg) center top no-repeat;
  overflow: hidden;
}
.bookHolder {
  position: absolute;
  top: 70px;
  left: 50%;
  margin: 0 0 0 -615px;
  height: 600px;
  width: 1300px;
  perspective: 1500px;
}
.bookNav {
  position: absolute;
  bottom: -54px;
  left: 0;
  width: 1202px;
  text-align: center;
}
.bookNav ul {
  list-style: none;
}
.bookNav li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1px;
}
.bookNav a {
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 100px;
}
.bookNav a.active {
  width: 6px;
  height: 6px;
  border: 4px solid #fff;
  background: #251302;
}
.book {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1200px;
  height: 540px;
  backface-visibility: hidden;
  transform-origin: 50% 100%;
  transform: rotateX(67deg);
  transform-style: preserve-3d;
  background: url(../images/page-dis.jpg) 0 0 no-repeat;
}
.page {
  position: absolute;
  left: 50%;
  top: 0;
  width: 600px;
  height: 540px;
  transition: transform 1.5s;
  transform-style: preserve-3d;
  transform-origin: left bottom;
}
.page .f,
.page .b {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: #532c0d url(../images/page.jpg) 0 0 no-repeat;
  transform-style: preserve-3d;
}
.page .f {
  background-position: -600px 0;
}
.page .b {
  transform: rotateY(180deg);
}
.page.p1 .f,
.page.p2 .b {
  background-image: url(../images/page-dis.jpg);
}
.book {
  z-index: 4;
}
.book .p1 {
  z-index: 5;
}
.book .p2 {
  z-index: 4;
}
.book.first .p1 {
  transform: rotateY(-0.1deg);
  transition-delay: 300ms;
}
.book.first .p2 {
  transform: rotateY(0deg);
}
.book.open .p1 {
  transform: rotateY(-179.9deg);
}
.book.open .p2 {
  transform: rotateY(0deg);
}
.book.last .p1 {
  transform: rotateY(-179.9deg);
}
.book.last .p2 {
  transform: rotateY(-179.8deg);
  transition-delay: 300ms;
}
/* CONTENT */
.img {
  position: absolute;
  transform-origin: 50% 100%;
  backface-visibility: visible;
  transition: transform 1000ms;
}
.img.house1 {
  right: 5%;
  bottom: 85%;
  width: 510px;
  height: 450px;
  background: url(../images/pg-house1.png) 0 bottom no-repeat;
  background-size: contain;
  transform: rotateX(180deg);
  z-index: 10;
}
.img.house2 {
  left: 50px;
  bottom: 40%;
  width: 300px;
  height: 550px;
  background: url(../images/pg-house2.png) 0 bottom no-repeat;
  background-size: contain;
  transform: rotateX(0deg) scaleY(0.6);
  z-index: 9;
}
.img.fountain {
  right: 10px;
  bottom: 72%;
  width: 260px;
  height: 300px;
  background: url(../images/pg-fountain.png) 0 bottom no-repeat;
  background-size: contain;
  transform: rotateX(180deg);
  z-index: 8;
}
.img.woman {
  right: 80px;
  bottom: 75px;
  width: 142px;
  height: 322px;
  background: url(../images/pg-woman.png) 0 bottom no-repeat;
  transform: rotateX(0deg) scaleY(0.9);
  z-index: 4;
  transition-duration: 666ms;
}
.img.man {
  left: 40px;
  bottom: 60px;
  width: 119px;
  height: 354px;
  background: url(../images/pg-man.png) -100px bottom no-repeat;
  transform: rotateX(0deg) scaleY(0.9);
  transform-style: preserve-3d;
  z-index: 5;
  transition-duration: 888ms;
}
.img.man .hand {
  left: -100px;
  top: 47px;
  width: 101px;
  height: 113px;
  background: url(../images/pg-man.png) 0 -47px no-repeat;
  transform: rotateY(180deg);
  transform-origin: 100% 100%;
  transition-duration: 1000ms;
}
.img.flag {
  right: 60px;
  bottom: 120px;
  width: 380px;
  height: 252px;
  background: url(../images/pg-flag.png) 0 bottom no-repeat;
  background-size: contain;
  transform: rotateX(0deg) scaleY(0.8);
  transition-duration: 800ms;
  z-index: 8;
}
.img.flag-shadow {
  right: 200px;
  bottom: 110px;
  width: 100px;
  height: 17px;
  background: url(../images/pg-flag-shadow.png) 0 bottom no-repeat;
  background-size: 100% 100%;
  transform: rotateX(0deg);
  opacity: 0 !important;
  transition: opacity 400ms;
  z-index: 7;
}
.book.first .img.house2 {
  transform: rotateX(-1deg) scaleY(0.6);
}
.book.first .img.fountain {
  transform: rotateX(181deg);
}
.book.first .img.woman {
  transform: rotateX(-1deg) scaleY(0.9);
}
.book.last .img.house1 {
  transform: rotateX(181deg);
}
.book.last .img.man {
  transform: rotateX(-1deg) scaleY(0.9);
}
.book.last .img.flag {
  transform: rotateX(-1deg) scaleY(0.8);
}
.book.open .img.house1 {
  transition-delay: 300ms;
  transform: rotateX(280deg);
}
.book.open .img.house2 {
  transition-delay: 500ms;
  transform: rotateX(-70deg);
}
.book.open .img.fountain {
  transition-delay: 150ms;
  transform: rotateX(280deg);
}
.book.open .img.woman {
  transition-delay: 800ms;
  transform: rotateX(-70deg);
}
.book.open .img.man {
  transition-delay: 800ms;
  transform: rotateX(-70deg);
}
.book.open .img.man .hand {
  transition-delay: 1900ms;
  transform: rotateY(15deg);
}
.book.open .img.flag {
  transition-delay: 1700ms;
  transform: rotateX(-90deg) rotateY(-20deg);
}
.book.open .img.flag-shadow {
  transition-delay: 1750ms;
  opacity: 1 !important;
}
.circ {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 1200px;
  border: 1px solid blue;
  border-radius: 50%;
}