/* EDITED TO USE VARIABLES - updated 08/25/20
============================================================================= */


/*For template 03 - added to color responsive nav bar icon (white) = rgba(255,255,255, 0.8) */
.navbar-toggler-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	}


/* ============================================================================= */
/* ============================ SIDE-NAV - STYLE ONLY ========================== */
/*added to color responsive nav bar color*/
#main_side_nav.navbar  { background-color: #FFF; }
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
	#main_side_nav.navbar  { background-color: var(--navbar-primaryColor); }
}

/* ======= GENERAL NAV items =======*/
#main_side_nav {
	font-family: var(--siteFont-nav);
	line-height: .095em;
	font-size: 14px;
	font-weight: 500;
}

#main_side_nav a {
	/*color: var(--navbar-primaryColor-text);
	background-color: var(--navbar-primaryColor);*/
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	margin:5px 0px;
	padding: 10px;
}

/*individual (top level) li color (change for button look if needed)*/
#main_side_nav a.nav_lvl_1 { 
	color: var(--navbar-primaryColor-text);
	background-color: var(--navbar-primaryColor);
} 
#main_side_nav a.nav_lvl_1:hover { 
	color: var(--navbar-secondaryColor-text);
	background-color: var(--navbar-secondaryColor);
} 
	

/* ========= SECOND level items ========= */
#main_side_nav a.nav_lvl_2 { 
	color: var(--navbar-primaryColor-text);
	background-color: var(--navbar-primaryColor);
}
#main_side_nav a.nav_lvl_2:hover { 
	color: var(--navbar-secondaryColor-text);
	background-color: var(--navbar-secondaryColor);
} 

/* ========= THIRD level items ========= */
#main_side_nav a.nav_lvl_3 {
	color: var(--navbar-primaryColor-text);
	background-color: var(--navbar-primaryColor);
	text-transform: capitalize;
	font-style: italic;
	padding: 8px 22px; /* PADDING for third level li */
} 
#main_side_nav a.nav_lvl_3:hover { 
	color: var(--navbar-secondaryColor-text);
	background-color: var(--navbar-secondaryColor);
} 

/* ========= CURRENT ITEM color for ALL level items ========= */
#main_side_nav a.current_page {
	color: var(--navbar-secondaryColor-text);
	background-color: var(--navbar-secondaryColor);
}
/* ============================ END SIDE-NAV - STYLE ONLY ====================== */
/* ============================================================================= */





/* ============================================================================= */
/* ========================= HORIZONTAL-NAV - STYLE ONLY ======================= */

/* ======= GENERAL NAV items  =======*/
#main_top_nav {
	background-color: var(--navbar-primaryColor); /*full navbar color */
	font-family: var(--siteFont-nav);
	text-align: left; /*full navbar alignment, change to "right" to align all to right side */
	line-height: .095em;
	font-size: 14px;
	font-weight: 500;
	padding: 0;
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	#main_top_nav { padding: .5rem 1rem; }
}


#main_top_nav ul {
	background-color: transparent; /*do not change, takes same color of full navbar */
	padding: 0 35px 0 0;
}

/* ======== FIRST level items ======== */		
#main_top_nav ul li a {
	color: var(--navbar-primaryColor-text); /* FONT (top level) color*/
	letter-spacing: 0.08em;
	margin-right: 7px;
	padding: 18px 12px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
}

#main_top_nav .nav_lvl_1:first-child a { margin-left: 15px !important; }
#main_top_nav .nav_lvl_1:last-child a { margin-right: 0px !important; }

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	#main_top_nav ul li a { padding: 12px 12px; }
	#main_top_nav .nav_lvl_1:first-child a { margin-left: 0 !important; }
}

/*individual (top level) li color (change for button look if needed)*/
#main_top_nav a.nav_lvl_1 { background-color: transparent; } 
	
#main_top_nav a.nav_lvl_1:hover { 
	color: var(--navbar-secondaryColor-text); 
	background-color: var(--navbar-secondaryColor);
} 

