.main-navigation{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 49;
	background-color: darkorange;
	&.toggled{
		height: 100vh;
		.menu-main-nav-container{
			display: block;
		}
	}
	.m1-sm({
		position: relative;
		height: auto;
		line-height: 40px;
		background-color: transparent;
		&.toggled{
			height: auto;
		}
	});
	.menu-main-nav-container{
		.wrapper();
		.clearfix();
		display: none;
		.admin-bar &{
			margin-top: 46px;
		}
		.m1-sm({
			display: block;
			.admin-bar &{
				margin-top: 0;
			}
		});
	}
	.nav-menu{
		list-style: none;
		margin: 0;
		padding: 0;
		padding-left: 0;
		.menu-item{
			position: relative;
			display: block;
			.m1-sm({
				float: left;
				&.menu-item-has-children{
					& > a{
						&::after{
							display: inline-block;
							content: "\00b7\00b7\00b7";
							margin-left: @default-spacing * 0.5;
							background-color: var(--brand-color-aside);
							line-height: 20px;
							width: 20px;
							text-align: center;
							color: var(--mainmenu-link-color);
							font-weight: bold;
							border-radius: @default-radius;
						}
					}
				}
				&::after{
					content: "|";
					color: var(--brand-color-aside);
					display: block;
					line-height: 50px;
					height: 50px;
					float: left;
				}
				&:last-child::after{
					content: "";
				}
				.menu-item::after{
					content: "";
				}
			});
			a{
				position: relative;
				display: block;
				float: left;
				padding: 0 @default-spacing;
				text-decoration: none;
				font-size: @font-size-large;
				line-height: 50px;
				//height: 50px;
				//color: #454545;
				color: var(--mainmenu-link-color);
				.m1-sm({
					font-size: @font-size-default;
					border-bottom: none;
				});
				&:hover,
				&:focus,
				&:active{
					color: var(--mainmenu-hover-color);
				}
			}
		}
		& > .menu-item.menu-item-has-children:hover{
			.m1-sm({
				& > a{
					//color: var(--mainmenu-hover-color);
					box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
					border-top-right-radius: @default-radius;
					border-top-left-radius: @default-radius;
					background-color: var(--brand-color-aside);
				}
			});
		}
		& .sub-menu{
			.m1-sm({
				//background-color: #fff;
				//padding-top: 10px;
				padding-bottom: 10px;
				& a{
					&:hover,
					&:focus,
					&:active{
						background-color: var(--brand-color-aside-alt);
					}
				}
			});
		}
		.current-menu-parent,
		.current-menu-item{
			& > a{
				color: var(--mainmenu-active-color);
			}
		}
	}
	.menu-toggle{
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 50;
		width: auto;
		height: auto;
		.admin-bar &{
			top: 10px + 46;
		}
	}
}


.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	background-color: var(--brand-color-aside);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	margin-left: 0;
	padding-left: 0;
	z-index: 49;
	border-top-right-radius: @default-radius;
	border-bottom-right-radius: @default-radius;
	border-bottom-left-radius: @default-radius;
	li {
		margin-left: 0;
	}
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
	border-top-left-radius: @default-radius;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
}


/*
<nav class="navigation pagination" role="navigation">
		<h2 class="screen-reader-text">Posts navigation</h2>
		<div class="nav-links"><a class="prev page-numbers" href="http://wpbeta.localhost/?paged=4&amp;cat=1">Newer Posts</a>
<a class="page-numbers" href="http://wpbeta.localhost/?cat=1">1</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://wpbeta.localhost/?paged=3&amp;cat=1">3</a>
<a class="page-numbers" href="http://wpbeta.localhost/?paged=4&amp;cat=1">4</a>
<span aria-current="page" class="page-numbers current">5</span>
<a class="page-numbers" href="http://wpbeta.localhost/?paged=6&amp;cat=1">6</a>
<a class="page-numbers" href="http://wpbeta.localhost/?paged=7&amp;cat=1">7</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://wpbeta.localhost/?paged=9&amp;cat=1">9</a>
<a class="next page-numbers" href="http://wpbeta.localhost/?paged=6&amp;cat=1">Older Posts</a></div>
	</nav>
*/
.navigation.pagination{
	margin: @default-spacing;
	margin-top: @default-spacing * 2;
	font-size: @font-size-small;
	.page-numbers:not(.dots){
		display: inline-block;
		margin: 2px;
		text-decoration: none;
		padding: 7px 12px;
		border: none;
		border-radius: 3px;
		line-height: 1;
		background-color: var(--button-background);
		color: var(--button-color);
		font-weight: bold;
		box-shadow: 0 0 0 1px var(--button-background);
		&:hover {
			box-shadow: 0 0 0 1px var(--button-hover-background);
			background-color: var(--button-hover-background);
			color: var(--button-hover-color);
		}
		&.current,
		&:active,
		&:focus {
			box-shadow: 0 0 0 1px var(--button-active-background);
			background-color: var(--button-active-background);
			color: var(--button-active-color);
		}
		&.prev{
			margin-right: 20px;
		}
		&.next{
			margin-left: 20px;
		}
	}
}