body {
    overflow-x: hidden;
}

.book {
    position: relative;
    width: 1200px;
    height: 855px;
    margin: 30px auto;
}

@media only screen and (max-width: 500px) {
    .book {
        position: relative;
        width: 500px !important;
        height: 375px !important;
        margin: 30px auto;
    }

    body {
        overflow-x: initial;
    }
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    .book {
        position: relative;
        width: 600px;
        height: 450px;
        margin: 30px auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .book {
        position: relative;
        width: 840px;
        height: 600px;
        margin: 30px auto;
    }
}

.book-page {
    width: 600px;
    height: 855px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.75s ease-in-out;
    perspective: 5000px;
    transform-origin: 0% 50%;
    cursor: pointer;
    top: 0;
    left: 25%;
}

@media only screen and (max-width: 500px) {
    .book-page1,
    .book-page8,
    .book-page9,
    .book-page10 {
        width: 250px !important;
        height: 375px !important;
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 25%;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7,
    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7,
    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        width: 250px !important;
        height: 125px !important;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7 {
        top: 0 !important;
    }

    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7 {
        top: 125px !important;
    }

    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        top: 250px !important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    .book-page1,
    .book-page8,
    .book-page9,
    .book-page10 {
        width: 300px;
        height: 450px;
        position: absolute;
        transform-style: preserve-3d;
        transition: all 0.75s ease-in-out;
        perspective: 5000px;
        transform-origin: 0% 50%;
        cursor: pointer;
        top: 0;
        left: 25%;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7,
    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7,
    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        width: 300px !important;
        height: 150px !important;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7 {
        top: 0 !important;
    }

    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7 {
        top: 150px !important;
    }

    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        top: 300px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .book-page1,
    .book-page8,
    .book-page9,
    .book-page10 {
        width: 420px;
        height: 600px;
        position: absolute;
        transform-style: preserve-3d;
        transition: all 0.75s ease-in-out;
        perspective: 5000px;
        transform-origin: 0% 50%;
        cursor: pointer;
        top: 0;
        left: 25%;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7,
    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7,
    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        width: 420px !important;
        height: 200px !important;
    }

    .book-page2,
    .book-page3,
    .book-page4,
    .book-page5,
    .book-page6,
    .book-page7 {
        top: 0 !important;
    }

    .middle-page2,
    .middle-page3,
    .middle-page4,
    .middle-page5,
    .middle-page6,
    .middle-page7 {
        top: 200px !important;
    }

    .bottom-page2,
    .bottom-page3,
    .bottom-page4,
    .bottom-page5,
    .bottom-page6,
    .bottom-page7 {
        top: 400px !important;
    }
}

.book-page .front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.book-page .back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
}

.book-page2,
.book-page3,
.book-page4,
.book-page5,
.book-page6,
.book-page7,
.middle-page2,
.middle-page3,
.middle-page4,
.middle-page5,
.middle-page6,
.middle-page7,
.bottom-page2,
.bottom-page3,
.bottom-page4,
.bottom-page5,
.bottom-page6,
.bottom-page7 {
    height: 285px;
}

.book-page2,
.book-page3,
.book-page4,
.book-page5,
.book-page6,
.book-page7 {
    top: 0;
}

.middle-page2,
.middle-page3,
.middle-page4,
.middle-page5,
.middle-page6,
.middle-page7 {
    top: 285px;
}

.bottom-page2,
.bottom-page3,
.bottom-page4,
.bottom-page5,
.bottom-page6,
.bottom-page7 {
    top: 570px;
}

.book-page1 .front {
    z-index: 2;
    background-image: url("../images/first-cover.jpg");
    background-size: cover;
    backface-visibility: hidden;
}

.book-page1 .back {
    z-index: 1;
    background-image: url("../images/first-cover-inside.jpg");
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page2 .front,
.middle-page2 .front,
.bottom-page2 .front {
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

.book-page2 .front {
    background-image: url("../images/0-top.jpg");
}

.middle-page2 .front {
    background-image: url("../images/0-middle.jpg");
}

.bottom-page2 .front {
    background-image: url("../images/0-bottom.jpg");
}

.book-page2 .back,
.middle-page2 .back,
.bottom-page2 .back {
    z-index: 1;
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page2 .back {
    background-image: url("../images/1-top.jpg");
}

.middle-page2 .back {
    background-image: url("../images/1-middle.jpg");
}

.bottom-page2 .back {
    background-image: url("../images/1-bottom.jpg");
}

.book-page3 .front,
.middle-page3 .front,
.bottom-page3 .front {
    z-index: 2;
    background-size: cover;
    backface-visibility: hidden;
}

.book-page3 .front {
    background-image: url("../images/2-top.jpg");
}

.middle-page3 .front {
    background-image: url("../images/2-middle.jpg");
}

.bottom-page3 .front {
    background-image: url("../images/2-bottom.jpg");
}

.book-page3 .back,
.middle-page3 .back,
.bottom-page3 .back {
    z-index: 1;
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page3 .back {
    background-image: url("../images/3-top.jpg");
}

.middle-page3 .back {
    background-image: url("../images/3-middle.jpg");
}

.bottom-page3 .back {
    background-image: url("../images/3-bottom.jpg");
}

.book-page4 .front,
.middle-page4 .front,
.bottom-page4 .front {
    z-index: 2;
    background-size: cover;
    backface-visibility: hidden;
}

.book-page4 .front {
    background-image: url("../images/4-top.jpg");
}

.middle-page4 .front {
    background-image: url("../images/4-middle.jpg");
}

.bottom-page4 .front {
    background-image: url("../images/4-bottom.jpg");
}

.book-page4 .back,
.middle-page4 .back,
.bottom-page4 .back {
    z-index: 1;
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page4 .back {
    background-image: url("../images/5-top.jpg");
}

.middle-page4 .back {
    background-image: url("../images/5-middle.jpg");
}

.bottom-page4 .back {
    background-image: url("../images/5-bottom.jpg");
}

.book-page5 .front,
.middle-page5 .front,
.bottom-page5 .front {
    z-index: 2;
    background-size: cover;
    backface-visibility: hidden;
}

.book-page5 .front {
    background-image: url("../images/6-top.jpg");
}

.middle-page5 .front {
    background-image: url("../images/6-middle.jpg");
}

.bottom-page5 .front {
    background-image: url("../images/6-bottom.jpg");
}

.book-page5 .back,
.middle-page5 .back,
.bottom-page5 .back {
    z-index: 1;
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page5 .back {
    background-image: url("../images/7-top.jpg");
}

.middle-page5 .back {
    background-image: url("../images/7-middle.jpg");
}

.bottom-page5 .back {
    background-image: url("../images/7-bottom.jpg");
}

.book-page6 .front,
.middle-page6 .front,
.bottom-page6 .front {
    z-index: 2;
    background-size: cover;
    backface-visibility: hidden;
}

.book-page6 .front {
    background-image: url("../images/8-top.jpg");
}

.middle-page6 .front {
    background-image: url("../images/8-middle.jpg");
}

.bottom-page6 .front {
    background-image: url("../images/8-bottom.jpg");
}

.book-page6 .back,
.middle-page6 .back,
.bottom-page6 .back {
    z-index: 1;
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page6 .back {
    background-image: url("../images/9-top.jpg");
}

.middle-page6 .back {
    background-image: url("../images/9-middle.jpg");
}

.bottom-page6 .back {
    background-image: url("../images/9-bottom.jpg");
}

.book-page7 .front,
.middle-page7 .front,
.bottom-page7 .front {
    z-index: 2;
    background-size: cover;
    backface-visibility: hidden;
}

.book-page7 .front {
    background-image: url("../images/10-top.jpg");
}

.middle-page7 .front {
    background-image: url("../images/10-middle.jpg");
}

.bottom-page7 .front {
    background-image: url("../images/10-bottom.jpg");
}

.book-page7 .back,
.middle-page7 .back,
.bottom-page7 .back {
    z-index: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-size: cover;
}

.book-page7 .back {
    background-image: url("../images/11-top.jpg");
}

.middle-page7 .back {
    background-image: url("../images/11-middle.jpg");
}

.bottom-page7 .back {
    background-image: url("../images/11-bottom.jpg");
}

.book-page8 .front {
    z-index: 2;
    background-image: url("../images/12-full.jpg");
    background-size: cover;
    backface-visibility: hidden;
}

.book-page8 .back {
    z-index: 1;
    background-image: url("../images/13-full.jpg");
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page9 .front {
    z-index: 2;
    background-image: url("../images/14-full.jpg");
    background-size: cover;
    backface-visibility: hidden;
}

.book-page9 .back {
    z-index: 1;
    background-image: url("../images/15-full.jpg");
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.book-page10 .front {
    z-index: 2;
    background-image: url("../images/16-full.jpg");
    background-size: cover;
    backface-visibility: hidden;
}

.book-page10 .back {
    z-index: 1;
    background-image: url("../images/17-full.jpg");
    background-size: cover;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}



.book-page1 {
    z-index: 100;
}

.book-page2,
.middle-page2,
.bottom-page2 {
    z-index: 99;
}

.book-page2,
.middle-page2 {
    border-bottom: 1px solid #fff;
}

.book-page3,
.middle-page3,
.bottom-page3 {
    z-index: 98;
}

.book-page3,
.middle-page3 {
    border-bottom: 1px solid #fff;
}

.book-page4,
.middle-page4,
.bottom-page4 {
    z-index: 97;
}

.book-page4,
.middle-page4 {
    border-bottom: 1px solid #fff;
}

.book-page5,
.middle-page5,
.bottom-page5 {
    z-index: 96;
}

.book-page5,
.middle-page5 {
    border-bottom: 1px solid #fff;
}

.book-page6,
.middle-page6,
.bottom-page6 {
    z-index: 95;
}

.book-page6,
.middle-page6 {
    border-bottom: 1px solid #fff;
}

.book-page7,
.middle-page7,
.bottom-page7 {
    z-index: 94;
}

.book-page7,
.middle-page7 {
    border-bottom: 1px solid #fff;
}

.book-page8 {
    z-index: 93;
}

.book-page9 {
    z-index: 92;
}

.book-page10 {
    z-index: 91;
}

.front {
    transform-origin: 0 0;
    transition: all 0.4s ease-in-out;
}

    .front:hover {
        transform: rotateY(-20deg);
        transition: all 0.4s ease-in-out;
    }

.back {
    transform-origin: 100% 100%;
    transition: all 0.4s ease-in-out;
}

    .back:hover {
        transform: rotateY(160deg);
        transition: all 0.4s ease-in-out;
    }

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(136, 136, 136, 0.1);
    visibility: hidden;
}

.front:hover .overlay {
    transition: all 0.4s ease-in-out;
    visibility: visible;
}

.back:hover .overlay {
    transition: all 0.4s ease-in-out;
    visibility: visible;
}

.front-click {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background: transparent;
}

.buttons {
    text-align: center;
    margin-top: 10px;
}

    .buttons > button {
        background: #01273a;
        border: none;
        color: #fff;
        font-weight: bold;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        margin-right: 10px;
    }

        .buttons > button:focus {
            border: none;
        }