/* ----------------------------------------------------------------------------------------------------------------
#nav-secondary
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper #nav-secondary
{
	margin: 8px 0 0 0; /* LOGLOL was margin: 26px 0 0 0 */
	float: left;
	clear: both;
	width: 100%;
}
#mainWrapper #nav-secondary h3
{
	display: none;
}
#mainWrapper #nav-secondary ul
{
	list-style: none;
	float: none; /* NAVVY was left */
	margin: 0;
	padding: 0;
	width: 100%;
	/* FEB2022 sticky nav 
	position: fixed;
	z-index: 500;*/
}
#mainWrapper #nav-secondary ul li
{
	float: left;
	line-height: normal;
	padding: 0;
	margin: 0;
	width: auto; /* NAVVY was 16.6666% */
	position: relative; /* JAN2022: added for drop downs absolute positions */
}


	/* ----------------------------------------------------------------------------------------------------------------
	hide gut ter clea ning from desktop but show on mobile
	------------------------------------------------------------------------------------------------------------------- */
	#mainWrapper #nav-secondary ul li.dark-blue
	{
		display: none;
	}
	@media screen and (max-width:1010px)
	{
		#mainWrapper #nav-secondary ul li.dark-blue
		{
			display: block;
		}
	}


#mainWrapper #nav-secondary ul li a
{
	font-size: 16px;
	font-weight: normal;
	font-weight: 500; /* FONTY was 400 */
	text-decoration: none;
	display: block;
	padding: 17px 25px 17px 14px; /* NAVVY2 - changed right padding was 14px - NAVVY was 17px 0 */
	box-sizing: border-box; /* NAVVY2 - added this */
	text-align: left; /* FONTY was center */
	width: 100%; /* NAVVY was 98% */
	margin: 0; /* NAVVY was 0 2% 0 0 */
	color: #000;
	line-height: normal;
}
/* NAVVY2 - added this to reduce nav spacing on smaller desktop screens */
@media screen and (max-width:1245px)
{
	#mainWrapper #nav-secondary ul li a
	{
		padding-right: 14px;
	}
}

/* NAVVY added this to fix bad layout on last item */
@media screen and (max-width:1180px)
{
	#mainWrapper #nav-secondary > ul > li > a
	{
		max-width: 162px; /* NAVVY2 was 135px before box-sizing: border-box change */
	}
}
/* NAVVY added this */
@media screen and (max-width:1010px)
{
	#mainWrapper #nav-secondary > ul > li > a
	{
		max-width: none;
	}
}

	#mainWrapper #nav-secondary ul li ul li a
	{
		font-weight: 400; /* FONTY added this rule */	
	}
#mainWrapper #nav-secondary ul li.current_page_item > a,
#mainWrapper #nav-secondary ul li.current_page_item > a:hover,
#mainWrapper #nav-secondary ul li.current-page-ancestor > a,
#mainWrapper #nav-secondary ul li.current-page-ancestor > a:hover
{
	color: #ec008c; /* DEFAULT and pink theme */
}
	#mainWrapper #nav-secondary ul li.current_page_item > a
	{
		font-weight: 500; /* FONTY added this rule */
	}
#mainWrapper #nav-secondary ul li a:hover
{
	text-decoration: none; /* FONTY was underline */
}

/* ----------------------------------------------------------------------------------------------------------------
theme colours for above:
------------------------------------------------------------------------------------------------------------------- */
body.lime-green #mainWrapper #nav-secondary ul li.current_page_item > a, body.lime-green #mainWrapper #nav-secondary ul li.current-page-ancestor > a { color: #a3b037; }
	
body.sky-blue #mainWrapper #nav-secondary ul li.current_page_item > a, body.sky-blue #mainWrapper #nav-secondary ul li.current-page-ancestor > a { color: #de5b27; }

