.main-navigation{
	
	position: relative;
	
	&.toggled{
		& > div{
			.translateX(0);
			opacity: 1;
		}
	}
	
	& > div{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		height: 100vh;
		z-index: 49;
		background-color: var(--brand-color-background);
		overflow: auto;
		padding: 5rem 0;
		opacity: 0;
		.translateX(100vw);
		.transition(all .2s cubic-bezier(1, .3, .3, 1));
		.m1-md({
			.translateX(0);
			position: relative;
			opacity: 1;
			background-color: transparent;
			height: auto;
			padding: 0;
			overflow: inherit;
			//line-height: 40px;
		});
	}
	
	.menu-item{
		display: block;
		position: relative;
		text-align: left;
		&:hover,
		&:focus{
			& > .sub-menu{
				left: auto;
			}
		}
		&.current-menu-parent,
		&.current-menu-item{
			& > a{
				color: var(--mainmenu-active-color);
			}
		}
		a{
			position: relative;
			display: block;
			padding: 0 @default-spacing;
			text-decoration: none;
			font-size: @font-size-large;
			line-height: 50px;
			color: var(--mainmenu-link-color);
			.m1-md({
				font-size: @font-size-default;
			});
			&:hover,
			&:focus,
			&:active{
				color: var(--mainmenu-hover-color);
			}
		}
	}
	.nav-menu{
		list-style: none;
		padding-left: 0;
		margin-left: 0;
		margin: 0 3rem;
		.m1-md({
			margin: 0;
		});
		& > .menu-item{
			.m1-md({
				float: left;
				&.menu-item-has-children{
					&:hover,
					&:focus{
						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);
					}
					& > 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;
					position: absolute;
					top: 0;
					right: -1px;
				}
				&:last-child::after{
					content: "";
				}
			});
		}
	}
	.sub-menu{
		list-style: none;
		padding-left: 0;
		margin-left: 0;
		margin: 0 3rem;
		.m1-md({
			margin: 0;
			padding-bottom: 10px;
			
			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;
			z-index: 49;
			border-top-right-radius: @default-radius;
			border-bottom-right-radius: @default-radius;
			border-bottom-left-radius: @default-radius;
			
		});
		& > .menu-item{
			.m1-md({
				width: 250px;
				& a{
					&:hover,
					&:focus,
					&:active{
						background-color: var(--brand-color-aside-alt);
					}
				}
			});
		}
	}
}


/**/


.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;
		}
	}
}


/**/


.menu-toggle{
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 50;
	background-color: transparent;
	border: none;
	.box-shadow(none);
    .square(30px);
	.transition(all .2s cubic-bezier(1, .3, .3, 1));
	.admin-bar &{
		top: 10px + 46;
	}
    .m1-md({
        display: none;
    });
	.buttontext{
		.hide-text();
	}
    .hamburger{
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -10px;
        transform-origin: center center;
        .transition(all 0.2s cubic-bezier(1,0.3,0.3,1));
        &:before{
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            border: 3px solid transparent;
            top: 50%;
            left: 50%;
            margin-top: -20px;
            margin-left: -20px;
            border-radius: 100%;
            .transition(all 0.5s cubic-bezier(1,0.3,0.3,1));
        }
        .line{
            width: 20px;
            height: 3px;
            background-color: var(--mainmenu-link-color);
            display: block;
            margin: 3px auto;
            transform-origin: center;
            .transition(all 0.2s cubic-bezier(1,0.3,0.3,1));
        }

    }
}

.toggled{
	.menu-toggle{
		.hamburger{
			&:before{
				border: 3px solid var(--mainmenu-active-color);
			}
			.line{
				background-color: var(--mainmenu-active-color);
				&:nth-child(2){
					opacity: 0;
				}
				&:nth-child(1){
					.transform(rotate(45deg) translateX(4px) translateY(3px));
				}
				&:nth-child(3){
					.transform(rotate(-45deg) translateX(5px) translateY(-5px));
				}
			}

		}
	}
}
