ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.8);
}

.align>li {
    width: 400px;
    min-height: 500px;
    display: inline-block;
    padding: 0 0 0 60px;
    vertical-align: top;
}


.book {
    position: relative;
    width: 300px;
    height: 450px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
    background-color: #eee;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
    background: #fffbec;
}


.book_spine li:first-child {
    background: #eee;
}

.book_spine li:last-child {
    background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
    background: #999;
}

/* page */

.page>li {
    background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
    border-radius: 0px 5px 5px 0px;
}


/*
4. position, transform & transition
*/

.hardcover_front,
.book_spine,
.hardcover_front li,
.book_spine li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hardcover_front {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.hardcover_front {
    -webkit-transition: all 2.8s ease, z-index 0.6s;
    -moz-transition: all 2.8s ease, z-index 0.6s;
    transition: all 2.8s ease, z-index 0.6s;
    animation: hardcover_front 2.8s linear;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.hardcover_front li:last-child {
    -webkit-transform: rotateY(180deg) translateZ(2px);
    -moz-transform: rotateY(180deg) translateZ(2px);
    transform: rotateY(180deg) translateZ(2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
    position: absolute;
    top: 0;
    left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
    width: 4px;
    height: 100%;
}

.hardcover_front li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
    width: 4px;
    height: 160px;
}

.hardcover_front li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}

.hardcover_front li:last-child:before {
    box-shadow: 0px 0px 30px 5px #333;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}


/* BOOK SPINE */
.book_spine {
    -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    width: 16px;
    z-index: 0;
}

.book_spine li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.book_spine li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
    width: 4px;
    height: 100%;
}

.book_spine li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
    -webkit-transform: rotateY(-90deg) translateZ(-12px);
    -moz-transform: rotateY(-90deg) translateZ(-12px);
    transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
    width: 4px;
    height: 16px;
}

.book_spine li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
    box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page>li {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.page {
    width: 100%;
    height: 98%;
    top: 1%;
    left: 3%;
    z-index: 10;
}

.page>li {
    width: 100%;
    height: 100%;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
}

.page>li:nth-child(1) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
    transform: rotateY(-18deg) translateX(2px) translateZ(18px);
    animation: page1 1.6s linear;
    transition-delay: 0.1s;
}

.page>li:nth-child(2) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
    transform: rotateY(-16deg) translateX(4px) translateZ(18px);
    animation: page2 1.5s linear;
    transition-delay: 0.2s;
}

.page>li:nth-child(3) {
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
    transform: rotateY(-14deg) translateX(6px) translateZ(18px);
    animation: page3 1.4s linear;
    transition-delay: 0.3s;
}

.page>li:nth-child(4) {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    transform: rotateY(-12deg) translateX(8px) translateZ(18px);
    animation: page4 1.3s linear;
    transition-delay: 0.4s;
}

.page>li:nth-child(5) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
    transform: rotateY(-10deg) translateX(10px) translateZ(18px);
    animation: page5 1.2s linear;
    transition-delay: 0.5s;
}


.hardcover_front{
    -webkit-transform: rotateY(-145deg) translateZ(0);
    -moz-transform: rotateY(-145deg) translateZ(0);
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}
.hardcover_front.is-inview {
    -webkit-transform: rotateY(-20deg) translateZ(18px);
    -moz-transform: rotateY(-20deg) translateZ(18px);
    transform: rotateY(-20deg) translateX(3px) translateZ(18px);
    z-index: 1000;
}


@keyframes hardcover_front {
    0% {
        -webkit-transform: rotateY(-145deg) translateZ(0);
        -moz-transform: rotateY(-145deg) translateZ(0);
        transform: rotateY(-145deg) translateZ(0);
        z-index: 0;
    }

    100% {
        -webkit-transform: rotateY(-20deg) translateZ(18px);
        -moz-transform: rotateY(-20deg) translateZ(18px);
        transform: rotateY(-20deg) translateX(3px) translateZ(18px);
    }
}

@keyframes page1 {
    0% {
        -webkit-transform: rotateY(-30deg);
        -moz-transform: rotateY(-30deg);
        transform: rotateY(-30deg);
    }

    100% {
        transform: rotateY(-18deg) translateX(2px) translateZ(18px);
    }
}

@keyframes page2 {
    0% {
        -webkit-transform: rotateY(-35deg);
        -moz-transform: rotateY(-35deg);
        transform: rotateY(-35deg);
    }

    100% {
        transform: rotateY(-16deg) translateX(4px) translateZ(18px);
    }
}

@keyframes page3 {
    0% {
        -webkit-transform: rotateY(-118deg);
        -moz-transform: rotateY(-118deg);
        transform: rotateY(-118deg);
    }

    100% {
        transform: rotateY(-14deg) translateX(6px) translateZ(18px);
    }
}

@keyframes page4 {
    0% {
        -webkit-transform: rotateY(-130deg);
        -moz-transform: rotateY(-130deg);
        transform: rotateY(-130deg);
    }

    100% {
        transform: rotateY(-12deg) translateX(8px) translateZ(18px);
    }
}

@keyframes page5 {
    0% {
        -webkit-transform: rotateY(-140deg);
        -moz-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }

    100% {
        transform: rotateY(-10deg) translateX(10px) translateZ(18px);
    }
}




/* Media Queries */
@media screen and (max-width: 37.8125em) {
    .align>li {
        width: 100%;
        min-height: 440px;
        height: auto;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .book {
        margin: 0 auto;
    }

}

@media (max-width: 600px) {
    .bookContainer{
        flex-direction: column-reverse;
        text-align: center;
        padding: 10rem 0;
    }
    .book{
        width: 210px;
        height: 300px;
    }
    
}