/*begin album foto*/

.album-div {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F2F0EF;
    font-family: 'Cormorant Garamond', serif;
}

.flip h3 {
    padding-top: 5%;
    text-align: center;
    font-family: 'Quintessential', 'cursive';
    font-size: 2em;
}

.input-album {
    display: none;
}

.img-album {
    width: 90%;
    /* max-height: 500px; */
    margin: 5%;

}

.img-cover {
    width: 100%;
    max-height: 600px;
    margin: 0;
}

.description-flip h2 {
    text-align: center;
    font-size: 2em;
    padding-top: 35%;
}

.description-flip p {
    text-align: center;
    font-size: 1.3em;

}

.book {
    display: flex;

}

#cover {
    /* width: 500px;
  height: 600px; */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.flip-book {
    /* width: 500px;
  height: 600px; */
    position: relative;
    perspective: 1500px;

}

.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-image: linear-gradient(to right, #E9E9E9, #F6F4F4);
    box-sizing: border-box;
    padding: 0 13px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-image: linear-gradient(to right, #F6F4F4, #E9E9E9);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.next-btn {
    position: absolute;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #000;
}

.back-btn {
    position: absolute;
    bottom: 13px;
    left: 13px;
    cursor: pointer;
    color: #000;
}

.description-flip h3 {
    text-align: center;
    font-size: 2em;
    padding-top: 35%;
}

.description-flip p {
    text-align: center;
    font-size: 1.3em;

}

.margine-sus-h3 {
    padding-top: 10%;
}

#p1 {
    z-index: 8;
}

#p2 {
    z-index: 7;
}

#p3 {
    z-index: 6;
}

#p4 {
    z-index: 5;
}

#p5 {
    z-index: 4;
}

#p6 {
    z-index: 3;
}

#p7 {
    z-index: 2;
}

#p8 {
    z-index: 1;
}

#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;
}

/*end album foto*/


@media (min-width:981px) {
    .flip-book {
        width: 36em;
        height: 43em;
    }

    #cover {
        width: 36em;
        height: 43em;
    }

    .img-album {
        max-height: 38em;
    }
}

@media (min-width:641px) and (max-width:980px) {
    .flip-book {
        width: 22em;
        height: 26.3em;

    }

    #cover {
        width: 22em;
        height: 26em;

    }

    .img-album {
        max-height: 22em;
    }
}

@media (max-width:640px) {
    .flip-book {
        width: 12em;
        height: 14.3em;

    }

    #cover {
        width: 12em;
        height: 14em;

    }

    .img-album {
        max-height: 11em;
    }


    .description-flip p {
        font-size: 1em;
        padding-bottom: 1em;

    }

    .description-flip h3 {
        font-size: 1em;
        padding-top: 0;
    }

    .flip h3 {
        font-size: 1em;
        padding-top: 0;
    }

    .front {
        overflow: auto;
    }

    .description-flip .next-btn {
        bottom: unset;
    }
}