/* ~~~~ Navigation CSS ~~~~ */
/* ~ Shared site navigation ~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */

.hq-nav {
   background: #040404;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
   padding-left: 22px;
   padding-right: 22px;
}

#first {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
   width: auto;
   max-width: none;
}

#second {
   display: flex;
   justify-content: center;
   flex: 1 1 auto;
   min-width: 0;
   overflow: visible;
}

#second .navbar-nav {
   position: static;
   left: 0;
   margin: 0;
   flex-wrap: nowrap;
   width: auto;
   max-width: 100%;
   justify-content: center;
}

#third {
   display: flex;
   justify-content: flex-end;
   flex: 0 0 auto;
   width: auto;
   max-width: none;
}

.hq-nav .container {
   margin-top: 0 !important;
}

.hq-nav .row {
   align-items: center;
}

.hq-nav .navbar-nav .nav-item + .nav-item .nav-link {
   border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hq-nav .nav-link,
.hq-nav .nav-link:link,
.hq-nav .nav-link:visited {
   color: #bfbfbf;
   font-weight: 400;
   text-transform: uppercase;
   font-size: 15px;
   font-family: oswald, roboto, sans-serif;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   margin-right: 0;
   padding: 0 14px;
   letter-spacing: 0;
   background: #040404;
}

.hq-nav .nav-link:hover,
.hq-nav .nav-link:focus,
.hq-nav .navbar-dark .navbar-nav .nav-link:hover,
.hq-nav .navbar-dark .navbar-nav .nav-link:focus,
.hq-nav .navbar-dark .navbar-nav .show > .nav-link {
   color: #fff;
   background: rgba(255, 255, 255, 0.03);
}

.hq-nav .navbar-dark .navbar-nav .nav-link,
.hq-nav .navbar-dark .navbar-nav .nav-link:focus {
   color: #bfbfbf;
}

#second .navbar-nav > .nav-item > .nav-link {
   min-width: 92px;
   flex: 0 1 92px;
}

#second .navbar-nav > .nav-item.dropdown > .nav-link {
   min-width: 92px;
   flex: 0 1 92px;
}

.clan {
   color: #bfbfbf !important;
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   min-height: 54px;
   padding: 0 10px 0 0;
   background: transparent !important;
}

.clan:hover,
.clan:focus {
   color: #18ff0a !important;
   background: transparent !important;
}

@media only screen and (max-width: 991px) {
   #first {
      order: 3;
      max-width: 300px;
   }

   #second {
      display: flex;
      justify-content: center;
      flex: 1 1 auto;
      min-width: 0;
      overflow: visible;
   }

   #second .navbar-nav {
      position: static;
      left: 0;
      margin: 0;
      flex-wrap: nowrap;
      width: auto;
      max-width: 100%;
      justify-content: center;
   }
}

@media only screen and (max-width: 768px) {
   #first {
      order: 3;
   }

   #second {
      display: flex;
      justify-content: center;
      flex: 1 1 auto;
      min-width: 0;
      overflow: visible;
   }

   #third {
      display: flex;
      justify-content: flex-end;
      flex: 0 0 auto;
      width: auto;
      max-width: none;
   }
}

.user-menu__button:hover {
   background-color: #161616 !important;
   border-color: #161616 !important;
}

.hq-nav .dropdown-menu {
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 0;
   padding: 6px 0;
}

.hq-nav .dropdown-item,
.hq-nav .dropdown-item:link,
.hq-nav .dropdown-item:visited,
.hq-nav .dropdown-members {
   color: #bfbfbf;
   font-family: oswald, roboto, sans-serif;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: 0;
   text-transform: uppercase;
}

.hq-nav .dropdown-item {
   padding: 8px 16px;
   background: transparent;
}

.hq-nav .dropdown-item:hover,
.hq-nav .dropdown-item:focus {
   color: #fff;
   background: rgba(255, 255, 255, 0.03);
}