.main-navigation:not(.mobile-navigation) {
	border-bottom: 1px solid $color__border;
	box-shadow: 3px 0px 7px rgba(0, 0, 0, 0.1);
	.container > div {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}
	ul {
		display: block;
		list-style: none;
		margin: 0;
		display: flex;
		flex-flow: row wrap;
		li {
			&:hover > ul,
			&.focus > ul {
				display: block;
				visibility: visible;
			    opacity: 1;
			    transform: translateY(0) !important;
			    -ms-transform: translateY(0);
			    z-index: 10;
			}
		}
		ul {
			position: absolute;
			z-index: 10;
			top: 100%;
			left: 0;
			background: $color__white;
			-webkit-box-shadow: -6px 6px 20px rgba(0, 0, 0, .15);
			box-shadow: -6px 6px 20px rgba(0, 0, 0, .15);
			-ms-transform: translateY(10px);
			transform: translateY(10px);
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s;
			li {
				&:hover > ul,
				&.focus > ul {
					display: block;
					left: 105%;
					right: unset;
					top: 0;
				}

			}
			ul {
				transition: all 0.3s ease;
			}

			a {
				min-width: 200px;
				font-weight: 600;
				color: $color__link;
				display: block;
				line-height: 1.5;
				padding: 12px 15px;
			}
			:hover > a {
				background: $color__white;
				color: $color__link-hover;
			}
		}
	}
	li {
		float: left;
		position: relative;
		> a {
			text-transform: uppercase;
			text-decoration: none;
			@include font-size(1.4);
			font-weight: 400;
			color: $color__text-main;
			border-radius: 20px;
			display: inline-block;
			line-height: 1.7;
			letter-spacing: 0.05em;
			opacity: 0.6;
			padding: 4px 15px;

		}
		&:hover > a,
		&.focus > a {
			color: $color__link-hover;
		}
	}
	li.menu-item-has-children > a::after,
	li.page_item_has_children > a::after {
		content: '\f0d7';
		@include fa-icon();
		font-weight: 400;
		margin-left: 8px;
		color: $color__main;
		@include font-size(1.2);
	}
	div > ul > .current_page_item > a,
	div > ul > .current-menu-item > a,
	.current_page_ancestor > a,
	.current-menu-ancestor > a {
		color: $color__link-hover;
	}
	ul.menu,
	ul {
		> li {
			margin-left: 8px;
			padding-top: 8px;
			padding-bottom: 11px;
		}
		.sub-menu.sub-menu,
		.children.children {
			background: #fff;
			-webkit-box-shadow: -6px 6px 20px rgba(0, 0, 0, .15);
			box-shadow: 0px 6px 20px rgba(0, 0, 0, .15);
			padding-left: 0;
			li {
				width: 100%;
				display: block;
				margin-left: 0;
				padding: 0;
				a {
					@include font-size(1.3);
					color: $color__black;
					font-weight: 400;
					display: block;
					line-height: 1.5;
					padding: 12px 20px;
				}
				&:hover > a {
					color: $color__link-hover;
					background: transparent;
				}
				+ li {
					border-top: 1px solid #e9e9e9;
				}
			}
			li.menu-item-has-children,
			li.page_item_has_children {
				> a::after {
					content: '\f0da';
					top: calc(50% - 6px);
					height: 12px;
					margin-right: 10px;
				}
			}
		}
	}

	// When menu is not actived yet.
	.menu > ul > li {
		margin-left: 20px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.dropToggle {
		display: none;
	}
}

.posts-navigation,
.post-navigation {
	.site-main & {
		margin: 0 0 1.5em;
		overflow: hidden;
	}
	.nav-previous {
		float: left;
		width: 50%;
	}
	.nav-next {
		float: right;
		text-align: right;
		width: 50%;
	}
}

/* Small menu. */
.menu-toggle {
	padding: 0 20px;
	border: none;
	background: transparent;
	text-transform: uppercase;
	color: $color__main;
	float: right;
	display: none;
	&::before {
		content: "\f0c9";
		@include fa-icon();
		margin-right: 10px;
		@include font-size(2.4);
		vertical-align: sub;
	}
	@media(max-width: 991px) {
		display: block;
		border-radius: 100px;
		padding: 0px 35px;
		background-color: $color__main;
		color: $color__white;
		height: 46px;
		margin-top: 20px;
		&:hover {
			background-color: $color__main;
		}
		&:focus {
			background-color: $color__main;
			color: $color__white;
		}
	}
	@media(max-width: 767px) {
		.menu-toggle {
			line-height: 1.9;
			margin: 35px auto 10px;
			&:before {
				@include font-size(2);
			}
		}
	}
}

.menu-toggle--close {
	float: none;
	@media(max-width: 991px) {
		display: table;
		margin: 20px 25px 0 auto;
	}
	&:before {
		content: '\f00d';
	}
}

.mobile-navigation {
	position: absolute;
	z-index: 1;
	top: 100%;
	right: 0;
	width: 50%;
	z-index: 9;
	background-color: #f5f5f5;
	&.mobile-navigation--toggled {
		display: none;
	}
	li {
		position: relative;
	}
	ul {
		list-style: none;
		padding-left: 0;
	}
	div.mobile-menu {
		padding: 0 20px;
	}
	ul.mobile-menu,
	ul {
		margin-bottom: 0;
		padding: 0;
		margin: 0;
		a {
			text-transform: uppercase;
			@include font-size(1.4);
			&:hover {
				color: $color__main;
				text-decoration: none;
			}
		}
		> li {
			float: none;
			line-height: inherit;
			padding: 10px 0 10px 15px;
			margin-left: 0;
			+ li {
				border-top: 1px solid $color__white;
				margin-left: 0;
			}
			&.current_page_item > a,
			&.current-menu-item > a,
			&.current_page_ancestor > a,
			&.current-menu-ancestor > a {
				color: $color__main;
			}
			a {
				color: $color__black;
				background: 0 0;
			}
			.sub-menu,
			.children {
				margin-top: 10px;
				display: none;
				margin-left: 15px;
				li {
					width: 100%;
					padding: 7px 0 7px 10px;
					border-top: 1px solid $color__white;
					margin-left: 0;
					a {
						display: inline-block;
						width: auto;
					}
				}
				li:last-child {
					padding-bottom: 0;
				}
			}
		}
	}
}

.dropToggle{
	position: absolute;
	top: 6px;
	right: 0;
	padding: 13px;
	transition: all 0.3s ease;
	color: $color__black;
	background: none;
	border: none;
	&:hover,
	&:focus {
		background: none;
		border: none;
		color: $color__black;
	}
}
span.is-toggled  {
	transform: scaleY(-1)
}
@media (max-width: 991px) {
	.main-navigation:not(.mobile-navigation) {
		display: none;
	}
}
@media (max-width: 767px) {
	.mobile-navigation {
		width: 100%;
	}
}

.enable-mobile-menu {
	overflow-y: hidden;
	.mobile-navigation {
		top: 0;
		overflow-y: auto;
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #fff;
		z-index: 999;
		padding-bottom: 20px;
	}
}

.admin-bar .mobile-navigation {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .mobile-navigation {
		top: 46px;
	}
}