/* ==========================================================================
	Navigation
	 ========================================================================== */
#main-menu {
	float: right;
	//margin-top: 40px;
	display: flex;

	@include media-breakpoint-down(md) {
		display: none;
	}

	* {
		transition: none;
	}

	ul {
		display: inline-block;
		list-style: none;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
		z-index: 200;

		li {
			display: block;
			position: relative;
			float: left;
			border-radius: 8px;
			cursor: pointer;

			&.menu-item-has-children {
				border-top: 8px solid transparent;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				margin-top: -8px;

				&:hover {
					border-top: 8px solid $navy;
				}

			}

			a {
				display: block;
				color: $grey;
				padding: 6px 20px;
				cursor: pointer;
				@media (max-width:1086px) {
					padding:6px 12px;
				}
			}

			ul {
				display: none;
				position: absolute;
				background: $navy;
				width: 260px;
				padding: 20px 0;
				border-top-right-radius: 8px;
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;
				box-shadow: 0 10px 10px rgba(0,0,0,.4);

				a {
					width: 260px;
				}

				ul {
					left: 100%;
					top: 0;
				}

			}

			&:hover {
				background: $navy;
				color: white;

				a {
					color: white;
				}

				ul {
					display: inherit;

					li {
						display: list-item;
						border-radius: 0;
						margin: 0 20px;
						padding: 0;

						a {
							width: 220px;
							padding: 6px 0;
							transition: all ease .25s;
						}

						&:hover {
							background: $light-blue;
							border-radius: 6px;
							box-shadow: 0 5px 10px rgba(0,0,0,.2);

							a {
								font-weight: bold;
								padding: 6px 15px;
							}

						}

					}

				}

			}

			&.current-menu-item a, &.current_page_parent > a{
				font-weight: bold;
			}

		}

	}

}

#sub-menu {
	position: absolute;
	background: rgba(0,189,200,.5);
	width: 100%;
	height: 140px;
	bottom: 0;
	transform: translate3d(0, 100%, 0);
	animation: slideInUp normal forwards 1s ease;
    animation-delay: 0.2s;

	@include media-breakpoint-down(lg) {
		height: 120px;
	}

	@include media-breakpoint-down(md) {
		height: 100px;
	}

	@include media-breakpoint-down(sm) {
		display: none;
	}

	ul {
		list-style: none;
		height: 140px;
		margin: 0;
		padding: 0;

		@include media-breakpoint-down(lg) {
			height: 120px;
		}

		@include media-breakpoint-down(md) {
			height: 100px;
		}

		@include media-breakpoint-down(sm) {
			display: none;
		}

		li {
			position: relative;
			display: block;
			float: left;
			@include font-mixin(600, 21, 1.272, $font-heading);
			text-align: center;
			text-transform: uppercase;
			width: 25%;
			height: 100%;
			overflow: hidden;

			@include media-breakpoint-down(lg) {
				@include font-mixin(600, 18, 1.272, $font-heading);
			}

			@include media-breakpoint-down(md) {
				@include font-mixin(600, 16, 1.272, $font-heading);
			}

			&:nth-child(1) {
				background: $aqua;
			}

			&:nth-child(2) {
				background: $light-blue;
			}

			&:nth-child(3) {
				background: $light-aqua;
			}

			&:nth-child(4) {
				background: $aqua;
			}

			&:hover {
				background: $green;
			}

			a {
				position: relative;
				display: flex;
				color: white;
				justify-content: center;
    			align-items: center;
				cursor: pointer;
				width: 100%;
    			height: 100%;
			}

		}

	}

}