*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#311d12;font-family:Arial,sans-serif}
#canvas{display:none;width:100vw;height:100vh;position:relative;overflow:hidden}
.magazine-viewport{position:relative;overflow:hidden;width:100%;height:100%}
.magazine-viewport .container{position:absolute;top:50%;left:50%;width:922px;height:600px;margin:auto}
.magazine-viewport .magazine{width:922px;height:600px;left:-461px;top:-300px}
.magazine-viewport .page{width:461px;height:600px;background-color:white;background-repeat:no-repeat;background-size:100% 100%}
.magazine .page{box-shadow:0 0 20px rgba(0,0,0,0.25)}
.magazine-viewport .page img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;margin:0;display:block}
.magazine .even .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(0,0,0,0) 95%,rgba(0,0,0,.2) 100%)}
.magazine .odd .gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,0) 95%,rgba(0,0,0,.15) 100%)}
.magazine-viewport .zoom-in .even .gradient,.magazine-viewport .zoom-in .odd .gradient{display:none}
.magazine-viewport .loader{width:100%;height:100%;background:#fff;position:absolute;top:0;left:0}
.magazine-viewport .loader:after{content:'Loading...';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:14px Arial;color:#555}
.magazine-viewport .shadow{transition:box-shadow .5s;box-shadow:0 0 20px #101010}
.magazine-viewport .next-button,.magazine-viewport .previous-button{width:34px;height:600px;position:absolute;top:0;z-index:1000;cursor:pointer}
.magazine-viewport .next-button{right:-34px;border-radius:0 15px 15px 0}
.magazine-viewport .previous-button{left:-34px;border-radius:15px 0 0 15px}
.magazine-viewport .previous-button-hover,.magazine-viewport .next-button-hover{background-color:rgba(0,0,0,.22)}
.magazine-viewport .previous-button-down,.magazine-viewport .next-button-down{background-color:rgba(0,0,0,.4)}
.magazine-viewport .zoom-in .next-button,.magazine-viewport .zoom-in .previous-button{display:none}
.animated{transition:margin-left .5s}
.zoom-icon{position:fixed;z-index:10000;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#311d12;display:flex;align-items:center;justify-content:center;cursor:pointer;font:bold 20px Arial;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.zoom-icon:before{content:'+'}
.zoom-icon-out:before{content:'−'}
.exit-message{position:absolute;top:12px;left:0;width:100%;height:40px;z-index:10000}
.exit-message>div{width:150px;height:30px;margin:auto;background:rgba(0,0,0,.55);text-align:center;font:12px Arial;line-height:30px;color:white;border-radius:10px}
.controls{position:fixed;left:0;bottom:18px;width:100%;text-align:center;z-index:10000;pointer-events:none}
.controls button{pointer-events:auto;border:0;border-radius:7px;background:rgba(255,255,255,.94);color:#311d12;padding:10px 16px;margin:0 4px;font-weight:bold;cursor:pointer}
.controls button:hover{background:#fff}
.page-label{display:inline-block;color:white;background:rgba(0,0,0,.35);padding:9px 12px;border-radius:7px;margin:0 5px;font-size:13px}
@media(max-width:760px){.controls{bottom:10px}.controls button{padding:8px 10px;margin:2px;font-size:12px}.zoom-icon{width:38px;height:38px;font-size:18px}}