/* Navbar */
.navbar {
	background: #fff;
	padding: 10px 20px;
	display: flex;
	justify-content: start;
	align-items: center;
	position: relative;	
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

.nav-brand{	
	border-bottom: 3px solid transparent;
}

#home{	
	margin-right: 0 !important;
}

.navbar a {
	color: #333;
	text-decoration: none;
	padding: 8px 20px;
	cursor: pointer;
	position: relative;	
	padding-left: 0;
	padding-right: 0;
	margin-right: 60px;
}

.nav-item{
	font-size: 1.1rem;	
	list-style: none !important;
	#font-weight: bold;
}

.nav-link{	
	font-size: 1.1rem;		
	#font-weight: bold;
	border-bottom: 3px solid transparent;
}

.nav-link a{	
	padding-left: 0;
}

.nav-link:hover{	
	#font-size: 1.1rem;	
	#color: #D71820;
	#border-bottom: 3px solid  #D71820;
}

.nav-link.active {	
	font-size: 1.1rem;	
	color: #D71820;
	border-bottom: 3px solid  #D71820;
}

.menu-container {
	#position: relative; /* This will set menu aligned with the left edge of the navigation item that triggers it*/
	display: inline-block;
}
.menu-btn {
	font-size: 18px !important;
	color: #333;
	border: none;
	cursor: pointer;	
	list-style: none !important;
	font-weight: bold;
}
.menu-btn a{
	text-decoration: none;
	background-color: transparent;	
}

.menu-btn ul li a{
	font-size: bold;			
	list-style: none;	
	list-style: none;
}
.mega-menu {
	display: none ;
	position: absolute;
	//position: relative;
	top: 86%; /*mega menu just underneath the top-level items, so when you move your mouse downward you are already in the megamenu, keeping it on-screen.*/
	left: 0;
	width: 100%;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	display: none;	
	background: linear-gradient(to right, #f8f8f8, #fff);
}
.mega-container{
	display: flex;		
	background-color: #fff;
	padding: 0;
}

.menu-link.active {	
	font-size: 0.85rem;
	font-weight: bold;	
}

.column {
	flex: 1;
	padding: 10px;
}
.column h3 {
	margin-bottom: 10px;
	font-size: .85rem;
	font-weight: bold;
	color: #333;
	border-bottom: 1px solid #eaeaea;
	width: 100%;
	padding-bottom: 7px;
}

.column h3 a:hover {
	color: #D71820;
}
.column ul {
	list-style: none;
	font-size: .85rem;
}
.column ul li {
	margin: 5px 0;
}
.column ul li a {
	text-decoration: none;
	color: #555;
	transition: 0.2s;			
	list-style: none;
	padding-left: 0px;
}
.column ul li a:hover {
	color: #D71820;
}

.sub-cat{
	flex: 0 0 25%; /* 20% width */
	background-color: #f8f8f8;
}

.sub-cat ul{
	padding-left: 0px !important;
}

.sub-cat ul li {
    padding-right: 20px; /* Create space for the arrow */
	 padding-bottom: 10px; /* Create space for the arrow */
    position: relative; /* Needed for absolute positioning of the arrow */
}

.sub-cat ul li:hover{	
	font-weight: bold;
}

.sub-cat ul li:hover::after {
    content: '\276F';
    position: absolute; /* Use absolute positioning since the parent li has relative */
    right: 0;     /* Position at the very edge of the padding */
    top: 50%;    /* vertically center */
    transform: translateY(-50%); /* vertically center */
    color: #333;
	font-size: 0.75rem;
}


.prod-cat{
	flex: 0 0 85%; /* 85% width */
    display: flex;
}

.prod-cat ul {
    padding-left: 0px; /* Create space for the arrow */
}

.prod-cat .column:last-child {
    flex: .25; /* Make the last column wider */
}

ul.dropdown-menu {
    display: block;    
}

/* Mobile Menu Adjustments */
@media (max-width: 992px) {
	.mega-menu {
		position: static;
		width: 100%;
		display: none;
	}

	.nav-item.show .mega-menu {
		display: block;
	}
}