/*////////////////////////// my editing start /////////////////////////////*/

/* -------------------- button and read-more style ----------------------- */

.btn {
    border: none;
    border-radius: 0.2em;
    background-color: #B60202; /*FFFFEC - #CC0000*/
    margin-top: 100px;
    position: absolute;
    bottom: 0;
    right: -0.3em;
}

/* Media Queries for btn */
@media screen and (max-width: 37.8125em) {
    .btn {
        position: absolute;
        right: -3em;
    }
}

.btn:hover{
    background-color: white;
}
.read-more {
    display: inline-block;
    border: 2px solid #B60202;/*062000*/
    border-radius: 0.2em;
    font-size: 1.3em;
    font-weight: bold;
    padding: 0.1em 0.3em;
    text-align: center;
    color: white;/*FFFFEC*/
    -webkit-transition: color 0.3s, border-color 0.3s;
    -moz-transition: color 0.3s, border-color 0.3s;
    transition: color 0.3s, border-color 0.3s;
}

.read-more:hover {
    border-color: #B60202;/*900000*/
    color: #B60202;/*900000*/
}

/* ------------------------- vertical flipping --------------------------- */

.vertical-rtl {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
F
.vertical-rtl-reverse {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* --------------------------- cover and pages ----------------------------*/
.page-cover {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.adjust-front-page{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.adjust-back-page{
    width: 100%;
    height: 100%;
    display: block;
}

/*------------------------------ big 01-maqalat -------------------------------*/
.maqalat-front-cover {background-image: url(../books/c1/01/cover/th/01-front-th.png);}
.maqalat-ph1 {background-image: url(../books/c1/01/pages/th/01-ph1-th.png);}
.maqalat-ph2 {background-image: url(../books/c1/01/pages/th/01-ph2-th.png);}
.maqalat-ph3 {background-image: url(../books/c1/01/pages/th/01-ph3-th.png);}
.maqalat-p1 {background-image: url(../books/c1/01/pages/th/01-p1-th.png);}
.maqalat-p2 {background-image: url(../books/c1/01/pages/th/01-p2-th.png);}
.maqalat-p3 {background-image: url(../books/c1/01/pages/th/01-p3-th.png);}
.maqalat-p4 {background-image: url(../books/c1/01/pages/th/01-p4-th.png);}
.maqalat-p5 {background-image: url(../books/c1/01/pages/th/01-p5-th.png);}

.adjust-front-page 
.page-cover.maqalat-ph2,
.page-cover.maqalat-p1,
.page-cover.maqalat-p3 {
    backface-visibility: hidden;
}

/*------------------------------ big 02-maktubat ------------------------------*/
.maktubat-front-cover {background-image: url(../books/c1/02/cover/th/02-front-th.png);}
.maktubat-ph1 {background-image: url(../books/c1/02/pages/th/02-ph1-th.png);}
.maktubat-ph2 {background-image: url(../books/c1/02/pages/th/02-ph2-th.png);}
.maktubat-ph3 {background-image: url(../books/c1/02/pages/th/02-ph3-th.png);}
.maktubat-p1 {background-image: url(../books/c1/02/pages/th/02-p1-th.png);}
.maktubat-p2 {background-image: url(../books/c1/02/pages/th/02-p2-th.png);}
.maktubat-p3 {background-image: url(../books/c1/02/pages/th/02-p3-th.png);}
.maktubat-p4 {background-image: url(../books/c1/02/pages/th/02-p4-th.png);}
.maktubat-p5 {background-image: url(../books/c1/02/pages/th/02-p5-th.png);}

.adjust-front-page 
.page-cover.maktubat-ph2,
.page-cover.maktubat-p1,
.page-cover.maktubat-p3 {
    backface-visibility: hidden;
}

/*------------------------------ big 03-lama3at -------------------------------*/
.lama3at-front-cover {background-image: url(../books/c1/03/cover/th/03-front-th.png);}
.lama3at-ph1 {background-image: url(../books/c1/03/pages/th/03-ph1-th.png);}
.lama3at-ph2 {background-image: url(../books/c1/03/pages/th/03-ph2-th.png);}
.lama3at-ph3 {background-image: url(../books/c1/03/pages/th/03-ph3-th.png);}
.lama3at-p1 {background-image: url(../books/c1/03/pages/th/03-p1-th.png);}
.lama3at-p2 {background-image: url(../books/c1/03/pages/th/03-p2-th.png);}
.lama3at-p3 {background-image: url(../books/c1/03/pages/th/03-p3-th.png);}
.lama3at-p4 {background-image: url(../books/c1/03/pages/th/03-p4-th.png);}
.lama3at-p5 {background-image: url(../books/c1/03/pages/th/03-p5-th.png);}

.adjust-front-page 
.page-cover.lama3at-ph2,
.page-cover.lama3at-p1,
.page-cover.lama3at-p3 {
    backface-visibility: hidden;
}

/*------------------------------ big 04-shu3a3at ------------------------------*/
.shu3a3at-front-cover {background-image: url(../books/c1/04/cover/th/04-front-th.png);}
.shu3a3at-ph1 {background-image: url(../books/c1/04/pages/th/04-ph1-th.png);}
.shu3a3at-ph2 {background-image: url(../books/c1/04/pages/th/04-ph2-th.png);}
.shu3a3at-ph3 {background-image: url(../books/c1/04/pages/th/04-ph3-th.png);}
.shu3a3at-p1 {background-image: url(../books/c1/04/pages/th/04-p1-th.png);}
.shu3a3at-p2 {background-image: url(../books/c1/04/pages/th/04-p2-th.png);}
.shu3a3at-p3 {background-image: url(../books/c1/04/pages/th/04-p3-th.png);}
.shu3a3at-p4 {background-image: url(../books/c1/04/pages/th/04-p4-th.png);}
.shu3a3at-p5 {background-image: url(../books/c1/04/pages/th/04-p5-th.png);}

.adjust-front-page 
.page-cover.shu3a3at-ph2,
.page-cover.shu3a3at-p1,
.page-cover.shu3a3at-p3 {
    backface-visibility: hidden;
}

/*------------------------------ big 05-lawaheq ------------------------------*/
.lawaheq-front-cover {background-image: url(../books/c1/05/cover/th/05-front-th.png);}
.lawaheq-ph1 {background-image: url(../books/c1/05/pages/th/05-ph1-th.png);}
.lawaheq-ph2 {background-image: url(../books/c1/05/pages/th/05-ph2-th.png);}
.lawaheq-ph3 {background-image: url(../books/c1/05/pages/th/05-ph3-th.png);}
.lawaheq-p1 {background-image: url(../books/c1/05/pages/th/05-p1-th.png);}
.lawaheq-p2 {background-image: url(../books/c1/05/pages/th/05-p2-th.png);}
.lawaheq-p3 {background-image: url(../books/c1/05/pages/th/05-p1-th.png);}
.lawaheq-p4 {background-image: url(../books/c1/05/pages/th/05-p4-th.png);}
.lawaheq-p5 {background-image: url(../books/c1/05/pages/th/05-p5-th.png);}

.adjust-front-page 
.page-cover.lawaheq-ph2,
.page-cover.lawaheq-p1,
.page-cover.lawaheq-p3 {
    backface-visibility: hidden;
}

/*------------------------------ mid 01-asamusa ------------------------------*/
.asamusa-front-cover {background-image: url(../books/c2/01/cover/th/01-front-th.jpg);}
.asamusa-ph1 {background-image: url(../books/c2/01/pages/th/04-ph1-th.jpg);}
.asamusa-ph2 {background-image: url(../books/c2/01/pages/th/04-ph2-th.jpg);}
.asamusa-ph3 {background-image: url(../books/c2/01/pages/th/04-ph3-th.jpg);}
.asamusa-p1 {background-image: url(../books/c2/01/pages/th/01-p1-th.jpg);}
.asamusa-p2 {background-image: url(../books/c2/01/pages/th/01-p2-th.jpg);}
.asamusa-p3 {background-image: url(../books/c2/01/pages/th/01-p3-th.jpg);}
.asamusa-p4 {background-image: url(../books/c2/01/pages/th/01-p4-th.jpg);}
.asamusa-p5 {background-image: url(../books/c2/01/pages/th/01-p5-th.jpg);}

.adjust-front-page 
.page-cover.asamusa-ph2,
.page-cover.asamusa-p1,
.page-cover.asamusa-p3 {
    backface-visibility: hidden;
}

/*------------------------------ mid 02-zulfikqar ------------------------------*/
.zulfikqar-front-cover {background-image: url(../books/c2/02/cover/th/02-front-th.jpg);}
.zulfikqar-ph1 {background-image: url(../books/c2/02/pages/th/02-ph1-th.jpg);}
.zulfikqar-ph2 {background-image: url(../books/c2/02/pages/th/02-ph2-th.jpg);}
.zulfikqar-ph3 {background-image: url(../books/c2/02/pages/th/02-ph3-th.jpg);}
.zulfikqar-p1 {background-image: url(../books/c2/02/pages/th/02-p1-th.jpg);}
.zulfikqar-p2 {background-image: url(../books/c2/02/pages/th/02-p2-th.jpg);}
.zulfikqar-p3 {background-image: url(../books/c2/02/pages/th/02-p3-th.jpg);}
.zulfikqar-p4 {background-image: url(../books/c2/02/pages/th/02-p4-th.jpg);}
.zulfikqar-p5 {background-image: url(../books/c2/02/pages/th/02-p5-th.jpg);}

.adjust-front-page 
.page-cover.zulfikqar-ph2,
.page-cover.zulfikqar-p1,
.page-cover.zulfikqar-p3 {
    backface-visibility: hidden;
}

/*------------------------------ mid 03-isharatz ------------------------------*/
.isharatz-front-cover {background-image: url(../books/c2/03/cover/th/03-front-th.jpg);}
.isharatz-ph1 {background-image: url(../books/c2/03/pages/th/03-ph1-th.jpg);}
.isharatz-ph2 {background-image: url(../books/c2/03/pages/th/03-ph2-th.jpg);}
.isharatz-ph3 {background-image: url(../books/c2/03/pages/th/03-ph3-th.jpg);}
.isharatz-p1 {background-image: url(../books/c2/03/pages/th/03-p1-th.jpg);}
.isharatz-p2 {background-image: url(../books/c2/03/pages/th/03-p2-th.jpg);}
.isharatz-p3 {background-image: url(../books/c2/03/pages/th/03-p3-th.jpg);}
.isharatz-p4 {background-image: url(../books/c2/03/pages/th/03-p4-th.jpg);}
.isharatz-p5 {background-image: url(../books/c2/03/pages/th/03-p5-th.jpg);}

.adjust-front-page 
.page-cover.isharatz-ph2,
.page-cover.isharatz-p1,
.page-cover.isharatz-p3 {
    backface-visibility: hidden;
}

/*------------------------------ sml 01-anwar ------------------------------*/
.anwar-front-cover {background-image: url(../books/c3/01/cover/th/01-front-th.png);}
.anwar-ph1 {background-image: url(../books/c3/01/pages/th/01-ph1-th.png);}
.anwar-ph2 {background-image: url(../books/c3/01/pages/th/01-ph2-th.png);}
.anwar-ph3 {background-image: url(../books/c3/01/pages/th/01-ph3-th.png);}
.anwar-p1 {background-image: url(../books/c3/01/pages/th/01-p1-th.png);}
.anwar-p2 {background-image: url(../books/c3/01/pages/th/01-p2-th.png);}
.anwar-p3 {background-image: url(../books/c3/01/pages/th/01-p3-th.png);}
.anwar-p4 {background-image: url(../books/c3/01/pages/th/01-p4-th.png);}
.anwar-p5 {background-image: url(../books/c3/01/pages/th/01-p5-th.png);}

.adjust-front-page 
.page-cover.anwar-ph2,
.page-cover.anwar-p1,
.page-cover.anwar-p3 {
    backface-visibility: hidden;
}

/*------------------------------ sml 02-tafakur ------------------------------*/
.tafakur-front-cover {background-image: url(../books/c3/02/cover/th/02-front-th.png);}
.tafakur-ph1 {background-image: url(../books/c3/02/pages/th/02-ph1-th.png);}
.tafakur-ph2 {background-image: url(../books/c3/02/pages/th/02-ph2-th.png);}
.tafakur-ph3 {background-image: url(../books/c3/02/pages/th/02-ph3-th.png);}
.tafakur-p1 {background-image: url(../books/c3/02/pages/th/02-p1-th.png);}
.tafakur-p2 {background-image: url(../books/c3/02/pages/th/02-p2-th.png);}
.tafakur-p3 {background-image: url(../books/c3/02/pages/th/02-p3-th.png);}
.tafakur-p4 {background-image: url(../books/c3/02/pages/th/02-p4-th.png);}
.tafakur-p5 {background-image: url(../books/c3/02/pages/th/02-p5-th.png);}

.adjust-front-page 
.page-cover.tafakur-ph2,
.page-cover.tafakur-p1,
.page-cover.tafakur-p3 {
    backface-visibility: hidden;
}

/*------------------------------ sml 03-tesbihat ------------------------------*/
.tesbihat-front-cover {background-image: url(../books/c3/03/cover/th/03-front-th.png);}
.tesbihat-ph1 {background-image: url(../books/c3/03/pages/th/03-ph1-th.png);}
.tesbihat-ph2 {background-image: url(../books/c3/03/pages/th/03-ph2-th.png);}
.tesbihat-ph3 {background-image: url(../books/c3/03/pages/th/03-ph3-th.png);}
.tesbihat-p1 {background-image: url(../books/c3/03/pages/th/03-p1-th.png);}
.tesbihat-p2 {background-image: url(../books/c3/03/pages/th/03-p2-th.png);}
.tesbihat-p3 {background-image: url(../books/c3/03/pages/th/03-p3-th.png);}
.tesbihat-p4 {background-image: url(../books/c3/03/pages/th/03-p4-th.png);}
.tesbihat-p5 {background-image: url(../books/c3/03/pages/th/03-p5-th.png);}

.adjust-front-page 
.page-cover.tesbihat-ph2,
.page-cover.tesbihat-p1,
.page-cover.tesbihat-p3 {
    backface-visibility: hidden;
}


/*-----------------------------------sml-collection setting-------------------------------------*/
.sml-collection .book {
    width: 128px;
    height: 176px;
}

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

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

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

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

/* thickness of cover */

.sml-collection .hardcover_back li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(126px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(126px) translateX(2px);
    transform: rotateY(90deg) translateZ(126px) translateX(2px);
}

.sml-collection .hardcover_back li:last-child:after,
.sml-collection .hardcover_back li:last-child:before {
    width: 4px;
    height: 128px;
}

.sml-collection .hardcover_back li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(63px) translateX(2px) translateY(-60px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(63px) translateX(2px) translateY(-60px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(63px) translateX(2px) translateY(-60px);
}

.sml-collection .hardcover_back li:last-child:before {
    box-shadow: 10px -1px 80px 20px #666;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-113px) translateX(2px) translateY(-60px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-113px) translateX(2px) translateY(-60px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-113px) translateX(2px) translateY(-60px);
}

/* BOOK SPINE */
.sml-collection .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;
}

/* thickness of book spine */

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

.sml-collection .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(-170px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-170px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-170px) translateX(2px) translateY(-6px);
}

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

/* Basic ribbon */
.sml-collection .ribbon {
	width: 128px;
}

/*/////////////////////////// my editing end ///////////////////////////*/

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
	- Cover design
	- Ribbon
	- Figcaption (deleted, if you want get it from the original file)
7. mini-reset
8. Basic ribbon
9. figcaption
/////////////////////////////////////////////////////*/

/*
	1. container
*/

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

/*
	2. background & color
*/

/* 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;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
    background: #fffbec;
}

/* reverse */
.hardcover_back 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,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back 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;
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
    -webkit-transform: rotateY(-34deg) translateZ(8px);
    -moz-transform: rotateY(-34deg) translateZ(8px);
    transform: rotateY(-34deg) translateZ(8px);
    z-index: 100;
}

.hardcover_back {
    -webkit-transform: rotateY(-15deg) translateZ(-8px);
    -moz-transform: rotateY(-15deg) translateZ(-8px);
    transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
    -webkit-transform: rotateY(-28deg);
    -moz-transform: rotateY(-28deg);
    transform: rotateY(-28deg);
}

.page li:nth-child(2) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
}

.page li:nth-child(3) {
    -webkit-transform: rotateY(-32deg);
    -moz-transform: rotateY(-32deg);
    transform: rotateY(-32deg);
}

.page li:nth-child(4) {
    -webkit-transform: rotateY(-34deg);
    -moz-transform: rotateY(-34deg);
    transform: rotateY(-34deg);
}

.page li:nth-child(5) {
    -webkit-transform: rotateY(-36deg);
    -moz-transform: rotateY(-36deg);
    transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back 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,
.hardcover_back {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

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

/* 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);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px);
}

.hardcover_back li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: 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,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back 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);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
    width: 4px;
    height: 100%;
}

.hardcover_back 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_back 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_back li:last-child:after,
.hardcover_back li:last-child:before {
    width: 4px;
    height: 160px;
}

.hardcover_back 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_back li:last-child:before {
    box-shadow: 10px -1px 80px 20px #666;
    -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;
}

.page > li:nth-child(2) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.page > li:nth-child(3) {
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.page > li:nth-child(4) {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.page > li:nth-child(5) {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

/*
	5. events
*/

.book:hover > .hardcover_front {
    -webkit-transform: rotateY(-145deg) translateZ(0);
    -moz-transform: rotateY(-145deg) translateZ(0);
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
}

.book:hover > .page li:nth-child(1) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
    -webkit-transform: rotateY(-35deg);
    -moz-transform: rotateY(-35deg);
    transform: rotateY(-35deg);
    -webkit-transition-duration: 1.8s;
    -moz-transition-duration: 1.8s;
    transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
    -webkit-transform: rotateY(-118deg);
    -moz-transform: rotateY(-118deg);
    transform: rotateY(-118deg);
    -webkit-transition-duration: 1.6s;
    -moz-transition-duration: 1.6s;
    transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
    -webkit-transform: rotateY(-130deg);
    -moz-transform: rotateY(-130deg);
    transform: rotateY(-130deg);
    -webkit-transition-duration: 1.4s;
    -moz-transition-duration: 1.4s;
    transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
    -webkit-transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    transform: rotateY(-140deg);
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

/*
	6. Bonus
*/

/* cover CSS */

.coverDesign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.coverDesign::after {
    background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Basic ribbon */
.ribbon {
	background: rgba(160, 0, 0, 0.5);
	color: #FFFFDF;
	display: block;
	font-size: 1.3em;
	position: absolute;
	top: 0;
	left: 0;
    padding: 5px 5px 5px 5px;
	width: 160px;
/*	height: 50px;*/
/*	line-height: 20px;*/
/*	letter-spacing: 0.15em; */
/*	text-align: center;*/
/*	-webkit-transform: rotateZ(-45deg) translateZ(1px);
	-moz-transform: rotateZ(-45deg) translateZ(1px);
	transform: rotateZ(-45deg) translateZ(1px);*/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}
.sml-collection .ribbon {
	font-size: 1.2em;
    padding: 5px 0 5px 0;
}

.new-collection .ribbon{
	top: 31%;
    padding: 5px 8px 5px 8px;
}
/* figcaption */

/*figcaption {
    background-color: darkred;
	text-align: center;
	position: absolute;
	bottom: -60px;
	width: 180px;
    color: aliceblue;
    border-radius: 5px;
    padding: 5px;
	-webkit-backface-visibility: hidden;
}

figcaption h1 {
    font-size: 20px;
	margin: 0;
}*/

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

    .book {
        margin: 0 25% 0 0;
    }
}