/* ========= SECOND level items ========= */	
#main_top_nav ul ul li {
	margin-left: 0px;
	margin-right: 0px;
	letter-spacing: .03em;
	min-width: 125px;
	text-align: left;
}
#main_top_nav a.nav_lvl_2 {
	color: var(--navbar-primaryColor-text); 
	background-color: var(--navbar-primaryColor);
	padding: 12px 12px; /* PADDING for second level li */
}
#main_top_nav a.nav_lvl_2:hover {  
	color: var(--navbar-secondaryColor-text); 
	background-color: var(--navbar-secondaryColor);
} 
	
	
/* ========= THIRD level items ========= */
#main_top_nav a.nav_lvl_3 {
	color: var(--navbar-primaryColor-text); 
	background-color: var(--navbar-primaryColor);
	text-transform: capitalize;
	font-style: italic;
	padding: 12px 22px; /* PADDING for third level li */
} 
#main_top_nav a.nav_lvl_3:hover { 
	color: var(--navbar-secondaryColor-text); 
	background-color: var(--navbar-secondaryColor);
} 

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
	#main_top_nav a.nav_lvl_2, #main_top_nav a.nav_lvl_3 { padding: 8px 12px; }
}


/* ========= CURRENT ITEM color for ALL level items ========= */
#main_top_nav a.current_page,
#main_top_nav a.current_group {
	color: var(--navbar-secondaryColor-text); 
	background-color: var(--navbar-secondaryColor);
}

/* ========================= END HORIZONTAL-NAV - STYLE ONLY =================== */
/* ============================================================================= */




/* ============================================================================== */
/* ================================ TOP-SPLIT-NAV =============================== */
#split_nav_top {
	font-family: var(--siteFont-nav);
	line-height: .095em;
	font-size: 14px;
	font-weight: 500;
  background-color: var(--navbar-primaryColor); /*full navbar color */
}
#split_nav_top ul{
	margin: 0; /* Do Not Change */
	padding: 0; /* Do Not Change */
	text-align: right; /* Which side the split nav bar starts */
}
#split_nav_top li{
	display: inline; /* Do Not Change */
	list-style-type: none; /* Do Not Change */
	padding: 0 5px; /* Spacing between buttons */
}
#split_nav_top a {
	color: var(--navbar-primaryColor-text); /* FONT color*/
	background-color: var(--navbar-primaryColor);  /* Navigation Button Color */
	display: inline-block; /* Do Not Change */
	padding: 10px 20px; /* Navigation Button Size */
	text-decoration: none; /* Remove underlines */
}
#split_nav_top a:hover {
	background-color:var(--navbar-secondaryColor);  /* Navigation Button Hover Color */
	color: var(--navbar-secondaryColor-text);  /* FONT Hover color*/
	text-decoration: none; /* Remove underlines */
}
/* ================================ END  TOP-SPLIT-NAV =============================== */
/* ============================================================================== */




/* ============================================================================== */
/* ================================ SIDE-SPLIT-NAV ============================== */
#split_nav_side {
	font-family: var(--siteFont-nav);
	line-height: .095em;
	font-size: 14px;
	font-weight: 500;
}
#split_nav_side ul {
	list-style-type: none; /* Do Not Change */
	margin: 0; /* Do Not Change */
}
#split_nav_side li { 
	padding: 1px 0; /* Spacing between buttons */
}
#split_nav_side a { 
	display: block; /* Do Not Change */
	margin: 2px 0px; /* Do Not Change */
	padding: 8px 10px; /* Do Not Change */
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--navbar-primaryColor);
	color: var(--navbar-primaryColor-text);
}
#split_nav_side a:hover { 
	color: var(--navbar-secondaryColor-text); 
	background-color: var(--navbar-secondaryColor);
} 
/* ================================ END SIDE-SPLIT-NAV ============================== */
/* ============================================================================== */