.navi {
	width: 100%;
}
.navi .show-menu {
	text-align: left;
	padding: 5px 10px;
	display: block;
	background: #33638b;
}
.navi .show-menu:hover {
	cursor: pointer;
}
.navi ul {
	display: none;
}
.navi li {
	display: block;
	text-align: center;
	width: 100%;
	margin: 2px 0;
	background: #33638b;
}
.navi li a {
	display: block;
	line-height: 48px;
	color: #FFF;
}
.navi li:hover a, .navi li.selected a {
	background: #003c6e;
	color: #FFF;
}
.navi input[type=checkbox]{
	display: none;
}
.navi input[type=checkbox]:checked ~ .menu{
	display: block;
}
.navi .menu_hidden li {
	background: #003c6e;
}
.navi .menu_hidden li:hover a {
	background: #33638b;
}

@media screen and (min-width: 770px) {
	.navi ul {
		display: block;
	}
	.navi .show-menu {
		display: none;
	}
	.navi li {
		display: inline-block;
		float: left;
		width: 11.1%;
		margin: 0;
	}
	.toggle-li {
		position: relative;
	}
	.navi .menu_hidden {
		display: none;
		position: absolute;
		top: 53px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
	}
	.navi .menu_hidden li {
		display: block;
		float: none;
		width: auto;
	}
	.navi .menu_hidden li a {
		padding: 0 20px;
		white-space: nowrap;
	}
}