@charset "UTF-8";
/* 5 Oceans Navigation CSS Document */
/*
font-family: 'Ruda', sans-serif;
font-family: 'Kadwa', serif;
*/

nav {
	width: 80%;
	background: rgba(255, 255, 255, .7);
	margin: 0 auto 10px;
	border-radius: 10px;
	overflow: hidden;
}

.navigation {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	font-family: 'Kadwa', serif;
}

.navigation li a {
	display: block;
	font-size: calc(1rem + 0.35vw);
	color: #9b7253;
	text-align: center;
	padding: 4px 12px;
	transition: background 0.8s ease;
}
.navigation li a:hover {
	background: white;
}

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

@media (max-width: 1080px) {
	nav {
		width: 85%;
	}
}

@media (max-width:992px) {

	nav {
		width: 95%;
	}
	.navigation li a {
		padding: 3px 4px;
	}
}


@media (max-width:768px) {
	
	nav {
		width: 98%;
		padding: 3px 0;
	}
	
	
}


@media (max-width:576px) {

header h1 {
	width: 270px;
	height: 75px;
	margin: 25px auto 10px;
	background-size: 100%;
}
/*mobile*/

nav {
		position: relative;
		height: 30px;
		border-radius: 0;
		width: 100%;
		overflow: visible;
	}

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

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

.navigation {
		transition: max-height 1s ease-in-out;
		background: #9b7253;
		width: 140px;
		padding: 0;
		position: absolute;
		top: 30px;
		right: 0;
		z-index: 120;
		-webkit-flex-flow: column;
		-moz-flex-flow: column;
		flex-flow: column;
		max-height: 0px;
		overflow: hidden;
	}

.navigation li {
		margin: 0;
		padding: 0;
		border-bottom: solid 1px #9b7253;
		font-weight: 400;
	}
.navigation li:last-child {
		border-bottom: none;
	}

.navigation li a {
		background: #f7ecc7;
		font-size: 1.1rem;
		padding: 2px 0;
		font-weight: 400;
	}
.navigation li a:hover {
		background: #9b7253;
		color: #f7ecc7;
	}
	
	
}


@media (max-width: 480px) {
	
	
}