body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#000; font-family: 'Arial', sans-serif; }
/* Fullscreen video */
#bg-video {
position: fixed;
top: 50%; left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
z-index: -1;
object-fit: cover;
}
/* Center container for logo + button */
.center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 400px;
}
/* Logo */
.logo {
width: 100%;
max-width: 340px;
margin: 0 auto 40px auto;
opacity: 0;
animation: fadeIn 2.4s ease-out 0.8s forwards;
}
.logo img {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.7));
}
/* ENTER button – appears below logo */
.enter-btn {
display: inline-block;
padding: 16px 52px;
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: white;
background: rgba(0, 190, 190, 0.25);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50px;
cursor: pointer;
backdrop-filter: blur(12px);
transition: all 0.4s ease;
opacity: 0;
animation: fadeIn 2s ease-out 2.6s forwards;
}
.enter-btn:hover {
background: rgba(0, 230, 230, 0.45);
border-color: white;
transform: translateY(-3px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 640px) {
.logo { max-width: 260px; margin-bottom: 30px; }
.enter-btn { padding: 14px 40px; font-size: 16px; }
}@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700';
/* CSS Document */
/*
preloader
container
skip button
video
reset
sound
frame-page
overlay background
wraper text and logo
*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, button, output, ruby, section, summary, time, mark, audio, video {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
color:#fff;
text-decoration:none;
}
body {
font-family: 'Open Sans', sans-serif;
overflow:hidden;
background:#000;
}
#boxwrap{
width:100%;
height:100%;
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(0, 0, 0, 0);
z-index: 99999;
pointer-events: none !important;
}
/* skip button */
#boxskip{
width:100%;
height:100%;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:9;
display:none;
}
button{
width:175px;
height:50px;
border-radius: 0px 0px 5px 5px;
background:rgba(236, 2, 1, 1);
cursor:pointer;
font-size:21px;
font-weight:600;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
button:hover{
background:rgba(0, 0, 0, 1);
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* preloader */
.preloaderintro
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: none ;
}
.ax-spinner-wave.ax-spinner
{
width: 50px;
height: 30px;
text-align: center;
font-size: 10px;
}
.ax-spinner-wave div
{
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: barpre 1.2s infinite ease-in-out;
animation: barpre 1.2s infinite ease-in-out;
}
.ax-spinner-wave .ax2
{
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.ax-spinner-wave .ax3
{
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.ax-spinner-wave .ax4
{
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.ax-spinner-wave .ax5
{
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes barpre {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@keyframes barpre {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
/* end preloader */
/* all element begin here */
/* container */
#boxintro{
width:100%;
height:100%;
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(0, 0, 0, 1);
display:none;
}
/* video */
.video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index:0;
opacity:0.8;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* sound */
#soundintro{
position: absolute;
right: 0px;
top: 0px;
width: 52px;
height: 46px;
z-index: 999999;
cursor: pointer;
opacity:0.5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#soundintro:hover{
opacity:0.8;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.soundOnintro{ background:url("../img/soundon.png"); -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;}
.soundOffintro{ background:url("../img/soundoff.png"); -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;}
/* frame-page */
#frame1, #frame2, #frame3, #frame4, #frame5{
display:none;
position: fixed;
width: 100%;
height:100%;
overflow: hidden;
background:rgba(0, 0, 0, 0);
z-index:1;
}
/* overlay background */
.overlayintro {
position: fixed;
width: 100%;
height:100%;
overflow: hidden;
background-image: url("../img/black-small-checks.png");
}
.bgintro{
position: fixed;
width: 100%;
height:100%;
}
.bgintro img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
/* wraper text and logo */
.contentintro{
width: 100%;
text-align:center;
margin: 0;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
z-index:8;
}
.logointro{font-size:39pt; font-weight:bold; opacity:0;}
.headingintro{ font-size:39pt; font-weight:bold; opacity:0;}
.subheadingintro{ font-size:28pt; font-weight:400; opacity:0;}
.overlayintro { pointer-events: none !important; }
/* --- PURE TEXT BUTTON --- */
.enterbtn {
font-size: 14pt;
font-weight: 400; /* Use 600 if you want it bolder */
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.75); /* Slight transparency when idle */
text-transform: uppercase;
padding: 10px 15px; /* Give it a small hit area */
margin-top: 40px;
display: inline-block;
cursor: pointer;
/* Appearance */
background: none; /* Ensure no background fill */
border: none; /* Ensure no border */
transition: color 0.2s ease; /* Smooth color change */
opacity: 0; /* Keep this for your existing JS animation */
}
.enterbtn:hover {
color: #fff; /* Solid white on hover */
}