@charset "UTF-8";
/* OKO Sushi Nav CSS Document */

nav {
	background: linear-gradient(to bottom, rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, .5) 65%, rgba(255, 255, 255, 0) 95%);
	padding: 10px 2vw;
}

.navigation {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	list-style-type: none;
}
.navigation > li {
	position: relative;
}
.navigation > li a {
	font-family: 'Open Sans', sans-serif;
	display: block;
	font-size: 1.6rem;
	text-align: center;
	color: #68260d;
	padding: 5px 3px;
}
.navigation > li a:hover {
	background: #68260d;
	border-radius: 15px;
	color: white;
}

.navigation li ul {
	position: absolute;
	max-height: 0;
	overflow: hidden;
	top: 40px;
	left: -35px;
	z-index: 100;
	width: 125px;
	transition: max-height 1.5s cubic-bezier(.72, 0, .39, .98) ;
}

.navigation li:hover ul {
	max-height: 500px;
}

.navigation li li {
	display: block;
	margin: 0;
	border-bottom: solid 1px rgb(233, 214, 160);
}

.navigation li li:last-child {
	border-bottom: none;
}

.navigation li li a {
	font-size: 1.4rem;
	display: block;
	margin: 0;
	padding: 6px 0;
	color: white;
	background: #c18e31;
}

.navigation li li a:hover {
	background: #b22222;
	border-radius: 0;
}

nav > label, nav > input {
	display: none;
}

@media (max-width: 900px)  {

	/*mobile navigation*/

	nav {
		position: relative;
		padding: 15px 0 0 0;
	}

	nav > label {
		display: block;
		height: 45px;
		width: 45px;
		cursor: pointer;
		margin: 0 0 0 5%;
	}

	nav > input:checked + .navigation {
		max-height: 400px;
		left: 0;
	}

	.navigation {
		transition: left 1s ease-in-out;
		width: 165px;
		padding: 0;
		position: absolute;
		top: 60px;
		left: -165px;
		z-index: 120;
		flex-flow: column;
	}

	.navigation li {
		margin: 0;
		padding: 0;
		border-bottom: solid 1px rgb(255, 255, 255);
		font-weight: 400;
	}

	.navigation li a {
		background: #68260d;
		font-size: 1.6rem;
		padding: 6px 0;
		font-weight: 400;
		color: ivory;
		border-radius: 0;
	}
	.navigation li a:hover {
		background: #f5d2b3;
		color: #68260d;
		border-radius: 0;
	}

	.navigation li ul {
		left: 100%;
		top: 0;
		width: 130px;
	}

	.navigation li li a {
		font-size: 1.3rem;
		color: ivory;
	}

	.navigation li li a:hover {
		background: #b22222;
		text-shadow: none;
		color: ivory;
	}
	
	
}