/* Header */
header {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZmBg6AZiDiBWZ4YyQMCOCcYA4kMAAQYAHyYCCUdxidgAAAAASUVORK5CYII=');
  color: #ffffff;
  top: 0;
  padding-top: 15px;
  margin-right: 105px;
  height: auto;
  /*position: fixed;*/
  width: 100%;
  text-align: right;
}

header h1 {
  color: #ffffff;
  top: 0;
  padding-top: 15px;
  margin-right: 105px;
  height: auto;
  /*position: fixed;*/
  border-bottom: 1px solid #000000;
}

/* ====================================
 Articles.view navigation
==================================== */

.navigation {
  position: fixed;
  width: 40px;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  z-index: 998;
}

.navigation:hover,
.navigation.active {
  width: 200px;
  background-color: #ece9e9;
}

.navigation ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.navigation ul li {
  position: relative;
  width: 100%;
  list-style: none;
  transition: 1s;
}

.navigation ul li:hover {
  background: #3e3e3e;
}

.navigation ul li a {
  position: relative;
  display: block;
  width: 100%;
  display: flex;
  text-decoration: none;
  color: #000000;
}

.navigation ul li a .icon {
  position: relative;
  z-index: 999;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.navigation ul li a .icon .fa {
  font-size: 24px;
}

.navigation ul li a .title {
  position: relative;
  display: block;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  text-align: start;
  white-space: nowrap;
}

.toggle {
  position: sticky;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #0a0a0a;
  cursor: pointer;
  transition: 0.7s;
  
}

.toggle.active {
  background: #04912c;
}

.toggle::before {
  content: "+";
  font-family: fontAwesome;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  color: #fff;
}

.toggle.active::before {
  content: "--";
}

@media (max-width: 767px) {
  .navigation {
    left: -60px;
  }
  .navigation.active {
    left: 0px;
    width: 100%;
  }
}



/* ====================================
 Show Body
==================================== */
    @import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);

    body {
      background-color: #140202
    }

    .home {
      width: 100%;
      height: 15vh;
      position: relative;
      background-image: url(https://images.unsplash.com/photo-1446771326090-d910bfaf00f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9216e1a8598a8530ce329b41a8f3725d);
      background-size: cover;
      background-position: center center;
    }

/* ====================================
Navigation 
==================================== */

    .overlay-navigation {
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: hsla(0, 0%, 0%, 0.8);
      transform: translateY(-100%);
    }

    .overlay-slide-down {
      transition: all .4s ease-in-out;
      transform: translateY(0);
      z-index: 99;
    }

    .overlay-slide-up {
      transition: all .8s ease-in-out;
      transform: translateY(-100%);
    }

    nav,
    nav ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    nav ul {
      display: flex;
      list-style: none;
    }

    nav ul li {
      flex-basis: 20%;
      justify-content: center;
      align-items: center;
      height: 100%;
      overflow: hidden;
      transform: translateY(-100%);
    }

    nav li a {
      position: relative;
      top: 26%;
      color: #fff;
      text-transform: uppercase;
      font-family: 'Work sans', sans-serif;
      font-weight: 300;
      letter-spacing: 4px;
      text-decoration: none;
      display: block;
      text-align: center;
      font-size: 0.9rem;
    }

    nav li a:before {
      content: '';
      width: 70px;
      height: 2px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 100;
      transform: translateX(-100%);
      opacity: 0;
      transition: all .2s linear;
    }

    nav li a:after {
      content: attr(data-content);
      font-size: 0.7rem;
      transition: all .2s linear;
      opacity: 0;
      position: absolute;
      z-index: 100;
      color: #fff;
      display: block;
      margin-right: auto;
      margin-left: auto;
      left: 0;
      right: 0;
      bottom: -50px;
      text-transform: none;
      font-family: 'Open sans', serif;
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0;
    }

    nav li a:hover:before {
      transform: translateX(0);
      opacity: 1;
    }

    nav li a:hover:after {
      transform: translateY(15px);
      opacity: 1;
    }

    nav li:nth-of-type(1) {
      background-color: #29363B
    }

    nav li:nth-of-type(2) {
      background-color: #0a0909
    }

    nav li:nth-of-type(3) {
      background-color: #F4837D
    }

    nav li:nth-of-type(4) {
      background-color: #FDCEA9
    }

    nav li:nth-of-type(5) {
      background-color: #99B998
    }

    .slide-in-nav-item {
      animation: slide-in-nav-item 0.4s linear 1 .2s both;
    }

    .slide-in-nav-item-delay-1 {
      animation: slide-in-nav-item 0.4s linear 1 .4s both;
    }

    .slide-in-nav-item-delay-2 {
      animation: slide-in-nav-item 0.4s linear 1 .6s both;
    }

    .slide-in-nav-item-delay-3 {
      animation: slide-in-nav-item 0.4s linear 1 .8s both;
    }

    .slide-in-nav-item-delay-4 {
      animation: slide-in-nav-item 0.4s linear 1 1s both;
    }

    .slide-in-nav-item-reverse {
      animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
    }

    .slide-in-nav-item-delay-1-reverse {
      animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
    }

    .slide-in-nav-item-delay-2-reverse {
      animation: slide-in-nav-item-reverse .3s linear 1 .3s both;
    }

    .slide-in-nav-item-delay-3-reverse {
      animation: slide-in-nav-item-reverse .3s linear 1 .2s both;
    }

    .slide-in-nav-item-delay-4-reverse {
      animation: slide-in-nav-item-reverse .3s linear 1 both;
    }


    /* ====================================
Burger king
==================================== */

    .open-overlay {
      position: absolute;
      right: 5rem;
      top: 3.2rem;
      z-index: 100;
      width: 34px;
      display: block;
      cursor: pointer;
    }

    .open-overlay span {
      display: block;
      height: 1px;
      background-color: #fff;
      cursor: pointer;
      margin-top: 8px;
    }

    .animate-top-bar {
      animation: animate-top-bar .6s linear 1 both
    }

    .animate-bottom-bar {
      animation: animate-bottom-bar .6s linear 1 both
    }

    .animate-middle-bar {
      animation: animate-middle-bar .6s linear 1 both
    }

    .animate-out-top-bar {
      animation: animate-out-top-bar .6s linear 1 both
    }

    .article-side-by-side-photos {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin: 1.5rem 0;
    }

    .article-photo-pair {
      flex: 1 1 calc(50% - 8px);
      min-width: 240px;
      overflow: hidden;
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
      background: #111;
    }

    .article-photo-pair img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s ease;
    }

    .article-photo-pair:hover img {
      transform: scale(1.03);
    }

    @media (max-width: 768px) {
      .article-side-by-side-photos {
        flex-direction: column;
      }

      .article-photo-pair {
        min-width: 100%;
      }
    }

    .animate-out-bottom-bar {
      animation: animate-out-bottom-bar .6s linear 1 both
    }

    .animate-out-middle-bar {
      animation: animate-out-middle-bar .6s linear 1 both
    }


    /* ====================================
Animation keyframes
==================================== */

    @keyframes slide-in-nav-item {
      from {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
      }

      to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }
    }

    @keyframes slide-in-nav-item-reverse {
      from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }

      to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
      }
    }

    @keyframes animate-top-bar {
      0% {
        background-color: #fff;
      }

      50% {
        -webkit-transform: translateY(9px);
        transform: translateY(9px)
      }

      80% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
        background-color: #fff
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #29363B;
      }
    }

    @keyframes animate-bottom-bar {
      0% {
        background-color: #fff;
      }

      50% {
        -webkit-transform: translateY(-9px);
        transform: translateY(-9px)
      }

      80% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        background-color: #fff;
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #29363B;
      }
    }

    @keyframes animate-middle-bar {
      0% {
        background-color: #fff;
      }

      80% {
        background-color: #fff;
      }

      100% {
        background-color: #29363B;
      }
    }

    @keyframes animate-out-top-bar {
      0% {
        background-color: #29363B
      }

      50% {
        -webkit-transform: translateY(9px);
        transform: translateY(9px)
      }

      80% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
        background-color: #29363B
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #FFF;
      }
    }

    @keyframes animate-out-bottom-bar {
      0% {
        background-color: #29363B
      }

      50% {
        -webkit-transform: translateY(-9px);
        transform: translateY(-9px)
      }

      80% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        background-color: #29363B;
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #FFF;
      }
    }

    @keyframes animate-out-middle-bar {
      0% {
        background-color: #29363B
      }

      80% {
        background-color: #29363B;
      }

      100% {
        background-color: #fff;
      }
    }

    .home a {
      font-family: "Work Sans", sans-serif;
      color: #070707;
      font-weight: 300;
      font-size: 12px;
      text-transform: uppercase;
      text-decoration: none;
      position: absolute;
      z-index: 10;
      top: 50px;
      left: 50px;
      padding-bottom: 3px;
      border-bottom: 1px solid #fff;
    }

    @media (max-width: 640px) {
      nav ul li a {
        font-size: 11px;
      }

      nav li a:after {
        font-size: 0.6rem;
      }

      .open-overlay {
        right: 1rem;
      }

      nav li a:before {
        width: 15px;
      }
    }


    /* 1. CRITICAL: Allow the dropdown to escape the sidebar */
.navigation {
    overflow: hidden !important; /* Changed from hidden to allow dropdowns */
}

/* 2. Hide mega-box by default and position it to the right of the sidebar */
.mega-box {
    position: absolute;
    left: 200px; /* Aligns to the edge of the expanded sidebar */
    top: 0;
    width: 600px; /* Mega menu width */
    background: #ffffff;
    box-shadow: 10px 0 30px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border-left: 1px solid #ddd;
    height: auto;
    min-height: 300px;
    z-index: 1000;
}

/* 3. Show Mega Box on Hover */
.navigation ul li:hover .mega-box {
    opacity: 1;
    visibility: hiden;
}

/* 4. Layout inside the Mega Box */
.mega-content {
    display: flex;
    padding-top: 5px;
    gap: 20px;
}

.mega-row {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mega-row header {
    color: #121212 !important;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 2px solid #121212;
    text-align: left;
    padding-bottom: 5px;
}

.mega-links {
    padding: 0;
    list-style: none;
}

.mega-links li a {
    padding: 8px 0 !important;
    color: #444 !important;
    font-size: 0.9rem;
}

.mega-links li a:hover {
    color: #04912c !important;
    background: transparent !important;
}

.mega-image-card img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

.mega-image-card p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}