#top-menu {
	& > .container {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		height: map-get($top-menu, height);
		justify-content: flex-end;
		padding: 0;
		width: 100%;

		.header-central & { justify-content: center; }
	}

	.top-menu {
		height: 100%;

		&:not(.pull-left) { order: 1; }

		&.pull-left {
			flex-grow: 1;
			float: none !important;

			.header-central & { flex-grow: 0; }
		}

		& > .menu {
			@extend %list-unstyled;
			@include clearfix();

			height: 100%;
			margin-bottom: 0;

			& > .menu-item {
				display: table;
				float: left;
				height: 100%;

				& > a {
					display: table-cell;
					font-size: 13px;
					line-height: 13px;
					padding: 0 15px;
					vertical-align: middle;

					@include media('>=phone') { transition: all 300ms ease; }

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

						font-size: 15px;
						padding-right: 5px;
						transition: all 300ms ease;
					}
				}

				&.map > a:before { content: $fa-var-map-o; }
				&.tel > a:before { content: $fa-var-phone; }
				&.email > a:before { content: $fa-var-envelope-o; }

				&.cta,
				&.cta-red {
					margin-left: 5px;
					padding-right: 0;

					& > a {
						@include lsx-button-scaffolding();

						&,
						&:active,
						&:visited {
							border-radius: 0;
							box-shadow: none;
							display: table-cell;
							font-size: 12px;
							height: auto;
							padding-bottom: 0;
							padding-top: 0;
							transition: all 300ms ease;
						}
					}
				}

				&.cta {
					& > a {
						@include lsx-button-colour();
					}
				}

				&.cta-red {
					& > a {
						@include lsx-button-colour(#FFFFFF, #FFFFFF, #D93A3A, #9F2020, #9F2020);
					}
				}
			}
		}

		&.pull-left {
			& > .menu {
				& > .menu-item {
					@include media('<phone') {
						&:not(.cta):not(.cta-red) {
							& > a { padding: 0 5px; }

							&:first-child { margin-left: 5px; }
						}

						.caret { display: none; }

						&.wpml-ls-menu-item {
							& > a {
								& > .wpml-ls-flag + span { display: none; }
							}
						}
					}
				}
			}
		}

		&:not(.pull-left) {
			& > .menu {
				& > .menu-item {
					@media (max-width: 500px) {
						&:not(.cta):not(.cta-red) > a {
							padding: 0;

							&:before {
								font-size: 18px;
								padding: 0 5px;
							}
						}
					}
				}
			}
		}
	}

	.dropdown {
		@include media('<desktop') {
			&.open {
				& > .dropdown-menu {
					opacity: 1;
					transform: scale(1, 1);
				}
			}
		}

		@include media('>=desktop') {
			&:hover {
				& > .dropdown-menu {
					opacity: 1;
					transform: scale(1, 1);
				}
			}
		}
	}

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

		& > .menu-item {
			transition: all 300ms ease;
			// -webkit-backface-visibility: hidden;
			// -webkit-transform-style: preserve-3d;

			&.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;
				// -webkit-backface-visibility: hidden;
				// -webkit-transform-style: preserve-3d;
			}
		}
	}

	.top-menu:not(.pull-left) {
		.dropdown-menu {
			left: auto;
			right: 0;
		}
	}

	@include media('<tablet') {
		#menu-top-menu {
			display: flex;
			width: 100%;
			justify-content: flex-end;
			padding: 0;
			margin: 0;
			.menu-item {
				height: 100%;
				float: initial;
				text-align: center;
				a {
					font-size: 12px;
					padding: 0 7px;
				}
			}
		}
	}
	@media (max-width: 500px) {
		#menu-top-menu {
			.menu-item {
				&.map,
				&.tel,
				&.email {
					max-width: 35px;
					> a {
						@include hide-text();
						&:before {
							padding: 0;
						}
					}
				}
			}
		}
	}
}

@include top-menu-colours();