/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*#region Sem Media Query*/

body {
  font-family: "Work Sans", sans-serif;
  line-height: 1.6;
  color: #1b1b1a;
  overflow-x: hidden;
  background-color: #212752;
  margin: 0;
  padding: 0;
}

p {
  font-size: 17px;
  line-height: 22px;
  margin-bottom: 24px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 2.7rem;
  font-weight: 400;
  line-height: 46px;
  margin-bottom: 28px;
}

h2 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 34px;
  margin-bottom: 24px;
}

h2.tx-nome-presidente {
  margin-top: 10px;
  margin-bottom: 5px;
  line-height: 30px;
}

h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 0px;
  text-transform: uppercase;
}

h4 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 24px;
}

/*#region Menu Mobile */

#mob-menu {
  position: fixed;
  top: 20px;
  left: 0px;
  width: 100%;
  display: block;
  font-size: 14px;
  line-height: 36px;
  font-weight: 600;
  z-index: 20;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#mob-menu.visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

#mob-menu .mob-menu-logo {
  display: flex;
  pointer-events: none;
  width: 100%;
  margin-left: 30px;
}

#mob-menu .mob-menu-logo a {
  pointer-events: all;
}

#mob-menu .mob-menu-logo img {
  width: 22%;
  min-width: 80px;
  height: auto;
}

#mob-menu .mob-menu-logo .logo-branca {
  display: flex;
}

#mob-menu .mob-menu-logo .logo-preta {
  display: none;
}

#mob-menu .mob-menu-items {
  position: absolute;
  top: 45px;
  width: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  list-style: none;
  background-color: #ffffff;
  padding: 10px 10px 10px 0px;
}

.mob-menu-items.closed {
  position: absolute;
  left: -270px !important;
  transition: left 0.3s ease-in;
}

.mob-menu-items.open {
  position: absolute;
  left: 0px !important;
  transition: left 0.3s ease-out;
}

#mob-menu .mob-menu-items a {
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  transition: color 0.3s ease, font-weight 0.3s ease;
  color: #1b1b1a;
  padding: 0 0 0 30px;
}

/*#endregion*/

/*#region Nav Icon */
#nav-icon1 {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 15px 0 5px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 25px;
  background-color: #ffffff;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 10px;
}

#nav-icon1 span:nth-child(3) {
  top: 20px;
}

#nav-icon1.open span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/*#endregion*/

/*#region Cores*/
/* Variáveis de cores */
:root {
  --primary-color: #ce5a4e;
  --secondary-color: #f6a846;
  --dark-blue: #2e3289;
  --darker-blue: #212752;
  --text-color-dark: #1b1b1a;
  --text-color-light: #ffffff;
  --dark-red: #871c2c;
  --green: #206a42;
  font-size: 16px;
}

.laranja-claro {
  color: var(--secondary-color);
}

.laranja-escuro {
  color: var(--primary-color);
}

.vermelho-escuro {
  color: var(--dark-red);
}

.azul-escuro {
  color: var(--dark-blue);
}

.azul-mais-escuro {
  color: var(--darker-blue);
}

.branco {
  color: var(--text-color-light);
}

.preto {
  color: var(--text-color-dark);
}

.verde {
  color: var(--green);
}

.link-branco:hover,
.link-branco:active,
.link-branco:focus,
.link-branco:visited,
.link-branco:link {
  color: var(--text-color-light);
  text-decoration: underline;
}

.link-preto:hover,
.link-preto:active,
.link-preto:focus,
.link-preto:visited,
.link-preto:link {
  color: var(--text-color-dark);
  text-decoration: underline;
}

/* Menu - para todos os dispositivos  */

/* Hover Bold*/
#menu .menu-items a:hover,
#menu .menu-items a.active {
  font-weight: 900;
}

/* Cores active e hover por seção */

/* #mob-menu.mob-apresentacao-active .mob-menu-items a {
  color: #1b1b1a;
} */

#mob-menu.mob-apresentacao-active .mob-menu-items a:hover,
#mob-menu.mob-apresentacao-active .mob-menu-items a.active,
#mob-menu.mob-mensagem-active .mob-menu-items a:hover,
#mob-menu.mob-mensagem-active .mob-menu-items a.active {
  color: #ce5a4e;
}

#mob-menu.mob-pioneirismo-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-pioneirismo-active .mob-menu-items a:hover,
#mob-menu.mob-pioneirismo-active .mob-menu-items a.active {
  color: #2e3e89;
}

#mob-menu.mob-compromisso-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-compromisso-active .mob-menu-items a:hover,
#mob-menu.mob-compromisso-active .mob-menu-items a.active {
  color: #f6a745;
}

#mob-menu.mob-estrategia-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-estrategia-active .mob-menu-items a:hover,
#mob-menu.mob-estrategia-active .mob-menu-items a.active {
  color: #f6a846;
}

#mob-menu.mob-lideranca-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-lideranca-active .mob-menu-items a:hover,
#mob-menu.mob-lideranca-active .mob-menu-items a.active {
  color: #ce5a4e;
}

#mob-menu.mob-parceria-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-parceria-active .mob-menu-items a:hover,
#mob-menu.mob-parceria-active .mob-menu-items a.active {
  color: #f6a846;
}

#mob-menu.mob-ecoeficiencia-active .mob-menu-items a {
  color: #1b1b1a;
}

#mob-menu.mob-ecoeficiencia-active .mob-menu-items a:hover,
#mob-menu.mob-ecoeficiencia-active .mob-menu-items a.active {
  color: #206a42;
}

#menu.apresentacao-active .menu-items a:hover,
#menu.apresentacao-active .menu-items a.active,
#menu.mensagem-active .menu-items a:hover,
#menu.mensagem-active .menu-items a.active {
  color: #ce5a4e;
}

#menu.pioneirismo-active .menu-items a {
  color: #1b1b1a;
}

#menu.pioneirismo-active .menu-items a:hover,
#menu.pioneirismo-active .menu-items a.active {
  color: #2e3e89;
}

#menu.compromisso-active .menu-items a {
  color: #ffffff;
}

#menu.compromisso-active .menu-items a:hover,
#menu.compromisso-active .menu-items a.active {
  color: #ffffff;
}

#menu.estrategia-active .menu-items a {
  color: #ffffff;
}

#menu.estrategia-active .menu-items a:hover,
#menu.estrategia-active .menu-items a.active {
  color: #f6a846;
}

#menu.lideranca-active .menu-items a {
  color: #1b1b1a;
}

#menu.lideranca-active .menu-items a:hover,
#menu.lideranca-active .menu-items a.active {
  color: #ce5a4e;
}

#menu.parceria-active .menu-items a {
  color: #ffffff;
}

#menu.parceria-active .menu-items a:hover,
#menu.parceria-active .menu-items a.active {
  color: #f6a846;
}

#menu.ecoeficiencia-active .menu-items a {
  color: #1b1b1a;
}

#menu.ecoeficiencia-active .menu-items a:hover,
#menu.ecoeficiencia-active .menu-items a.active {
  color: #206a42;
}

/*#endregion*/

/* Containers */

.area,
.mob-area {
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mob-content-container {
  width: 100%;
  padding: 0px 0 0px 0%;
  display: flex;
  flex-direction: column;
  height: auto;
}

.mob-content-container-ficha {
  width: 100%;
  display: flex;
  height: auto;
  min-height: 100%;
}

.content-container {
  width: 100%;
  padding: 150px 0 0px 0;
  display: none;
  height: 100%;
}

.content-container > div {
  width: 100%;
}

/*#region Botões*/

#bt-mob-relatorio,
#bt-mob-conheca-mais {
  display: block;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: none;
  padding: 10px 22px;
  height: 35px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 20px;
  margin-top: 30px;
}

#bt-mob-conheca-mais {
  background-color: var(--secondary-color);
  color: var(--text-color-light);
  margin-top: 20px;
}

.bt-margin-big {
  margin-top: 25px;
}

.bt-margin-small {
  margin-top: 12px;
}

/*#endregion*/

