/* ====================== *
 * ## Extra Small (XS) ##
 *
 * @min-width: 0px;
 * @max-width: 575px;
 * ====================== */

@media (max-width: 575px)
{
   /* ============ *
    * ## Navbar ##
    * ============ */

   #noise-header,
   #noise-header .navbar {
      min-height: 50px !important;
   }

   #noise-header .navbar .noise-navbar-section {
      height: 50px;
   }

   .navbar-menu-btn-container,
   .navbar-search-btn-container {
      width: 50px;
   }

   #noise-header .noise-searchbar-container { display: none; }

   .noise-navbar { top: 50px; }
   .noise-navbar .navbar-brand {
      overflow: hidden;
   }


   /* ======================== *
    * ## Navbar Menu Button ##
    * ======================== */

   .navbar-menu-btn.btn-round,
   .navbar-menu-btn.btn-square {
      height: 30px;
      margin: 10px;
      width: 30px;
   }

   .navbar-menu-btn.btn-square .hamburger-box {
      width: 30px;
      height: 18px;
   }

   .navbar-menu-btn.btn-square .hamburger-inner,
   .navbar-menu-btn.btn-square .hamburger-inner::before,
   .navbar-menu-btn.btn-square .hamburger-inner::after {
      width: 30px;
   }
}


/* ================== *
 * ## Small (SM) ##
 *
 * @min-width: 576px;
 * @max-width: 768px;
 * ================== */

@media (min-width: 576px)
{
   /* ============ *
    * ## Navbar ##
    * ============ */

   #noise-header,
   #noise-header .navbar {
      min-height: 80px !important;
   }

   #noise-header .navbar .noise-navbar-section {
      height: 80px;
   }

   .navbar-menu-btn-container,
   .navbar-search-btn-container {
      width: 80px;
   }

   /#noise-header .navbar { padding: 80px 0 0 0 !important; }
   /.noise-navbar { top: 80px; }

   #noise-header .navbar { padding: 0; }
}

@media (max-width: 768px)
{
}


/* ================== *
 * ## Medium (MD) ##
 *
 * @min-width: 768px;
 * @max-width: 991px;
 * ================== */

@media (min-width: 768px)
{
   .navbar-toggler .navbar-toggler-icon {
      height: 1.5em;
   }

   .navbar-toggler {
      padding: inherit;
   }
}

@media (min-width: 769px)
{
}

@media (max-width: 991px)
{
   .noise-navbar .navbar-nav .nav-link {
      padding: 10px;
      color: #FFF;
   }

   /* ==================== *
    * ## Navigation Bar ##
    * ==================== */

   .navbar {
      height: 0vh;
      overflow: hidden;

      transition: height .33s;
      -webkit-transition: height .33s;
   }

   .navbar.mobile-menu-open {
      height: 100vh;
   }

   .noise-navbar {
      background: var(--grey-lighter);
      border-style: solid;
      border-width: 1px 0 0 0;
      order: 3;
      width: 100%;
   }

   .noise-navbar .menu-wrapper,
   .noise-navbar .navbar-nav {
      flex-direction: column;
      width: 100%;
   }

   .noise-navbar .navbar-nav .nav-item .nav-link {
      border-style: solid;
      border-width: 0;
      font-size: 17px;
      padding: 10px;
   }

   .noise-navbar .navbar-nav .nav-item:not(.active) + .nav-item:not(.active) .nav-link,
   .noise-navbar .navbar-nav + .navbar-nav .nav-item:not(.active) .nav-link {
      border-width: 1px 0 0 0;
   }

   /*
   .noise-navbar .dropdown-menu {
      border-style: solid;
      border-width: 0 0 1px 0;
   }
   */

   .noise-navbar .dropdown .dropdown-icon {
      height: 100%;
      max-height: 44px;
      padding: 10px;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;

      transform: rotate(90deg);
      transition: transform .25s;

      -webkit-transform: rotate(90deg);
      -webkit-transition: transform .25s;
   }

   .noise-navbar .dropdown.show > .dropdown-icon,
   .noise-navbar .dropdown .dropdown-item.show ~ .dropdown-icon {
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
   }

   .noise-navbar .dropdown-menu .dropdown-item { 
      font-size: 16px;
      padding-bottom: 10px;
      padding-top: 10px;
   }

   .noise-navbar .dropdown-menu .dropdown-item { padding-left: 30px; }
   .noise-navbar .dropdown-menu .dropdown-menu .dropdown-item { padding-left: 50px; }
}


