@keyframes aparecer_esquerda {
  
  from{opacity: 0; transform: translateX(70px);}
  to{opacity: 1; transform: translateX(0px)}
}
@keyframes aparecer_direita {
  
  from{opacity: 0; transform: translateX(-70px);}
  to{opacity: 1; transform: translateX(0px);}
}

.apresentacao1{
  animation-name: aparecer_esquerda;
  animation-duration: 3s;
}

.apresentacao0{
  animation-name: aparecer_direita;
  animation-duration: 3s;
}

.fade-in{
  animation: fadein 1.3s ease forwards;
    /* animation-delay: 0.2s; */

}

@keyframes bottomUp {
  from{
    opacity: 0.5;
    transform: translateY(70px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadein {
  from {
    opacity:0;
    transform: translateY(0px);
  }
  to{ 
    opacity:1;
        transform: translateY(0px);

  }
}
@keyframes infiniteZoom {
  0% {
    background-size: 10000px;   /* começa no normal */
  }
    35% {
    background-size: 5000px;   /* começa no normal */
  }
  100% {
    background-size: 1px;     /* vai diminuindo até ficar mesh neutro */
  }
   
}


@keyframes grow {
  from{
    transform:scale(1);
  }
  to{
       transform:scale(1.16);

  }
}

.cat:hover,.ptec:hover,.saga:hover{
  opacity: .0.5;
  transform: translateY(0);
  animation: grow 0.4s ease forwards;
    /* animation-delay: 0.08s; */
}
.js .clientes,
.js .estados,
.js .valor {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s ease;
}
.js .clientes.apareceu,
.js .estados.apareceu,
.js .valor.apareceu {
  opacity: 1;
  transform: translateY(0);
  animation: bottomUp 1.2s ease forwards;
    /* animation-delay: 0.2s; */
}

.js .parceiros,
.js .beneficiadas {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s ease;
}
.js .parceiros.apareceu,
.js .beneficiadas.apareceu {
  opacity: 1;
  transform: translateY(0);
  animation: bottomUp 1.2s ease forwards;
    /* animation-delay: 0.2s; */
}

.js .janio,.eleide, .roger{
  opacity: 0;
  transform: translateY(70px);
  transition: all 1.2s ease;
}

.js .janio.apareceu{
  opacity: 1;
  animation: bottomUp 1.2s ease forwards;
  /* animation-delay: 0.3s; */
}
.js .roger.apareceu{
  opacity: 1;
  animation: bottomUp 1.2s ease forwards;
  animation-delay: 0.11s;
}
.js .eleide.apareceu{
  opacity: 1;
  animation: bottomUp 1.2s ease forwards;
  animation-delay: 0.22s;
}

.js .etica{
  opacity: 0;
  transform: translateX(20px);
  transition: all 1.2s ease;
  
}
.js .sociais{
  opacity: 0;
  transform: translateX(-20px);
  transition: all 1.2s ease;
}

.js .etica.apareceu{
      opacity: 1;
  transform: translateY(0);
  animation: aparecer_direita 1.2s ease forwards;
    /* animation-delay: 0.2s; */

}

.js .sociais.apareceu{
      opacity: 1;
  transform: translateY(0);
  animation:aparecer_esquerda  1.2s ease forwards;
    /* animation-delay: 0.2s; */

   
}

li:hover, li a:hover{
  color: #60affe !important;;
}
h1:hover,h3:hover{
  transform: scale(1.03);
  filter:brightness(1.3)

}


.janio a, .roger a, .eleide a {
  transform: scale(1);
  filter: saturate(1);
  transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.janio a:hover,.roger a:hover, .eleide a:hover  {
  transform: scale(1.03);
  filter: saturate(1.2);
}

.janio a span{
  filter:brightness(1);
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
}
.janio a span:hover{
  filter:brightness(2)
}

/* ESCONDER NAVBAR */

#siteNav {
  transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
  transform: translateY(0);
}

/* quando escondida */
#siteNav.nav--hidden {
  transform: translateY(-110%);
  opacity: 0.95;
}

.etica.apareceu:hover,.sociais.apareceu:hover{
  transform: scale(1.03);
  transition-duration: .5s ease;
}

.clientes:hover,.parceiros:hover,.estados:hover,.beneficiadas:hover{
  transform:translateY(-9px);
}

.toggle-btn:hover{
  color: #09affe!important;
  filter: brightness(1.3);
  font-weight: 500;
  text-decoration: underline!important;
}