/* HOME MOBILE */
#mob-home {
  height: 100%;
  width: 100%;
  display: block;
  /* justify-content: right; */
  background: linear-gradient(
    -150deg,
    rgba(46, 62, 137, 1) 0%,
    rgba(44, 59, 130, 1) 4.95%,
    rgba(39, 50, 109, 1) 22.51%,
    rgba(36, 44, 94, 1) 42.08%,
    rgba(34, 40, 85, 1) 65.1%,
    rgba(33, 39, 82, 1) 100%
  );
}

#mob-home .mob-container-home {
  display: flex;
}

#mob-home .mob-bg-home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#mob-home .mob-bg-home img {
  height: 100%;
}

#mob-home .mob-logo-jcpm-container {
  display: block;
  position: absolute;
  top: 5%;
  left: 8%;
  z-index: 5;
}

#mob-home .mob-logo-jcpm-container img {
  width: 15%;
  min-width: 90px;
  height: auto;
}

/* APRESENTAÇÃO MOBILE */

#mob-apresentacao {
  display: flex;
  width: 100vw;
  height: auto;
  background: linear-gradient(
    -150deg,
    rgba(46, 62, 137, 1) 0%,
    rgba(44, 59, 130, 1) 4.95%,
    rgba(39, 50, 109, 1) 22.51%,
    rgba(36, 44, 94, 1) 42.08%,
    rgba(34, 40, 85, 1) 65.1%,
    rgba(33, 39, 82, 1) 100%
  );
  color: var(--text-color-light);
}

.mob-top-apresentacao {
  padding-top: 150px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 0px;
}

.mob-bottom-apresentacao {
  padding-top: 0px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}

/* MENSAGEM MOBILE */

#mob-mensagem {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background: #212752;
  color: var(--text-color-light);
  overflow: hidden;
}

.mob-top-msg {
  padding-top: 0px;
  padding-left: 0%;
  padding-right: 0%;
  padding-bottom: 0px;
  z-index: 5;
}

.mob-img-msg-container {
  display: flex;
  justify-self: center;
  align-self: center;
  width: 100%;
  height: auto;
  background: #212752;
  padding-top: 30px;
  padding-left: 30%;
  padding-right: 30px;
  padding-bottom: 5px;
}

.mob-img-msg-container img {
  width: 100%;
  height: auto;
}

.mob-bottom-txt {
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 50px;
  overflow-y: auto;
  z-index: 2;
}

/* PIONEIRISMO MOBILE */

#mob-pioneirismo {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background: #ffffff;
  color: var(--text-color-dark);
  overflow: hidden;
}

.mob-anima-pioneirismo-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-content: flex-start;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #ffffff;
  padding-top: 70px;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 5px;
}

/* COMPROMISSO MOBILE */

#mob-compromisso {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background-color: var(--secondary-color);
  color: var(--text-color-light);
  overflow: hidden;
}

.mob-anima-compromisso-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: flex-end;
  justify-content: center;
  align-content: flex-end;
  z-index: 5;
  width: 100%;
  height: auto;
  background: var(--secondary-color);
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
}

/* ESTRATEGIA MOBILE */

#mob-estrategia {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background-color: var(--darker-blue);
  color: var(--text-color-light);
  overflow: hidden;
}

.mob-anima-estrategia-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-content: flex-start;
  z-index: 5;
  width: 100%;
  height: auto;
  background: var(--darker-blue);
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 10px;
  padding-bottom: 5px;
}

/* LIDERANCA MOBILE */

#mob-lideranca {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background-color: #ffffff;
  color: var(--text-color-dark);
  overflow: hidden;
}

.mob-anima-lideranca-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: flex-start;
  justify-content: center;
  align-content: flex-start;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #ffffff;
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 10px;
  padding-bottom: 5px;
}

/* PARCERIA MOBILE */

#mob-parceria {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background-color: var(--primary-color);
  color: var(--text-color-light);
  overflow: hidden;
}

.mob-anima-parceria-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-content: flex-start;
  z-index: 5;
  width: 100%;
  height: auto;
  background: var(--primary-color);
  padding-top: 10px;
  padding-left: 70px;
  padding-right: 20px;
  padding-bottom: 0px;
}

/* ECO MOBILE */

#mob-ecoeficiencia {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  background-color: #ffffff;
  color: var(--text-color-dark);
  overflow: hidden;
}

.mob-anima-eco-container {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-content: flex-start;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #ffffff;
  padding-top: 50px;
  padding-left: 55px;
  padding-right: 20px;
  padding-bottom: 5px;
}

/* FICHA MOBILE */

#mob-ficha {
  width: 100vw;
  height: 100hv;
  background-image: url("../svg/mob_ficha_v4.svg"),
    linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  background-repeat: no-repeat;
}

.mob-content-container-ficha {
  width: 100vw;
  height: 100hv;
}

.mob-top-ficha {
  width: 100%;
  padding-top: 300px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 100px;
  color: #ffffff;
}

.mob-bottom-ficha {
  width: 100%;
}

/* HOME DESKTOP */
#home {
  display: none;
  width: 100vw;
  height: auto;
  background: linear-gradient(
    -150deg,
    rgba(46, 62, 137, 1) 0%,
    rgba(44, 59, 130, 1) 4.95%,
    rgba(39, 50, 109, 1) 22.51%,
    rgba(36, 44, 94, 1) 42.08%,
    rgba(34, 40, 85, 1) 65.1%,
    rgba(33, 39, 82, 1) 100%
  );
}

#home .container-home {
  display: flex;
}

#home .bg-home {
  position: relative;
  width: 85vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-items: flex-end;
  text-align: right;
}

#load-home {
  height: 100vh;
  width: auto;
}

#home .logo-jcpm-container {
  width: 15%;
  height: 100vh;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  align-content: flex-end;
  position: relative;
  z-index: 5;
}

#home .logo-jcpm-container img {
  width: 69%;
  max-width: 196px;
  height: auto;
  padding-bottom: 58px;
}

/* APRESENTAÇÃO DESKTOP */

#apresentacao {
  display: none;
}

.img-apresentacao {
  width: 70%;
  height: auto;
  padding: 15px 0px;
}

/* MENSAGEM DESKTOP */

#mensagem {
  display: none;
}

/* PIONEIRISMO DESKTOP */

#pioneirismo {
  background-color: #ffffff;
  color: var(--text-color-dark);
}

/* COMPROMISSO DESKTOP */

#compromisso {
  background-color: var(--secondary-color);
  color: var(--text-color-light);
}

/* ESTRATEGIA DESKTOP */

#estrategia {
  background-color: var(--darker-blue);
  color: var(--text-color-light);
}

/* LIDERANCA DESKTOP */

#lideranca {
  background-color: #ffffff;
  color: var(--text-color-dark);
}

/* PARCERIA DESKTOP */

#parceria {
  background-color: var(--primary-color);
  color: var(--text-color-light);
}

/* ECO DESKTOP */

#ecoeficiencia {
  background-color: #ffffff;
  color: var(--text-color-dark);
}

/* Utils */

.centraliza {
  display: flex;
  justify-content: center;
  align-items: center;
}

