:root {
	--box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

@media (min-width:768px) { /* 768px, 992px, 1200px */
	
	 
	#vfm { 
		height: 50px; 
		background-color: #2C328C; color: #ffffff;
		margin: 0 auto;
		padding-left: 1rem; padding-right: 1rem;
	}
	#vfm a {
		text-decoration: none;
		background: 0 0;
		transition-property: background,box-shadow,border,color,opacity,transform;
		transition-duration: .3s;
		-webkit-text-decoration-skip: objects;
	}
	
	#vfm .vfm-wrapper {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 auto;
		height: inherit;
		max-width: 1140px;
	}
	
	#vfm .vfm-inner  {
		justify-content: center;
		display: flex;
		align-items: center;
		flex-grow: 1;
	}
	
	#vfm .navigation { width: 100%; margin: 0; }
	
	#vfmlist {
		margin: 0; padding: 0; list-style: none none; list-style-position: inside; 
		display: flex; align-items: center;
		justify-content: space-between;
	}
	
	#vfmlist li.level0 { flex-shrink: 0; } 
	#vfmlist li.level0 > a.level-top { 
		color: #fff; text-decoration: none;
		display: block; overflow: hidden;
		position: relative;  z-index: 1; 
		outline: none;
		padding: 0px 20px; 
	}
	#vfmlist li.level0:not(.category-item) > a.level-top { opacity: 0.6;  }  /* Custom menu items  */
 
	
	#vfmlist li.category-item { 
		display: flex;
		position: relative;
		margin: 0; 
		line-height: 50px;
	}
	#vfmlist li:not(.level0).category-item:hover > a { background-color: #EE3342; color: #ffffff; } /* Menu item hover colour */
	#vfmlist li:not(.level0).category-item.parent > a > span.ui-menu-icon { display: none; }
	#vfmlist li:not(.level0).category-item.parent > a > span:not(.ui-menu-icon) { padding-right: 30px; }
	#vfmlist li:not(.level0).category-item.parent > a > span::after {
		display: inline-block;
		font-family: bootstrap-icons !important;
		font-style: normal;
		font-weight: normal !important;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		vertical-align: -.125em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		
		content: "\f285"; /* <i class="bi bi-chevron-right"></i> */
		
		position: absolute; top: calc(50% - 8px); right: 8px; 
	}
	
	#vfmlist li:not(.level0).category-item > a {
		position: relative;
		display: block; width: 100%;
		overflow: hidden;  outline: none !important; 
		line-height: 1.5em; padding: .6em 20px; white-space: nowrap; transition: none;
		color: #000000; 
		font-size: 0.9em; 
	}
 
 
	#vfmlist ul.submenu {
		margin: 0; padding: 0; list-style: none none; list-style-position: inside;
		text-align: left;  min-width: 12rem;
		color: #000000;
		background-color: #D7D7D7;
		box-shadow: var(--box-shadow);
		
		position: absolute; left: 0; z-index: 120;
		display: block;
		
		opacity: 0;
		transform-origin: 50% 0;
		transform: scaleY(0) translateZ(0);
		transition: transform .15s,opacity .15s;
	}
	#vfmlist ul.submenu:not(.level0) { 
		left: 100% !important;
		top: 0 !important; 
		right: auto !important;
	}
	#vfmlist ul.level0.submenu li.level1:nth-child(1) > ul.submenu { /* top: 0rem; */ }
	#vfmlist ul.submenu.level0 { 
		background-color: #F5F5F5; 
	}
	#vfmlist ul.submenu.level1 { background-color: #E6E6E6;  }
	
	/* HOVER, OPENED STATES */
	#vfmlist .category-item:hover > ul.submenu, 
	#vfmlist .category-item > a:focus ~ ul.submenu, 
	#vfmlist .category-item.opened > ul.submenu,
	
	#vfmlist .custom-menu-item:hover > ul.submenu, 
	#vfmlist .custom-menu-item > a:focus ~ ul.submenu, 
	#vfmlist .custom-menu-item.opened > ul.submenu {
		opacity: 1;
		transform: scaleY(1) translateZ(0);
		
	}
	
	/* MAKE MENUS FULL HEIGHT  */
	#vfmlist.relatives-disabled li.category-item { position: static; }
	#vfmlist.relatives-disabled ul.submenu:not(.level0)  { min-height: 100%; }

	/* Custom Menu Items */
	#vfmlist .custom-menu-item { position: relative; }
	#vfmlist .custom-menu-item.parent > a > span { padding-right: 2px; }
	#vfmlist .custom-menu-item.parent > a > span::after {
		/*
		display: inline-block;
		font-family: bootstrap-icons !important;
		font-style: normal;
		font-weight: normal !important;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		vertical-align: -.125em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f282";
		position: absolute; top: calc(50% - 8px); right: 0px; 
 		*/
	}
	
	/* Custom Icons */
	ul.level0 li.level1.nav-1-1 > a > span::before {  /* content: "@"; float: left; margin-right: 4px; */ }
	
	/* Magento Specific */
	.nav-sections { 
		font-family: 'Archivo Narrow', sans-serif; 
		font-size: 1.6rem;
		background-color: #2C328C; 
	}
	
	
	#vfmlist li.level0 > a.level-top#ui-id-2 { display: inline-flex; align-items: center; }
	#vfmlist li.level0 > a.level-top#ui-id-2 .ui-menu-icon { 
	height: auto;
	display: inline-block !important;
	line-height: normal !important;
	}
	#vfmlist li.level0 > a.level-top#ui-id-2 .ui-menu-icon::before {
		position: relative;
		font-family: bootstrap-icons;
		content: "\f479";
		font-size: 26px; 
	}
 
 
} /* @media */



