@menuitem-padding-x: 15px;
@menuitem-padding-y: 10px;
@sub-menu-width: auto;

/* Level 1 */
@menu-level1-bg: var( --vamtam-accent-color-5 );
@menu-level1-color: var( --vamtam-submenu-color );
@menu-level1-hover-bg: @menu-level1-bg;
@menu-level1-hover-color: var( --vamtam-submenu-hover-color );

#top-nav-wrapper {
	position: relative;
	z-index: 6666;
	background: var( --vamtam-accent-color-5 );
	border: none;
}

#top-nav-wrapper,
#top-nav-wrapper-filler {
	background: var( --vamtam-top-nav-background-background-image ) center top / var( --vamtam-top-nav-background-background-size ) var( --vamtam-top-nav-background-background-repeat ) scroll var( --vamtam-top-nav-background-background-color );
}

.top-nav {
	background-position: center-top;
	box-sizing: border-box;
	margin: 0 auto;

	* {
		font-size: 14px;
		font-weight: normal;
	}

	> .top-nav-inner {
		&, p {
			color: var( --vamtam-css-tophead-text-color );
		}

		> .row {
			padding: 15px 0 0 0;

			> .row {
				> div {
					vertical-align: top;
				}
			}
		}
	}

	.grid-1-2 {
		min-height: 1px;

		&:last-child {
			text-align: right;
			padding-left: 0px;
		}
	}

	.menu-wrapper {
		position: relative;
	}

	a {
		color: var( --vamtam-css-tophead-link-color );

		&:hover {
			color: var( --vamtam-css-tophead-link-hover-color );

			.icon {
				color: var( --vamtam-css-tophead-link-hover-color ) !important;
			}
		}
	}

	ul > li {
		&.current_page_item,
		&.current-menu-item,
		&.current-menu-parent,
		&.current-menu-ancestor {
			> a {
				color: var( --vamtam-css-tophead-link-hover-color );
			}
		}
	}

	.menu,
	.menu li {
		display: inline-block;
		margin: 0;
		padding: 0;
	}

	.menu {
		> li {
			&:first-child > a {
				padding-left: 0;
			}

			&:last-child > a {
				padding-right: 0;
			}

			&.menu-item-has-children {
				a:first-child {
					position: relative;
				}

				&:hover {
					> .sub-menu {
						display: block;
					}
				}
			}

			> a {
				padding: 10px 10px;
			}
		}

		li {
			position: relative;

			// any sub menu
			.sub-menu {
				position: absolute;
				top: 30px;
				display: none;
				margin: 0 auto auto -10px;
				width: @sub-menu-width;
				text-align: left;
				box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.08);
				background: @menu-level1-bg;
				box-sizing: border-box;

				&.invert-position {
					left: auto;
					right: 0;
				}

				.sub-menu.invert-position {
					right: 100%;
				}

				.menu-item {
					display: block;

					> a {
						display: block;
						padding: 10px @menuitem-padding-x;
						color: @menu-level1-color;
						border-bottom: 1px solid var( --vamtam-default-line-color );
					}

					&:last-child {
						padding-bottom: 0;
					}

					&.current-menu-parent,
					&.current-menu-item,
					&.current-menu-ancestor,
					&:hover {
						background: var( --vamtam-submenu-background );
						transition: all .3s;
						text-decoration: none;

						> a {
							text-decoration: none;
							color: @menu-level1-hover-color;
							transition: all .3s;
						}
					}
				}
			}
		}
	}
}

#top-nav-social {
	.top-bar-social-lead {
		padding-right: 5px;
	}
	> a {
		display: inline-block;
		vertical-align: middle;
		border: none;
		transition: transform ease-out 0.2s;
		font-size: 18px;
		margin: 0px 5px;

		&:first-child {

		}

		&:last-child {
			margin-right: 0;
		}

	}
}