.space-distributed {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.img-full-width {
  width: 100%;
  height: auto;
}

.img-margin-bottom {
  margin-bottom: 40px;
}

.semibold {
  font-weight: 600;
}

.mob-semibold-90anos {
  font-weight: 600;
  font-size: 1.6rem;
}

.legenda {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}

.legenda-destaque {
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  margin-bottom: 5px;
}

/*#endregion fim do sem media query*/

@media (min-width: 360px) and (orientation: portrait) {
  p {
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 24px;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: "Poppins", sans-serif;
  }

  h1 {
    font-size: 2.7rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 28px;
  }

  h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 34px;
    margin-bottom: 24px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 5px;
    line-height: 34px;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 24px;
  }

  /*#region Menu Mobile */

  #mob-menu {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    display: block;
    font-size: 14px;
    line-height: 36px;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #mob-menu.visible {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #mob-menu .mob-menu-logo {
    display: flex;
    pointer-events: none;
    width: 100%;
    margin-left: 30px;
  }

  #mob-menu .mob-menu-logo a {
    pointer-events: all;
  }

  #mob-menu .mob-menu-logo img {
    width: 22%;
    min-width: 80px;
    height: auto;
  }

  #mob-menu .mob-menu-logo .logo-branca {
    display: flex;
  }

  #mob-menu .mob-menu-logo .logo-preta {
    display: none;
  }

  #mob-menu .mob-menu-items {
    position: absolute;
    top: 42px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    background-color: #ffffff;
    padding: 10px 10px 10px 0px;
  }

  .mob-menu-items.closed {
    position: absolute;
    left: -270px !important;
    transition: left 0.3s ease-in;
  }

  .mob-menu-items.open {
    position: absolute;
    left: 0px !important;
    transition: left 0.3s ease-out;
  }

  #mob-menu .mob-menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #1b1b1a;
    padding: 0 0 0 30px;
  }

  /*#endregion*/

  /*#region Nav Icon */
  #nav-icon1 {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 10px 0 5px 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }

  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  /*#endregion*/

  /* Containers */

  .area,
  .mob-area {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .mob-content-container {
    width: 100%;
    padding: 0px 0 0px 0%;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .mob-content-container-ficha {
    width: 100%;
    display: flex;
    height: auto;
    min-height: 100%;
  }

  .content-container {
    width: 100%;
    padding: 150px 0 0px 0;
    display: none;
    height: 100%;
  }

  .content-container > div {
    width: 100%;
  }

  /*#region Botões*/

  #bt-mob-go-mensagem,
  #bt-mob-go-pioneirismo,
  #bt-mob-go-estrategia,
  #bt-mob-go-parceria {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 70px;
    margin-top: 46px;
  }

  #bt-mob-go-mensagem,
  #bt-mob-go-pioneirismo {
    border-radius: 20px;
    /* margin-bottom: 40px;
  margin-top: 40px; */
  }

  #bt-mob-go-compromisso,
  #bt-mob-go-lideranca {
    background-color: var(--dark-blue);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 70px;
    margin-top: 70px;
  }

  #bt-mob-go-eco {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 70px;
    margin-top: 70px;
  }

  #bt-mob-go-ficha {
    background-color: var(--green);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 70px;
    margin-bottom: 70px;
  }

  #bt-mob-relatorio,
  #bt-mob-conheca-mais {
    display: block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 35px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 30px;
  }

  #bt-mob-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    margin-top: 20px;
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* HOME MOBILE */
  #mob-home {
    height: 100%;
    width: 100%;
    display: block;
    /* justify-content: right; */
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #mob-home .mob-container-home {
    display: flex;
  }

  #mob-home .mob-bg-home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #mob-home .mob-bg-home img {
    height: 100%;
  }

  #mob-home .mob-logo-jcpm-container {
    display: block;
    position: absolute;
    top: 5%;
    left: 8%;
    z-index: 5;
  }

  #mob-home .mob-logo-jcpm-container img {
    width: 15%;
    min-width: 90px;
    height: auto;
  }

  /* APRESENTAÇÃO MOBILE */

  #mob-apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .mob-top-apresentacao {
    padding-top: 150px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  .img-apresentacao {
    width: 70%;
    height: auto;
    padding: 0px 0px;
  }

  /* MENSAGEM MOBILE */

  #mob-mensagem {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #212752;
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-msg {
    padding-top: 0px;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0px;
    z-index: 5;
  }

  .mob-img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: auto;
    background: #212752;
    padding-top: 30px;
    padding-left: 30%;
    padding-right: 30px;
    padding-bottom: 5px;
  }

  .mob-img-msg-container img {
    width: 100%;
    height: auto;
  }

  .mob-bottom-txt {
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
    overflow-y: auto;
    z-index: 2;
  }

  /* PIONEIRISMO MOBILE */

  #mob-pioneirismo {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 5px;
  }

  /* COMPROMISSO MOBILE */

  #mob-compromisso {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-compromisso-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--secondary-color);
    padding-top: 55px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
  }

  /* ESTRATEGIA MOBILE */

  #mob-estrategia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--darker-blue);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-estrategia-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--darker-blue);
    padding-top: 70px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
  }

  /* LIDERANCA MOBILE */

  #mob-lideranca {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-lideranca-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
  }

  /* PARCERIA MOBILE */

  #mob-parceria {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 0px;
  }

  /* ECO MOBILE */

  #mob-ecoeficiencia {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-eco-container {
    display: flex;
    flex-direction: column;

    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
  }

  /* FICHA MOBILE */

  #mob-ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/mob_ficha_v4.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .mob-content-container-ficha {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0px 30px;
  }

  .mob-top-ficha {
    width: 100%;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    color: #ffffff;
  }

  .mob-bottom-ficha {
    padding-top: 60%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 100px;
    width: 100%;
  }

  /* Utils */

  .centraliza {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .space-distributed {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .img-full-width {
    width: 100%;
    height: auto;
  }

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .mob-semibold-90anos {
    font-weight: 600;
    font-size: 1.6rem;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 8px;
  }
}

@media (min-width: 360px) and (orientation: landscape) {
  p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 24px;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: "Poppins", sans-serif;
  }

  h1 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 28px;
  }

  h2 {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 24px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 5px;
    line-height: 30px;
  }

  .mob-semibold-90anos {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 12px;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 24px;
  }

  /*#region Menu Mobile */

  #mob-menu {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 30px;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #mob-menu.visible {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #mob-menu .mob-menu-logo {
    display: flex;
    pointer-events: none;
    width: 100%;
    margin-left: 30px;
  }

  #mob-menu .mob-menu-logo a {
    pointer-events: all;
  }

  #mob-menu .mob-menu-logo img {
    width: 22%;
    min-width: 80px;
    height: auto;
  }

  #mob-menu .mob-menu-logo .logo-branca {
    display: flex;
  }

  #mob-menu .mob-menu-logo .logo-preta {
    display: none;
  }

  #mob-menu .mob-menu-items {
    position: absolute;
    top: 42px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    background-color: #ffffff;
    padding: 10px 10px 10px 0px;
  }

  .mob-menu-items.closed {
    position: absolute;
    left: -270px !important;
    transition: left 0.3s ease-in;
  }

  .mob-menu-items.open {
    position: absolute;
    left: 0px !important;
    transition: left 0.3s ease-out;
  }

  #mob-menu .mob-menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #1b1b1a;
    padding: 0 0 0 30px;
  }

  /*#endregion*/

  /*#region Nav Icon */
  #nav-icon1 {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 10px 0 5px 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }

  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  /*#endregion*/

  /* Containers */

  .area,
  .mob-area {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .mob-content-container {
    width: 100%;
    padding: 0px 0 0px 0%;
    display: flex;
    flex-direction: row;
    height: auto;
  }

  .mob-content-container-ficha {
    width: 100%;
    display: flex;
    height: auto;
    min-height: 100%;
  }

  .content-container {
    width: 100%;
    padding: 150px 0 0px 0;
    display: none;
    height: 100%;
  }

  .content-container > div {
    width: 100%;
  }

  /*#region Botões*/

  #bt-mob-relatorio,
  #bt-mob-conheca-mais {
    display: block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 35px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 15px;
  }

  #bt-mob-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* HOME MOBILE */
  #mob-home {
    height: 100%;
    width: 100%;
    display: block;
    /* justify-content: right; */
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #mob-home .mob-container-home {
    display: flex;
  }

  #mob-home .mob-bg-home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #mob-home .mob-bg-home img {
    height: 100%;
  }

  #mob-home .mob-logo-jcpm-container {
    display: block;
    position: absolute;
    top: auto;
    bottom: 5% !important;
    left: 5%;
    z-index: 5;
  }

  #mob-home .mob-logo-jcpm-container img {
    width: 15%;
    min-width: 90px;
    height: auto;
  }

  /* APRESENTAÇÃO MOBILE */

  #mob-apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    min-height: 100%;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .mob-top-apresentacao {
    width: 60%;
    padding-top: 130px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
  }

  .mob-bottom-apresentacao {
    width: 40%;
    padding-top: 130px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 30px;
    align-content: center;
  }

  .img-apresentacao {
    width: 100%;
    height: auto;
    padding: 15px 0px;
  }

  /* MENSAGEM MOBILE */

  #mob-mensagem {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #212752;
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-msg {
    width: 50%;
    padding-top: 50px;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0px;
    z-index: 5;
  }

  .mob-img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: auto;
    background: #212752;
    padding-top: 0px;
    padding-left: 80px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  .mob-img-msg-container img {
    width: 100%;
    height: auto;
  }

  .mob-bottom-txt {
    width: 50%;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
    overflow-y: auto;
    z-index: 2;
  }

  /* PIONEIRISMO MOBILE */

  #mob-pioneirismo {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-top-pioneirismo,
  .mob-top-compromisso,
  .mob-top-estrategia,
  .mob-top-lideranca,
  .mob-top-parceria,
  .mob-top-eco {
    width: 50%;
  }

  .mob-anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  /* COMPROMISSO MOBILE */

  #mob-compromisso {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-compromisso {
    width: 50%;
  }

  .mob-anima-compromisso-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-self: center;
    align-self: flex-end;
    justify-content: center;
    align-content: flex-end;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--secondary-color);
    padding-top: 65px;
    padding-left: 25px;
    padding-right: 15px;
    padding-bottom: 5px;
  }

  /* ESTRATEGIA MOBILE */

  #mob-estrategia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--darker-blue);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-estrategia-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--darker-blue);
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
  }

  /* LIDERANCA MOBILE */

  #mob-lideranca {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-lideranca-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
  }

  /* PARCERIA MOBILE */

  #mob-parceria {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 15px;
    padding-left: 70px;
    padding-right: 20px;
    padding-bottom: 0px;
  }

  /* ECO MOBILE */

  #mob-ecoeficiencia {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-eco-container {
    display: flex;
    flex-direction: column;

    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 85px;
    padding-left: 40px;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /* FICHA MOBILE */

  #mob-ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/mob_ficha_v4.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .mob-content-container-ficha {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    padding: 0px 0px 50px 30px;
  }

  .mob-top-ficha {
    width: 40%;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    color: #ffffff;
  }

  .mob-bottom-ficha {
    font-size: 14px;
    padding-top: 80px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 50px;
    width: 60%;
  }

  /* Utils */

  .centraliza {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .space-distributed {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .img-full-width {
    width: 100%;
    height: auto;
  }

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 8px;
  }
}

