.vegas-container { overflow: hidden !important; position: relative; } .vegas-wrapper, .vegas-overlay, .vegas-timer, .vegas-slide { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .vegas-overlay { background: transparent url(overlays/02.png) center center repeat; opacity: 0.5; } .vegas-timer { top: auto; bottom: 0; height: 2px; } .vegas-timer-progress { width: 0%; height: 100%; background: yellowgreen; -webkit-transition-property: width; transition-property: width; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .vegas-timer-running .vegas-timer-progress { width: 100%; } .vegas-slide { padding: 0; background: transparent center center no-repeat; -webkit-transform: translateZ(0); transform: translateZ(0); } body.vegas-container { overflow: auto; position: static; } body.vegas-container > .vegas-timer, body.vegas-container > .vegas-overlay, body.vegas-container > .vegas-slide { position: fixed; } .vegas-video { min-width: 100%; min-height: 100%; width: auto; height: auto; } /* fade */ .vegas-transition-fade { opacity: 0; } .vegas-transition-fade-in { opacity: 1; } .vegas-transition-fade-out { opacity: 0; } /* slideLeft */ .vegas-transition-slideLeft { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .vegas-transition-slideLeft-in { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .vegas-transition-slideLeft-out { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } /* slideRight */ .vegas-transition-slideRight { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .vegas-transition-slideRight-in { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .vegas-transition-slideRight-out { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } /* slideUp */ .vegas-transition-slideUp { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .vegas-transition-slideUp-in { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .vegas-transition-slideUp-out { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } /* slideDown */ .vegas-transition-slideDown { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .vegas-transition-slideDown-in { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .vegas-transition-slideDown-out { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } /* zoomIn */ .vegas-transition-zoomIn { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .vegas-transition-zoomIn-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .vegas-transition-zoomIn-out { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; } /* zoomOut */ .vegas-transition-zoomOut { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; } .vegas-transition-zoomOut-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .vegas-transition-zoomOut-out { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } /* swirlLeft */ .vegas-transition-swirlLeft { -webkit-transform: scale(2) rotate(35deg); -ms-transform: scale(2) rotate(35deg); transform: scale(2) rotate(35deg); opacity: 0; } .vegas-transition-swirlLeft-in { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } .vegas-transition-swirlLeft-out { -webkit-transform: scale(2) rotate(-35deg); -ms-transform: scale(2) rotate(-35deg); transform: scale(2) rotate(-35deg); opacity: 0; } /* swirlRight */ .vegas-transition-swirlRight { -webkit-transform: scale(2) rotate(-35deg); -ms-transform: scale(2) rotate(-35deg); transform: scale(2) rotate(-35deg); opacity: 0; } .vegas-transition-swirlRight-in { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } .vegas-transition-swirlRight-out { -webkit-transform: scale(2) rotate(35deg); -ms-transform: scale(2) rotate(35deg); transform: scale(2) rotate(35deg); opacity: 0; }