#cidade {
  margin-top: 60px;
}

#cidade .container,
#historia .container,
#fundacao .container,
#informacoes-tecnicas .container,
#mapa-municipio .container {
  flex-direction: column;
}

#historia,
#fundacao {
  margin-top: 40px;
}

#historia .titulo-secao,
#fundacao .titulo-secao {
  margin-bottom: 30px;
}

#historia h2,
#fundacao h2 {
  color: #005288;
}

#historia p,
#fundacao p {
  font-family: Arial;
  font-size: 1rem;
  color: #000000;
  margin-bottom: 20px;
  line-height: 20px;
}

#historia p:last-child,
#fundacao p.ultimo {
  margin-bottom: 0;
}

#fundacao .imagens {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
}

#fundacao .imagens img {
  width: 32%;
}

#informacoes-tecnicas,
#brasao-bandeira-hino {
  margin-top: 50px;
}

#informacoes-tecnicas .titulo-secao-verde {
  margin-bottom: 30px;
}

#informacoes-tecnicas .infos {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
}

#informacoes-tecnicas p {
  font-family: Arial;
  font-size: 1rem;
  color: #000000;
  margin-bottom: 20px;
}

#informacoes-tecnicas .infos div p:last-child {
  margin-bottom: 0;
}

#brasao-bandeira-hino .container {
  justify-content: space-between;
}

#brasao-bandeira-hino .arquivos {
  display: flex;
  margin-top: 200px;
}

#brasao-bandeira-hino .arquivos a {
  width: 85px;
  height: 85px;
  background-color: #03BA52;
  font-family: Arial;
  font-weight: bold;
  font-size: 1.8rem;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all .3s;
  margin-right: 20px;
}

#brasao-bandeira-hino .arquivos a:hover {
  background-color: #FFFFFF;
  color: #03BA52;
  border: 2px solid #03BA52;
}

#brasao-bandeira-hino .info {
  margin-top: 10px;
}

#brasao-bandeira-hino .info span {
  color: #03BE5B;
  font-size: 1rem;
  font-family: Arial;
  font-weight: normal;
}

#brasao-bandeira-hino .hino audio {
  margin-bottom: 30px;
}

#brasao-bandeira-hino .hino p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  line-height: 20px;
  margin-bottom: 20px;
}

#mapa-municipio iframe {
  border: none;
  height: 500px;
  width: 100%;
}

@media (max-width:768px) {
  #brasao-bandeira-hino .container {
    flex-wrap: wrap;
  }

  #brasao-bandeira-hino .hino {
    margin-top: 40px;
  }

  #brasao-bandeira-hino .arquivos {
    margin-top: 20px;
  }
}

@media (max-width:576px) {
  #cidade {
    margin-top: 20px;
  }

  #fundacao .imagens img {
    width: 100%;
    margin-bottom: 15px;
  }

  #fundacao .imagens img:last-child {
    margin-bottom: 0;
  }

  #informacoes-tecnicas .infos {
    flex-direction: column;
  }

  #informacoes-tecnicas .infos div {
    margin-bottom: 20px;
  }

  #informacoes-tecnicas .infos div:last-child {
    margin-bottom: 0;
  }

  #brasao-bandeira-hino .brasao,
  #brasao-bandeira-hino .bandeira,
  #brasao-bandeira-hino .hino {
    width: 100%;
  }

  #brasao-bandeira-hino .bandeira,
  #mapa-municipio {
    margin-top: 40px;
  }

  #brasao-bandeira-hino img {
    width: 100%;
  }

  #brasao-bandeira-hino .arquivos {
    justify-content: space-evenly;
  }

  #brasao-bandeira-hino .arquivos a {
    margin: 0;
  }

  #brasao-bandeira-hino .info {
    text-align: center;
  }

  #brasao-bandeira-hino .hino p:last-child {
    margin-bottom: 0;
  }

  #mapa-municipio iframe {
    height: 300px;
  }
}