@media (min-width: 600px) and (orientation: landscape) {
    #mob-parceria {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 30px;
    padding-left: 60px;
    padding-right: 20px;
    padding-bottom: 0px;
  }
}

@media (min-width: 660px) and (orientation: landscape) {
  p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 24px;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: "Poppins", sans-serif;
  }

  h1 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 28px;
  }

  h2 {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 24px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 5px;
    line-height: 30px;
  }

  .mob-semibold-90anos {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 12px;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 24px;
  }

  /*#region Menu Mobile */

  #mob-menu {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 30px;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #mob-menu.visible {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #mob-menu .mob-menu-logo {
    display: flex;
    pointer-events: none;
    width: 100%;
    margin-left: 30px;
  }

  #mob-menu .mob-menu-logo a {
    pointer-events: all;
  }

  #mob-menu .mob-menu-logo img {
    width: 22%;
    min-width: 80px;
    height: auto;
  }

  #mob-menu .mob-menu-logo .logo-branca {
    display: flex;
  }

  #mob-menu .mob-menu-logo .logo-preta {
    display: none;
  }

  #mob-menu .mob-menu-items {
    position: absolute;
    top: 42px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    background-color: #ffffff;
    padding: 10px 10px 10px 0px;
  }

  .mob-menu-items.closed {
    position: absolute;
    left: -270px !important;
    transition: left 0.3s ease-in;
  }

  .mob-menu-items.open {
    position: absolute;
    left: 0px !important;
    transition: left 0.3s ease-out;
  }

  #mob-menu .mob-menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #1b1b1a;
    padding: 0 0 0 30px;
  }

  /*#endregion*/

  /*#region Nav Icon */
  #nav-icon1 {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 10px 0 5px 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }

  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  /*#endregion*/

  /* Containers */

  .area,
  .mob-area {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .mob-content-container {
    width: 100%;
    padding: 0px 0 0px 0%;
    display: flex;
    flex-direction: row;
    height: auto;
  }

  .mob-content-container-ficha {
    width: 100%;
    display: flex;
    height: auto;
    min-height: 100%;
  }

  .content-container {
    width: 100%;
    padding: 150px 0 0px 0;
    display: none;
    height: 100%;
  }

  .content-container > div {
    width: 100%;
  }

  /*#region Botões*/

  #bt-mob-relatorio,
  #bt-mob-conheca-mais {
    display: block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 35px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 15px;
  }

  #bt-mob-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* HOME MOBILE */
  #mob-home {
    height: 100%;
    width: 100%;
    display: block;
    /* justify-content: right; */
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #mob-home .mob-container-home {
    display: flex;
  }

  #mob-home .mob-bg-home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #mob-home .mob-bg-home img {
    height: 100%;
  }

  #mob-home .mob-logo-jcpm-container {
    display: block;
    position: absolute;
    top: auto;
    bottom: 5% !important;
    left: 5%;
    z-index: 5;
  }

  #mob-home .mob-logo-jcpm-container img {
    width: 15%;
    min-width: 90px;
    height: auto;
  }

  /* APRESENTAÇÃO MOBILE */

  #mob-apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    min-height: 100%;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .mob-top-apresentacao {
    width: 60%;
    padding-top: 130px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
  }

  .mob-bottom-apresentacao {
    width: 40%;
    padding-top: 130px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 30px;
    align-content: center;
  }

  .img-apresentacao {
    width: 100%;
    height: auto;
    padding: 15px 0px;
  }

  /* MENSAGEM MOBILE */

  #mob-mensagem {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #212752;
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-msg {
    width: 50%;
    padding-top: 50px;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0px;
    z-index: 5;
  }

  .mob-img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: auto;
    background: #212752;
    padding-top: 0px;
    padding-left: 80px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  .mob-img-msg-container img {
    width: 100%;
    height: auto;
  }

  .mob-bottom-txt {
    width: 50%;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
    overflow-y: auto;
    z-index: 2;
  }

  /* PIONEIRISMO MOBILE */

  #mob-pioneirismo {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-top-pioneirismo,
  .mob-top-compromisso,
  .mob-top-estrategia,
  .mob-top-lideranca,
  .mob-top-parceria,
  .mob-top-eco {
    width: 50%;
  }

  .mob-anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  /* COMPROMISSO MOBILE */

  #mob-compromisso {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-compromisso {
    width: 50%;
  }

  .mob-anima-compromisso-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-self: center;
    align-self: flex-end;
    justify-content: center;
    align-content: flex-end;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--secondary-color);
    padding-top: 65px;
    padding-left: 25px;
    padding-right: 15px;
    padding-bottom: 5px;
  }

  /* ESTRATEGIA MOBILE */

  #mob-estrategia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--darker-blue);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-estrategia-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--darker-blue);
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
  }

  /* LIDERANCA MOBILE */

  #mob-lideranca {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-lideranca-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
  }

  /* PARCERIA MOBILE */

  #mob-parceria {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 15px;
    padding-left: 70px;
    padding-right: 20px;
    padding-bottom: 0px;
  }

  /* ECO MOBILE */

  #mob-ecoeficiencia {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-eco-container {
    display: flex;
    flex-direction: column;

    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 85px;
    padding-left: 40px;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /* FICHA MOBILE */

  #mob-ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/mob_ficha_v4.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .mob-content-container-ficha {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    padding: 0px 0px 50px 30px;
  }

  .mob-top-ficha {
    width: 40%;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    color: #ffffff;
  }

  .mob-bottom-ficha {
    font-size: 14px;
    padding-top: 80px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 50px;
    width: 60%;
  }

  /* Utils */

  .centraliza {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .space-distributed {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .img-full-width {
    width: 100%;
    height: auto;
  }

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 8px;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  body {
    font-family: "Work Sans", sans-serif;
    line-height: 1.6;
    color: #1b1b1a;
    overflow-x: hidden;
  }

  p {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  h1 {
    font-size: 3.3rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 30px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 0px;
    line-height: 18px;
    margin-top: 10px;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 30px;
  }

  /*#region Menu Mobile */

  #mob-menu {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    display: block;
    font-size: 15px;
    line-height: 40px;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #mob-menu.visible {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #mob-menu .mob-menu-logo {
    display: flex;
    pointer-events: none;
    width: 100%;
    margin-left: 30px;
  }

  #mob-menu .mob-menu-logo a {
    pointer-events: all;
  }

  #mob-menu .mob-menu-logo img {
    width: 24%;
    min-width: 100px;
    height: auto;
  }

  #mob-menu .mob-menu-logo .logo-branca {
    display: flex;
  }

  #mob-menu .mob-menu-logo .logo-preta {
    display: none;
  }

  #mob-menu .mob-menu-items {
    position: absolute;
    top: 52px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    background-color: #ffffff;
    padding: 10px 10px 10px 0px;
  }

  .mob-menu-items.closed {
    position: absolute;
    left: -270px !important;
    transition: left 0.3s ease-in;
  }

  .mob-menu-items.open {
    position: absolute;
    left: 0px !important;
    transition: left 0.3s ease-out;
  }

  #mob-menu .mob-menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #1b1b1a;
    padding: 0 0 0 30px;
  }

  /*#endregion*/

  /*#region Nav Icon */
  #nav-icon1 {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 12px 0 5px 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }

  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  /*#endregion*/

  /*#region Cores*/
  /* Variáveis de cores */
  :root {
    --primary-color: #ce5a4e;
    --secondary-color: #f6a846;
    --dark-blue: #2e3289;
    --darker-blue: #212752;
    --text-color-dark: #1b1b1a;
    --text-color-light: #ffffff;
    --dark-red: #871c2c;
    --green: #206a42;
    font-size: 16px;
  }

  .laranja-claro {
    color: var(--secondary-color);
  }

  .laranja-escuro {
    color: var(--primary-color);
  }

  .vermelho-escuro {
    color: var(--dark-red);
  }

  .azul-escuro {
    color: var(--dark-blue);
  }

  .azul-mais-escuro {
    color: var(--darker-blue);
  }

  .branco {
    color: var(--text-color-light);
  }

  .preto {
    color: var(--text-color-dark);
  }

  .verde {
    color: var(--green);
  }

  /* Menu - para todos os dispositivos  */

  /* Hover Bold*/
  #menu .menu-items a:hover,
  #menu .menu-items a.active {
    font-weight: 900;
  }

  /* Cores active e hover por seção */

  #mob-menu.mob-apresentacao-active .mob-menu-items a:hover,
  #mob-menu.mob-apresentacao-active .mob-menu-items a.active,
  #mob-menu.mob-mensagem-active .mob-menu-items a:hover,
  #mob-menu.mob-mensagem-active .mob-menu-items a.active {
    color: #ce5a4e;
  }

  #mob-menu.mob-pioneirismo-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-pioneirismo-active .mob-menu-items a:hover,
  #mob-menu.mob-pioneirismo-active .mob-menu-items a.active {
    color: #2e3e89;
  }

  #mob-menu.mob-compromisso-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-compromisso-active .mob-menu-items a:hover,
  #mob-menu.mob-compromisso-active .mob-menu-items a.active {
    color: #f6a745;
  }

  #mob-menu.mob-estrategia-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-estrategia-active .mob-menu-items a:hover,
  #mob-menu.mob-estrategia-active .mob-menu-items a.active {
    color: #f6a846;
  }

  #mob-menu.mob-lideranca-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-lideranca-active .mob-menu-items a:hover,
  #mob-menu.mob-lideranca-active .mob-menu-items a.active {
    color: #ce5a4e;
  }

  #mob-menu.mob-parceria-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-parceria-active .mob-menu-items a:hover,
  #mob-menu.mob-parceria-active .mob-menu-items a.active {
    color: #f6a846;
  }

  #mob-menu.mob-ecoeficiencia-active .mob-menu-items a {
    color: #1b1b1a;
  }

  #mob-menu.mob-ecoeficiencia-active .mob-menu-items a:hover,
  #mob-menu.mob-ecoeficiencia-active .mob-menu-items a.active {
    color: #206a42;
  }

  #menu.apresentacao-active .menu-items a:hover,
  #menu.apresentacao-active .menu-items a.active,
  #menu.mensagem-active .menu-items a:hover,
  #menu.mensagem-active .menu-items a.active {
    color: #ce5a4e;
  }

  #menu.pioneirismo-active .menu-items a {
    color: #1b1b1a;
  }

  #menu.pioneirismo-active .menu-items a:hover,
  #menu.pioneirismo-active .menu-items a.active {
    color: #2e3e89;
  }

  #menu.compromisso-active .menu-items a {
    color: #ffffff;
  }

  #menu.compromisso-active .menu-items a:hover,
  #menu.compromisso-active .menu-items a.active {
    color: #ffffff;
  }

  #menu.estrategia-active .menu-items a {
    color: #ffffff;
  }

  #menu.estrategia-active .menu-items a:hover,
  #menu.estrategia-active .menu-items a.active {
    color: #f6a846;
  }

  #menu.lideranca-active .menu-items a {
    color: #1b1b1a;
  }

  #menu.lideranca-active .menu-items a:hover,
  #menu.lideranca-active .menu-items a.active {
    color: #ce5a4e;
  }

  #menu.parceria-active .menu-items a {
    color: #ffffff;
  }

  #menu.parceria-active .menu-items a:hover,
  #menu.parceria-active .menu-items a.active {
    color: #f6a846;
  }

  #menu.ecoeficiencia-active .menu-items a {
    color: #1b1b1a;
  }

  #menu.ecoeficiencia-active .menu-items a:hover,
  #menu.ecoeficiencia-active .menu-items a.active {
    color: #206a42;
  }

  /*#endregion*/

  /* Containers */

  .mob-area {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .area {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .mob-content-container {
    width: 100%;
    padding: 0px 0 0px 0%;
    display: flex;
    flex-direction: column;
  }

  .content-container {
    width: 100%;
    padding: 150px 0 0px 0;
    display: none;
    height: 100%;
  }

  .content-container > div {
    width: 100%;
  }

  #bt-mob-relatorio,
  #bt-mob-conheca-mais {
    display: block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 30px;
  }

  #bt-mob-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    margin-top: 20px;
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* HOME MOBILE */
  #mob-home {
    height: 100%;
    width: 100%;
    display: block;
    /* justify-content: right; */
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #mob-home .mob-container-home {
    display: flex;
  }

  #mob-home .mob-bg-home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #mob-home .mob-bg-home img {
    height: 100%;
  }

  #mob-home .mob-logo-jcpm-container {
    display: block;
    position: absolute;
    top: 5%;
    left: 8%;
    z-index: 5;
  }

  #mob-home .mob-logo-jcpm-container img {
    width: 15%;
    min-width: 90px;
    height: auto;
  }

  /* APRESENTAÇÃO MOBILE */

  #mob-apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .mob-top-apresentacao {
    padding-top: 0px;
    padding-left: 150px;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  .mob-bottom-apresentacao {
    padding-top: 0px;
    padding-left: 150px;
    padding-right: 30px;
    padding-bottom: 30px;
    align-content: flex-start;
  }

  .img-apresentacao {
    width: 55%;
    height: auto;
    padding: 0px 0px;
    justify-self: flex-start;
  }

  /* MENSAGEM MOBILE */

  #mob-mensagem {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #212752;
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-msg {
    padding-top: 0px;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 30px;
    z-index: 5;
  }

  .mob-img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: #212752;
    padding-top: 30px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  .mob-img-msg-container img {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .mob-bottom-txt {
    padding-top: 0px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 120px;
    overflow-y: auto;
    z-index: 2;
  }

  /* PIONEIRISMO MOBILE */

  #mob-pioneirismo {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 5px;
  }

  /* COMPROMISSO MOBILE */

  #mob-compromisso {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-compromisso-container {
    display: flex;
    flex-wrap: nowrap;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--secondary-color);
    padding-top: 45px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  /* ESTRATEGIA MOBILE */

  #mob-estrategia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--darker-blue);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-estrategia-container {
    display: flex;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--darker-blue);
    padding-top: 30px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  /* LIDERANCA MOBILE */

  #mob-lideranca {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-lideranca-container {
    display: flex;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 30px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  /* PARCERIA MOBILE */

  #mob-parceria {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 30px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  /* ECO MOBILE */

  #mob-ecoeficiencia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-eco-container {
    display: flex;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 0px;
    padding-left: 20%;
    padding-right: 30px;
    padding-bottom: 15px;
  }

  /* FICHA MOBILE */
  #mob-ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/mob_ficha_v4.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .mob-content-container-ficha {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 0px 30px;
  }

  .mob-top-ficha {
    width: 100%;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    color: #ffffff;
  }

  .mob-bottom-ficha {
    padding-top: 65%;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 100px;
    width: 100%;
  }

  /* HOME DESKTOP */
  #home {
    display: none;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #home .container-home {
    display: flex;
  }

  #home .bg-home {
    position: relative;
    width: 85vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-items: flex-end;
    text-align: right;
  }

  #load-home {
    height: 100vh;
    width: auto;
  }

  #home .logo-jcpm-container {
    width: 15%;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;
    position: relative;
    z-index: 5;
  }

  #home .logo-jcpm-container img {
    width: 69%;
    max-width: 196px;
    height: auto;
    padding-bottom: 58px;
  }

  /* APRESENTAÇÃO DESKTOP */

  #apresentacao {
    display: none;
  }

  /* MENSAGEM DESKTOP */

  #mensagem {
    display: none;
  }

  /* PIONEIRISMO DESKTOP */

  #pioneirismo {
    background-color: #ffffff;
    color: var(--text-color-dark);
  }

  /* COMPROMISSO DESKTOP */

  #compromisso {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
  }

  /* ESTRATEGIA DESKTOP */

  #estrategia {
    background-color: var(--darker-blue);
    color: var(--text-color-light);
  }

  /* LIDERANCA DESKTOP */

  #lideranca {
    background-color: #ffffff;
    color: var(--text-color-dark);
  }

  /* PARCERIA DESKTOP */

  #parceria {
    background-color: var(--primary-color);
    color: var(--text-color-light);
  }

  /* ECO DESKTOP */

  #ecoeficiencia {
    background-color: #ffffff;
    color: var(--text-color-dark);
  }

  /* Utils */

  .centraliza {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .space-distributed {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .img-full-width {
    width: 100%;
    height: auto;
  }

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .mob-semibold-90anos {
    font-weight: 600;
    font-size: 1.6rem;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }
}

@media (min-width: 960px) and (orientation: landscape) {
  p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  h1 {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 30px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 32px;
  }

  h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 30px;
  }

  /*#region Menu Mobile */

  #mob-menu {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 30px;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #mob-menu.visible {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #mob-menu .mob-menu-logo {
    display: flex;
    pointer-events: none;
    width: 100%;
    margin-left: 30px;
  }

  #mob-menu .mob-menu-logo a {
    pointer-events: all;
  }

  #mob-menu .mob-menu-logo img {
    width: 22%;
    min-width: 80px;
    height: auto;
  }

  #mob-menu .mob-menu-logo .logo-branca {
    display: flex;
  }

  #mob-menu .mob-menu-logo .logo-preta {
    display: none;
  }

  #mob-menu .mob-menu-items {
    position: absolute;
    top: 42px;
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    list-style: none;
    background-color: #ffffff;
    padding: 10px 10px 10px 0px;
  }

  .mob-menu-items.closed {
    position: absolute;
    left: -270px !important;
    transition: left 0.3s ease-in;
  }

  .mob-menu-items.open {
    position: absolute;
    left: 0px !important;
    transition: left 0.3s ease-out;
  }

  #mob-menu .mob-menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #1b1b1a;
    padding: 0 0 0 30px;
  }

  /*#endregion*/

  /*#region Nav Icon */
  #nav-icon1 {
    width: 32px;
    height: 32px;
    position: relative;
    margin: 10px 0 5px 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }

  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: #ffffff;
    border-radius: 5px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }

  #nav-icon1 span:nth-child(2) {
    top: 8px;
  }

  #nav-icon1 span:nth-child(3) {
    top: 16px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

  /*#endregion*/

  /* Containers */

  .area,
  .mob-area {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .mob-content-container {
    width: 100%;
    padding: 0px 0 0px 0%;
    display: flex;
    flex-direction: row;
    height: auto;
  }

  .mob-content-container-ficha {
    width: 100%;
    display: flex;
    height: auto;
    min-height: 100%;
  }

  .content-container {
    width: 100%;
    padding: 150px 0 0px 0;
    display: none;
    height: 100%;
  }

  .content-container > div {
    width: 100%;
  }

  /*#region Botões*/

  #bt-mob-relatorio,
  #bt-mob-conheca-mais {
    display: block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 11px 22px 9px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 10px;
  }

  #bt-mob-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    margin-top: 20px;
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* HOME MOBILE */
  #mob-home {
    height: 100%;
    width: 100%;
    display: block;
    /* justify-content: right; */
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #mob-home .mob-container-home {
    display: flex;
  }

  #mob-home .mob-bg-home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #mob-home .mob-bg-home img {
    height: 100%;
  }

  #mob-home .mob-logo-jcpm-container {
    display: block;
    position: absolute;
    top: auto;
    bottom: 5% !important;
    left: 5%;
    z-index: 5;
  }

  #mob-home .mob-logo-jcpm-container img {
    width: 15%;
    min-width: 90px;
    height: auto;
  }

  /* APRESENTAÇÃO MOBILE */

  #mob-apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    min-height: 100%;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .mob-top-apresentacao {
    width: 50%;
    padding-top: 50px;
    padding-left: 130px;
    padding-right: 00px;
    padding-bottom: 15px;
  }

  .mob-bottom-apresentacao {
    width: 50%;
    padding-top: 100px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 30px;
    align-content: center;
  }

  .img-apresentacao {
    width: 62%;
    height: auto;
    padding: 15px 0px;
    justify-self: center;
  }

  /* MENSAGEM MOBILE */

  #mob-mensagem {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #212752;
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-top-msg {
    width: 50%;
    padding-top: 50px;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0px;
    z-index: 5;
  }

  .mob-img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: auto;
    background: #212752;
    padding-top: 0px;
    padding-left: 80px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  .mob-img-msg-container img {
    width: 100%;
    height: auto;
  }

  .mob-bottom-txt {
    width: 50%;
    padding-top: 90px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    overflow-y: auto;
    z-index: 2;
  }

  /* PIONEIRISMO MOBILE */

  #mob-pioneirismo {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-top-pioneirismo {
    width: 50%;
  }

  .mob-anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 0px;
    padding-bottom: 5px;
  }

  /* COMPROMISSO MOBILE */

  #mob-compromisso {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-compromisso-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-self: center;
    align-self: flex-end;
    justify-content: center;
    align-content: flex-end;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--secondary-color);
    padding-top: 65px;
    padding-left: 25px;
    padding-right: 15px;
    padding-bottom: 5px;
  }

  /* ESTRATEGIA MOBILE */

  #mob-estrategia {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--darker-blue);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-estrategia-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--darker-blue);
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
  }

  /* LIDERANCA MOBILE */

  #mob-lideranca {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-lideranca-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
  }

  /* PARCERIA MOBILE */

  #mob-parceria {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    overflow: hidden;
  }

  .mob-anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: flex-start;
    z-index: 5;
    width: 100%;
    height: auto;
    background: var(--primary-color);
    padding-top: 15px;
    padding-left: 70px;
    padding-right: 20px;
    padding-bottom: 0px;
  }

  /* ECO MOBILE */

  #mob-ecoeficiencia {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: #ffffff;
    color: var(--text-color-dark);
    overflow: hidden;
  }

  .mob-anima-eco-container {
    display: flex;
    flex-direction: column;

    z-index: 5;
    width: 100%;
    height: auto;
    background: #ffffff;
    padding-top: 85px;
    padding-left: 40px;
    padding-right: 10px;
    padding-bottom: 10px;
  }

  /* FICHA MOBILE */

  #mob-ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/mob_ficha_v4.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .mob-content-container-ficha {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    padding: 0px 0px 50px 30px;
  }

  .mob-top-ficha {
    width: 50%;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    color: #ffffff;
  }

  .mob-bottom-ficha {
    font-size: 15px;
    padding-top: 200px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
    width: 50%;
  }

  /* Utils */

  .centraliza {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .space-distributed {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .img-full-width {
    width: 100%;
    height: auto;
  }

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 8px;
  }
}

