.book{transition:opacity .4s .2s}.page{width:30vw;height:44vw;background-color:#111;float:left;margin-bottom:.5em;background:left top no-repeat;background-size:cover}.page .preview{width:100%;height:100%}.page .preview canvas{width:100%;height:100%}.page .page-number{float:left;font-size:14px;margin:0}.page .page-number:nth-child(even){float:right}.page:nth-child(even){clear:both}.book{perspective:250vw;opacity:0;transition:opacity 1s ease-in-out}.book.show{opacity:1}.book-container{z-index:1000}.book-input{height:100%;width:100%;position:relative;cursor:pointer;display:flex;justify-content:center;align-items:center}.book-input input[type=file]{display:none}.book-input svg{pointer-events:none;transform:scale(1.2);color:#ef414c}.book .pages{width:60vw;height:44vw;position:relative;transform-style:preserve-3d;backface-visibility:hidden;border-radius:4px}.book .page{float:none;clear:none;margin:0;position:absolute;top:0;width:30vw;height:44vw;transform-origin:0 0;transition:transform 1.4s;backface-visibility:hidden;transform-style:preserve-3d;cursor:pointer;user-select:none;background-color:#f0f0f0;overflow:hidden}.book .page:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);transition:background .7s;z-index:2}.book .page:nth-child(odd){pointer-events:all;transform:rotateY(0);right:0;border-radius:0 12px 12px 0;background-image:linear-gradient(to right,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 10%)}.book .page:nth-child(odd):hover{transform:rotateY(-15deg)}.book .page:nth-child(odd):hover:before{background:rgba(0,0,0,.03)}.book .page:nth-child(odd):before{background:rgba(0,0,0,0)}.book .page:nth-child(even){pointer-events:none;transform:rotateY(180deg);transform-origin:100% 0;left:0;border-radius:12px 0 0 12px;border-color:#000;background-image:linear-gradient(to left,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 10%)}.book .page:nth-child(even):before{background:rgba(0,0,0,.2)}.book .page.grabbing{transition:none}.book .page.flipped:nth-child(odd){pointer-events:none;transform:rotateY(-180deg)}.book .page.flipped:nth-child(odd):before{background:rgba(0,0,0,.2)}.book .page.flipped:nth-child(even){pointer-events:all;transform:rotateY(0)}.book .page.flipped:nth-child(even):hover{transform:rotateY(15deg)}.book .page.flipped:nth-child(even):hover:before{background:rgba(0,0,0,.03)}.book .page.flipped:nth-child(even):before{background:rgba(0,0,0,0)}*,* :before,*:after{box-sizing:border-box}html,body{background:pink;-webkit-tap-highlight-color:rgba(0,0,0,0);min-height:100vh;max-width:100vw;overflow:hidden;margin:0}html{height:100%}.page:nth-child(odd){background-position:right top}.loader{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:120px;height:4px;border-radius:2px;margin:120px auto 0;background-color:#b8222c;overflow:hidden;transition:opacity .3s ease-in-out}.loader.hidden{opacity:0;pointer-events:none}.loader .progress{position:absolute;background-color:#f5f5f5;left:0;top:0;bottom:0}.container{box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:#F0414C}.box{border-radius:12px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:center;width:80px;height:80px;background:linear-gradient(.45turn,#D4D2D2,#EEECED);box-shadow:#0000002b 0 3px 16px inset,#00000026 0 -30px 30px inset,#0000001a 0 -10px 8px inset,#0000000f 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px;position:relative;transition:all .3s ease-in-out}.box:hover{transform:scale(1.05)}.animate{animation:anime 1s cubic-bezier(.16,1,.3,1) 1s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;animation-fill-mode:forwards}@keyframes anime{0%{width:80px;height:80px;background:#F0414C;box-shadow:0 0 #b81c26,0 0 #f1f1f1,10px 10px 10px #b81c26 inset,-10px -10px 10px #ff5964 inset}to{width:60vw;height:44vw;background:#f1f1f1;box-shadow:40px 40px 40px #b81c26,0 0 #ff5964,0 0 #b81c26 inset,2px 2px 2px #ff5964 inset}}.js-tilt-glare{z-index:10!important;pointer-events:none}.js-tilt-glare-inner{width:1000vw!important;height:1000vh!important}.actions,.socials{display:flex;justify-content:center;align-items:center;max-width:200px;margin:10px;position:fixed;bottom:-200px;right:0;z-index:15;transition:all 1s ease-in-out}.actions{right:unset;left:0}@media only screen and (max-width: 768px){.socials{right:calc(50% - 75px)}}.actions a,.socials a{color:#fff;margin:0 3px;cursor:pointer;transition:all .2s ease-in-out}.actions a:hover,.socials a:hover{color:#ee9112;transform:scale(1.1)}.actions.visible,.socials.visible{bottom:0!important}