.vegas-timer { z-index: 99999 !important; } .vegas-timer-progress { background: #F24535; } .vegas-overlay { opacity: 1; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { position: relative; background: #000; color: #fff; font: 1em Arial, sans-serif; } a { text-decoration: none; color: inherit; } .banner { position: absolute; top: 0; left: 0; right: 0; background: #000; color: #eee; text-align: center; text-transform: uppercase; font-size: 12px; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } .banner a { color: #F24535; } .container { position: relative; min-width: 1280px; min-height: 800px; width: 100%; height: 100%; } .logo { width: 500px; position: absolute; left: 2.5%; bottom: 8%; transition: 1s all; } .logo.collapsed { opacity: 0; transform: rotateX(90deg); transform-style: preserve3d; } .characters { position: absolute; bottom: 8%; right: 5%; width: 580px; height: 500px; transition: 2.5s; } .animated .characters { -webkit-transform: rotate(5deg); transform: rotate(5deg); } .characters-list { position: absolute; bottom: -5px; left: 0; width: 280px; list-style: none; margin: 0; padding: 0; text-transform: uppercase; text-shadow: 2px 2px 2px #000; font: bold 22px "Arial Narrow", Arial, sans-serif; text-align: right; line-height: 1.7; } .characters-list li { opacity: 0; transition: 0.5s; transform: translateX(20px); margin: 0; } .characters-list li a { padding: 5px 20px; } .animated .characters-list li { opacity: 1; transform: translateX(0); } .animated .characters-list li:nth-child(1) { transition-delay: 0.2s; } .animated .characters-list li:nth-child(2) { transition-delay: 0.4s; } .animated .characters-list li:nth-child(3) { transition-delay: 0.6s; } .animated .characters-list li:nth-child(4) { transition-delay: 0.8s; } .animated .characters-list li:nth-child(5) { transition-delay: 1.0s; } .animated .characters-list li:nth-child(6) { transition-delay: 1.2s; } .animated .characters-list li:nth-child(7) { transition-delay: 1.4s; } .animated .characters-list li:nth-child(8) { transition-delay: 1.6s; } .animated .characters-list li:nth-child(9) { transition-delay: 1.8s; } .animated .characters-list li:nth-child(10) { transition-delay: 2s; } .characters-list .active a { color: #F24535; } .characters-poster { position: absolute !important; bottom: 0; right: 0; border: 5px solid #fff; box-shadow: 0 5px 30px #000; width: 300px; height: 444px; background: #000; cursor: pointer; } .characters-label { position: absolute; right: -20px; bottom: 5px; width: 125px; text-align: center; background: #fff; color: #000; text-transform: uppercase; border: 2px solid #000; padding: 5px; font: bold 18px "Marker Felt", "Comic Sans MS", Arial, sans-serif; display: inline-block; box-shadow: 0 5px 30px #000; transition: .2s; opacity: 0; -webkit-transform: rotateX(90deg) rotateZ(-15deg); -ms-transform: rotateX(90deg) rotateZ(-15deg); transform: rotateX(90deg) rotateZ(-15deg); } .characters-label.animated { opacity: 1; -webkit-transform: rotateX(0deg) rotateZ(-15deg); -ms-transform: rotateX(0deg) rotateZ(-15deg); transform: rotateX(0deg) rotateZ(-15deg); } #adpacks { position: absolute; top: 15px; left: 15px; padding: 8px 10px; width: 150px; height: 200px; color: #fff; background: #000; font-size: 11px; line-height: 1.4; text-align: center; border: 1px solid #444; box-shadow: 0 0 20px #000; } .adpacks-img img { border: 1px solid #444; margin-bottom: 8px; } .adpacks-poweredby { color: #aaa; display: block; font-size: 10px; text-transform: capitalize; margin-top: 5px; }