/* ====================== *
 * ## Extra Small (XS) ##
 *
 * @min-width: 0px;
 * @max-width: 575px;
 * ====================== */

@media (max-width: 575px)
{
   .noise-navbar .navbar-brand {
      overflow: hidden;
   }

   .noise-navbar .navbar-brand img {
      padding: 1px;
      padding-left: 10px;
      max-height: 58px;
   }

   .noise-navbar .dropdown-toggle[aria-expanded="false"]::after {
      float: right;
      background: url('config/products/noiselab/images/arrow-right-small.svg');
      display: inline-block;
      background-size: 16px 16px;
      width: 16px;
      height: 16px;
      filter: invert(100%);
      border: 0;
      margin-top: 4px;
      padding-right: 10px;
   }
   
   .noise-navbar .dropdown-toggle[aria-expanded="true"]::after {
      float: right;
      background-image: url('config/products/noiselab/images/arrow-down-small.svg');
      background-size: 16px 16px;
      filter: invert(100%);
      display: inline-block;
      border: 0;
      padding-right: 10px;
      width: 16px;
      height: 16px;
      margin-top: 4px;
   }
}


/* ================== *
 * ## Small (SM) ##
 *
 * @min-width: 576px;
 * @max-width: 768px;
 * ================== */

@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;
      padding-top: 80px;

      transition: height .33s;
   }
   .navbar.mobile-menu-open { height: 100vh; }

   .navbar-logo-container { height: 80px; }

   .noise-navbar {
      top: 80px;
      width: 100%;
   }
   .noise-navbar .navbar-nav { flex-direction: column; }

   .noise-navbar .navbar-nav .nav-item .nav-link {
      border-style: solid;
      border-width: 0 0 1px 0;
      color: #FFF;
      font-size: 17px;
      padding: 10px;
   }

   .noise-navbar .dropdown-menu {
      border-style: solid;
      border-width: 0 0 1px 0;
   }

   .noise-navbar .dropdown-menu .dropdown-item { 
      font-size: 16px;
      padding-bottom: 10px;
      padding-top: 10px;
   }
}


/* =================== *
 * ## 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 { height: 80px; }
   .navbar-logo-container { height: 100%; }

   .noise-navbar {
      left: 50%;
      transform: translate(-50%, 0);
   }

   .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%);
   }

   .noise-navbar .navbar-nav .nav-item:not(.active) { cursor: pointer; }
   .noise-navbar .navbar-nav .nav-item:not(.active):hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }

   .noise-navbar .dropdown-menu {
      position: absolute;
      top: 100%;
   }

   #noise-header > .noise-searchbar-container .noise-searchbar .navbar-search-btn-container {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
   }

   #noise-header > .noise-searchbar-container .noise-searchbar .navbar-search-btn.btn-round .icon #magnifier {
      fill: #FFF;
      stroke: #FFF;
   }

   #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: 1199px)
{
   .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; }
}
