/*========================================================
Author: Reunion Marketing
Author URI: https://www.reunionmarketing.com/
Description: Reunion Marketing Custom Bootstrap Nav
==========================================================*/
nav#main-nav{
	padding:  15px 0px;
}

/* General Nav CSS */
nav#main-nav a{
	font-size: 20px;
	line-height: 20px;
}

nav#main-nav .navbar-brand img{
	max-height: 60px;
}

/*	Desktop */
@media (min-width: 768px) {

	nav#main-nav li.nav-item{
		padding:  10px 20px;
		margin:  0px;
	}

	nav#main-nav a.navbar-brand{
		padding:  0px;
	}

	/*	Display None Prevents Tab Order needed for ADA	*/
	/*	Visibility slow to render, use position to hide */
	nav#main-nav .dropdown-menu{
		display: block;
		position: absolute;
		top: -9999px;
	}

	nav#main-nav .nav-link:focus + .dropdown-menu,
	nav#main-nav .dropdown:focus-within > .dropdown-menu,
	nav#main-nav .dropdown:hover > .dropdown-menu {
		top: 0px;
	}

	nav#main-nav a.dropdown-toggle,
	nav#main-nav a.dropdown-item{
		padding:  8px;
	}

	nav#main-nav a.nav-link i{
		display: none;
	}
	
	/*	Sub-Menus	*/
	nav#main-nav .dropdown-menu.depth-1{
		left:  0;
		margin-top:  3.5em;
		padding: 0px;
	}

	nav#main-nav .dropdown-menu.depth-2{
		left: calc(-10.5em - 3px);
		margin-top: -1px;
		padding: 0px;
	}

	nav#main-nav .dropdown-menu .dropdown-toggle::after{
		transform: rotate(90deg);
		float: left;
		margin-left: -15px;
		margin-top: 7px;
	}

	/* Centered Main Nav */
	#main-nav.rm-nav-split .navbar-brand{
		position: absolute;
		left:  calc(50% - 120px);
		width: 240px;
	}

	#main-nav.rm-nav-left #menu-main-nav,
	#main-nav.rm-nav-split #menu-main-nav{
		width: 100%;
		display: block;
	}

	#main-nav.rm-nav-split #menu-main-nav > li{
		float: left;
	}

	/*	Count */
	#main-nav.rm-nav-split[data-count="2"] #menu-main-nav > li:nth-child(2),
	#main-nav.rm-nav-split[data-count="3"] #menu-main-nav > li:nth-child(3),
	#main-nav.rm-nav-split[data-count="4"] #menu-main-nav > li:nth-child(3),
	#main-nav.rm-nav-split[data-count="4"] #menu-main-nav > li:nth-child(4),
	#main-nav.rm-nav-split[data-count="5"] #menu-main-nav > li:nth-child(4),
	#main-nav.rm-nav-split[data-count="5"] #menu-main-nav > li:nth-child(5),
	#main-nav.rm-nav-split[data-count="6"] #menu-main-nav > li:nth-child(4),
	#main-nav.rm-nav-split[data-count="6"] #menu-main-nav > li:nth-child(5),
	#main-nav.rm-nav-split[data-count="6"] #menu-main-nav > li:nth-child(6),
	#main-nav.rm-nav-split[data-count="7"] #menu-main-nav > li:nth-child(5),
	#main-nav.rm-nav-split[data-count="7"] #menu-main-nav > li:nth-child(6),
	#main-nav.rm-nav-split[data-count="7"] #menu-main-nav > li:nth-child(7),
	#main-nav.rm-nav-split[data-count="8"] #menu-main-nav > li:nth-child(5),
	#main-nav.rm-nav-split[data-count="8"] #menu-main-nav > li:nth-child(6),
	#main-nav.rm-nav-split[data-count="8"] #menu-main-nav > li:nth-child(7),
	#main-nav.rm-nav-split[data-count="8"] #menu-main-nav > li:nth-child(8),
	#main-nav.rm-nav-split[data-count="9"] #menu-main-nav > li:nth-child(6),
	#main-nav.rm-nav-split[data-count="9"] #menu-main-nav > li:nth-child(7),
	#main-nav.rm-nav-split[data-count="9"] #menu-main-nav > li:nth-child(8),
	#main-nav.rm-nav-split[data-count="9"] #menu-main-nav > li:nth-child(9),
	#main-nav.rm-nav-split[data-count="10"] #menu-main-nav > li:nth-child(6),
	#main-nav.rm-nav-split[data-count="10"] #menu-main-nav > li:nth-child(7),
	#main-nav.rm-nav-split[data-count="10"] #menu-main-nav > li:nth-child(8),
	#main-nav.rm-nav-split[data-count="10"] #menu-main-nav > li:nth-child(9),
	#main-nav.rm-nav-split[data-count="10"] #menu-main-nav > li:nth-child(10){
		float: right;
	}

	/* Nav Left Align */
	#main-nav.rm-nav-left > div{
		flex-direction: row-reverse;
	}

	#main-nav.rm-nav-left #menu-main-nav > li{
		float: left;
	}

}

/*	Break to Mobile Nav At Medium Break Point*/
@media (max-width: 767px) {

	#menu-main-nav{
		margin-top: 15px;
		margin-right:  var(--bs-gutter-x, -.75rem);
		margin-left:  var(--bs-gutter-x, -.75rem);
	}

	#menu-main-nav ul.dropdown-menu{
		transition: all 0.25s ease-out;
		margin-right: -90px;
		padding: 0px;
		display: block;
		height: 0px;
		overflow: hidden;
		border: non;
	}

	#menu-main-nav ul.dropdown-menu.show{
		height: auto;
	}

	#menu-main-nav li.menu-item{
		padding-right: 90px;
	}

	#menu-main-nav li a.dropdown-item,
	#menu-main-nav li a.nav-link{
		padding: 30px 20px;
	}

	#menu-main-nav li a.nav-link i{
		position: absolute;
		right: 37px;
		top: 30px;
		font-size: 1.5em;
	    border: none;
	}

	nav#main-nav .dropdown-toggle::after{
		border: none;		
	}

	nav#main-nav a.navbar-brand,
	nav#main-nav button.navbar-toggler{
		margin:  0px 10px;
	}
}