body {
background: #d1f1e3 url('bg-g.png')bottom repeat-x;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: "Fredoka", sans-serif;
font-weight:300;
}

#wrap {
width: 1010px;
background: url('flowers.gif')repeat;
height:700px;
border-radius: 15px;
}
input {
display: none;
}

.book {
display: flex;
margin:50px auto 0 50px;
}
#cover {
width: 450px;
height: 600px;
}
.flip-book {
width: 450px;
height: 600px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;

}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
  background: linear-gradient(to right,  #d9d9d9 0%,#f9f9f9 3%,#ffffff 8%,#ffffff 100%);
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background: linear-gradient(to right,  #ffffff 0%,#ffffff 92%,#f9f9f9 97%,#d9d9d9 100%); 
}
.next-btn {
position: absolute;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
padding: 4px;
bottom: 13px;
left: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
margin: 5px;
}
#p2 {
z-index: 4;
margin: 5px;
}
#p3 {
z-index: 3;
margin: 5px;
}
#p4 {
z-index: 2;
margin: 5px;
}
#p5 {
z-index: 1;
margin: 5px;
}
#p6 {
z-index: 0;
margin: 5px;
}
#p7 {
z-index: -1;
margin: 5px;
}
#p8 {
z-index:-2;
margin: 5px;
}
#p9 {
z-index: -3;
margin: 5px;
}
#p10 {
z-index: -4;
margin: 5px;
}
#p11 {
z-index: -5;
margin: 5px;
}
#p12 {
z-index: -6;
margin: 5px;
}
#p13 {
z-index: -7;
margin: 5px;
}
#p14 {
z-index: -8;
margin: 5px;
}
#p15 {
z-index: -9;
margin: 5px;
}


a { color: #444; }
a:hover { color:#000; }

#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}
#c6:checked ~ .flip-book #p6 {
transform: rotateY(-180deg);
z-index: 6;
}
#c7:checked ~ .flip-book #p7 {
transform: rotateY(-180deg);
z-index: 7;
}
#c8:checked ~ .flip-book #p8 {
transform: rotateY(-180deg);
z-index: 8;
}
#c9:checked ~ .flip-book #p9 {
transform: rotateY(-180deg);
z-index: 9;
}
#c10:checked ~ .flip-book #p10 {
transform: rotateY(-180deg);
z-index: 10;
}
#c11:checked ~ .flip-book #p11 {
transform: rotateY(-180deg);
z-index: 11;
}
#c12:checked ~ .flip-book #p12 {
transform: rotateY(-180deg);
z-index: 12;
}
#c13:checked ~ .flip-book #p13 {
transform: rotateY(-180deg);
z-index: 13;
}
#c14:checked ~ .flip-book #p14 {
transform: rotateY(-180deg);
z-index: 14;
}
#c15:checked ~ .flip-book #p15 {
transform: rotateY(-180deg);
z-index: 15;
}




img {  max-width: 370px; height:auto; max-height: 550px; }

.frfr{
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 600px;
 pointer-events: none;

}

#c5:checked ~ .frfr {
border: none;
background-color: transparent;
}