/* holograph-file-version=84 user=M5 datetime=30-11-2024 12:39:16 */

#pano-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: -1; /* Push to background */
    pointer-events: none; /* Disable all interaction */
    overflow: hidden;
}
.z-index20 {z-index:20}
.position-relative-zindex {z-index:4; margin-top:-36px}

.picture-jump {
position:relative;
transform: scale(1);
margin-top:-82px;
}
    
.tighter select {
	padding: 4px 24px 4px 8px;
	margin-top:6px;
}    
.tighter input {
	padding: 4px 8px 4px 8px;
	margin-top:6px;
	max-width:120px;
}  

h2.huge {
	font-size: 7rem;
	z-index: 2;
	position: relative;
}


.fieldset-wrapper input, .fieldset-wrapper select, .fieldset-wrapper textarea, .infx-form-shell .infx-form .fieldset-wrapper .form_label {
	border-color: #ddd;
}

.remove {
	cursor: pointer;
	position: initial !important; 
	padding: 6px 8px;
	transform: translate(0%, 0%) !important;
	float: right;
	background: #fff;
}

.remove:hover {
	background: #ff5e5e !important;
}

.__attachfile__image  {
	float: left;
	padding-right: 12px;
}

.__attachfile_ul li {clear:both; min-height:68px; padding-top:4px}

.file-attach-block .form_input { border: 1px solid #ccc; padding:10px; }
.file-attach-block label.form_label { background-color: #e0fadf !important; cursor:pointer;}
.file-attach-block .form_input label {float:right; font-weight:600}

.file-attach-block .form_input .progress-wrapper, .file-attach-block .form_input p { clear:both}


.file-attach-block .form_input .progress 
{ opacity: 1;
  width: 100%;
  margin-top: 4px;
  height: 20px;
  }

.fieldset-wrapper textarea
{ border-top:none;}

.infx-form-shell .infx-form .dropdown-block label, .infx-form-shell .infx-form .textarea-block label, .infx-form-shell .infx-form .checkboxes label, .infx-form-shell .infx-form .recaptcha-block label {
	display: initial;
}

.infx-form-shell .infx-form .checkboxes label {display:none}

.checkbox-icon + .infx-inline-data, .checkbox + .checkbox-text {
	margin-top: 6px;
}
     
 @media (max-width: 968px) {   
 
 .company-logo {
transform: translate(-15%, -15%) scale(0.5);
}

.group-wrapper.home-page-logo { max-width:260px !important }

    }

@media (max-width: 740px) {   

div .infx-form-shell .right, div .infx-form-shell .left {
	width: 100%;
}    
    }

   
.fix-height {min-height:100px}

h3 {line-height:2.8rem}

.reallysmall {font-size:50%}
body {
	background-attachment: fixed;
}
/* Base styling for the H1 text */
h1.shimmer-text {
      text-align: center;
    position: relative;
}

/* Glow effect styling */
h1.shimmer-text::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: transparent; /* Hide duplicate text */
    z-index: -1;
    filter: blur(12px);
    animation: shimmer 4s infinite alternate; /* Slowed down */
    background: linear-gradient(45deg, #fffacd, #f5deb3, #ffdab9, #ffefd5); /* Subtle, warm shades */
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
}
h1.shimmer-text-one::before {
    content: "What's on in Battle";
}
h1.shimmer-text-two::before {
    content: '"Where it all began"';
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        opacity: 0.7;
        background-position: 0% 50%;
    }
    50% {
        opacity: 1;
        background-position: 50% 50%;
    }
    100% {
        opacity: 0.7;
        background-position: 100% 50%;
    }
}


.three-dee-layer 
	{position:relative; z-index:1;width:100%;}
.drop-back 
	{position:relative; z-index:1;}

.modelviewerBB {width:100%;height:580px}



:not(:defined) > * {
    display: none;
  }

model-viewer#reveal {
    --poster-color: transparent;
  }

model-viewer {background-color: unset;}

.progress-bar {
  display: block;
  width: 20%;
  height: 5%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 6px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

.update-bar {
  background-color: rgba(255, 255, 255, 0.9);
  width: 0%;
  height: 100%;
  border-radius: 6px;
  float: left;
  transition: width 0.3s;
}

#ar-button {
  background-image: url('https://games.holograph.digital/3D_Files/ar_icon.png');
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 12px 50%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  bottom: 16px;
  padding: 0px 16px 0px 40px;
  font-family: Roboto Regular, Helvetica Neue, sans-serif;
  font-size: 14px;
  color:#4285f4;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #DADCE0;
display:none;
}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

img.mad3a { width: 100%; height:100%; max-width:128px; max-height:128px}

.overflow-hide {overflow:hidden}