body.navy-blue #mainWrapper #nav-secondary ul li.current_page_item > a, body.navy-blue #mainWrapper #nav-secondary ul li.current-page-ancestor > a { color: #1393d1; }
	
body.dark-green #mainWrapper #nav-secondary ul li.current_page_item > a, body.dark-green #mainWrapper #nav-secondary ul li.current-page-ancestor > a { color: #4ba046; }
		
body.purple #mainWrapper #nav-secondary ul li.current_page_item > a, body.purple #mainWrapper #nav-secondary ul li.current-page-ancestor > a { color: #732d84; }


/* ----------------------------------------------------------------------------------------------------------------
Apply theme colours to hovered links (main and sub)
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper #nav-secondary ul li.pink a:hover { color: #e6007e; }
#mainWrapper #nav-secondary ul li.lime-green a:hover { color: #a0b100; }
#mainWrapper #nav-secondary ul li.sky-blue a:hover { color: #de5b27; }
#mainWrapper #nav-secondary ul li.navy-blue a:hover { color: #1393d1; }
#mainWrapper #nav-secondary ul li.dark-green a:hover { color: #4ba046; }
#mainWrapper #nav-secondary ul li.purple a:hover { color: #582583; }


/* ----------------------------------------------------------------------------------------------------------------
DESKTOP ONLY drop down arrows
------------------------------------------------------------------------------------------------------------------- */
.menu-item-has-children .nav-down-arrow,
.nav-down-arrow
{
	background: transparent url(images/new-2022/nav/nav-down-arrow.gif) no-repeat 100% 0 !important;
	background-size: 14px 14px !important;
	padding-right: 24px;
}

.nav-down-arrow,
#nav-main .nav-down-arrow,
#nav-secondary ul li ul li .nav-down-arrow
/*#nav-main .menu-item-has-children .nav-down-arrow,
ul li.menu-item-has-children ul li .nav-down-arrow*/
{
	padding-right: 0;
	background-image: none !important;
}
@media screen and (max-width:1010px)
{
	#nav-main .nav-down-arrow,
	.nav-down-arrow,
	#nav-main ul li.mega-menu ul li.menu-item-has-children > a span /* MEGA2025 */
	{
		display: block;
		border-bottom: #d6d6d6 solid 1px;
		padding-bottom: 13px; /* BOTTOM_PADDING_LINKED */
		
		/* prevent wrapping on tiny screens: */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
		/* hide bottom border on sub menus: */
		#nav-main li:last-child .nav-down-arrow
		{
			border-bottom: #fff solid 1px;
		}
			#nav-main .sub-menu li .nav-down-arrow
			{
				border-bottom: #d6d6d6 solid 1px;
			}
				#nav-secondary .sub-menu li:last-child .nav-down-arrow,
				#nav-main .sub-menu li:last-child .nav-down-arrow
				{
					border-bottom: #fff solid 1px;
				}

	/* HUGE MESS TO FIX IDEALLY! */
	#nav-main .menu-item-has-children .nav-down-arrow,
	.menu-item-has-children .nav-down-arrow,
	.nav-down-arrow,
	#nav-main .nav-down-arrow,
	#nav-secondary ul li ul li .nav-down-arrow
	{
		background-image: url(images/new-2022/nav/hamburger-menu-arrows-final3.gif) !important;
		background-position: 100% 0 !important;
		background-size: 10px 269px !important; /* 35px 940px */
	}
	
	/* LEFT_PADDING_LINKED */
	.sub-menu .nav-down-arrow
	{
		padding-left: 32px !important;
	}
	#nav-main .clone-parent-link .nav-down-arrow
	{
		padding-left: 0 !important;		
	}
		/* NOV2024 - added this to hopefully fix left padding cancelled issue due to new drop down. */
		#nav-main ul ul .clone-parent-link .nav-down-arrow
		{
			padding-left: 32px !important;		
		}
}


/* ----------------------------------------------------------------------------------------------------------------
DROPDOWNS DESKTOP #nav-secondary
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper #nav-secondary ul ul
{
	display: none;
	
	/*
	visibility: hidden;
	opacity: 0;*/
	
	background: #fff;
	padding: 0;
	/* NAVVY REMOVED THIS box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px; */
	width: 220px; /* FEB2022NB: changed this from min-width to width, because min-width causes minor glitch on drop down anim */
	position: absolute;
	z-index: 9999;
	
	left: 0; /* NAVVY was 10px and BEFORE THEN FONTY was 35px */
}

