.book{width:240px;height:300px;margin-left:auto;margin-right:auto;margin-bottom:10px;position:relative;perspective:1000px;z-index:2;box-shadow:2px 2px 2px rgba(0,0,0,.5)}.book:hover{cursor:pointer}.book:hover .click-to-open{opacity:0;transition:opacity .25s linear}.book .click-to-open{position:absolute;top:87%;left:31%;opacity:1;transition:opacity .25s linear;display:flex;flex-direction:row;justify-content:center}.book .click-to-open .text{font-size:.8rem;display:inline-block;padding:0 5px;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.4)}.book-image{width:100%;height:auto;display:block}.book-back-visual_slam{background-color:#ff0}.book-back-elemental{background-color:#deb887}.book-inner,.book-pages:after,.book-pages:before{position:absolute;top:0;left:0;right:0;bottom:0;transform-origin:left center;transition:transform .2s ease-in}.book-cover img{width:240px;height:300px}.book-cover,.book-pages{transform-style:preserve-3d}.book-pages{transform:scale(.95,.9);perspective:2000px}.book-pages:after,.book-pages:before{background-color:#fff;background-image:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.075) 97%,transparent);box-shadow:1px 4px 5px 0 rgba(0,0,0,.05);content:""}.book-cover:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0}.book-back,.book-pages{right:0;bottom:0}.book-pages:after{transition-delay:.12s}.book-pages:before{transition-delay:.105s}.book-pages+.book-pages:after{transition-delay:.09s}.book-pages+.book-pages:before{transition-delay:75ms}.book-pages+.book-pages+.book-pages:after{transition-delay:.06s}.book-pages+.book-pages+.book-pages:before{transition-delay:45ms}.book-pages+.book-pages+.book-pages+.book-pages:after{transition-delay:.03s}.book-pages+.book-pages+.book-pages+.book-pages:before{transition-delay:15ms}.book:hover .book-back,.book:hover .book-cover:before{box-shadow:inset -2px 0 1px rgba(0,0,0,.075)}.book:hover .book-cover{transform:rotateY(-40deg);transition-timing-function:ease-out;transition-delay:0s}.book:hover .book-pages:after{transform:rotateY(-12deg)}.book:hover .book-pages:before{transform:rotateY(-8deg)}.book:hover .book-pages+.book-pages:after{transform:rotateY(-20deg)}.book:hover .book-pages+.book-pages:before{transform:rotateY(-16deg);background-image:linear-gradient(transparent,hsla(0,0%,100%,.1) 10%,hsla(0,0%,100%,.5) 20%,rgba(50,211,136,.8) 40%,transparent 60%,rgba(255,0,0,.6) 90%,transparent)}.book:hover .book-pages+.book-pages+.book-pages:after{transform:rotateY(-28deg);background-image:linear-gradient(transparent,rgba(255,255,0,.5) 35%,transparent 40%,#ffebcd 50%,skyblue 75%,transparent 95%,#ff8c00)}.book:hover .book-pages+.book-pages+.book-pages:before{transform:rotateY(-24deg);background-image:linear-gradient(0deg,transparent,rgba(255,255,0,.5) 35%,transparent 40%,#9b9bf1 50%,#ffebcd 75%,transparent 85%,orange 90%,#adff2f 95%)}.book:hover .book-pages+.book-pages+.book-pages+.book-pages:after{transform:rotateY(-36deg);background-image:linear-gradient(transparent,rgba(255,0,0,.5) 50%,transparent)}.book:hover .book-pages+.book-pages+.book-pages+.book-pages:before{transform:rotateY(-32deg);background-image:linear-gradient(transparent,rgba(0,255,0,.5) 20%,transparent 50%,cyan 70%,transparent)}@media screen and (max-width:620px){.book{width:160px;height:200px;margin-left:5px;margin-right:5px}.book .click-to-open{left:25%}.book-cover img{width:160px;height:200px}}