/***************************/
/* CODEPEN CSS - NO NEED ***/
/***************************/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');

:root{
  --ff-sans: 'Nunito Sans', sans-serif;
  --fs-400: 16px;
  --fs-btn: 11px;
  --color-text: #000000;
  --trans-500: all 350ms ease-in-out;
  --trans: all 250ms ease-in-out;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/***************************/
/***** BUTTON **************/
/***************************/
a.btn,
.btn{
	position: relative;
	padding: var(--padding-button, 20px 32px);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-family: var(--ff-sans);
	font-family: var(--ff-sans-700);
	font-size: var(--fs-btn, 14px);
	line-height: var(--lh-200, 1.25);
	border: 1px solid currentColor;
	text-transform:uppercase;
	letter-spacing: var(--ls-200, 1.2px);
	transition: var(--trans);
	z-index: 1;
}

.btn .btn__icon,
.btn .btn__label{pointer-events: none;}

/***************************/
/***** Mobile **************/
/***************************/
.hidden{display: none !important;}

aside#mega-menu--mobile{}
aside#mega-menu--mobile .mega__container{width: 100%;height: 100vh;height: 100svh;max-height: 100vh;max-height: 100svh;padding-top: var(--height-header, 10px);display: flex;flex-direction: column;overflow: hidden;}

aside#mega-menu--mobile .mega__container[data-active-depth="1"] button{transform: translateX(100%);opacity: 0;pointer-events: none;}

aside#mega-menu--mobile .mega__header{
  height: 60px;
  padding-inline: var(--padding-container-inline, 20px);
  background: #1f1f1f;
  background-color: #121212;
  color: #f5f5f5;
}
aside#mega-menu--mobile .mega__header .mega__controls{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

aside#mega-menu--mobile .mega__header .mega__controls button:hover {
  background-color: transparent;
  border-color: transparent;
  color: white;
}

aside#mega-menu--mobile .mega__header .mega__controls button{
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--trans);
  font-size: 16px;
}

aside#mega-menu--mobile .mega__header .mega__controls button svg{
  font-size: 16px;
  width: 10px;
  height: 12px;
  transform: rotate(180deg);
}

aside#mega-menu--mobile .mega__header .mega__controls button .btn__icon,
aside#mega-menu--mobile .mega__header .mega__controls button .btn__label{display: flex;pointer-events: none;}

aside#mega-menu--mobile .mega__body{width: 100%;height: 100%;position: relative;}

aside#mega-menu--mobile .mega__screen{padding-block: var(--padding-container-block, 50px);padding-inline: var(--padding-container-inline, 20px);width: 100%;height: 100%;overflow: auto;position: absolute;inset: 0;background-color: black;transition: var(--trans-500);}
aside#mega-menu--mobile .mega__screen[data-active-menu="false"]{
  transform: translateX(100%);
}

aside#mega-menu--mobile .mega__screen[data-active-menu="false"].stacked,
aside#mega-menu--mobile .mega__screen[data-active-menu="true"]{
  transform: translateX(0%);
  background: #1f1f1f;
  background-color: #121212;
  color: #f5f5f5;
}

aside#mega-menu--mobile nav.navigation{display: flex;flex-direction: column;gap: var(--gap-300, 12px);}
aside#mega-menu--mobile nav.navigation a.btn {
  --item-height: 24px;--icon-size: 16px; font-size: 16px; width: 100%;height: var(--item-height);padding:0;background-color: transparent;border: 0;color: white;justify-content: space-between;gap: var(--gap);
}
aside#mega-menu--mobile nav.navigation a.btn .btn__label{width: auto;height: 100%;display: flex;align-items: center;flex-shrink: 0;}
aside#mega-menu--mobile nav.navigation a.btn .btn__icon:empty{display: none;pointer-events: none;}
aside#mega-menu--mobile nav.navigation a.btn .btn__icon{
  width:100%;height: 100%;display: inline-flex;align-items: center;justify-content: center;;pointer-events: all;
  height: 20px;
}
aside#mega-menu--mobile nav.navigation a.btn .btn__icon svg{
  width: 100%;
  height: 15px;
  pointer-events: none;
  transform: rotate(180deg);
}
aside#mega-menu--mobile nav.navigation a.btn .btn__icon svg path{
  fill: white;
}