/* ****************************************
Nav style file.
All instructions related to nav.
**************************************** */
.foo {
	display: none !important;
}
/* ********************
Nav header
******************** */
/* Nav header */
/* Notes: Position fixed is applied as it's the main */
#nav-header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 100;
}
@media (max-width: 568px) {
	.js__nav_lock #nav-header {
		height:100%;
	}
}

/* ********************
Nav container
******************** */
/* Nav container */
/* Notes: Inner nav container.
 		  The z-index is set to range of 8000 to 9000.
		  It leave another range of extra layer for anything else that need upper layer like modal.
		  Margins are also responsive on desktop to get the maximum width of available space. */
#nav-header-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	z-index: 8000;
	position: relative;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Nav container */
		#nav-header-inner {
			flex-direction: row; /* Rewrite */
			height: unset; /* Rewrite */
			padding-left: var(--desktop-gap-container);
			padding-right: var(--desktop-gap-container);
		}
	}

/* ********************
Wordpress admin top nav bar
******************** */
/* Under 600px */
/* Wordpress admin specific breakpoint WITH js don't force it so that JS can calculate freely */
body.logged-in #nav-header-inner {
	top: 46px;
}
	/* Between 601 and 782px */
	/* Wordpress admin specific breakpoint */
	@media (min-width: 601px) and (max-width: 782px)
	{
		/* Force to be x from top since at some breakpoint JS is implicated */
		body.logged-in #nav-header-inner {
			top: 46px !important;
		}
	}
		/* Over 783px */
		/* Wordpress admin specific breakpoint */
		@media (min-width: 783px)
		{
			/* Force to be x from top since at some breakpoint JS is implicated */
			body.logged-in #nav-header-inner {
				top: 32px !important;
			}
		}

/* Height class when mobile menu is opening */
#nav-header-inner.js__nav-height {
	min-height: 100%;
	max-height: 100%;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Height class not needed on desktop if opened on mobile so unset it */
		#nav-header-inner.js__nav-height {
			height: unset;
		}
	}

/* Lock the body by removing the scrollbar and let the overflow auto inside the .nav_inner container */
.js__nav_lock {
	overflow: hidden;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Never lock the body on desktop if it is by the mobile */
		.js__nav_lock {
			overflow: unset;
		}
	}

/* Inner container */
/* This is inside the nav and wrap the nav menu content.
Everything that must be hidden is inside this and toggled on mobile by the hamburger and reversed on desktop */
.nav_inner {
    display: none;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding-left: var(--mobile-gap-container);
	padding-right: var(--mobile-gap-container);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_inner {
			display: flex; /* Rewrite */
			flex-direction: row; /* Rewrite */
			height: unset; /* Rewrite */
			overflow: unset; /* Rewrite */
			padding-left: unset; /* Rewrite */
			padding-right: unset; /* Rewrite */
		}
	}

/* ********************
Mobile open/close anim
******************** */
/* Collapse effect only on deektop */
#nav-header-inner.js_collapsed,
#nav-header-inner.js__toggled {
	background-color: var(--color-gray);
	transition: background-color 300ms ease;
}

/* Collapse mobile/desktop & toggler mobile effect has the same effect to reduce code amount */
#nav-header-inner:not(.js_collapsed),
#nav-header-inner:not(.js__toggled) {
	transition: background-color 300ms ease;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu mobile is toggled but not collapsed */
		#nav-header-inner:not(.js_collapsed).js__toggled {
			background-color: unset;
			transition: unset;
		}
	}

/* ****************************************
Brand -> Logo, hamburger and search mobile
**************************************** */
/* Brand -> container */
.nav_brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: var(--mobile-gap-container);
	padding-right: var(--mobile-gap-container);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Brand -> container */
		.nav_brand {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: unset; /* Rewrite */
			padding-right: unset; /* Rewrite */
		}
	}

/* Brand -> Logo link */
.nav_logo {
	/* Force pull everything to right */
	margin-right: auto;
}

