header {
  border-bottom: 1px solid #ccc;
}

header .navbar {
  padding: 0;
}

header .container {
  padding: 0 1rem;
}
.desktop-nav {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  padding-left: 0;
}
.desktop-nav .active {
  border-bottom: 4px solid #0077f9;
  color: #0077f9;
}
.desktop-nav > li {
	display:inline-block;
  text-transform: uppercase;
  line-height: 32px;
}
.desktop-nav li a {
	display:flex;
  align-items: center;
	padding:4px 0;	
  margin: 0 12px;
	color: #242424;
	text-decoration:none;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  position: relative;
}
.desktop-nav a:hover { 
  color: #0077f9;
}

.desktop-nav ul {
  display: none;
  position: relative;
}

/* Display Dropdowns on Hover */
.desktop-nav li:hover > ul {
	display:inherit;
  z-index: 99999;
  background-color: white;
}
	
/* Fisrt Tier Dropdown */
.desktop-nav ul li {
	display:list-item;
	position: relative;
}

.desktop-nav ul li:not(:first-child) {
  border-top: 1px solid #ccc;
}

.sub a {
  padding: 10px 10px !important;
  line-height: 20px;
  text-transform: none;
  letter-spacing: 0;
  transition: all 200ms ease;
  display: inline-block;
  margin: 0 !important;
}
.sub a:hover {
  background: #337ab7;
  color: white;
}

.dropdown-icon {
  width: 15px;
  margin-left: 0.2rem;
}
header {
  font-size: 15px;
}
header .btn {
  border-radius: 100px;
  font-size: 15px;
}

.nav-buttons .btn {
  /* padding: 6px 20px; */
}

.auth-button {}

#logo {
  max-width: 210px;
  width: 100%;
}

.main-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .auth-button {
    border: 1px solid #ccc;
    padding: 10px 24px !important;
    flex-shrink: 0;
  }
  #logo {
    max-width: 120px;
    width: 100%;
  }
  .main-order-button {
    padding: 9px 18px !important;
  }
 
}

@media screen and (min-width: 1200px) {
  .desktop-nav {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: row;
  }

  /* Fisrt Tier Dropdown */
  .desktop-nav ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
  }

  /* Hide Dropdowns by Default */
  .desktop-nav ul {
    display: none;
    position: absolute; 
    margin: 0;
    top: 48px; /* the height of the main .desktop-nav */
    box-shadow: 0 4px 4px rgba(0,0,0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    list-style: none;
    padding-left: 0;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .desktop-nav {
    font-size: 14px;
  }
}