@media (min-width: 1220px) {
  p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  h1 {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 30px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 32px;
  }

  h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 30px;
  }

  /*#region Menu Desktop */
  #menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    align-items: self-start;
    padding: 58px 58px;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #menu.visible {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  #menu .menu-logo {
    width: auto;
    padding-right: 88px;
  }

  #menu .menu-logo img {
    width: 128px;
    height: auto;
  }

  #menu .menu-logo .logo-branca {
    display: flex;
  }

  #menu .menu-logo .logo-preta {
    display: none;
  }

  #menu .menu-items {
    width: auto;
    display: flex;
    justify-content: space-around;
    list-style: none;
  }

  #menu .menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #ffffff;
    padding: 0 29px;
  }

  /*#endregion*/
  /* hide mobile */
  #mob-home,
  #mob-mensagem,
  #mob-apresentacao,
  #mob-pioneirismo,
  #mob-compromisso,
  #mob-estrategia,
  #mob-lideranca,
  #mob-parceria,
  #mob-ecoeficiencia,
  #mob-ficha {
    display: none;
  }

  #menu {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    padding: 25px 25px;
    font-size: 14px;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* Classe para exibir o menu com fade in */
  #menu.visible {
    /* opacity: 1; */
    transition: opacity 0.4s ease;
  }

  #menu .menu-logo {
    width: auto;
    padding-right: 40px;
  }

  #menu .menu-logo img {
    width: 106px;
    height: auto;
  }

  #menu .menu-logo .logo-branca {
    display: flex;
  }

  #menu .menu-logo .logo-preta {
    display: none;
  }

  #menu .menu-items {
    width: auto;
    display: flex;
    justify-content: space-around;
    list-style: none;
  }

  #menu .menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #ffffff;
    padding: 0 10px;
  }

  #menu.apresentacao-active,
  #menu.mensagem-active,
  #menu.estrategia-active {
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    /* background: linear-gradient(
      -150deg,
      rgba(33, 39, 82, 1) 0%,
      rgba(34, 40, 85, 1) 4.95%,
      rgba(36, 44, 94, 1) 22.51%,
      rgba(39, 50, 109, 1) 42.08%,
      rgba(44, 59, 130, 1) 65.1%,
      rgba(46, 62, 137, 1) 100%
    ); */
  }

  #menu.estrategia-active {
    background-color: #212752;
  }

  #menu.pioneirismo-active,
  #menu.lideranca-active,
  #menu.ecoeficiencia-active {
    background-color: #ffffff;
  }

  #menu.compromisso-active {
    background-color: var(--secondary-color);
  }

  #menu.parceria-active {
    background-color: var(--primary-color);
  }

  .mob-content-container {
    display: none;
  }

  .content-container {
    max-width: 1920px;
    width: 100%;
    padding: 110px 0px 0px 0px;
    display: flex;
    height: 100%;
  }

  .content-container > div {
    width: 50%;
  }

  /* Espaçamento entre os elementos */

  .left-txt {
    padding-top: 0px;
    padding-left: 220px;
    padding-right: 0px;
    padding-bottom: 120px;
  }

  .right-txt {
    padding-top: 0px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 120px;
  }

  .left-txt-apresenta {
    padding-top: 0px;
    padding-left: 220px;
    padding-right: 0px;
    padding-bottom: 0px;
    align-content: center;
  }

  .right-apresenta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0px;
    padding-left: 100px;
    padding-right: 100px;
  }

  /* Mobile Home */

  #mob-home {
    display: none;
  }

  /* Home */
  #home {
    display: block;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #home .container-home {
    display: flex;
  }

  #home .bg-home {
    position: relative;
    width: 85vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-items: flex-end;
    text-align: right;
  }

  #load-home {
    height: 100vh;
    width: auto;
  }

  #home .logo-jcpm-container {
    width: 15%;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;
  }

  #home .logo-jcpm-container img {
    width: 69%;
    max-width: 196px;
    height: auto;
    padding-bottom: 58px;
  }

  #mob-apresentacao {
    display: none;
  }

  #apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .img-apresentacao {
    width: 65%;
    height: auto;
    padding: 0px 0px;
  }

  #mob-mensagem {
    display: none;
  }

  #mensagem {
    display: flex;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .right-mensagem {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
  }

  .img-msg-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    width: 58%;
    height: auto;
    box-sizing: border-box;
  }

  .img-msg-container img {
    width: 100%;
    height: auto;
  }

  .img-msg {
    display: block;
  }

  /* Ficha Técnica */
  #ficha {
    display: flex; /* conferir */
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/anima_ficha_V2.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .ficha-vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*#region Botões*/

  /* Botões */

  #bt-go-mensagem,
  #bt-go-pioneirismo,
  #bt-go-estrategia,
  #bt-go-parceria {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 30px;
  }

  #bt-go-compromisso,
  #bt-go-lideranca {
    background-color: var(--dark-blue);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-eco {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-ficha {
    background-color: var(--green);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-relatorio,
  #bt-conheca-mais {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 12px 22px 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 15px;
  }

  #bt-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* Imagem Fixa */

  .anima-pioneirismo-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    width: 67%;
    height: auto;
  }

  .anima-compromisso-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
    margin-bottom: 10px;
  }

  .anima-estrategia-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
  }
  .anima-lideranca-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 65%;
    height: auto;
  }
  .anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    width: 53%;
    height: auto;
    margin-bottom: 10px;
  }
  .anima-eco-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
  }

  /* Utils */

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
    margin-bottom: 0px;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0px;
  }
}

