.component :after,.component :before{content:""}.component .align{clear:both;margin:10px auto 0;width:100%;max-width:1170px;text-align:center}.component .align>li{width:500px;min-height:300px;display:inline-block;margin:30px 20px 30px 30px;padding:0 0 0 60px;vertical-align:top}.book{position:relative;display:block;width:160px;height:220px;perspective:1000px;transform-style:preserve-3d}.hardcover_front li:first-child{background-color:#eee;backface-visibility:hidden}.hardcover_back li:first-child,.hardcover_back li:last-child,.hardcover_front li:last-child{background:#f1f1f1}.book_spine li:first-child{background:#eee}.book_spine li:last-child{background:#333}.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine 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,.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{background:#999}.page>li{background:linear-gradient(90deg,#e1ddd8 0,#fffbf6);box-shadow:inset 0 -1px 2px rgba(50,50,50,.1),inset -1px 0 1px hsla(0,0%,59%,.2);border-radius:0 1.5px 1.5px 0}.hardcover_front{transform:rotateY(-34deg) translateZ(8px);z-index:100}.hardcover_back{transform:rotateY(-15deg) translateZ(-8px)}.page li:first-child{transform:rotateY(-28deg)}.page li:nth-child(2){transform:rotateY(-30deg)}.page li:nth-child(3){transform:rotateY(-32deg)}.page li:nth-child(4){transform:rotateY(-34deg)}.page li:nth-child(5){transform:rotateY(-36deg)}.book_spine,.book_spine li,.hardcover_back,.hardcover_back li,.hardcover_front,.hardcover_front li{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d}.hardcover_back,.hardcover_front{transform-origin:0 100%}.hardcover_front{transition:all .8s ease,z-index .6s}.hardcover_front li:first-child{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translateZ(2px)}.hardcover_front li:last-child{transform:rotateY(180deg) translateZ(2px)}.hardcover_back li:first-child{transform:translateZ(2px)}.hardcover_back li:last-child{transform:translateZ(-2px)}.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine 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,.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{position:absolute;top:0;left:0}.hardcover_front li:first-child:after,.hardcover_front li:first-child:before{width:4px;height:100%}.hardcover_front li:first-child:after{transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_front li:first-child:before{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{transform:rotateX(90deg) rotate(90deg) translateZ(80px) translateX(-2px) translateY(-78px)}.hardcover_front li:last-child:before{box-shadow:0 0 30px 5px #333;transform:rotateX(90deg) rotate(90deg) translateZ(-140px) translateX(-2px) translateY(-78px)}.hardcover_back li:first-child:after,.hardcover_back li:first-child:before{width:4px;height:100%}.hardcover_back li:first-child:after{transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_back li:first-child:before{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{transform:rotateX(90deg) rotate(90deg) translateZ(80px) translateX(2px) translateY(-78px)}.hardcover_back li:last-child:before{box-shadow:10px -1px 80px 20px #666;transform:rotateX(90deg) rotate(90deg) translateZ(-140px) translateX(2px) translateY(-78px)}.book_spine{transform:rotateY(60deg) translateX(-4px) translateZ(-8px);width:14px;z-index:0}.book_spine li:first-child{transform:translateZ(2px)}.book_spine li:last-child{transform:translateZ(-2px)}.book_spine li:first-child:after,.book_spine li:first-child:before{width:4px;height:100%}.book_spine li:first-child:after{transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.book_spine li:first-child:before{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{transform:rotateX(90deg) rotate(90deg) translateZ(8px) translateX(2px) translateY(-6px)}.book_spine li:last-child:before{box-shadow:5px -1px 100px 40px rgba(0,0,0,.2);transform:rotateX(90deg) rotate(90deg) translateZ(-210px) translateX(2px) translateY(-6px)}.page,.page>li{position:absolute;top:0;left:0;transform-style:preserve-3d}.page{width:100%;height:98.5%;top:1%;left:3%;z-index:10}.page>li{width:100%;height:100%;transform-origin:left center;transition-property:transform;transition-timing-function:ease}.page>li:first-child,.page>li:nth-child(2){transition-duration:.6s}.page>li:nth-child(3){transition-duration:.4s}.page>li:nth-child(4){transition-duration:.5s}.page>li:nth-child(5){transition-duration:.6s}.book:hover>.hardcover_front{transform:rotateY(-145deg) translateZ(0);z-index:0}.book:hover>.page li:first-child{transform:rotateY(-30deg);transition-duration:1.5s}.book:hover>.page li:nth-child(2){transform:rotateY(-35deg);transition-duration:1.8s}.book:hover>.page li:nth-child(3){transform:rotateY(-118deg);transition-duration:1.6s}.book:hover>.page li:nth-child(4){transform:rotateY(-130deg);transition-duration:1.4s}.book:hover>.page li:nth-child(5){transform:rotateY(-140deg);transition-duration:1.2s}.coverDesign{overflow:hidden;z-index:1;backface-visibility:hidden}.coverDesign,.coverDesign:after{position:absolute;top:0;left:0;bottom:0;right:0}.coverDesign:after{background-image:linear-gradient(-135deg,hsla(0,0%,100%,.45),transparent)}.coverDesign h1{color:#fff;font-size:2.2em;letter-spacing:.05em;margin:54% 0 0}.coverDesign h1,.coverDesign p{text-align:center;text-shadow:-1px -1px 0 rgba(0,0,0,.1)}.coverDesign p{color:#f8f8f8;font-size:1em}.yellow{background-color:#f1c40f;background-image:linear-gradient(180deg,#f1c40f 58%,#e7ba07 0)}.blue{background-color:#3498db;background-image:linear-gradient(180deg,#3498db 58%,#2a90d4 0)}.grey{background-color:#f8e9d1;background-image:linear-gradient(180deg,#f8e9d1 58%,#e7d5b7 0)}.ribbon{background:#c0392b;color:#fff;display:block;font-size:.7em;position:absolute;top:11px;right:1px;width:40px;height:20px;line-height:20px;letter-spacing:.15em;text-align:center;transform:rotate(45deg) translateZ(1px);backface-visibility:hidden;z-index:10}.ribbon:after,.ribbon:before{position:absolute;top:-20px;width:0;height:0;border-bottom:20px solid #c0392b;border-top:20px solid transparent}.ribbon:before{left:-20px;border-left:20px solid transparent}.ribbon:after{right:-20px;border-right:20px solid transparent}.component figcaption{padding-left:40px;text-align:left;position:absolute;top:50%;transform:translateY(-50%);left:160px;width:310px;-webkit-backface-visibility:hidden}.component figcaption h1{margin:0}.component figcaption span{color:#16a085;padding:.6em 0 1em;display:block}.component figcaption p{color:#63707d;line-height:1.3}@media screen and (max-width:37.8125em){.component .align{margin:50px auto 0}.component .align>li{width:100%;min-height:440px;height:auto;padding:0;margin:0 0 30px}.book{margin:0 auto}.component figcaption{text-align:center;width:320px;top:250px;transform:translateY(0);padding-left:0;left:-80px;font-size:90%}}