/* Brand -> Logo img */
/* Notes: Menu height is based/root on these instructions */
.nav_logo img {
	max-width: 10rem;
	height: auto;
	margin-top: 1.2rem;
	margin-bottom: 1.2rem;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Brand -> Logo img */
		/* Notes: Menu height is based/root on these instructions */
		.nav_logo img {
			max-width: unset; /* Rewrite */
			height: calc(2rem + 1.5vw); /* Rewrite */
			margin-top: 1.6rem; /* Rewrite */
			margin-bottom: 1.6rem; /* Rewrite */
			margin-right: 1rem;

			/* Logo close */
			transition: all 0.4s;
		}

		/* Brand -> Logo collapse triggered by js */
		.nav_logo img.js__nav-collapse {
			height: calc(1rem + 1.5vw);
			margin-top: 1rem;
			margin-bottom: 1rem;

			/* Logo open */
			transition: all 0.4s;
		}
	}

/* Brand -> Search mobile svg */
.nav_search-mobile {
	fill: var(--base-color);
	margin-right: 1.2rem;
	width: 1.4rem;
	cursor: pointer;
	transition: fill 100ms linear;
}

/* Brand -> Search mobile svg:hover */
.nav_search-mobile:hover {
	fill: var(--color-gray-light);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Brand -> Search mobile svg */
		.nav_search-mobile {
			display: none;
		}
	}

/* Brand -> Hamburger container */
/* Notes: Toggler mobile for menu. */
.nav_hamburger {
	display: flex;
	align-items: center;
	cursor: pointer;
	fill: var(--base-color);
	transition: fill 100ms linear;
}

/* Brand -> Search mobile svg:hover */
.nav_hamburger:hover {
	fill: var(--color-gray-light);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Brand -> Hamburger container */
		.nav_hamburger {
			display: none; /* Rewrite */
		}
	}

/* Brand -> Hamburger-close svg base size */
.nav_hamburger svg {
	width: 1.4rem;
}

.nav_hamburger svg:last-child {
	width: 1.4rem;
	height: 1.2rem;
}

/* Brand -> Hamburger-close X svg is always hidden by default and afterward js animated */
.nav_hamburger svg:last-child {
	display: none;
}

/* Brand -> Holding menu container */
/* Notes: Menu tree dots appear only if items overflow.
		  This is always hidden by default but reversed by the js in case of overflow.
		  Check js file. */
.nav_holding
{
	display: none;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Brand -> Holding menu container */
		.nav_holding
		{
			align-items: center;
			position: relative;
			height: 100%;
		}

		/* Brand -> Holding menu container link */
		.nav_holding > a
		{
			display: flex;
			align-items: center;
			padding-left: 1rem;
			padding-right: 4rem;
		}

		/* Brand -> Holding menu svg with anim */
		.nav_holding > a svg
		{
			fill: var(--base-color);
			width: 1.6rem;
			height: 1.6rem;
			clip-rule: evenodd;
			fill-rule: evenodd;
		}

		.nav_holding.animate > a svg {
			animation: heartbeat 0.75s 1;
		}

		/* Brand -> Holding menu svg hover */
		.nav_holding > a.open svg
		{
			clip-rule: initial;
			fill-rule: initial;
		}

		/* Brand -> Holding menu sub container */
		#nav-holding-content
		{
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			white-space: nowrap;
			border-radius: 2px;
			z-index: 9999;
		}

		/* Brand -> Holding menu ul */
		#nav-holding-content > ul
		{
			background-color: var(--color-gray);
			border-radius: 1px;
		}

		/* Brand -> Holding menu ul li */
		#nav-holding-content > ul > li
		{
			position: relative;
		}

		/* Brand -> Holding menu ul li a also cover sub sub a*/
		#nav-holding-content > ul > li a
		{
			display: flex;
			padding-bottom: 0.2rem; /* Rewrite */
			padding-top: 0.2rem; /* Rewrite */
			padding-left: calc(0.1rem + 1.5vw);
			padding-right: calc(0.8rem + 1.5vw);
			transition: color 100ms linear;
		}

		/* Brand -> Holding menu ul li a span:first-child */
		#nav-holding-content > ul > li a span:first-child
		{
			flex: 1;
		}

		/* Brand -> Holding menu ul li a svg */
		#nav-holding-content > ul > li a svg
		{
			width: 0.75rem;
			height: auto;
			margin-left: 1rem;
			fill: var(--base-color);
			transition: fill 100ms linear;
		}

		/* Brand -> Holding menu ul li.open a FIRST ONLY not sub sub */
		#nav-holding-content > ul > li.open > a
		{
			color: var(--color-gray-light);
		}

		/* Brand -> Holding menu ul li a:hover svg FIRST ONLY not sub sub */
		#nav-holding-content > ul > li.open > a svg
		{
			fill: var(--color-gray-light);
		}

		/* Brand -> Holding menu ul li:first-child a */
		#nav-holding-content > ul > li:first-child a
		{
			padding-top: 1rem;
		}

		/* Brand -> Holding menu ul li:last-child a */
		#nav-holding-content > ul > li:last-child a
		{
			padding-bottom: 1rem;
		}

		/* Brand -> Holding menu ul li ul */
		#nav-holding-content > ul > li > ul,
		#nav-holding-content > ul > li > ul > li > ul
		{
			position: absolute;
			display: none;
			top: 0;
			left: 99%;
			background-color: var(--color-gray);
			border-top-right-radius: 1px;
			border-bottom-right-radius: 1px;
			z-index: -1;
		}

		/* Brand -> Holding menu ul li ul.open */
		#nav-holding-content > ul > li > ul.open,
		#nav-holding-content > ul > li > ul > li > ul.open
		{
			animation: slide_to_right_99 600ms 1 cubic-bezier(0.075, 0.82, 0.165, 1);
		}

		/* Brand -> Holding menu ul li ul li a */
		#nav-holding-content > ul > li > ul li a
		{
			padding-bottom: 0.4rem; /* Rewrite */
			padding-top: 0.4rem; /* Rewrite */
			padding-left: calc(0.1rem + 1.5vw);
			padding-right: calc(0.8rem + 1.5vw);
			transition: color 100ms linear;
		}

		/* Brand -> Holding menu ul li ul li a:hover */
		#nav-holding-content > ul > li > ul li a:hover
		{
			color: var(--color-gray-light);
		}

		/* Brand -> Holding menu ul li ul li:first-child a */
		#nav-holding-content > ul > li > ul li:first-child a
		{
			padding-top: 0.9rem;
		}

		/* Brand -> Holding menu ul li ul li:last-child a */
		#nav-holding-content > ul > li > ul li:last-child a
		{
			padding-bottom: 0.9rem;
		}
	}

