@media screen {
	.custom-logo {
		min-width: 11rem;
		margin: 1rem;
	}
	.main-navigation,.secondary-navigation {
		ul {
			display: none;
			list-style: none;
			margin: 0;
			padding-left: 0;

			ul {
				box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
				float: left;
				position: absolute;
				top: 100%;
				left: -999em;
				z-index: 99999;

				ul {
					left: -999em;
					top: 0;
				}

				li {

					&:hover > ul,
					&.focus > ul {
						display: block;
						left: auto;
					}
				}

				a {
					width: 200px;
				}

				:hover > a,
				.focus > a {
				}

				a:hover,
				a.focus {
				}
			}

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

		li {
			position: relative;

			&:hover > a,
			&.focus > a {
			}
		}

		a {
			display: flex;
			align-items: center;
			min-height: 100%;
			padding: 0 0.5rem;
			text-decoration: none;
			font-size: 1rem;
		}

		.current_page_item > a,
		.current-menu-item > a,
		.current_page_ancestor > a,
		.current-menu-ancestor > a {
			font-weight: bold;
			border-left: 1px solid $color__black;
		}
	}

	.main-navigation {
	}
	.secondary-navigation {
		padding: 1.5rem 0;
		a {
			text-transform: uppercase;
		}
	}
	/* Small menu. */
	.menu-toggle,
	.main-navigation.toggled ul {
		display: block;
	}
}
@media screen and (min-width: 48em) {
	.site-branding {
	}
	.custom-logo {
		min-width: 11rem;
		margin: 1rem 1rem 1rem 0;
	}
	.menu-toggle {
		display: none;
	}

	.main-navigation,.secondary-navigation {
		ul {
			display: flex;
		}
		a {
			padding: 0 0.5rem;
		}
		.current_page_item > a,
		.current-menu-item > a,
		.current_page_ancestor > a,
		.current-menu-ancestor > a {
			border-left: none;
		}
	}
	.main-navigation { 
		padding-bottom: 1em;
		ul {
			justify-content: end;
		}
		.current-menu-item::after {
			display: block;
			content: "";
			width: 60%;
			margin:0 20%;
			margin-top: 0.9em;
			border-bottom: 2px solid $color__black;
		}
	}
	.secondary-navigation {
	}
}

.comment-navigation,
.posts-navigation,
.post-navigation {

	.site-main & {
		margin: 0 0 1.5em;
	}

	.nav-links {
		display: flex;
	}

	.nav-previous {
		flex: 1 0 50%;
	}

	.nav-next {
		text-align: end;
		flex: 1 0 50%;
	}
}
@media screen and (min-width: 80em) {
	.main-navigation,.secondary-navigation {
		a {
			padding: 0 1rem;
		}
	}
	.main-navigation {
		padding-bottom: 0;
		.current-menu-item::after {
			margin-top: 0.4em;
			height: 100%;
		}
	}
}