body::before {
  background-image: url('img/2026/kha2026_wireframe_bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
  /* Stretches to fill the screen */
  background-position: center;
  background-color: #000;
  z-index: -2;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #EEE;
}

body {
  background-color: #000;
}

.navbar-default .navbar-nav>li>a {
  color: #888;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #FFF;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #FFF;
}

.navbar-default .navbar-nav>.active>a:after,
.navbar-default .navbar-nav>.active>a:focus:after,
.navbar-default .navbar-nav>.active>a:hover:after {
  background: #383838;
}

.navbar-toggle {
  margin-top: 28px;
  margin-bottom: 28px;
}

.footer {
  background: rgba(0, 0, 0, 1);
  color: #BBB;
}

.footer_logo {
  width: 70%;
  max-width: 300px;
}

.footer a {
  color: #FFF;
}

.footer .official_sns li img {
  filter: invert();
}

@media screen and (max-width: 991px) {

  .navbar, .navbar-brand {
    height: 90px;
    padding: 0px;
  }

  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover {
    background: #333;
  }
}


  .logo_slideshow {
    padding: 15px;
    display: grid;
    width: 90%;
    margin: 0;
    /* Use a fixed aspect ratio or min-height to prevent collapse if needed? 
           The images are absolute/grid-stacked. 
           Grid items dictate the cell size.
           If we use grid-template-areas "stack", items naturally stack.
           We don't need absolute positioning if we use grid cell stacking.
        */
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
    height: inherit;
    /* Inherit logic from global if applicable, but grid usually handles content */
  }

  .logo_slideshow .logo_slide {
    grid-area: stack;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: logoFade 9s infinite;
    /* Ensure images fit well */
    object-fit: contain;
  }

  /* Animation Delays for 3 items */
  .logo_slideshow .logo_slide:nth-child(1) {
    animation-delay: 0s;
  }

  .logo_slideshow .logo_slide:nth-child(2) {
    animation-delay: -6s;
  }

  .logo_slideshow .logo_slide:nth-child(3) {
    animation-delay: -3s;
  }


@keyframes logoFade {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 1;
    /* Visible for 1.5s (1.5/6 = 0.25) */
  }

  33.33% {
    opacity: 0;
    /* Fade out by 2.0s (2/6 = 0.33) */
  }

  91.66% {
    opacity: 0;
    /* Stay hidden until 5.5s (5.5/6 = 0.916) */
  }

  100% {
    opacity: 1;
    /* Fade in by 6.0s */
  }
}

@media screen and (max-width: 991px) {
  .logo_slideshow {
    height: 60px;
    width: 156px;
    
  }

  .logo_slideshow .logo_slide {
    height: 60px;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px){
  .navbar-default .navbar-nav > li > a {
    line-height: 52px;
  }
}