/* ****************************************
Menu from Wordpress
**************************************** */
/* Menu -> Container */
.nav_left,
.nav_right {
	/* Mobile menu is alway hidden by default on page load and will be replaced by the js slideDown display:flex */
	width: 100%;
	flex-direction: column;
	padding-top: 1rem;
}

/* Menu -> Container */
/* Removal of the padding top if 2 menus follow one another. */
.nav_left + .nav_right {
	padding-top: unset; /* Rewrite */
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Container */
		/* Notes: Grow is ON for menu container */
		.nav_left,
		.nav_right {
			/* Desktop menu is alway flex on page load rather
			   than mobile is alway hidden. */
			width: unset; /* Rewrite - Combined with white-space let the longest text menu to be the max width for all other items. */
			display: flex; /* Rewrite */
			flex-direction: row; /* Rewrite */
			/* align-items: center; */
			padding-top: unset; /* Rewrite */
			white-space: nowrap;
		}

		/* Menu -> Container left */
		.nav_left {
			/* max available space */
			flex-grow: 1;
			justify-content: center;
		}

		/* Menu -> Container right */
		.nav_right {
			justify-content: flex-end;
		}
	}

/* Menu -> Items container */
.nav_left > li,
.nav_right > li {
	border-top: 1px solid var(--color-gray-medium);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Items container */
		.nav_left > li,
		.nav_right > li {
			border-top: unset; /* Rewrite */
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
		}
	}



/* Menu -> Mobile items container last child */
.nav_left > li:last-child,
.nav_right > li:last-child
{
	border-bottom: 1px solid var(--color-gray-medium);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Items container last child */
		.nav_left > li:last-child,
		.nav_right > li:last-child {
			border-bottom: unset; /* Rewrite */
		}
	}

/* Menu -> Items link container */
/* Notes: Only apply on top level items.
          Margins are also responsive to get the maximum width of space available.
		  Flex is for the right carret. */
.nav_left > li > a,
.nav_right > li > a {
	display: flex;
	text-transform: uppercase;
	width: 100%; /* Compatibility */
	padding-bottom: 1.2rem;
	padding-top: 1.2rem;
	font-weight: 700;
	transition: margin-left 100ms ease-in, color 300ms ease-in;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Items link container */
		.nav_left > li > a,
		.nav_right > li > a {
			display: block; /* Rewrite */
			width: unset; /* Rewrite */
			padding-top: 0.6rem; /* Rewrite */
			padding-bottom: 0.6rem; /* Rewrite */
			padding-left: calc(0.1rem + 1.5vw); /* Responsive */
			padding-right: calc(0.1rem + 1.5vw); /* Responsive */
			transition: color 100ms linear, background-color 100ms linear;  /* Rewrite */
		}
	}

