.scene, .scene1, .scene2, .scene3 {
    display:inline-block;
  width: 300px;
  height: 505px;
  margin: 35px 0;
  margin-left: 34px;
  margin-right: 34px;
  perspective: 600px;
   position: relative;
    font-size: 25px;
font-weight: bold;
}

.card2:hover, .card3:hover, .card4:hover {
    opacity:1;
    box-shadow: 0 0px 20px rgba(33,33,33, .3);
}

.card, .card1, .card2, .card3, .card4, .card5, .card6, .card7 {
  width: 100%;
  height: 90%;
  transition: transform 3s;
  transform-style: preserve-3d;
  cursor: pointer;
    position:absolute;         
   bottom:0;                         
   left:0; 
}

.card__is-flipped {
  transform: rotateY(180deg);
}
.card1__is-flipped {
  transform: rotateY(180deg);
}
.card2__is-flipped {
  transform: rotateY(180deg);
}
.card3__is-flipped {
  transform: rotateY(180deg);
}
.card4__is-flipped {
  transform: rotateY(180deg);
}
.card5__is-flipped {
  transform: rotateY(180deg);
}
.card6__is-flipped {
  transform: rotateY(180deg);
}
.card7__is-flipped {
  transform: rotateY(180deg);
}

.card__face, .card1__face, .card2__face, .card3__face, .card4__face, .card5__face, .card6__face, .card7__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  background: trasparent;
}

.card__face--back, .card1__face--back, .card2__face--back, .card3__face--back, .card4__face--back, .card5__face--back, .card6__face--back, .card7__face--back {
  background: trasparent;
  transform: rotateY(180deg);
}

.desc, .desc1, .desc2, .desc3, .desc4, .desc5, .desc6, .desc7 {
  color: #3E3E3E;
  font-size: 19px;
  transition: all 3s;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.desc__vis, .desc1__vis, .desc2__vis, .desc3__vis, .desc4__vis, .desc5__vis, .desc6__vis, .desc7__vis {
  max-height: 1500px;
  opacity: 1;
}

.link, .link1, .link2, .link3, .link4 {
  color: #7fa9db;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
    line-height: 1;
}

.text {
  color: #474747;
  font-size: 18px;
  line-height: 1;
}

.zone11, .zone12{
   height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.book11, .book12{
    display: flex;
    align-items: center;
    cursor: pointer;
    perspective: 3500px;
}

.cover11, .cover12{
    z-index: 1;
    transition: all 3.4s;
}

.back-cover11, .back-cover12{
    z-index: -3;
}

.cover11, .back-cover11{
    height: 400px;
    width: 320px;
    background: #3f0035;
    border-radius: 2px 20px 20px 2px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    transform-origin: center left;
}

.cover12, .back-cover12{
    height: 400px;
    width: 318px;
    background: #4f665c;
    border-radius: 2px 20px 20px 2px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    transform-origin: center left;
}

.page11{
    height: 380px;
    width: 310px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform-origin: center left;
    z-index: -1;
}

.last-page11{
   height: 380px;
    width: 310px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform-origin: center left;
    z-index: -2;
}

.flipbook-open .cover11{
    transform: rotateY(-180deg);
}

.flipbook-open .cover12{
    transform: rotateY(-180deg);
}

.flipbook-open .page11{
    transform: rotateY(-180deg);
    z-index: 2;
}

.page11:nth-child(2){
    transition-duration: 3s;
}
.page11:nth-child(3){
    transition-duration: 2.6s;
}
.page11:nth-child(4){
    transition-duration: 2.2s;
}
.page11:nth-child(5){
    transition-duration: 1.8s;
}
.page11:nth-child(6){
    transition-duration: 1.4s;
}

.flipbook-open .page11:nth-child(2){
    transition-duration: 5.6s;
}
.flipbook-open .page11:nth-child(3){
    transition-duration: 5.2s;
}
.flipbook-open .page11:nth-child(4){
    transition-duration: 4.8s;
}
.flipbook-open .page11:nth-child(5){
    transition-duration: 4.4s;
}
.flipbook-open .page11:nth-child(6){
    transition-duration: 4s;
}

.last-page11 img{
    height: 360px;
    display: block;
    margin: 10px auto;
    position: relative;
    z-index: -2;
}

.cover11 img{
    height: 380px;
    display: block;
    position: relative;
    margin: 10px auto;
    z-index: 1;
}

.cover12 img{
    height: 400px;
    display: block;
    position: relative;
    margin: px auto;
    z-index: 1;
        border-radius: 2px 20px 20px 2px;
}