/* Header Navigation */
.header {
	.menu {
		text-align: left;
		margin: 15px 0;

		@media (min-width: $screen-md-min) {
			margin: 0;
		}

		> li {
			position: relative;

			@media (min-width: $screen-md-min) {
				display: inline-block;
			}

			> a {
				position: relative;
				color: #414447;

				@media (min-width: $screen-md-min) {
					padding: 14px 20px 13px 20px;
					margin: 0;
				}

				&:focus {
					text-decoration: none;
				}
			}

			&:hover {
				> a {
					color: #414447;

					@media (min-width: $screen-md-min) {
						text-decoration: none;
					}

					&::before {
						@media (min-width: $screen-md-min) {
							position: absolute;
							content: "";
							background-color: #414447;
							bottom: 4px;
							left: 20px;
							height: 2px;
							width: calc(100% - 40px);
						}
					}

					&:focus {
						text-decoration: none;
					}
				}

				> .sub-menu {
					visibility: visible;
					opacity: 1;
				}
			}

			&:last-of-type {
				@media (min-width: $screen-md-min) {
					margin-right: 0;
				}
			}
		}

		> .current-menu-item {
			> a {
				&::before {
					@media (min-width: $screen-md-min) {
						position: absolute;
						content: "";
						background-color: #414447;
						bottom: 4px;
						left: 20px;
						height: 2px;
						width: calc(100% - 40px);
					}
				}
			}
		}

		> .menu-item-has-children {
			> a {
				&::after {
					@media (min-width: $screen-md-min) {
						position: absolute;
						content: "\f0d7";
						font-family: "FontAwesome";
						font-size: 10px;
						right: 0;
						right: calc(50% - 5px);
						bottom: -15px;
						color: #caced7;
					}
				}
			}
		}

		.sub-menu {
			display: block;
			z-index: 10;
			padding-left: 20px;

			@media (min-width: $screen-md-min) {
				padding: 0;
				visibility: hidden;
				opacity: 0;
				position: absolute;
				border-top: 24px solid rgba(0,0,0,0);
				left: 20px;
				cursor: pointer;
			}

			> li {
				@media (min-width: $screen-md-min) {
					background-color: $informative-color;
					position: relative;
				}

				> a {
					@media (min-width: $screen-md-min) {
						margin: 0;
						padding: 8px 20px;
						white-space: nowrap;
						color: #ffffff;
						border-bottom: 1px solid darken($informative-color, 5);
					}

					&:hover {
						@media (min-width: $screen-md-min) {
							text-decoration: none;
							background-color: darken($informative-color, 5);
						}
					}
				}

				> .sub-menu {
					@media (min-width: $screen-md-min) {
						margin: 0;
						left: 100%;
						top: 0;
						border-left: 1px solid darken($informative-color, 5);
						border-top: 0;
					}
				}

				&:hover {
					> .sub-menu {
						visibility: visible;
						opacity: 1;
					}
				}
			}
		}
	}
}