/* =================== *
 * ## Large (LG) ##
 *
 * @min-width: 992px;
 * @max-width: 1199px;
 * =================== */

@media (min-width: 992px)
{
   .noise-brand {
      position: absolute;
      left: 0;
      margin-left: 20px;
      z-index: 9990;
   }

   .noise-header .f3-image, .noise-header:not(.iframe-header) > .f3-item-wrapper { max-height: 350px; }

   .noise-header .f3-image-empty:not(.f3-edit) {
      height: 0;
   }
    /* ==================== *
     * ## Navigation Bar ##
     * ==================== */
     
   .below-navbar-container { padding-top: 80px; }

   .navbar-logo-container { height: 100%; }

   .noise-navbar .navbar-nav {
      flex-direction: row;
      height: 100%;
   }

   .noise-navbar .navbar-nav .nav-item .nav-link {
      font-size: 14px;
      line-height: 80px;
      top: 50%;

      transform: translate(0,-50%);
      -webkit-transform: translate(0,-50%);
   }

   .noise-navbar .navbar-nav .nav-item:not(.active) { cursor: pointer; }
   .noise-navbar .navbar-nav .nav-item:not(.active):hover,
   .noise-navbar .navbar-nav .nav-item.show:not(.active) {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   }

   .noise-navbar .navbar-nav .nav-item { z-index: 0; }
   .noise-navbar .navbar-nav .nav-item:not(.active):hover { z-index: 1; }
   .noise-navbar .navbar-nav .nav-item.show:not(.active) { z-index: 2; }

   .noise-navbar .dropdown-indicator {
      bottom: 5px;
      height: 16px;
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      width: 16px;

      transform: translate(-50%,0);
      transition: opacity .2s;

      -webkit-transform: translate(-50%,0);
      -webkit-transition: opacity .2s;
   }

   .noise-navbar .nav-item:hover .dropdown-indicator,
   .noise-navbar .nav-item.active .dropdown-indicator {
      opacity: 1;
   }

   .noise-navbar .dropdown-menu {
      position: absolute !important;
      top: 100%;
      z-index: 0;
   }

   .noise-navbar .dropdown-menu .dropdown-icon {
      height: 100%;
      padding: 11px;
      pointer-events: none;
      position: absolute;
      right: 0;
      stroke-width: 5px;
      top: 0;
      z-index: 2;
   }

   .noise-navbar .dropdown-menu .dropdown-item {
      position: relative;
      z-index: 1;
   }

   .noise-navbar .dropdown-menu .dropdown-menu {
      left: 100%;
      top: 0;
   }

   #noise-header > .noise-searchbar-container .noise-searchbar.search-bar-open {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
      top: 80px;
   }
}


@media (min-width: 992px) and (max-width: 1279px)
{
   .noise-navbar .navbar-nav .nav-item .nav-link {
      padding: 0 5px !important;
      font-size: 11px;
   }
}


/* ====================== *
 * ## Extra Large (XL) ##
 *
 * @min-width: 1200px;
 * ====================== */

@media (max-width: 1200px)
{
}

@media (min-height: 767px) {
   .navbar-toggler .navbar-toggler-icon {
      height: 1.5em;
   }

   .navbar-toggler {
      padding: inherit;
   }
}


/* ============== *
 * ## Combined ##
 * ============== */


@media (min-width: 576px) and (max-width: 1199px)
{
}


/* ================ *
 * ## Additional ##
 * ================ */

@media (min-width: 1921px)
{
   .noise-navbar .navbar-nav .nav-item .nav-link { font-size: 20px; }
}