.elementor-567 .elementor-element.elementor-element-a3fdccb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-96ffaa0 *//* =========================================================
   SUPERVISORES TÁ ON — HEADER
   LOGO MAIOR NO DESKTOP + MOBILE CONTROLADO
========================================================= */
.rio-header,
.rio-header * {
  box-sizing: border-box;
}
.rio-header {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 110px;
  margin: 0 !important;
  padding: 0 !important;
  background: #0064a2;
  border-top: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.55);
  font-family: var(
    --font-site,
    'Montserrat',
    'Poppins',
    Arial,
    Helvetica,
    sans-serif
  );
}
/* =========================================================
   ESTRUTURA INTERNA
========================================================= */
.rio-header-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 38.5% 61.5%;
  align-items: center;
}
/* =========================================================
   ÁREA DA LOGO
========================================================= */
.rio-header-logo-area {
  width: 100%;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rio-header-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
/* LOGO DESKTOP */
.rio-header-logo {
  display: block;
  width: 320px;
  max-width: 320px;
  height: auto;
  max-height: 88px;
  object-fit: contain;
}
/* =========================================================
   MENU
========================================================= */
.rio-header-nav {
  width: 100%;
  height: 100%;
  padding: 0 185px 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
}
.rio-header-nav a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    opacity .25s ease,
    transform .25s ease;
}
.rio-header-nav a:hover {
  opacity: .78;
  transform: translateY(-1px);
}
/* =========================================================
   DESKTOP GRANDE
========================================================= */
@media (min-width: 1400px) {
  .rio-header-logo {
    width: 360px;
    max-width: 360px;
    max-height: 92px;
  }
  .rio-header-nav {
    padding-right: 220px;
    gap: 68px;
  }
}
/* =========================================================
   NOTEBOOK / DESKTOP MÉDIO
========================================================= */
@media (min-width: 1025px) and (max-width: 1399px) {
  .rio-header-inner {
    grid-template-columns: 36% 64%;
  }
  .rio-header-logo {
    width: 285px;
    max-width: 285px;
    max-height: 82px;
  }
  .rio-header-nav {
    padding: 0 70px 0 35px;
    gap: 46px;
  }
  .rio-header-nav a {
    font-size: 15px;
  }
}
/* =========================================================
   TABLET
========================================================= */
@media (min-width: 901px) and (max-width: 1024px) {
  .rio-header-inner {
    grid-template-columns: 34% 66%;
  }
  .rio-header-logo {
    width: 230px;
    max-width: 230px;
    max-height: 72px;
  }
  .rio-header-nav {
    padding: 0 30px;
    gap: 34px;
  }
  .rio-header-nav a {
    font-size: 14px;
  }
}
/* =========================================================
   MOBILE  (logo MAIOR)
========================================================= */
@media (max-width: 900px) {
  .rio-header {
    height: auto;
  }
  .rio-header-inner {
    display: flex;
    flex-direction: column;
  }
  .rio-header-logo-area {
    height: 96px;
    padding: 6px 18px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.45);
  }
  .rio-header-logo-link {
    width: 100%;
    height: 100%;
  }
  .rio-header-logo {
    width: 330px;
    max-width: 330px;
    max-height: 84px;
  }
  .rio-header-nav {
    width: 100%;
    height: auto;
    padding: 21px 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
  }
  .rio-header-nav a {
    font-size: 15px;
  }
}
/* =========================================================
   CELULAR  (logo MAIOR)
========================================================= */
@media (max-width: 480px) {
  .rio-header-logo-area {
    height: 88px;
    padding: 6px 14px;
  }
  .rio-header-logo {
    width: min(300px, calc(100% - 28px));
    max-width: 300px;
    max-height: 76px;
  }
  .rio-header-nav {
    padding: 18px 12px;
    gap: 18px 23px;
  }
  .rio-header-nav a {
    font-size: 14px;
  }
}
/* =========================================================
   CELULARES MUITO ESTREITOS  (logo MAIOR)
========================================================= */
@media (max-width: 360px) {
  .rio-header-logo-area {
    height: 80px;
    padding: 6px 14px;
  }
  .rio-header-logo {
    width: min(272px, calc(100% - 24px));
    max-width: 272px;
    max-height: 68px;
  }
  .rio-header-nav {
    gap: 16px 18px;
  }
  .rio-header-nav a {
    font-size: 13px;
  }
}/* End custom CSS */