@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

body { font-family: 'Source Sans Pro', sans-serif; background-color: #F8F8F8;}


.faixa-vermelha { background-color: #83241b; width: 100%;    display: flex;    justify-content: center;  align-items: center; padding: 22px 0px 15px 0px;}
.tit-consciencia { width: 90%; max-width: 595px;}
.conteudo { margin: 2px auto; width: 88%;}
.colunas { display: flex; align-items: center; margin: 0px 20px; }
.coluna-imagem { width: 100%; max-width: 350px; margin: 30px 25px 0px 25px; }
.titulo-area { font-family: Viga; font-style: normal; font-weight: normal; font-size: 20px; color: #134885; }
.titulo-area-interna {  font-family: Viga; font-style: normal; font-weight: normal; font-size: 35px; letter-spacing: 0.112903px; color: #1F5F7D; margin-top: 0px; padding-top: 0px;}
.chapeu { font-family: Source Sans Pro; font-style: normal; font-weight: bold; font-size: 14px; line-height: 18px; color: #425F81; margin: 2px 0px;}
.titulo-post { font-family: Source Sans Pro; font-style: normal; font-weight: 600; font-size: 20px; line-height: 25px;  color: #4A4A4A; margin: 5px 0px;}
.conteudo-post { font-family: Source Sans Pro; font-style: normal; font-weight: 300; font-size: 18px; line-height: 23px; margin: 5px 0px; color: #4A4A4A; }
.linha-divisoria { width: 100%; opacity: 0.5; border: 1px solid #979797; margin: 20px 0px; }
.centrado { display: flex; justify-content: center; width: 100%; align-items: center; padding: 20px 0px;}
.texto-direita { text-align: right;}
.link-vermelho { text-decoration: underline !important; color: #83241b !important; }
.link-vermelho:link { text-decoration: underline; color: #83241b; }
.link-vermelho:visited { text-decoration: underline; color: #5c1610; }
.link-vermelho:hover {background-color: #f3cac6; cursor: pointer;}
.imagem-pintar { width: 90%;}
.texto-centralizado {text-align: center; margin: 2px;}
.separador { border-top: 1px solid #c27f79; margin: 45px 10px; }


.container { width: 100%; max-width: 1200px; display: flex; flex-direction: column; margin: auto; align-items: flex-start; background-color: white; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.18); margin-bottom: 0px 0px 55px 0px;}
.miolo {max-width: 1050px; margin: 25px; }
.coluna-lateral { max-width: 340px; width: 100%; margin: 15px;}
.sutil { color: #979797;}


@media screen and (max-width: 900px) {
    .container {flex-direction: column; align-items: center; }
    .coluna-menu-lateral { order: 2; width: 100%;}
    .conteudo { margin: 2px auto; width: 95%;}
    .colunas { flex-direction: column; align-items: center; }
    .colunas h2 {text-align: center;}
    .texto-direita {text-align: left;}
    .coluna-imagem { order: -1; text-align: center;}
    .bolinha-responsiva { width: 80%;}
    
    

}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }