.menu-hidden{
	position: fixed;
	left: 0; right: 0; bottom: 0; top: 0;
	z-index: 99;
	width: 30%;
	background-color: rgba(255, 171, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: 400ms all ease;
	transform: translateX(-30rem);
}.menu-hidden.visible{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

	.sub-menu-hidden{
		width: 100%;
		height: 100vh;
		padding-top: 10rem;
		background-image: linear-gradient(
			to left top,
			rgba(204, 204, 204, 0.2) 15%,
			rgba(255, 255, 255, 0.6) 30%,
			rgba(204, 204, 204, 0.2) 60%,
			rgba(255, 255, 255, 0.6) 80%
		);
		border-right: 0.3rem solid rgba(221, 160, 0, 0.6);
		user-select: none;
	}

		.sub-menu-hidden > h3{
			text-align: center;
			font-size: 2rem;
			font-weight: bold;
			margin: 3rem 0;
			font-family: "IbmPlexMonoItalic";
			text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.6);
			color: blue;
		}.sub-menu-hidden > span{
			display: block;
			text-align: center;
			padding: 3.3rem 0;
		}
		.sub-menu-hidden > span > a{
			display: block;
			width: fit-content;
			margin: auto;
			font-size: 2.3rem;
			font-weight: 600;
			font-family: "RobotoThin";
			text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.6);
			text-decoration: none;
			color: #000;
			cursor: pointer;
			transition: 500ms all ease;
		}.sub-menu-hidden > span > a:hover{
			transform: rotate(360deg) scale(1.3); color: blue;
		}.sub-menu-hidden > span[medio]{
			margin: 3rem 0;
		}

.header-fixed{
	position: fixed;
	top: 0; right: 0; left: 0;
	display: block;
	z-index: 99;
	width: 100%;
	padding: 3rem;
	background-image: radial-gradient(
		circle,
		var(--brown-2) 20%,
		var(--brown-1) 40%,
		var(--brown) 60%,
		var(--brown1) 90%
	);
	text-align: center;
	border-bottom: 0.3rem solid var(--brown2);
}

	.logo{
		display: inline;
		font-size: 3rem;
		font-weight: bold;
		color: var(--black);
		text-shadow: 0 0 0.6rem var(--brown1);
		cursor: pointer;
		user-select: none;
	}

.header-hidden{
	display: block;
	margin-bottom: 9rem;
}

.header{
	background-image: linear-gradient(
		to top,
		var(--brown-3) 1%,
		var(--brown1) 99%
	);
	border-bottom: 0.3rem solid var(--black);
	overflow: hidden;
	user-select: none;
}

	.header > div, .header > nav{
		display: inline-block;
	}

	.header > div{padding: 3rem;}
	.header > div > span{color: var(--brown1);}

	.header > nav{
		float: right;
	}

	.header > nav > ul > li{
		display: inline-block;
		list-style: none;
	}

	.nav-select{
		color: var(--brown2) !important;
	}.nav-select:hover{
		color: #fff !important;
	}

	.header > nav > ul > li > a{
		display: inline-block;
		padding: 3rem;
		transition: 400ms all ease;
		color: var(--brown1);
		text-decoration: none;
		font-weight: bold;
	}.header > nav > ul > li > a:hover{
		transform: scale(1.2);
		color: var(--white);
	}

.sub-footer{
	padding: 3rem;
	background-color: var(--brown-2);
}

	.sub-footer-title{
		font-size: 2.9rem;
		text-align: center;
		color: var(--brown2);
		text-shadow: 0 0 0.6rem var(--brown-1);
	}

		.address{
			width: 90%;
			margin: 0 auto;
		}

			.address-control{
				text-align: center;
				margin: 3rem 0;
			}.address-control > strong{
				color: var(--brown2);
			}.address-control > span{
				color: var(--brown1);
			}.address-selected{
				color: var(--brown) !important;
				font-weight: bold;
				user-select: none;
				transition: 400ms all ease;
			}.address-control span a{
			    display: inline-block;
			    letter-spacing: 0.1rem; 
			    text-decoration: none;
			    transition: 300ms ease;
			}.address-control span a:hover{
			    color: var(--brown1);
			}

.footer{
	padding: 1rem;
	background-color: var(--brown1);
	border-top: 0.2rem solid var(--brown2);
}

	.footer > small{
		display: block;
		text-align: center;
		color: var(--brown-3);
	}

@media screen and (max-width: 1300px){
	.menu-hidden{width: 40%;}
}

@media screen and (max-width: 1000px){
	.menu-hidden{width: 50%;}
}

@media screen and (max-width: 800px){
	.menu-hidden{width: 60%;}
}

@media screen and (max-width: 750px){
	.header > nav{
		display: none;
	}

	.header > div{
		width: 100%;
		text-align: center;
	}

	.menu-hidden{width: 70%;}
}

@media screen and (max-width: 550px){
	.menu-hidden{width: 100%;}
}

@media screen and (max-width: 600px){

	.sub-footer{
		padding: 0.6rem;
	}

		.address-control > strong, .address-control > span{
			text-align: center;
			font-size: 1.1rem;
		}
}

@media screen and (max-width: 255px){
	.address-selected{
		font-size: 0.8rem !important;
	}
}