/* Menu -> Top level items */
/* Notes: Hover decoration is not applied on mouse leave.
			This way it avoid the mouse leave animation OVER the next new one!
			Also, get the animation focus on the new one rather the one were leaving. */
.nav_left > li > a:hover,
.nav_right > li > a:hover  {
	color: var(--color-gray-light);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Top level items */
		/* Notes: Hover decoration is not applied on mouse leave.
				This way it avoid the mouse leave animation OVER the next new one!
				Also, get the animation focus on the new one rather the one were leaving. */
		/*.nav_left > li:hover > a,
		.nav_left > li > a.open,*/
		.nav_left > li .sub-menu li a:hover,
		/*.nav_left > li.current_page_parent > a,*/
		.nav_left > li.current-menu-item > a
		/* .nav_right > li:hover > a, 
		.nav_right > li > a.open*/ {
			display: block;
			color: var(--color-gray-light)!important; /* Rewrite */
			/*background-color: var(--base-color);*/
			border-radius: 1.4px;
			margin-left: unset; /* Rewrite */
		}

		/* Svg carret need to change */
		.nav_right > li > a svg {
			transition: fill 100ms ease; /* Rewrite */
		}

		/* Svg carret need to change */
		.nav_right > li > a.open svg {
			fill: var(--color-black);
		}
	}

/* Menu -> Item link text */
/* Notes: get max size before the right carret */
.nav_left li > a span.a:first-child,
.nav_right > li > a span.a:first-child {
	flex-grow: 1;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Item link text */
		/* Notes: get max size before the right carret */
		.nav_left  > li > a span.a:first-child,
		.nav_right  > li > a span.a:first-child {
			flex-grow: unset;
		}
	}

/* Menu -> Right carret. Svg container must be flex to align-center perfectly */
.nav_left > li > a span.a:last-child,
.nav_right > li > a span.a:last-child {
	display: flex;
	align-items: center;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Right carret not needed if exist */
		.nav_left  > li > a span.a:nth-child(2),
		.nav_right  > li > a span.a:nth-child(2) {
			display: none;
		}
	}

/* Menu -> Right carret */
.nav_left li > a span.a:last-child svg,
.nav_right > li > a span.a:last-child svg {
	width: 1rem;
	height: auto;
	fill: var(--base-color);
	transition: all 100ms ease-in;
}

/* Menu -> Right carret:hover */
.nav_left > li:hover > a span.a:last-child svg,
.nav_right > li:hover > a span.a:last-child svg  {
	width: 0.9em; /* Rewrite */
	fill: var(--color-gray-light); /* Rewrite */
	transition: all 100ms ease-out;
}

/* ********************
Menu sub first-level
******************** */
.mega-menu .nav_sub-wrapper .sub-menu li.important-link a {
	color: #333!important;
	background-color: #fff!important;

	font-weight: bold!important;
	padding: 13px 20px 10px 20px!important;
	display: flex!important;
	width: fit-content!important;
}
.mega-menu .nav_sub-wrapper .sub-menu li.important-link a span {
	color: #333!important;
	border-color: #333!important;
}

