@import url(https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;700&family=Barlow:wght@300;400;700&family=Barlow+Condensed:wght@300;600&family=Titillium+Web:wght@400;700&display=swap);

#menu-main-menu li {
  --tw-text-opacity: 1;
  align-items: baseline;
  color: rgb(255 255 255/var(--tw-text-opacity));
  display: block;
  position: relative
}

#menu-main-menu li:hover {
  --tw-text-opacity: 1;
  color: rgb(235 235 235/var(--tw-text-opacity))
}

@media (min-width:768px) {
  #menu-main-menu li:first-child {
    margin-left: -.5rem
  }
}

#menu-main-menu li a {
  display: block;
  padding: 1rem .5rem
}

#menu-main-menu li:hover ul {
  opacity: 1;
  visibility: visible
}

#menu-main-menu li ul {
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(9 80 149/var(--tw-bg-opacity)) !important;
  border-color: rgb(9 80 149/var(--tw-border-opacity));
  border-left-width: 2px;
  left: 0;
  margin-left: .5rem;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 100%;
  transition-duration: .15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  z-index: 50
}

@media (min-width:1024px) {
  #menu-main-menu li ul {
    border-width: 0;
    margin-left: -.5rem;
    opacity: 0;
    position: absolute;
    visibility: hidden
  }
}

#menu-main-menu li ul li:first-child {
  margin: 0
}

#menu-main-menu li ul li a {
  padding: .5rem 1rem
}

#menu-main-menu li ul a,
#menu-main-menu li ul li {
  width: 100%
}

.mobile-nav__overlay {
  background-color: rgba(0, 0, 0, .7);
  display: none;
  opacity: 0;
  position: fixed;
  transition: opacity .2s ease-in-out
}

@media (min-width:768px) {
  .mobile-nav__overlay {
    display: none
  }
}

.mobile-nav__sidebar {
  left: -80%;
  transition: left .2s ease-in-out
}

@media (min-width:768px) {
  .mobile-nav__sidebar {
    left: 0
  }
}

.mobile-nav__open {
  overflow-y: hidden
}

@media (min-width:768px) {
  .mobile-nav__open {
    overflow-y: inherit
  }
}

.mobile-nav__open .mobile-nav__sidebar {
  left: 0
}

.mobile-nav__open .mobile-nav__overlay {
  display: block;
  opacity: 1
}

@media (min-width:768px) {
  .mobile-nav__open .mobile-nav__overlay {
    display: none
  }
}

.stories-bg {
  background-blend-mode: color;
  background-color: rgba(0, 0, 0, .8)
}

.font-heading {
  font-family: Barlow, sans-serif;
  font-weight: 700
}

.font-condensed {
  font-family: Barlow Condensed, sans-serif;
  font-weight: 600
}