/* NAVVY placed the following in media query */
@media screen and (max-width:1320px)
{
	/* NAVVY: the following was :last-child, but problem is that is a hidden item. So instead need to target the "purple" item */
	#mainWrapper #nav-secondary ul li.purple ul
	{
		left: auto;
		right: 15px;
	}
}

	
/* "YIKES"! THIS BLOCK MOVED TO BOTTOM! */


#mainWrapper #nav-secondary ul ul li
{
	width: 100%;
	list-style: none;
	float: left;
	clear: both;
	padding: 0;
}
#mainWrapper #nav-secondary ul ul li a
{
	text-align: left;
	padding: 11px 17px; /* NAVVY was 11px 20px */
	color: #6b6b6b;
	box-sizing: border-box; /* JAN2022 fixed drop down width issues */
}
#mainWrapper #nav-secondary ul ul li a span
{
	padding-right: 0; /* cancel on drop downs */
}


/* "> >" is CRUCIAL. See next rules for more */
#mainWrapper #nav-secondary ul > li:hover > ul
{
	display: block;
}
/* CANCEL ABOVE ON MOBILE: */
@media screen and (max-width:1010px)
{
	#mainWrapper #nav-secondary ul > li:hover > ul
	{
		display: none;
	}	
}


/* ----------------------------------------------------------------------------------------------------------------
MOBILE single purpose CSS for both nav-main and nav-secondary on mobile only:
------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1010px)
{
	/* CANCEL OUT DESKTOP CSS: */
	#header a#logo
	{
		display: none !important;
	}
	
	#nav-main,
	#nav-secondary
	{
		float: none !important;
		margin: 0 !important;
		width: 100% !important;
	}
	/* END CANCEL DESKTOP */
	
	a#menu-toggle-small-screens { display: block; }
	
	a#menu-toggle-small-screens 
	{
		padding: 0;
		margin: 0;
		height: 44px;
		width: 76px;
		display: block;
		font-size: 14px;
		text-transform: uppercase;
		text-decoration: none;
		color: #000;
		float: right;
	}
	a#menu-toggle-small-screens span
	{
		margin-right: 0; /* was 40px */
		white-space: nowrap;
		display: block;
		margin-top: 20px;
	}
	a#menu-toggle-small-screens:hover { }
	
	.border-menu { position: relative; padding-left: 1.25em; }
	
	.border-menu:before 
	{
	  content: "";
	  position: absolute;
	  top: 18px;
	  right: 16px; /* was 12px */
	  width: 22px; /* was 22px */
	  height: 3px;
	  border-top: 9px double #000;
	  border-bottom: 3px solid #000;
	}
	
	
	
	/* ----------------------------------------------------------------------------------------------------------------
	FEB2022 #header-inner for new SLIDING_MENU - this is the div that will be moved left or right using JS
	------------------------------------------------------------------------------------------------------------------- */
	#header-inner
	{
		max-width: none;
		min-width: inherit;
		width: 100% !important; /* FEB2022 final must be 100%, but use 50% for easier testing */
		margin: 0% 0% 0% 0%; /* TODO set in JS, e.g. 0% 0% 0% -20% */
		position: relative; /* FEB2022 added to house sub menus */
	}
		
	
	/* ----------------------------------------------------------------------------------------------------------------
	mobile popout nav
	------------------------------------------------------------------------------------------------------------------- */
	#header
	{
		display: none; /* FORCE_SLIDE_MENU_OPEN FEB2022 SLIDING_MENU set back to none */
		z-index: 9995; /* was 9999 */
		padding: 0;		
		background: #666;
		background: rgba(0, 0, 0, 0.95);
		float: none;
		font-size: 85%;
		position: fixed;
		margin: 0 0 0 0;
		height: 100%;
		width: 100% !important;
		left: 0;
		top: 44px;
		overflow: auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	#header.responsive
	{
		display: block;
	}
	
	#mainWrapper .topnav ul.menu
	{		
		margin: 0;
		padding: 0;
		width: 100%;
		float: left;
		clear: both;
	}
		#mainWrapper .topnav #nav-main ul.menu
		{
			padding: 0 0 100px 0; /* FEB2022 was 0 0 300px 0 */
		}
	
	#mainWrapper .topnav ul.menu li
	{
		display: block !important;
		width: 100% !important;
		float: left !important;
		clear: both !important;
		margin: 0 !important;
		position: static !important; /* SLIDING_MENU was relative */
	}
	
	/* ----------------------------------------------------------------------------------------------------------------
	top links
	------------------------------------------------------------------------------------------------------------------- */
	#mainWrapper .topnav ul.menu li a
	{
		box-sizing: border-box;
		width: 100% !important; 
		padding: 13px 15px 0 15px !important; /* BOTTOM_PADDING_LINKED */
		
		background: #fff !important;
		text-align: left !important;
		white-space: normal !important;
		font-size: 13px !important;
		color: #232323 !important;
		margin: 0 !important;
		font-weight: normal !important;
		opacity: 1 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		border: 0 !important;
		cursor: pointer !important;
		line-height: normal;
	}	
	
	
	/* ----------------------------------------------------------------------------------------------------------------
	hamburger menu icons
	------------------------------------------------------------------------------------------------------------------- */		
	#mainWrapper .topnav ul.menu li.pink > a,
	#mainWrapper .topnav ul.menu li.lime-green > a,
	#mainWrapper .topnav ul.menu li.sky-blue > a,
	#mainWrapper .topnav ul.menu li.navy-blue > a,
	#mainWrapper .topnav ul.menu li.purple > a,
	#mainWrapper .topnav ul.menu li.dark-green > a,
	#mainWrapper .topnav ul.menu li.dark-blue > a
	{
		background: #fff url(images/new-2022/nav/hamburger-menu-icons.gif) no-repeat 15px 7px !important;
		background-size: 27px 275px !important; /* 54px 550px */
	}
		#mainWrapper .topnav ul.menu li.pink > a span,
		#mainWrapper .topnav ul.menu li.lime-green > a span,
		#mainWrapper .topnav ul.menu li.sky-blue > a span,
		#mainWrapper .topnav ul.menu li.navy-blue > a span,
		#mainWrapper .topnav ul.menu li.purple > a span,
		#mainWrapper .topnav ul.menu li.dark-green > a span,
		#mainWrapper .topnav ul.menu li.dark-blue > a span
		{
			padding-left: 32px !important; /* LEFT_PADDING_LINKED */
		}

	
	/* ----------------------------------------------------------------------------------------------------------------
	specific icons
	------------------------------------------------------------------------------------------------------------------- */	
	#mainWrapper .topnav ul.menu li.pink > a { background-position: 15px 7px !important;	}
	#mainWrapper .topnav ul.menu li.lime-green > a { background-position: 15px -30px !important; }
	#mainWrapper .topnav ul.menu li.sky-blue > a { background-position: 15px -67px !important; }
	#mainWrapper .topnav ul.menu li.navy-blue > a { background-position: 15px -104px !important; }
	#mainWrapper .topnav ul.menu li.dark-green > a { background-position: 15px -142px !important; }
	#mainWrapper .topnav ul.menu li.purple > a { background-position: 15px -179px !important; }
	#mainWrapper .topnav ul.menu li.dark-blue > a { background-position: 15px -215px !important; }

			
	/* ----------------------------------------------------------------------------------------------------------------
	specific arrows
	------------------------------------------------------------------------------------------------------------------- */	
	#mainWrapper .topnav ul.menu li.pink a span { background-position: 100% -63px !important;	}
	#mainWrapper .topnav ul.menu li.lime-green a span { background-position: 100% -95px !important; }
	#mainWrapper .topnav ul.menu li.sky-blue a span { background-position: 100% -126px !important; }
	#mainWrapper .topnav ul.menu li.navy-blue a span { background-position: 100% -158px !important; }
	#mainWrapper .topnav ul.menu li.dark-green a span { background-position: 100% -189px !important; }
	#mainWrapper .topnav ul.menu li.purple a span { background-position: 100% -221px !important; }
	#mainWrapper .topnav ul.menu li.dark-blue a span { background-position: 100% -252px !important; }


		#mainWrapper .topnav ul.menu li a:hover
		{
			text-decoration: none !important;
			opacity: 1 !important;
			box-shadow: none !important;
		}


	/* ----------------------------------------------------------------------------------------------------------------
	sub links
	------------------------------------------------------------------------------------------------------------------- */
	#mainWrapper .topnav ul.menu ul li a,
	#mainWrapper .topnav ul.menu ul li a:hover
	{
		width: 100% !important; /* JAN2022 changed from 80% due to new box-sizing border-box fix */
		min-width: inherit;
	}
	#mainWrapper .topnav ul.menu ul
	{
		display: none;
		position: static;
		padding: 0;
		border: 0;
		box-shadow: none;
		width: 100%;
	}
	#mainWrapper .topnav ul.menu ul ul
	{		
		display: none;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
.back-button for SLIDING_MENU FEB2022
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper #header-inner a.back-button
{
	display: none !important;
	background: #eee !important;
	color: #555 !important;
	text-transform: uppercase;
}
	#mainWrapper #header-inner a.back-button span
	{
		border: none !important;
		padding-left: 32px !important; /* LEFT_PADDING_LINKED */
		background-position: 7px -32px !important;
	}
@media screen and (max-width:1010px)
{
	#mainWrapper #header-inner a.back-button
	{
		display: block !important;
	}	
}

/* MEGA2025 - APRIL2025: this class was added via JS to fix new mega menu grid layout problems:  */
.back-button-wrapper
{
	display: none;
}
	@media screen and (max-width:1010px)
	{
		.back-button-wrapper
		{
			display: block;
		}
	}


/* MOVED THIS DOWN FROM "YIKES" LINE! CANCELS ABOVE FOR MOBILE ONLY: */
@media screen and (max-width:1010px)
{
	#mainWrapper #nav-main ul ul, /* SLIDING_MENU CRUCIAL added this! */
	#mainWrapper #nav-main ul ul ul, /* APRIL2025 SLIDING_MENU is this needed?! */

	#mainWrapper #nav-secondary ul ul,
	#mainWrapper #nav-secondary ul li:last-child ul,
	#mainWrapper #nav-secondary ul li.purple ul /* NAVVY added */
	{
		box-shadow: none;
		padding: 0;
		width: 100%;
		min-width: inherit;		
		display: block !important; /* FEB2022 CRUCIAL for new SLIDING_MENU */
		/* FEB2022 new */
		position: absolute !important;
		left: 100% !important;
		right: auto !important;
		top: 0 !important;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
.clone-parent-link
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper .topnav ul.menu li.clone-parent-link
{
	display: none !important;	
}
#mainWrapper .topnav ul.menu li.clone-parent-link a
{
	font-weight: bold !important;
}
@media screen and (max-width:1010px)
{
	#mainWrapper .topnav ul.menu li.clone-parent-link
	{
		display: block !important;	
	}
}