* { margin: 0; padding: 0; outline: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 510px; min-width: 100%; font-size: 62.5%; } html, body { overflow: hidden; width: 100%; height: 100%; } body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; line-height: 2.3rem; -webkit-perspective: 800; -webkit-text-size-adjust: none; -webkit-transform-style: preserve-3d; -webkit-user-select: none; } .screen { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; -webkit-transform: translate3d(100%, 0%, 0); -moz-transform: translate3d(100%, 0%, 0); -ms-transform: translate3d(100%, 0%, 0); transform: translate3d(100%, 0%, 0); position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; overflow-y: auto; pointer-events: none; } .screen.current-screen { -webkit-transform: translate3d(0%, 0%, 0); -moz-transform: translate3d(0%, 0%, 0); -ms-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); opacity: 1; pointer-events: auto; } .screen.modal-screen { z-index: 1000; } .screen-header { position: fixed; top: 0; right: 0; left: 0; margin: 0; line-height: 40px; text-align: center; overflow: hidden; z-index: 100; } .screen .screen-header + .content { top: 50px; } .screen-header > a, .screen-header > button { -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); position: absolute; top: 50%; min-width: 2.9rem; font-size: 2.1rem; text-decoration: none; } .screen-header > a.left, .screen-header > button.left { left: 1rem; } .screen-header > a.right, .screen-header > button.right { right: 1rem; } .screen-footer { position: fixed; bottom: 0; right: 0; left: 0; overflow: hidden; } .screen > .content { -webkit-overflow-scrolling: touch; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; }