.sobre {
  display: flex;
  width: 100%;
  height: auto;
  /* background: #173f73; */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.texto-sobre {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 90%;
  max-width: 1240px;
}

.paragrafos {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
}

.paragrafos p {
  margin: 10px 0;
}

.paragrafos ul {
  margin: 10px 0;
}

.paragrafos ul li {
  font-size: 1.2em;
  list-style: circle;
  margin: 5px 0;
}

h1 {
  color: #f4bb49;
  font-size: 2.5em;
  font-family: "Bronkoh-Heavy";
  margin: 0;
  padding: 0;
}

p {
  font-size: 1.2em;
}

.sobre p {
  color: #000000;
}

header {
  display: flex;
  padding: 40px;
}

header img {
  width: 100%;
  height: auto;
}

.fullbanner{
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.fullbanner a{
  display: flex;
  width: 100%;
  height: auto;
  text-decoration: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.fullbanner img{
  width: 100%;
  height: auto;
}

.oficinas {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 40px 0;
  background-color: #173f73;
}

.oficinas .content {
  display: flex;
  width: 90%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 40px;
  max-width: 1240px;
}

.oficinas .content .ofpp .img-ofc {
  width: 70%;
}

.oficinas .content .ofpp {
  width: 70%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.oficinas .content .ofpp .img-ofc img {
  width: 100%;
  height: auto;
}

.oficinas .content .ofpp .texto-ofc {
  width: 70%;
}
.oficinas .content .texto-ofc p {
  /* line-height: 30px; */
  color: #f4bb49;
  font-family: "Bronkoh-Heavy";
  text-align: left;
  font-size: 1.6em;
}

.oficinas .content .botao {
  width: 30%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.oficinas .content .botao a {
  display: flex;
  width: 100%;
  background: #f4bb49;
  color: #173f73;
  text-align: center;
  padding: 20px 10px;
  border-radius: 5px;
  text-decoration: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-family: "Bronkoh-Heavy";
  font-size: 1.3em;
}

.oficinas .content .botao a:hover {
  transition: 0.3s;
  background: #93c01f;
  color: #173f73;
}

.oficinas .content .botao .texto-ofc ul li {
  font-size: 1em;
  list-style: circle;
  margin: 10px 0;
  color: #ffffff;
}

#realizada {
  text-decoration: line-through;
}

.banner{
  display: flex;
  width: 100%;
  /* background-color: #ffffff; */
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  gap: 40px;
}

.banner .title-banner{
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: #F4BB49;
  color: #173F73;
}

.banner .title-banner .content-title-banner{
  display: flex;
  width: 90%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
}

.banner .title-banner .content-title-banner  h2{
  color: #173f73;
  font-family: "Bronkoh-Heavy";
  font-size: 1.6rem;
}

.banner .title-banner .content-title-banner img{
  width: 60px;
  height: auto;
}

/* .banner .cadernos{
  display: flex;
  width: 100%;
  max-width: 1240px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 90px;
  padding: 20px 0;
  
}

.banner .cadernos #caderno{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.banner .cadernos #caderno img{
  width: 100%;
  height: auto;
}

.banner .cadernos #caderno p{
  color: #ffffff;
  font-family: "Bronkoh-Heavy";
  font-size: 1rem;
  background-color: #173f73;
  padding: 10px 10px;
  width: 100%;
  text-align: center;

}

.banner .cadernos #caderno:hover p{
  background-color: #f4bb49;
  color: #173f73;
  transition: 0.3s;
} */

.banner .divisor{
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.banner .divisor span{
  display: flex;
  width: 100%;
  height: 2px;
  background-color: #F4BB49;
}

/* .banner {
  display: flex;
  width: 100%;
  background-color: #f4bb49;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.banner img {
  width: 90%;
  height: auto;
}

.banner a {
  display: flex;
  width: 90%;
  text-align: center;
  text-decoration: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
} */

/* .participacao-online {
  display: flex;
  width: 100%;
  height: auto;
  background: #93c01f;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.participacao-online a {
  display: flex;
  width: 100%;
  background: #93c01f;
  color: #173f73;
  text-align: center;
  padding: 40px 0;
  text-decoration: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-family: "Bronkoh-Heavy";
  font-size: 1.6em;
  margin: 0;
  line-height: 0;
}

participacao-online p {
  margin: 0;
  padding: 0;
}

#desc {
  font-size: 0.5em;
}

.participacao-online a:hover {
  transition: 0.3s;
  background: #173f73;
  color: #ffffff;
} */

.timeline {
  display: flex;
  width: 100%;
  max-width: 1240px;
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.timeline img {
  width: 100%;
  height: auto;
}

.participacao-online {
  display: flex;
  width: 90%;
  max-width: 1240px;
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.participacao-online .title-bar {
  background-color: #93c01f;
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 20px 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}

.participacao-online .title-bar .icon-participe {
  display: flex;
  width: 50%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap:20px;
}

.participacao-online .title-bar .icon-participe h1 {
  color: #ffffff;
  font-family: "Bronkoh-Heavy";
  font-size: 2em;
}

.participacao-online .title-bar .icon-participe img {
  width: 60px;
  height: auto;
  margin-left: 20px;
}

.participacao-online .title-bar a{
  color: #93c01f;
  font-family: "Bronkoh-Heavy";
  font-size: 1.6em;
  text-decoration: none;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 20px;
}

.participacao-online .title-bar a:hover{
  transition: 0.3s;
  background-color: #ec7329;
  color: #ffffff;
} 

.tematicas {
  display: flex;
  width: 100%;
  max-width: 1240px;
  height: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0;
  align-content: flex-start;
  gap: 10px;
}

.tema {
  display: flex;
  width: 33%;
  min-height: 600px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  color: #ffffff;
}

.tema .img-tema {
  padding-top: 20px;
  display: flex;
  width: 100px;
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

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

.textos-tema {
  display: flex;
  width: 90%;
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.textos-tema h2 {
  font-family: "Bronkoh-Heavy";
  font-size: 1.8em;
  text-align: center;
  margin: 0;
}

.textos-tema p {
  text-align: justify;
  font-size: 1.2em;
  font-family: "Bronkoh-ExtraLight";
}

.textos-tema a {
  color: #ffffff;
  font-family: "Bronkoh-Heavy";
}

.textos-tema a:hover {
  transition: 0.3s;
  color: #f4bb49;
}

#mudancasclimaticas {
  background: #93c01f;
}

#direitoacidade {
  background: #173f73;
}

#reestruturacao {
  background: #ec7329;
}

.botao-participacao {
  display: flex;
  width: 80%;
  text-align: center;
  text-decoration: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px;
}



/* PARA DESATIVAR O BOTÃO  */

.botao-participacao a {
  padding: 20px 40px;
  border: #e7e7e7 solid 2px;
  color: #e7e7e7;
  font-family: "Bronkoh-Heavy";
  font-size: 1.6em;
  text-decoration: none;
  text-align: center;
  border-radius: 20px;
  cursor: default;
  background: #9393935a;
}

/* PARA ATIVAR O BOTÃO */

/* .botao-participacao a {
  padding: 20px 40px;
  border: #e7e7e7 solid 2px;
  color: #e7e7e7;
  font-family: "Bronkoh-Heavy";
  font-size: 1.6em;
  text-decoration: none;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
} */

/* .botao-participacao a:hover {
  background: #f4bb49;
  color: white;
  transition: 0.3s;
} */

#ativo a {
  border: none;
  background: #f4bb49;
  color: #173f73;
}

#ativo a:hover {
  background: #93c01f;
  color: #173f73;
  cursor: pointer;
}

#vertical {
  display: none;
}

#paracronograma {
  display: flex;
  background-color: transparent;
  padding: 0;
  color: #ffffff;
  font-size: 1em;
  margin: 0;
  text-align: left;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}

#paracronograma:hover {
  cursor: pointer;
  color: #f4bb49;
  transition: 0.3s;
}


@media screen and (max-width: 768px) {
  .oficinas .content {
    flex-direction: column;
    gap: 20px;
  }

  .oficinas .content .botao .texto-ofc {
    width: 100%;
    font-size: 0.8em;
  }

  .oficinas .content .ofpp {
    width: 100%;
  }

  .oficinas .content .botao {
    width: 90%;
  }

  .tematicas {
    flex-direction: column;
  }

  .tema {
    width: 100%;
  }

  .tema .botao-participacao {
    min-height: auto;
  }

  #vertical {
    display: flex;
  }

  #horizontal {
    display: none;
  }

  /* .banner img {
    width: 100%;
    height: 100%;
  } */

  .participacao-online .title-bar a{
    font-size: 1.2rem;
    padding: 10px 20px;
  }

  .banner{
    display: flex;
    width: 100%;
    /* background-color: #ffffff; */
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 20px;
  }

  .banner .title-banner{
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 20px 0;  
    gap: 20px;
    background-color: #F4BB49;
    color: #173F73;
  }

  .banner .title-banner .content-title-banner{
    display: flex;
    width: 90%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1240px;
  }

  .banner .title-banner .content-title-banner  h2{
    color: #173f73;
    font-family: "Bronkoh-Heavy";
    font-size: 1.2rem;
  }

  .banner .title-banner .content-title-banner img{
    width: 60px;
    height: auto;
  }

  .banner .cadernos{
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 20px 0;
  }

  .banner .cadernos #caderno{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }

  .banner .cadernos #caderno img{
    width: 80%;
    height: auto;
  }

  .banner .cadernos #caderno p{
    color: #ffffff;
    font-family: "Bronkoh-Heavy";
    font-size: 1.2rem;
    background-color: #173f73;
    padding: 10px 20px;
  }
}