/* MOBILE FIRST */
.menu {
	--height: 70px;
	--transition: .2s;

	position: fixed;
	inset: 0;
	height: var(--height, 70px);
	background-color: rgba(0,0,0,.8);
	transition: var(--transition, .1s);
	font-size: .9rem;
	z-index: 100;
}
.menu__container {
	position: absolute;
  	bottom: 100%;
	width: 100%;
	padding: calc(var(--height, 70px) + 10px) .7rem 2rem;
	background-color: rgba(0,0,0,.8);
	box-shadow: 0px 5px 10px 0px rgba(255, 102, 0, 0.43);
	transition: var(--transition, .1s);
}
.menu__container .menu__logo {
	position: fixed;
}
.menu__item {
	position: relative;
	display: block;
	color: inherit;
	padding: 10px 15px;
	margin-bottom: 4px;
	font-weight: bold;
	text-decoration: none;
	color:rgba(255,255,255,1);
	transition: var(--transition, .1s);
}
.menu__submenuContainer .menu__item {
	margin-left: 10px;
}
.menu__item--selected {
	color: rgb(255,102,0);
	font-size: 1.4em;
}
.menu__item--catetorySelected {
	color: rgb(255,102,0);
	/* color: #fff; */
	opacity: .7;
	font-weight: normal;
}


/* DESKTOP */
@media screen and (min-width: 769px) {
	.menu {
		backdrop-filter: blur(5px);
		background-color: rgba(255,102,0,0.8);
		font-size: 1rem;
	}
	.menu__container {
		position: relative;
		display: flex;
		margin: 0 auto;
		padding: initial;
		bottom: initial;
		max-width: 1000px;
		flex-direction: initial;
		gap: 20px;
		align-items: center;
		background: none;
		backdrop-filter: none;
		box-shadow: 0 0 2px 0 rgba(255, 102, 0, 0);
		height: 100%;
		transform: translateY(0);
	}
	.menu__container .menu__logo {
		position: relative;
	}

	.menu__item {
		padding: 18px 15px;
		border-radius: 10px;
		cursor: pointer;
		margin-bottom: 0;
	}
	.menu__item:hover,
	.menu__submenu:hover > .menu__item {
		background-color: #1a1713;
		color: #fff;
	}

	.menu__item--selected {
		color: inherit;
		font-size: 1.2em;
	}
	.menu__item--catetorySelected {
		color: inherit;
		opacity: 1;
	}

	/* SUBMENU */
	.menu__submenu {
		position: relative;
	}
	.menu__submenuContainer {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		width: 100%;
		padding: 5px;
		margin: 15px -5px 0 -5px;
		border-radius: 15px;
		background-color: rgba(255,102,0,0.8);
		backdrop-filter: blur(5px);
	}
	.menu__submenuContainer .menu__item {
		margin-left: initial;
	}
	.menu__submenuContainer:before {
		position: absolute;
		content: '';
		inset: -20px;
	}
	.menu__submenu:hover .menu__submenuContainer {
		display: block;
	}
}


/* MOBILE + CHECKBOX */
#button_menu_mobile {
  position: absolute;
  /* display: none; */
  width: 50px;
  height: 50px;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transition: .5s;
  transform: rotate(0deg) scale(.8)
}
#button_menu_mobile .div {
  position: absolute;
  width: 34px;
  height: 4px;
  /* background-color: #fff; */
  background-color: #FF6600;
  left: 50%;
  margin-left: -17px;
  border-radius: 2px;
  transform-origin: center;
  transition: .5s
}
#button_menu_mobile .div:nth-child(1) {
  top: 12px;
}
#button_menu_mobile .div:nth-child(2) {
  top: 50%;
  margin-top: -2px;
}
#button_menu_mobile .div:nth-child(3) {
  bottom: 12px;
}
#button_menu_mobile .text {
  position: absolute;
  right: 100%;
  line-height: 40px;
  margin-right: 10px;
  /* color: #fff; */
  color: #FF6600;
  font-weight: bold;
  top: 5px;
  font-size: 18px;
  font-family: helvetica;
  transition: .5s;
}

/* DESKTOP */
@media screen and (min-width: 769px) {
	#button_menu_mobile {
		display: none;
	}
}
/* IS-MOBILE */
@media screen and (max-width: 768px) {
	#input_menu_mobile:checked ~ #bg_close_menu_mobile {
		opacity: .7;
	}
	#input_menu_mobile:checked ~ .menu__container {
		transform: translateY(100%);
	}

	#input_menu_mobile:checked ~ #button_menu_mobile {
		transform: rotate(-90deg) scale(.7);
	}
	#input_menu_mobile:checked ~ #button_menu_mobile .div:nth-child(1) {
		transform: rotate(-135deg);
		top: 50%;
		margin-top: -2px;
		background-color: #FF6600;
	}
	#input_menu_mobile:checked ~ #button_menu_mobile .div:nth-child(2) {
		opacity: 0;
		width: 4px;
		margin-left: -2px;
		background-color: #FF6600;
	}
	#input_menu_mobile:checked ~ #button_menu_mobile .div:nth-child(3) {
		transform: rotate(-45deg);
		top: 50%;
		margin-top: -2px;
		background-color: #FF6600;
	}
	#input_menu_mobile:checked ~ #button_menu_mobile .text {
		transform: scale(.7) rotate(90deg);
		opacity: 0;
		pointer-events: none;
	}
}