/* ------------------------------------------------------------ *\
	Navigation
\* ------------------------------------------------------------ */

.nav { position: relative; z-index: 200; float: left; -webkit-font-smoothing: antialiased;

	ul { list-style: none outside none; }

	> ul { float: left; margin: 0; font-size: 14px; font-weight: bold; text-transform: uppercase;

		> li { position: relative; float: left; margin: 0 13px 0 14px; padding: 5px 0 30px;

			span { display: none; }

			> a { display: block; padding: 5px 0; color: #27262c; }
			> a {
				transition: color .2s ease-out;
			}
			> a:hover,
			&.current-menu-item > a { color: $color-orange; }

			> ul {
				position: absolute;
				left: 0;
				top: 100%;
				width: 240px;
				margin: 0;
				padding: 26px 0 30px;
				background: $color-dark;
				visibility: hidden;
				opacity: 0;
				display:none;
				& {
					transition: all .2s ease-out;
				}

				> li {
					position: relative;

					& + li { margin-top: 17px; }
					> a { display: block; padding: 4px 28px; color: #fff; border-right: 3px solid transparent; }
					> a {
						transition: border .2s ease-out;
					}
					> a:hover,
					&.current-menu-item > a { border-right: 3px solid $color-orange; }

					ul {
						visibility: hidden;
						opacity: 0;
						position: absolute;
						left: 100%;
						top: 0;
						background: $color-dark;
						padding: 20px 0 20px 20px;
						margin-left: 0;
						width: 200px;
						border-left: 3px solid $color-grey;

						li a {
							color: white;
						}

						li:hover {
							a {
								color: white;
							}

							border-right: 3px solid $color-orange;
						}
					}

					&:hover {
						ul {
							visibility: visible;
							opacity: 1;
						}
					}
				}
			}
			&:hover > ul {
				visibility: visible;
				opacity: 1;
				display:block;
			}
		}
	}

	/*  Small Desktop  */

	@media (max-width: $breakpoint-small-desktop) {
		& {
			> ul { font-size: 13px;

				> li { margin: 0 10px; height: 69px;

					> ul { font-size: 13px; left: -190px;}
				}
			}
		}
	}

	/*  Tablet Portrait  */

	@media (max-width: $breakpoint-tablet-portrait) {
		& { display: none; position: absolute; left: 0; top: 100%; width: 100%; background: #fff;

			> ul { float: none;

				> li { float: none; margin: 0; height: auto; padding: 0; border-top: 1px solid #f0eeee; width: 100%;

					span { display: block; position: absolute; right: 0; top: 0; line-height: 38px; width: 38px; text-align: center; border-left: 1px solid #f0eeee; }
					> a { display: block; padding: 12px 15px; }

					&:hover {
						ul {
							display: none;
						}
					}

					> ul {
						background-color: #FFF;
						display: none; position: static; width: auto; visibility: visible; opacity: 1; padding: 0;

						& {
							transition: none;
						}
						li {
							border-top: 1px solid #f0eeee;

							ul.sub-menu {
								visibility: visible;
								opacity: 1;
								display: none;
								position: static;
								background: none;
								width: 100%;
								max-width: 100%;
								border-left: none;
								padding: 0 0 0 40px;

								li {
									padding: 10px 0;

									a, a:hover {
										color: black;
									}
								}
							}
						}
						> li + li { margin-top: 0; }
						> li > a {
							padding: 10px 25px;
							color: $color-dark;
							&:hover {
								color: red;
							}
						}
					}
				}
			}
		}
	}
}
/*------------------------------------------------------------
	User Navigation
============================================================*/
.user-nav {
	dd {
		display: inline-block;
		margin: 5px 20px 5px 0;
	}
	dd.active a,
	dt.active a,
	li.active a {
		padding: 5px;
		background-color: $color-orange;
		color: #fff;
		&:hover {
			background-color: $color-dark;
			cursor: pointer;
		}
	}
}
