/*----------------------------------------------------------------------
[-----*** TABLE OF CONTENTS ***-----]
1. top-level elements
2. dropdown-toggle element (element that controls the visibility of dropdown-menu)
3. dropdown-menu element (element that houses the dropdown-item elements)
4. dropdown-item element (element that contains the individual items to select from the menu)
5. mega-menu element (contains hierarchies and sub-menu elements)
6. icon-navigation element (contains icon navigation styling used for search, account, and cart)
7. mobile icons
------------------------------------------------------------------------*/
/*	--------------------
1. top-level elements
--------------------*/
.navbar {
	padding-bottom: 0;
}

.header {
	z-index: 1000;
	background-color: #2d2d2d;
	border-bottom: 2px #555555 solid;
}

.header .topbar {
	padding: 8px 0;
}

@media (min-width: 992px) {
	/* Display the dropdown menu when hovering over the dropdown toggle */
	.header .navbar-toggler {
		display: none;
	}
}

@media (max-width: 991px) {
	.header .dropdown {
		border-bottom: 1px #666 solid;
	}

	.navbar-collapse {
		margin-top: -8px;
	}
}

.header .btn-link:focus {
	border: 2px #7c8082 solid !important;
}

.header .btn-link {
	border: 2px transparent solid !important;
}

/*	--------------------
2. dropdown-toggle element (element that controls the visibility of dropdown-menu)
--------------------*/
.header .dropdown-toggle:hover {
	color: #60be66 !important;
}

.header .dropdown:hover .dropdown-toggle {
	color: #3ba142;
}

.header .dropdown-toggle {
	color: #ddd;
	background-color: inherit;
	border: 0;
	padding-bottom: 5px;
	padding-top: 3px;
	padding-left: 17px;
	font-size: 15px;
	font-weight: 425;
}

.header .dropdown-toggle::after {
	font-size: 11px;
	font-weight: normal;
}

/*	--------------------
3. dropdown-menu element (element that houses the dropdown-item elements)
--------------------*/
@media (min-width: 992px) {
	/* Display the dropdown menu when hovering over the dropdown toggle */
	.header .dropdown:hover .dropdown-menu {
		display:block;
	}
}

.header .dropdown-menu {
	top: 93%;
}

/* Give the dropdown menu the same background as the header */
.header .dropdown-menu {
	border-top: 2px #60be66 solid;
	border-bottom: 1px #555555 solid;
	background-color: #2d2d2d;
	padding: 0;
}

/*	--------------------
4. dropdown-item element (element that contains the individual items to select from the menu)
--------------------*/
.header .dropdown-item:hover,
.header .dropdown-item:focus {
	color: #3ba142;
	background-color: #2d2d2d;
}

.header .dropdown-item {
	color: #c5c5c5;
	border-bottom: 1px #555555 solid;
	font-size: 10.5pt;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* --------------------
5. mega-menu element (contains hierarchies and sub-menu elements)
--------------------*/
@media (min-width: 992px) {
	.header .dropdown .mega-menu {
		min-width: 864px;
	}
}
.header .dropdown:hover .dropdown-menu .mega-menu {
	display: flex !important;
}

.header .dropdown .mega-menu {
	display: flex !important;
	flex-wrap: wrap;
}

.header .mega-menu .dropdown-item {
	border: 0;
	padding-left: 0;
	font-size: 10.5pt;
}

.header .mega-menu .sub-menu .dropdown-item {
	border: 0;
	padding-left: 1.15rem;
}

.header h3.mega-menu-heading
{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
    padding-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 1px solid #666;
    color: #ccc;
  }

.header .sub-menu h3.mega-menu-heading {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
    padding-bottom: 0;
    text-transform: uppercase;
    border-bottom: none;
    color: #ccc;
}

.header .sub-menu .margin-bottom-10 {
    margin-bottom: 10px !important;
}

/* --------------------
6. icon-navigation element (contains icon navigation styling used for search, account, and cart)
--------------------*/
.header .icon-navigation .dropdown {
	padding: 0 0.5rem;
}

/* Don't show the dropdown arrow for the icons */
.header .icon-navigation .dropdown-toggle::after {
	display: none;
}

/* Line up the cart on the right */
.header .icon-navigation .text-right {
	padding-right: 0;
}
.header .icon-navigation .text-right a {
	padding-right: 0;
}

/* Move cart dropdown-menu to the left, so it doesn't fall off screen */
.header .icon-navigation .text-right .dropdown-menu {
	left: -10px;
}

.header .icon-navigation #search-form {
	min-width: 190px;
}

.header .icon-navigation .input-group .form-control {
	color: #bbb;
	background: #555;
}

@media (max-width: 991px) {
	/* Display the dropdown menu when hovering over the dropdown toggle */
	.header .icon-navigation {
		display: none;
	}
}

/* --------------------
7. mobile icons
--------------------*/
.header .topbar ul.loginbar {
	margin-top: 10px;
	padding: 0;
}

.header .topbar ul.loginbar > li {
	display: inline;
	list-style: none;
	position: relative;
}

.header .topbar ul.loginbar > li > a {
	color: #7c8082;
	text-decoration: none;
}

.header .navbar-toggler:focus {
	border: 2px #7c8082 solid;
	margin-bottom: 8px;
}

.header .navbar-toggler {
	margin-bottom: 10px;
}