@charset "utf-8";

:root {  
  --menu-color:        var(--primary-color);
  --menu-color-hover:  var(--secondary-color);
  --menu-color-active:  var(--secondary-color);
  --menu-color-active-hover: var(--link-color);
  --menu-bg:           transparent;
  --menu-bg-hover:     #e6e6e6;
  --menu-bg-active:    transparent;

}

/*===============================================/
  HAMBURGER BUTTON (Em SVG)
================================================*/
/*É necessário criar um modulo custom em HTML*/
.hamburger-container {
    padding: 0 5px;
    /* background-color: aqua; */
  }
#hamburger {
		color: #cdc7c7;
		background: none;
		border: none;
		padding: 0px;
		cursor: pointer;
    transition: all 0.3s ease-in-out; 	
	}
#hamburger svg{
		width:  2rem;
		height: 2rem;	
	}
#hamburger:hover{
		color: #FFF;
	}
  /*Definir a class hamburger, nas opções avançadas do modulo*/
@media (min-width: 992px) {
  .module.hamburger {
    display: none;
  }
}
/*===============================================/
  OFFCANVAS Toogler
================================================*/
/*É necessário criar um modulo custom em HTML*/
.toogler-area {
    padding: 0 0px 0 0;
    /* background-color: aqua; */
  }
.toogler-area #mobile-cta {
  color: #f6ffb7;
  font-size: 32px;
  cursor: pointer;
  background-color: #4c5054;
  border: none;
  padding: 6px;
  border-radius: 100%;
  box-shadow: rgba(28, 33, 44, 0.5) 0px 1px 10px 0px;
}
.toogler-area #mobile-cta:hover {
  color: #e3ff21;
  font-weight: bold;
}
  .toogler {
    cursor: pointer;
  }

/*===============================================/
  MENUS GERAL ( X & Y )
================================================*/
ul.mod-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.mod-menu a{
  text-decoration: none;
}
ul.mod-menu li {
  position: relative;
}
ul.mod-menu li > a,
ul.mod-menu li > span {
  display: block; /*Faz com que o link ocupe todo o tamanho de li*/
  cursor: pointer;
  /* font-size: 1rem;
  font-weight: normal; */
  text-decoration: none;
  /* letter-spacing: 0.02rem;   */
}
/* Accessibility Focus Outline */
ul.mod-menu a:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}


/*===============================================/
  MENU HORIZONTAL MENU-X
================================================*/
/*estrutura:
 1º nivel <ul id="main-menu" clas="mod-menu">
 2º nivel <ul clas="mod-menu__sub">
 3º nivel <ul clas="mod-menu__sub">
*/
ul.menu-x {
  font-family: "bould", Arial, Helvetica, sans-serif;
  font-size: 1.01rem;
  font-weight: 500;
  letter-spacing: 0.03rem; 
}
ul.menu-x {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 992px) {
  ul.mod-menu.menu-x {
    display: none;
  }
}

/*
  MENUS - 1º Nível
--------------------------------*/
ul.menu-x > li {
  position: relative;
  margin: 0 .5rem;
}
ul.menu-x > li > a {
  padding: 0.3rem 0.1rem;
}
/* Links */
ul.menu-x a {
  display: block;
  padding: 0.6em 1em;
  text-decoration: none;
  color: #f0f0f0;
}
/* Hover and focus states */
ul.menu-x a:hover,
ul.menu-x a:focus {
  font-style: normal;
  /* text-decoration: underline; */
}
ul.menu-x > li.active > a,
ul.menu-x > li.alias-parent-active > a {
    color: #f6ffb7;
}

/*barrinha horizontal abaixo do link*/
ul.menu-x > li > a::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  width: 0%;
  left: 0%;
  border-top: .1rem solid #e3ff21;
  border-bottom: .1rem solid #e3ff21;
  border-radius: 2px;
  transition: 0.2s ease-in;
    transition-timing-function: ease-in;
}
ul.menu-x > li > a:hover::after {
  transition-timing-function: ease-in;
  width: 100%;
}
ul.menu-x > li > a:focus::after {
    transition-timing-function: ease-in;
    width: 100%;
}
ul.menu-x > li.active > a::after,
ul.menu-x > li.alias-parent-active > a::after {
    transition-timing-function: ease-in;
    width: 100%;
}

/*
  SUBMENUS MENUS - 2º Nível
--------------------------------*/
ul.menu-x ul.mod-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.5em 0;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1000;
}
/* When open (via JS) */
ul.menu-x li.open > ul.mod-menu__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Third-level submenu (opens to the right) */
ul.menu-x ul.mod-menu__sub ul.mod-menu__sub {
  top: 0;
  left: 100%;
}
/* Submenu links */
ul.menu-x ul.mod-menu__sub a {
  padding: 0.5em 1em;
  color: #333;
  white-space: nowrap;
}
/* Parent indicator arrow */
ul.menu-x li.parent > a::after {
  content: "▾";
  margin-left: 0.4em;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
ul.menu-x li.open > a::after {
  transform: rotate(180deg);
}


/*===============================================/
  MENU VERTICAL MENU-Y
================================================*/

.menu-container-y{
  width: 290px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
ul.menu-y {
  flex-direction: column;
  width: 100%;
}
/* menu links */
ul.menu-y a,
ul.menu-y span{
  padding: 1rem;
  padding-left: .8rem;
}
/*
  Links Top level-01
------------------------------------------------*/
ul.menu-y > li > a,
ul.menu-y > li > span {
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  background: #fff;
  transition: background 0.4s ease;
}
ul.menu-y > li > a:hover,
ul.menu-y > li > a:focus {
  background: #eee;
}
/*
  Links level-02 &(>)
------------------------------------------------*/
/* Submenu base state */
ul.menu-y ul.mod-menu__sub {
  overflow: hidden;
  height: 0;
  display: none;
  --menu-animation-duration: 250ms; /* customize per project */
  --menu-animation-easing: easeOutCubic; /* linear | easeInOutQuad | easeOutCubic */
}
/* Visible submenu */
ul.menu-y li.parent.open > ul.mod-menu__sub {
  display: block;
}

/* Submenu links */
ul.menu-y ul.mod-menu__sub li > a,
ul.menu-y ul.mod-menu__sub li > span {
  padding-left: 1rem;
}
ul.menu-y ul.mod-menu__sub a {
  display: block;
  color: #555;
  border-bottom: 1px solid #eee;
  background: #fff;
  transition: background 0.4s ease;
}
ul.menu-y ul.mod-menu__sub a:hover, 
ul.menu-y ul.mod-menu__sub a:focus {
  background: #eee;
}
/*
  Links level-03 &(>)
------------------------------------------------*/

/* Submenu links */
ul.menu-y ul.mod-menu__sub ul.mod-menu__sub li > a,
ul.menu-y ul.mod-menu__sub ul.mod-menu__sub li > span {
  padding-left: 2.5rem;
}
/*
  Arrow indicator
------------------------------------------------*/
ul.menu-y li.parent > a::after {
  content: "▸";
  position: absolute;
  right: 1em;
  transition: transform 0.3s ease;
}
ul.menu-y li.open > a::after {
  transform: rotate(90deg);
}




/*===============================================/
FIXAR DIMENSOES DA NAVBAR - fixar o logotipo
================================================*/

#nav-middle {
  margin-top: 40px !important;
  color: rgb(236, 236, 236);
}
#nav-left, #nav-center, #nav-right{
  position: relative;
}
#nav-center {
  width: 100px;
  max-width: 225px;
}
.container-nav-left, .container-nav-center, .container-nav-right{
  position: absolute;
}
.container-nav-left{
  right: 0px;
}
.container-nav-center{
  bottom: -21px;
}
.container-nav-right{
  right: 0px;
  padding-right: 0px;
}
.nav-left.module {
  padding-right: 20px !important;
}
.nav-right.module {
  padding-left: 20px !important;
}
@media (min-width: 992px) {
  .container-nav-right{
     left: 0px;
     right: inherit;
     padding-right: 0px;
  }
}