:root {
    --cor-escura: #217867;
    --cor-intermediaria: #87aade;
    --cor-forte: #51a3a6;
    --cor-clara: #afe9dd;
    --cor-cinza-escuro: #000000;
    --cor-cinza-claro: #3b372a;
    --cor-inputs: rgba(161,148,148,0.5);
}
html {
  scroll-behavior: smooth;
}
.navbar
{
    border-bottom: 3px solid var(--cor-forte);
}


/*GERAL*/
body
{
    font-family: Century Gothic,CenturyGothic;
}

/*CSS DO GOOGLE MAPS*/
#map 
{
    height: 250px;
    width: 100%;
    border-radius:4px;
    padding-bottom: 20px;
}

.bd-placeholder-img 
{
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*AQUI É O CSS DA PARTE DAS AREAS*/
.textoarea_titulo{
    color:white;
    font-weight:bold;
}
.textoarea{
    color:white;
}
.areas-item {
  margin-bottom: 30px;
}
.areas-item .areas-thumb {
  position: relative;
  overflow: hidden;
}
.areas-item .areas-thumb img {
  width: 100%;
}
.areas-item .areas-thumb .areas-overlay {
    
  background-color: rgba(81,163,166,0.98);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 25px;
  text-align: center;
  color: white;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  border-radius: 4px;
}
.areas-item .areas-thumb .areas-overlay h3 {
  font-size: 18px;
  text-transform: uppercase;
  color: white;
  padding-bottom: 10px;
  margin-bottom: 10px;
  display: inline-block;
  border-bottom: 1px solid white;
}
.areas-item .areas-thumb .areas-overlay a.expand {
  margin-top: 15px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  background-color: white;
  display: inline-block;
  text-align: center;
}
.areas-item .areas-thumb .areas-overlay a.expand i {
  line-height: 36px;
}
.areas-item .areas-thumb:hover .areas-overlay {
  opacity: 1;
  visibility: visible;
}

.texto_doencas
{
  font-weight: bold;
  fill: var(--cor-escura);
}
.fundo_doencas
{
  fill: var(--cor-clara);
}
.jumbotron
{
  background-size: 25%; 
  background-repeat: no-repeat; 
  background-position-x: right;
}

.btn-custom
{
  background-color: var(--cor-escura);
  border-color: var(--cor-escura);
  color: white;
}

.btn-custom:hover
{
  background-color: var(--cor-clara);
  border-color: var(--cor-clara);
  color: var(--cor-escura);
}

.text-custom
{
  color: var(--cor-forte);
}

.video
{
  width: 500px;
  height: 300px;
}

.img-doencas
{
  width:500px;
  height:200px;
}

@media (max-width: 768px) 
{

  .img-doencas
  {
    width:500px;
    height:200px;
  }
  .jumbotron
  {
    background-size: 30%; 
    background-repeat: no-repeat; 
    background-position-x: right;
    background-position-y: bottom;
  } 
  
  .img-banner
  {
    background-size: 50%;
  }
    
  .bd-placeholder-img-lg 
  {
      font-size: 3.5rem;
  }

    .areas-item .areas-thumb .areas-overlay {
    
        background-color: rgba(81,163,166,0.98);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 10px;
        text-align: center;
        color: white;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
        border-radius: 4px;
      }
    .textoarea_titulo{
        color:white;
        font-weight:bold;
        font-size: 50%;
    }
    .textoarea{
        color:white;
        font-size: 50%;
    }
    .texto_doencas
    {
      font-size: 25%;
    }
}