@media (min-width: 1336px) {
  p {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  h1 {
    font-size: 3rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 30px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 0px;
    line-height: 32px;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 30px;
  }

  #mob-menu {
    display: none;
  }

  .container-mobile-portrait {
    display: none;
  }

  #menu {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    padding: 30px 30px;
    font-size: 14px;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* Classe para exibir o menu com fade in */
  #menu.visible {
    /* opacity: 1; */
    transition: opacity 0.4s ease;
  }

  #menu .menu-logo {
    width: auto;
    padding-right: 40px;
  }

  #menu .menu-logo img {
    width: 106px;
    height: auto;
  }

  #menu .menu-logo .logo-branca {
    display: flex;
  }

  #menu .menu-logo .logo-preta {
    display: none;
  }

  #menu .menu-items {
    width: auto;
    display: flex;
    /* justify-content: space-around; */
    list-style: none;
  }

  #menu .menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #ffffff;
    padding: 0 15px;
  }

  .mob-content-container {
    display: none;
  }

  .content-container {
    display: flex;
    max-width: 1920px;
    width: 100%;
    padding: 115px 0px 0px 0px;
    height: 100%;
  }

  .content-container > div {
    width: 50%;
  }

  /* Espaçamento entre os elementos */

  .left-txt {
    padding-top: 0px;
    padding-left: 220px;
    padding-right: 0px;
    padding-bottom: 120px;
  }

  .right-txt {
    padding-top: 0px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 120px;
  }

  .left-txt-apresenta {
    padding-top: 0px;
    padding-left: 220px;
    padding-right: 0px;
    padding-bottom: 0px;
    align-content: center;
  }

  .right-apresenta {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile Home */

  #mob-home {
    display: none;
  }

  /* Home */
  #home {
    display: block;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #home .container-home {
    display: flex;
  }

  #home .logo-jcpm-container {
    width: 15%;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;
  }

  #home .logo-jcpm-container img {
    width: 69%;
    max-width: 196px;
    height: auto;
    padding-bottom: 58px;
  }

  #mob-apresentacao {
    display: none;
  }

  #apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .img-apresentacao {
    width: 55%;
    height: auto;
    padding: 14px 0px;
  }

  #mob-mensagem {
    display: none;
  }

  #mensagem {
    display: flex;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .right-mensagem {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
  }

  .img-msg-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    width: 58%;
    height: auto;
    box-sizing: border-box;
  }

  .img-msg-container img {
    width: 100%;
    height: auto;
  }

  .img-msg {
    display: block;
  }

  /* Ficha Técnica */
  #ficha {
    display: flex; /* conferir */
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/anima_ficha_V2.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .right-txt-ficha {
    padding-top: 0px;
    padding-left: 25px;
    padding-right: 110px;
    padding-bottom: 120px;
  }

  .ficha-vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*#region Botões*/

  #bt-go-mensagem,
  #bt-go-pioneirismo,
  #bt-go-estrategia,
  #bt-go-parceria {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-compromisso,
  #bt-go-lideranca {
    background-color: var(--dark-blue);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-eco {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-ficha {
    background-color: var(--green);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-relatorio,
  #bt-conheca-mais {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 12px 22px 10px 22px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    margin-top: 15px;
  }

  #bt-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
  }

  .bt-margin-big {
    margin-top: 25px;
  }

  .bt-margin-small {
    margin-top: 12px;
  }

  /*#endregion*/

  /* Imagem Fixa */

  .anima-pioneirismo-container {
    display: flex;
    justify-self: center;
    align-self: flex-start;
    width: 68%;
    height: auto;
  }

  .anima-compromisso-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 72%;
    height: auto;
    margin-bottom: 10px;
  }

  .anima-estrategia-container {
    display: flex;
    justify-self: center;
    align-self: flex-end;
    width: 72%;
    height: auto;
  }

  .anima-lideranca-container {
    display: flex;
    justify-self: center;
    align-self: flex-start;
    width: 68%;
    height: auto;
    margin-top: -30px;
  }

  .anima-parceria-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: flex-start;
    width: auto;
    height: auto;
  }

  .anima-eco-container {
    display: flex;
    justify-self: center;
    align-self: flex-start;
    width: 70%;
    height: auto;
    margin-top: -30px;
  }

  /* Utils */

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
    margin-bottom: 0px;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
  }

  .legenda-destaque {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 8px;
  }
}

