* { margin: 0; padding: 0; } a { -webkit-tap-highlight-color: rgba(0,0,0,0); } div#jqt { /*overflow-x: hidden;*/ -webkit-user-select: none; -webkit-text-size-adjust: none; font-family: "Helvetica Neue", Helvetica; -webkit-perspective: 800; -webkit-transform-style: preserve-3d; } #jqt .selectable, #jqt input, #jqt textarea { -webkit-user-select: auto; } div#jqt > * { -webkit-backface-visibility: hidden; -webkit-box-sizing: border-box; display: none; position: absolute; left: 0; width: 100%; -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); min-height: 420px !important; } #jqt.fullscreen > * { min-height: 460px !important; } #jqt.fullscreen.black-translucent > * { min-height: 480px !important; } #jqt.landscape > * { min-height: 320px !important; } div#jqt > .current { display: block !important; } #jqt .in, #jqt .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; } #jqt .slide.in { -webkit-animation-name: slideinfromright; } #jqt .slide.out { -webkit-animation-name: slideouttoleft; } #jqt .slide.in.reverse { -webkit-animation-name: slideinfromleft; } #jqt .slide.out.reverse { -webkit-animation-name: slideouttoright; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes slideinfromleft { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } } @-webkit-keyframes slideouttoright { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100%); } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } #jqt .fade.in { z-index: 10; -webkit-animation-name: fadein; } #jqt .fade.out { z-index: 0; } #jqt .dissolve.in { -webkit-animation-name: fadein; } #jqt .dissolve.out { -webkit-animation-name: fadeout; } #jqt .flip { -webkit-animation-duration: .65s; } #jqt .flip.in { -webkit-animation-name: flipinfromleft; } #jqt .flip.out { -webkit-animation-name: flipouttoleft; } /* Shake it all about */ #jqt .flip.in.reverse { -webkit-animation-name: flipinfromright; } #jqt .flip.out.reverse { -webkit-animation-name: flipouttoright; } @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } @-webkit-keyframes flipinfromleft { from { -webkit-transform: rotateY(180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(-180deg) scale(.8); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(180deg) scale(.8); } } #jqt .slideup.in { -webkit-animation-name: slideup; z-index: 10; } #jqt .slideup.out { -webkit-animation-name: dontmove; z-index: 0; } #jqt .slideup.out.reverse { z-index: 10; -webkit-animation-name: slidedown; } #jqt .slideup.in.reverse { z-index: 0; -webkit-animation-name: dontmove; } @-webkit-keyframes slideup { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @-webkit-keyframes slidedown { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } /* Hackish, but reliable. */ @-webkit-keyframes dontmove { from { opacity: 1; } to { opacity: 1; } } #jqt .swap { -webkit-transform: perspective(800); -webkit-animation-duration: .7s; } #jqt .swap.out { -webkit-animation-name: swapouttoleft; } #jqt .swap.in { -webkit-animation-name: swapinfromright; } #jqt .swap.out.reverse { -webkit-animation-name: swapouttoright; } #jqt .swap.in.reverse { -webkit-animation-name: swapinfromleft; } @-webkit-keyframes swapouttoright { 0% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); -webkit-animation-timing-function: ease-in-out; } 50% { -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); } } @-webkit-keyframes swapouttoleft { 0% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); -webkit-animation-timing-function: ease-in-out; } 50% { -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); } } @-webkit-keyframes swapinfromright { 0% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); } } @-webkit-keyframes swapinfromleft { 0% { -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); } } #jqt .cube { -webkit-animation-duration: .55s; } #jqt .cube.in { -webkit-animation-name: cubeinfromright; -webkit-transform-origin: 0% 50%; } #jqt .cube.out { -webkit-animation-name: cubeouttoleft; -webkit-transform-origin: 100% 50%; } #jqt .cube.in.reverse { -webkit-animation-name: cubeinfromleft; -webkit-transform-origin: 100% 50%; } #jqt .cube.out.reverse { -webkit-animation-name: cubeouttoright; -webkit-transform-origin: 0% 50%; } @-webkit-keyframes cubeinfromleft { from { -webkit-transform: rotateY(-90deg) translateZ(320px); opacity: .5; } to { -webkit-transform: rotateY(0deg) translateZ(0); opacity: 1; } } @-webkit-keyframes cubeouttoright { from { -webkit-transform: rotateY(0deg) translateX(0); opacity: 1; } to { -webkit-transform: rotateY(90deg) translateZ(320px); opacity: .5; } } @-webkit-keyframes cubeinfromright { from { -webkit-transform: rotateY(90deg) translateZ(320px); opacity: .5; } to { -webkit-transform: rotateY(0deg) translateZ(0); opacity: 1; } } @-webkit-keyframes cubeouttoleft { from { -webkit-transform: rotateY(0deg) translateZ(0); opacity: 1; } to { -webkit-transform: rotateY(-90deg) translateZ(320px); opacity: .5; } } #jqt .pop { -webkit-transform-origin: 50% 50%; } #jqt .pop.in { -webkit-animation-name: popin; z-index: 10; } #jqt .pop.out.reverse { -webkit-animation-name: popout; z-index: 10; } #jqt .pop.in.reverse { z-index: 0; -webkit-animation-name: dontmove; } @-webkit-keyframes popin { from { -webkit-transform: scale(.2); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } } @-webkit-keyframes popout { from { -webkit-transform: scale(1); opacity: 1; } to { -webkit-transform: scale(.2); opacity: 0; } }