/* body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
     background: linear-gradient(90deg, #fff 50%, #4a1010 50%); 
    background: linear-gradient(90deg, #fff 50%, #ffffff 50%);

} */

.hidden {
    display: none;
}

.book_page {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.book {
    display: flex;
    align-items: center;
    justify-content: center;
}

#cover {
    width: 450px;
    height: 600px;
}

.flip-book {
    width: 450px;
    height: 600px;
    position: relative;
    perspective: 1500px;
    /* right: -100px; */
}

.flip {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: .5s;
    color: #000;
}



.front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 13px;
    box-shadow: inset 20px 0 50px rgba(0,0,0,0.5) 0 2px 5px rgba(0,0,0,0,0.5);
}


.back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.publ-btn {
    position: absolute;
    bottom: 3px; /* 13px; */
    right: 13px;
    cursor: pointer;
    color: #840a0a;
}

/*
.next-btn {
    position: absolute;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #840a0a;
}

.back-btn {
    position: absolute;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #840a0a;
}
*/ 

/* #####  PUB01  ###### */

#p1_1 {
    z-index: 3;
}
#p1_2 {
    z-index: 2;
}
#p1_3 {
    z-index: 1;
}






#c1_1:checked ~ .flip-book #p1_1 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#c1_2:checked ~ .flip-book #p1_2 {
    transform: rotateY(-180deg);
    z-index: 2;
}

#c1_3:checked ~ .flip-book #p1_3 {
    transform: rotateY(-180deg);
    z-index: 3;
}






/* #####  PUB02  ###### */

#p2_1 {
    z-index: 3;
}
#p2_2 {
    z-index: 2;
}
#p2_3 {
    z-index: 1;
}
/* 
#p2_1 {
    z-index: 7;
}
#p2_2 {
    z-index: 6;
}
#p2_3 {
    z-index: 5;
}

#p2_4 {
    z-index: 4;
}

#p2_5 {
    z-index: 3;
}

#p2_6 {
    z-index: 2;
}

#p2_7 {
    z-index: 1;
} */



#c2_1:checked ~ .flip-book #p2_1 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#c2_2:checked ~ .flip-book #p2_2 {
    transform: rotateY(-180deg);
    z-index: 2;
}

#c2_3:checked ~ .flip-book #p2_3 {
    transform: rotateY(-180deg);
    z-index: 3;
}
/* 
#c2_4:checked ~ .flip-book #p2_4 {
    transform: rotateY(-180deg);
    z-index: 4;
}

#c2_5:checked ~ .flip-book #p2_5 {
    transform: rotateY(-180deg);
    z-index: 5;
}

#c2_6:checked ~ .flip-book #p2_6 {
    transform: rotateY(-180deg);
    z-index: 6;
}

#c2_7:checked ~ .flip-book #p2_7 {
    transform: rotateY(-180deg);
    z-index: 7;
} */


/* #####  PUB04  ###### */

#p4_1 {
    z-index: 6;
}
#p4_2 {
    z-index: 5;
}
#p4_3 {
    z-index: 4;
}

#p4_4 {
    z-index: 3;
}

#p4_5 {
    z-index: 2;
}

#p4_6 {
    z-index: 1;
}

/* #p4_7 {
    z-index: 1;
} */



#c4_1:checked ~ .flip-book #p4_1 {
    transform: rotateY(-180deg);
    z-index: 1;
}

#c4_2:checked ~ .flip-book #p4_2 {
    transform: rotateY(-180deg);
    z-index: 2;
}

#c4_3:checked ~ .flip-book #p4_3 {
    transform: rotateY(-180deg);
    z-index: 3;
}

#c4_4:checked ~ .flip-book #p4_4 {
    transform: rotateY(-180deg);
    z-index: 4;
}

#c4_5:checked ~ .flip-book #p4_5 {
    transform: rotateY(-180deg);
    z-index: 5;
}

#c4_6:checked ~ .flip-book #p4_6 {
    transform: rotateY(-180deg);
    z-index: 6;
}

/* #c4_7:checked ~ .flip-book #p4_7 {
    transform: rotateY(-180deg);
    z-index: 7;
} */