/*  1920 and above  */

@media (min-width: 1886px) and (max-width: 3840px) {
  p {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 40px;
  }

  h1 {
    font-size: 3.8rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 36px;
  }

  h2 {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 36px;
  }

  h2.tx-nome-presidente {
    margin-bottom: 0px;
    line-height: 32px;
  }

  h3 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 46px;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  h4 {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 36px;
  }

  #mob-menu {
    display: none;
  }

  #menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 58px 58px;
    font-size: 16px;
    z-index: 20;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* Classe para exibir o menu com fade in */
  #menu.visible {
    /* opacity: 1; */
    transition: opacity 0.4s ease;
  }

  #menu .menu-logo {
    width: auto;
    padding-right: 88px;
  }

  #menu .menu-logo img {
    width: 128px;
    height: auto;
  }

  #menu .menu-logo .logo-branca {
    display: flex;
  }

  #menu .menu-logo .logo-preta {
    display: none;
  }

  #menu .menu-items {
    width: auto;
    display: flex;
    justify-content: space-around;
    list-style: none;
  }

  #menu .menu-items a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #ffffff;
    padding: 0 29px;
  }

  .mob-content-container {
    display: none;
  }

  .content-container {
    max-width: 1920px;
    width: 100%;
    padding: 240px 0px 0px 0px;
    display: flex;
    height: 100%;
  }

  .content-container > div {
    width: 50%;
  }

  /* Espaçamento entre os elementos */

  .left-txt {
    padding-top: 0px;
    padding-left: 360px;
    padding-right: 0px;
    padding-bottom: 120px;
  }

  .right-txt {
    padding-top: 0px;
    padding-left: 170px;
    padding-right: 170px;
    padding-bottom: 120px;
  }

  /* Mobile Home */

  #mob-home {
    display: none;
  }

  /* Home */
  #home {
    display: block;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
  }

  #home .container-home {
    display: flex;
  }

  #home .bg-home {
    width: 85vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-items: flex-end;
    text-align: right;
  }

  #load-home {
    height: 100vh;
    width: auto;
  }

  #home .logo-jcpm-container {
    width: 15%;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;
  }

  #home .logo-jcpm-container img {
    width: 69%;
    max-width: 196px;
    height: auto;
    padding-bottom: 58px;
  }

  #mob-apresentacao {
    display: none;
  }

  #apresentacao {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .left-txt-apresenta {
    padding-top: 0px;
    padding-left: 360px;
    padding-right: 0px;
    padding-bottom: 0px;
    align-content: center;
  }

  .img-apresentacao {
    width: 55%;
    height: auto;
    padding: 14px 0px;
  }

  #mob-mensagem {
    display: none;
  }

  #mensagem {
    display: flex;
    width: 100vw;
    height: auto;
    background: linear-gradient(
      -150deg,
      rgba(46, 62, 137, 1) 0%,
      rgba(44, 59, 130, 1) 4.95%,
      rgba(39, 50, 109, 1) 22.51%,
      rgba(36, 44, 94, 1) 42.08%,
      rgba(34, 40, 85, 1) 65.1%,
      rgba(33, 39, 82, 1) 100%
    );
    color: var(--text-color-light);
  }

  .right-mensagem {
    padding-top: 0px;
    display: block;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .img-msg-container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: center;
    width: 75%;
    height: auto;
    box-sizing: border-box;
  }

  .img-msg-container img {
    width: 100%;
    height: auto;
  }

  .img-msg {
    display: block;
  }

  /* Ficha Técnica */
  #ficha {
    width: 100vw;
    height: 100vh;
    background-image: url("../svg/anima_ficha_V2.svg"),
      linear-gradient(
        -150deg,
        rgba(46, 62, 137, 1) 0%,
        rgba(44, 59, 130, 1) 4.95%,
        rgba(39, 50, 109, 1) 22.51%,
        rgba(36, 44, 94, 1) 42.08%,
        rgba(34, 40, 85, 1) 65.1%,
        rgba(33, 39, 82, 1) 100%
      );
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .ficha-vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*#region Botões*/

  #bt-go-mensagem,
  #bt-go-pioneirismo,
  #bt-go-estrategia,
  #bt-go-parceria {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-compromisso,
  #bt-go-lideranca {
    background-color: var(--dark-blue);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-eco {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-go-ficha {
    background-color: var(--green);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-relatorio {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  #bt-conheca-mais {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border: none;
    padding: 10px 22px;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
  }

  .bt-margin-big {
    margin-top: 50px;
  }

  .bt-margin-small {
    margin-top: 24px;
  }

  /*#endregion*/

  /* Imagem Fixa */

  .img-msg-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 50%;
    height: auto;
  }

  .img-msg-container img {
    width: 100%;
    height: auto;
  }

  .anima-pioneirismo-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
  }

  .anima-compromisso-container {
    display: flex;
    justify-self: center;
    align-self: flex-end;
    width: 80%;
    height: auto;
    margin-bottom: -10px;
  }

  .anima-estrategia-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
  }

  .anima-lideranca-container {
    display: flex;
    justify-self: center;
    align-self: flex-start;
    width: 72%;
    height: auto;
    margin-top: -20px;
  }

  .anima-parceria-container {
    display: flex;
    justify-self: center;
    align-self: flex-start;
    width: 58%;
    height: auto;
  }

  .anima-eco-container {
    display: flex;
    justify-self: center;
    align-self: center;
    width: 70%;
    height: auto;
  }

  /* Utils */

  .img-margin-bottom {
    margin-bottom: 40px;
  }

  .semibold {
    font-weight: 600;
  }

  .legenda {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
  }
}