:root{--num-pages:10}@keyframes pulse{0%{transform:scale(.65)}50%{transform:scale(1)}to{transform:scale(.65)}}body,html{height:100%;width:100%}body{align-items:center;display:flex;justify-content:center;margin:0;overflow:hidden;padding:0}body div.loadingWrapper{bottom:0;left:0;position:absolute;right:0;top:0}body div.loadingWrapper div.loading{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}body div.loadingWrapper div.loading p{font-size:1.5em}body div.loadingWrapper div.loading img{animation:pulse 2s infinite;max-width:95%;transform:scale(1);width:200px}#canvas{align-items:center;display:none;flex-direction:column;height:90%;justify-content:center;max-height:800px;width:80%;z-index:1}#canvas #book-zoom{flex:1}#canvas #book-zoom .book{transition-duration:.4s}#canvas #book-zoom .book .shadow{box-shadow:0 0 10px #999;transition:box-shadow .5s}#canvas #book-zoom .book .page{background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.2)}#canvas #book-zoom .book .page:not(.hard).even .gradient{background:-webkit-gradient(linear,left top,right top,color-stop(.95,transparent),color-stop(1,rgba(0,0,0,.2)));height:100%;left:0;position:absolute;top:0;width:100%}#canvas #book-zoom .book .page:not(.hard).odd .gradient,.odd:not(.hard) #canvas #book-zoom .book .page:not(.hard).even .gradient{background:-webkit-gradient(linear,right top,left top,color-stop(.95,transparent),color-stop(1,rgba(0,0,0,.2)));height:100%;left:0;position:absolute;top:0;width:100%}#canvas #book-zoom .book .p1 .side{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#bbb),color-stop(.5,#ddd),color-stop(1,#bbb));background-image:linear-gradient(left,#bbb,#ddd,#bbb);height:600px;left:475px;position:absolute;top:0;transform:rotateY(-90deg);transform-origin:top right;width:5px;z-index:100000}#canvas #book-zoom .book .hard{background-color:#fff;box-shadow:none}#canvas #book-zoom .book .page-wrapper{perspective:2000px}#canvas .turnjs-slider{width:100%}#canvas .turnjs-slider .ui-slider{margin-left:calc(200%/var(--num-pages));width:calc(100%*(1 - 2/var(--num-pages)))}#canvas .turnjs-slider .ui-slider .ui-slider-handle{height:7px;margin-left:calc(-200%/(var(--num-pages) - 1));top:1px;width:calc(200%/(var(--num-pages) - 1))}.turnjs-slider{background:rgba(0,0,0,.2);height:8px;margin:20px auto;width:600px}.turnjs-slider,.turnjs-slider .thumbnail{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.turnjs-slider .thumbnail{background:rgba(0,0,0,.5);display:none;height:85px;left:-17px;position:absolute;top:-100px;-webkit-transform:translate3d(0,50px,0) scale(.1);-moz-transform:translate3d(0,50px,0) scale(.1);-o-transform:translate3d(0,50px,0) scale(.1);-ms-transform:translate3d(0,50px,0) scale(.1);transform:translate3d(0,50px,0) scale(.1);-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;-o-transition:-o-transform .2s;-ms-transition:-ms-transform .2s;transition:transform .2s;width:115px;z-index:10000}.no-transition{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none}.turnjs-slider .thumbnail div{background-color:#fff;height:70px;margin:7px;width:100px}.turnjs-slider .ui-state-hover .thumbnail{display:block;opacity:0}.turnjs-slider .ui-state-active .thumbnail{display:block;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.ui-state-disabled{cursor:default!important}.turnjs-slider .ui-widget-overlay{height:100%;left:0;position:absolute;top:0;width:100%}.turnjs-slider .ui-slider{position:relative;text-align:left}.turnjs-slider .ui-slider-handle{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;cursor:default;height:8px;position:absolute;width:80px;z-index:0}.turnjs-slider .ui-slider-horizontal{height:8px;margin-left:39px;width:520px}.turnjs-slider .ui-slider-horizontal .ui-slider-handle{margin-left:-40px;margin-top:-1px}.turnjs-slider .ui-slider-handle{background-color:#000;border:1px solid #fff;display:block;opacity:.2;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.turnjs-slider .ui-state-hover{opacity:.4}.turnjs-slider .ui-state-active{opacity:1}body{background-color:#f4f4f4;font-family:Roboto}body div.bg-image{bottom:0;left:0;position:fixed;right:0;top:0}