@include media("<desktop-wide") {
	#masthead {
		.wrapper-toggle {
			align-items: center;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin-left: -15px;
			margin-right: -15px;
			order: 2;
			width: calc(100% + 30px);

			&.open {
				.mobile-menu-title {
					&:after {
						content: $fa-var-times;
					}
				}
			}

			.mobile-menu-title {
				font-size: 14px;
				font-weight: 700;
				letter-spacing: 0.5px;
				line-height: 1;
				text-transform: uppercase;
				text-align: right;

				&:after {
					@include fa-icon();

					content: $fa-var-angle-down;
					margin-left: 5px;
					text-align: center;
					width: 16px;
				}
			}

			.navbar-toggle {
				border: 0 none;
				border-radius: 0;
				margin: 0;
				padding: 10px 15px;
				& > .icon-bar {
					border-radius: 0;
					width: 30px;

					& + .icon-bar {
						margin-top: 5px;
					}
				}
			}
		}

		.primary-navbar {
			border: 0 none;
			box-shadow: none;
			margin-left: -15px;
			margin-right: -15px;
			order: 3;
			width: calc(100% + 30px);
			z-index: 1000;

			& > .nav {
				margin-bottom: 0;
				margin-top: 0;
				padding: 5px 20px 10px;

				.caret {
					display: none;
				}

				& > .menu-item + .menu-item {
					& > a {
						&:before {
							background-color: #979797;
							content: "";
							height: 1px;
							left: 0;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
				}
			}

			.menu-item {
				&.active > a,
				& > a {
					font-size: 16px;
					padding: 10px 0;
				}

				&.dropdown > a {
					position: relative;

					&:after {
						@include fa-icon();

						content: $fa-var-angle-down;
						margin-left: 10px;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				&.lsx-wc-my-account-menu-item {
					&.dropdown > a {
						&:after {
							margin-left: 20px;
						}
						span {
							&:after {
								@include fa-icon();
								content: $fa-var-user;
								margin-left: 5px;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
				}
				&.lsx-wc-cart-menu-item {
					&.dropdown > a {
						&:after {
							margin-left: 25px;
						}
						span:nth-child(2) {
							&:after {
								@include fa-icon();
								content: $fa-var-shopping-basket;
								margin-left: 5px;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
				}
			}

			.dropdown-menu {
				border-radius: 0;
				padding: 0;

				& > .menu-item a {
					padding-left: 15px;
				}

				& > .menu-item.open > a {
					&:before {
						background-color: #979797;
						bottom: 0;
						content: "";
						height: 1px;
						left: 15px;
						position: absolute;
						right: 0;
					}
				}

				.dropdown-menu {
					& > .menu-item a {
						padding-left: 30px;
					}
				}
			}
		}
	}
	.mobile-header-hamburger {
		#masthead {
			.wrapper-toggle {
				.navbar-toggle {
					padding-right: 0;
					margin-right: -5px;
				}
			}
		}
	}
}

@include media(">=phone", "<desktop-wide") {
	#masthead {
		.wrapper-toggle,
		.primary-navbar {
			margin-left: -30px;
			margin-right: -30px;
			width: calc(100% + 60px);
		}
	}
}

@include media(">=desktop-wide") {
	#masthead {
		backface-visibility: hidden;

		.mobile-menu-title {
			display: none;
		}

		.primary-navbar {
			align-self: stretch;
			display: flex !important;
			flex: 1;
			flex-direction: column;
			flex-grow: 1;
			margin-left: 100px;
			margin-right: 45px;
			padding: 0;

			.header-expanded &,
			.header-central & {
				margin-left: 0;
				margin-right: 0;
				min-height: 60px;
			}

			& > .nav {
				display: flex;
				flex: 1;
				height: 100%;

				.header-expanded &,
				.header-central & {
					margin: 0 -9999px;
					padding: 0 9999px;
				}

				.header-central & {
					align-content: center;
					display: flex;
					flex-flow: row nowrap;
					float: none;
					height: 60px;
					justify-content: center;
					left: auto;
					position: static;
					right: auto;
				}

				& > .menu-item {
					display: flex;
					flex-flow: row nowrap;
					justify-content: flex-start;

					& > a,
					&.active > a {
						align-items: center;
						display: flex;
						font-size: 14px;
						line-height: 14px;
						padding: 0 15px;
						transition: all 300ms ease;

						& > .caret {
							margin: 2px 0 0 5px;
						}
					}
				}

				.menu-item-has-children {
					&:hover {
						& > .dropdown-menu {
							opacity: 1;
							transform: scale(1, 1);
						}
					}
				}

				.dropdown-menu {
					box-shadow: none;
					border: 0 none;
					border-radius: 0;
					display: block;
					margin: 0;
					opacity: 0.3;
					padding: 0;
					transition: all 300ms ease;
					transform: scale(1, 0);
					transform-origin: top center;

					& > .menu-item {
						transition: all 300ms ease;

						&.dropdown {
							&:before {
								@include fa-icon();

								content: $fa-var-angle-right;
								position: absolute;
								right: 15px;
								top: 50%;
								transform: translateY(-50%);
							}
						}

						& > a {
							background-color: inherit;
							color: inherit;
							font-size: 14px;
							padding: 12px 40px 12px 15px;

							&:hover,
							&:active:hover,
							&:focus {
								background-color: transparent;
							}
						}

						.dropdown-menu {
							left: 100%;
							top: 0;
						}
					}
				}
			}
		}
	}
}

@include nav-colours();