@media (min-width: 768px) {	
	.mega-menu a.open + .nav_sub-wrapper {
		z-index: 99;
	}
	.mega-menu > .nav_sub-wrapper li > .nav_sub-wrapper {
		display: block!important;
		position: relative!important;
		background-color: transparent!important;
		height: auto!important;
		top:0;
	}

	.nav_left > li > .nav_sub-wrapper > .sub-menu > li a .carret {display: none;}
	.nav_left > li > a, .nav_right, .nav_right .menu_division a, .nav_close {z-index: 999!important;}
	.nav_brand {z-index: 8100;}

	.mega-menu > .nav_sub-wrapper .solutions-img-menu {		
		position: fixed;

		bottom: 0;
		right: 0;

		width: 30%;
	}
	.mega-menu {position: static!important;}
	.mega-menu > .nav_sub-wrapper {
		left: 0;
		top: 0;
		overflow-y: scroll;
		/*height: 100vh!important;*/
		max-height: 100vh;
	}
	.mega-menu > .nav_sub-wrapper::-webkit-scrollbar {
		display: none;
	}
	  
	/* Hide scrollbar for IE, Edge and Firefox */
	.mega-menu > .nav_sub-wrapper {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	.mega-menu.bg-gray > .nav_sub-wrapper {background-color: var(--color-gray);}
	.mega-menu.bg-green > .nav_sub-wrapper {background-color: var(--color-green);}
	.mega-menu.bg-blue > .nav_sub-wrapper {background-color: var(--color-blue);}
	.mega-menu.bg-img1 > .nav_sub-wrapper {background-image: url(../img/sub-menu-bg1.jpg);}
	.mega-menu > .nav_sub-wrapper > .sub-menu {
		position: relative;
		
		display:flex;

		padding-bottom: 6rem;
		padding-top: 10rem;
		padding-left: var(--desktop-gap-container-large);
		padding-right: var(--desktop-gap-container-large);

		z-index: 10;
	}
	.mega-menu > .nav_sub-wrapper .img-right {
		position: absolute;

		bottom: 0;
		right: 0;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu li {
		display: flex;
		flex-direction: column;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu li p {margin-top:auto;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header.align-right {margin-left: auto;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header {padding: 0 1.8rem;}
	.mega-menu:not(.menu_division) > .nav_sub-wrapper > .sub-menu .sub-menu-header {
		min-width: 20%;
		max-width: 20%
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header:first-of-type {padding-left: 0;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header:last-of-type {padding-right: 0;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header p {white-space: normal;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header a {
		padding: 0!important;

		margin-bottom: 8px;

		color: #fff;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header.with-border > a {margin-bottom: 28px;}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header:not(.important-link) > a span {
		font-size: 1.6em;
		font-weight: bold;

		white-space: break-spaces;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header.with-border > a span:after {
		content: "";
		display: block;
		border-bottom: 3px solid #fff;
		width: 35px;
	
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu li {
		white-space: break-spaces;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu > li .sub-menu > li {
		height:auto;
		min-height:auto;
	}
	.mega-menu > .nav_sub-wrapper > .sub-menu > li .sub-menu > li:not(.important-link) a {font-size: 1em;}
	.mega-menu > .nav_sub-wrapper > .sub-menu > li .sub-menu > li.as-header a {
		font-size: 1.6em;
		font-weight: bold;
	}

	.mega-menu .important-link {
		max-width: 30%!important;
		white-space: nowrap!important;
	}
	.mega-menu .important-link a { 
		margin-top: 28px;

		background-color: #fff!important;
	 }
	.mega-menu .important-link a:hover { 
		background-color: #333!important;
		color: #fff!important;
	}
	.mega-menu .important-link a:hover span { 
		color: #fff!important;
		border-color: #fff!important;
	}
	
	.mega-menu .nav_sub-wrapper .sub-menu li.important-link a:hover {border-radius: 26px!important;}
	.mega-menu .important-link:last-of-type {margin-bottom: 100px;}

	.mega-menu .important-link p {
		font-size: 1.6em;
		font-weight: bold;
		
		margin-top: 0!important;
	}
	.menu-item:not(.mega-menu) .important-link {display:none;}

	.nav_holding .important-link{display:none;}

	/* MENU DIVISION */
	.menu_division.mega-menu > a {z-index: 99;}
	.menu_division.mega-menu > .nav_sub-wrapper {height: 100vh!important;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-inner {height: fit-content;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu > .sub-menu-header,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-list .sub-menu-header {padding: 80px 0;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu p,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu a {padding: 0 28px!important;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu a img {max-width: 100%;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu p {white-space: normal;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-header.with-border > a span:after {margin-top: 6rem;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item svg image {width:70%;}

	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item{
		position: relative;

		width: 25%;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item:hover:after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item.division-blue:hover:after {background: var(--color-metal7-over);}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item.division-red:hover:after {background: var(--color-cast7-over);}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item.division-green:hover:after {background: var(--color-enduride-over);}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item.division-orange:hover:after {background: var(--color-megatraction-over);}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item a,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item p,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item div {
		z-index: 20;
		position: relative;

		cursor: pointer;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item .explore-link {margin-top: auto;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item .explore-link a {
		display: flex;
		justify-content: space-between;
		align-items: center;

		opacity: 0;
		
		text-transform: uppercase;
		margin-top: 40px;	
		padding: 0!important;	
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item .explore-link p {
		width: 75%;
		margin-top: 0!important;
		font-weight: normal;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item:hover .explore-link a {opacity: 1;}

	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .sub-menu-inner{
		overflow: hidden; 
		min-width: 96%; 
		width: 0;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-list,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-list .slick-track,
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-list .slick-track .menu-item {height: auto!important;}
	
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-track .menu-item {
		width: 23%;
		position: relative;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-track {display: flex;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-track a {display: block;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .slick-track a img {height: 2em;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .next {
		display: block;

		width: 80px;
		height: 70px;

		position: absolute;
		top: 45%;
		right: 2.5%;

		cursor: pointer;
	}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .next img {
		width: 80px;
		height: 70px;
	}
}
@media (max-width: 768px) {	
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item img {height: 8vw;}
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu .menu-item .explore-link {display: none;}
}




/* Menu -> Wrapper */
.nav_sub-wrapper {
	width: 100%;
	height: 100%;
	/* Will be modified by the js */
	display: none;
	background-color: var(--color-gray);
	position: absolute;
	top: 0;
	right: 0;
	padding-left: var(--mobile-gap-container);
	padding-right: var(--mobile-gap-container);
}
@media (max-width: 564px) {
	.menu_division.mega-menu > .nav_sub-wrapper > .sub-menu p {display: none;}
	
	.nav_sub-wrapper > ul > li:not(.important-link) > .nav_sub-wrapper {
		z-index: 99;
		overflow-y: auto;
		padding-bottom: 50px;
	}
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Wrapper */
		.nav_sub-wrapper {
			width: unset; /* Rewrite */
			height: unset; /* Rewrite */
			min-width: 100%;
			top: 100%; /* Rewrite */
			right: unset; /* Rewrite */
			border-radius: 2px;
			padding-left: unset; /* Rewrite */
			padding-right: unset; /* Rewrite */
		}

		/* Remove the radius on a collapsed nav to keep it clean */
		.nav_sub-wrapper.js__nav_has-collapse {
			border-top-left-radius: unset;
			border-top-right-radius: unset;
		}
	}

/* Menu -> Wrapper open animate */
.nav_sub-wrapper.js__sub_animate {
	animation: slide_to_left 600ms 1 cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Menu -> Wrapper close animate */
.nav_sub-wrapper.js__sub_back_animate {
	animation: slide_to_right 600ms 1 cubic-bezier(0.075, 0.82, 0.165, 1);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Wrapper animate */
		.nav_sub-wrapper.js__sub_animate {
			animation: none; /* Rewrite */
		}

		/* Menu -> Wrapper close animate */
		.nav_sub-wrapper.js__sub_back_animate {
			animation: none; /* Rewrite */
		}
	}

/* Menu -> Sub ul li */
.nav_left > li .nav_sub-wrapper > ul li,
.nav_right > li .nav_sub-wrapper > ul li {
	border-top: 1px solid var(--color-gray-medium);
}

/* Menu -> Mobile items container last child */
.nav_left > li .nav_sub-wrapper > ul li:last-child,
.nav_right > li .nav_sub-wrapper > ul li:last-child
{
	border-bottom: 1px solid var(--color-gray-medium);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_left > li .nav_sub-wrapper > ul li,
		.nav_right > li .nav_sub-wrapper > ul li {
			border-top: unset; /* Rewrite */
		}

		/* Menu -> Mobile items container last child */
		.nav_left > li .nav_sub-wrapper > ul li:last-child,
		.nav_right > li .nav_sub-wrapper > ul li:last-child
		{
			border-bottom: unset; /* Rewrite */
		}
	}

/* Menu -> Sub ul li a */
.nav_left > li .nav_sub-wrapper > ul > li a,
.nav_right > li .nav_sub-wrapper > ul > li a {
	display: flex;
	width: 100%; /* Compatibility */
	padding-bottom: 1.2rem;
	padding-top: 1.2rem;
	font-weight: 700;
	transition: margin-left 300ms ease-out, color 300ms ease-out;
}

/* Menu -> Sub li a:hover */
.nav_left > li .nav_sub-wrapper > ul > li:not(.important-link):hover > a,
.nav_right > li .nav_sub-wrapper > ul > li:not(.important-link):hover > a  {
	color: var(--color-gray-light);
	/*margin-left: 0.2rem;*/
	transition: all 300ms ease-out;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Sub li a All */
		.nav_left  > li .nav_sub-wrapper > ul li a,
		.nav_right  > li .nav_sub-wrapper > ul li a {
			display: block;
			width: unset; /* Rewrite */
			padding-bottom: 0.2rem; /* Rewrite */
			padding-top: 0.2rem; /* Rewrite */
			padding-left: calc(0.1rem + 1.5vw);
			padding-right: calc(0.8rem + 1.5vw);
			font-weight: inherit; /* Rewrite */
			transition: color 100ms linear;  /* Rewrite */
		}

		/* Menu -> Sub li a First */
		.nav_left  > li .nav_sub-wrapper > ul li:first-child a,
		.nav_right  > li .nav_sub-wrapper > ul li:first-child a {
			padding-top: 1rem; /* Rewrite */
		}

		/* Menu -> Sub li a Last */
		.nav_left  > li .nav_sub-wrapper > ul li:last-child a,
		.nav_right  > li .nav_sub-wrapper > ul li:last-child a {
			padding-bottom:	1rem; /* Rewrite */
		}

		/* Menu -> Sub li a:hover */
		.nav_left  > li .nav_sub-wrapper > ul li a:hover,
		.nav_right  > li .nav_sub-wrapper > ul li a:hover {
			color: var(--color-gray-light);
		}

		.nav_left > li .nav_sub-wrapper > ul > li:hover > a,
		.nav_right > li .nav_sub-wrapper > ul > li:hover > a  {
			
			margin-left: unset; /* Rewrite */
			transition: all 100ms linear;
		}
	}

/* Menu -> Sub header */
.nav_sub-header {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Menu -> Sub header */
		.nav_sub-header {
			display: none;
		}
	}

/* Menu -> Sub header close */
/* Menu -> Sub header back */
.nav_sub-header-close,
.nav_sub-header-back {
	display: flex;
	align-items: center;
}

/* Menu -> Sub header back svg */
.nav_sub-header-back svg {
	width: 1.4rem;
	height: auto;
	cursor: pointer;
	fill: var(--base-color);
	transition: fill 100ms linear;
}

/* Menu -> Sub header close svg */
.nav_sub-header-close svg {
	width: 1.4rem;
	height: 1.2rem;
	cursor: pointer;
	fill: var(--base-color);
	transition: fill 100ms linear;
}

/* Menu -> Sub header close:hover */
/* Menu -> Sub header back:hover */
.nav_sub-header-back svg:hover,
.nav_sub-header-close svg:hover  {
	fill: var(--color-gray-light);
}

/* Menu -> Sub header title */
.nav_sub-header-title {
	flex: 1;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

/* ********************
Search desktop
******************** */
/* Search desktop -> Container */
.nav_search, .nav_close {
	display: none;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Search desktop -> Container */
		.nav_search, .nav_close {
			display: flex; /* Rewrite */
			align-items: center;
			padding-left: calc(0.1rem + 1.5vw);
		}

		/* Search desktop -> Svg */
		.nav_search svg, .nav_close svg {
			fill: var(--base-color);
			cursor: pointer;
			width: 1.8rem;
			transition: fill 100ms linear;
		}

		/* Search desktop -> Svg:hover */
		.nav_search svg:hover, .nav_close svg:hover {
			fill: var(--color-gray-light);
		}
	}

/* ********************
Lang mobile WPML
******************** */
/* Lang mobile -> Special: If lang mobile is the last item */
.nav_right > li:last-child.menu-item-object-wpml_ls_menu_item
{
	border-bottom: none !important;
}

/* Lang mobile -> Items link a */
.menu-item-object-wpml_ls_menu_item a
{
	display:none !important;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Lang mobile -> Items link a */
		.menu-item-object-wpml_ls_menu_item a
		{
			display: inherit !important;
			align-items: center;
		}

		.menu-item-object-wpml_ls_menu_item a svg
		{
			width: 1.4rem;
			height: auto;
			margin-left: 0.2rem;
			margin-top: -0.15rem; /* Svg alignement since it's uppercase */
		}
	}

/* ********************
Lang mobile
******************** */
/* Lang mobile -> Container ul */
.nav_lang {
	/* Auto-hide and will be reversed by the js */
	display: flex;
	margin-top: var(--mobile-gap-container);
}

/* Lang mobile -> Items li */
.nav_lang > li {
	padding-bottom: 1.2rem;
	padding-top: 1.2rem;
	text-transform: uppercase;
}

/* Lang mobile -> Last items li */
.nav_lang > li:not(:first-child) {
	margin-left: 1.2rem;
}

/* Lang mobile -> Items link a */
.nav_lang > li > a {
	color: var(--color-gray-light);
}

/* Lang mobile -> Items link a:hover */
.nav_lang > li > a:hover {
	color: var(--base-color);
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		/* Lang mobile -> Container ul */
		.nav_lang {
			/* Make sure the menu will not show while the slideDown js add display:block so bypass it if any */
			display: none !important;
		}
	}

/* ********************
Search form
******************** */
.nav_search-form {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100px;
	padding-left: var(--mobile-gap-container);
	padding-right: var(--mobile-gap-container);
	background-color: var(--color-gray-light);
	z-index: 8200;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form {
			padding-left: var(--desktop-gap-container-large); /* Rewrite */
			padding-right: var(--desktop-gap-container-sm); /* Rewrite */
		}
	}

.nav_search-form form {
	height: 100%;
}

.nav_search-form ul {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.nav_search-form ul li:first-child {
	flex: 0 1 75%;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form ul li:first-child {
			flex: 0 1 58%; /* Rewrite */
		}
	}

.nav_search-form ul li:first-child input {
	width: 100%;
	border: none;
	background: none;
	outline: none;
	color: var(--base-color);
	border-bottom: 1px solid var(--base-color);
	text-transform: uppercase; 
	font-weight: 700;
	font-size: 0.88em;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form ul li:first-child input {
			font-size: unset; /* Rewrite */
			padding-bottom: 0.3rem;
		}
	}

/* Placeholder -> Chrome, Firefox, Opera, Safari 10.1+ */
.nav_search-form ul li:first-child input::placeholder {
	color: var(--base-color);
	opacity: 1; /* Firefox */
  }

/* Placeholder -> Internet Explorer 10-11 */
.nav_search-form ul li:first-child input:-ms-input-placeholder {
	color: var(--base-color);
}

/* Placeholder -> Microsoft Edge */
.nav_search-form ul li:first-child input::-ms-input-placeholder {
	color: var(--base-color);
}

/* Search icon li */
.nav_search-form ul li:not(:first-child):not(:last-child) {
	display: flex;
	align-items: center;
	margin-left: 1.2rem;
	margin-right: 1.2rem;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form ul li:not(:first-child):not(:last-child) {
			margin-left: 2.8rem; /* Rewrite */
			margin-right: 2.8rem; /* Rewrite */
		}
	}

.nav_search-form ul li:not(:first-child):not(:last-child) button {
	display: flex;
	align-items: center;
	border: none;
	background: none;
	cursor: pointer;
	outline: none;
}

.nav_search-form ul li:not(:first-child):not(:last-child) button svg {
	width: 1.4rem;
	height: auto;
	fill: var(--base-color);
	transition: fill 100ms linear;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form ul li:not(:first-child):not(:last-child) button svg {
			width: 1.6rem; /* Rewrite */
		}
	}

.nav_search-form ul li:not(:first-child):not(:last-child) button svg:hover {
	fill: var(--color-gray);
}

.nav_search-form ul li:last-child {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.nav_search-form ul li:last-child svg {
	width: 1.2rem;
	fill: var(--base-color);
	transition: fill 100ms linear;
}
	/* MD responsive */
	@media (min-width: 768px)
	{
		.nav_search-form ul li:last-child svg {
			width: 1.4rem; /* Rewrite */
		}
	}

.nav_search-form ul li:last-child svg:hover {
	fill: var(--color-gray);
	cursor: pointer;
}



@media (max-width: 568px) {
	.menu-item p {display: none;}
	.menu-item .important-link p {display: block;}
	.menu-item .important-link {
		display: block;

		padding: 20px 0;
		border:none!important;
	}
	.menu-item .important-link .nav_sub-wrapper {
		display: block;

		position: relative;
		background: none!important;

		padding: 0;
	}
	.menu-item .important-link .nav_sub-wrapper .nav_sub-header {display: none;}
	.menu-item .solutions-img-menu {display: none!important;}
	
	.menu_division .nav_sub-wrapper a {padding-left: 28px;}
	.menu_division .nav_sub-wrapper a img {height: 14vw!important;}
	.menu_division .nav_sub-wrapper .sub-menu li {background-position: center;}
}