html, body, div, span, p, h1, h2, h3, h4, h5, h6{ font-family: 'Open Sans', sans-serif; color: black }
h1, h2, h3{ font-weight: 300 }
body{ background-image: linear-gradient(#fff, #ccc) }
div{  }
h1{ font-size: 32px }
h2{ font-size: 24px }
h3{ font-size: 18px }
table td, table th{ border: 1px black solid }
#topo{ padding-top:0.8rem; max-width:900px }
#topo li{ background-size: cover; background-position: center; border-radius: 6px }
.content p, .content h1, .content h2, .content h3{ padding-bottom: 1rem }
.dicas div{ font-size: 0.9rem; line-height: 1.4rem }
.card-divider{ background-color: black; color: white}

#inCanvas{ margin:auto; max-width:900px; background-color:#fff; box-shadow: 0 0 4px #CCC}
#hamburguer{ background: white; color: black; padding: 0 5px; font-size: 24px }
#logo{ margin: 1rem 0 0 0 }
.menu li a, .dropdown.menu > li.is-active > a{ color: black }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: black transparent transparent; }
.menu li a:hover{ background-color: #f1f1f1 }
.mosaico div{ text-align: center }
.mosaico div img{ width: 100%; height: auto }
.mosaico div .info-produto{ font-size:12px; font-weight:bold; text-align:left !important; padding-bottom: 1rem}
.callout{ line-height: 2rem }



#footer{ background-color: #666; color:white; font-size: 0.8rem; text-align: center; padding: 1rem; margin-top: 2rem }

/* ISSO ERA DE QUANDO TINHA UM MAPA EM REPRESENTANTES
#svg-map path { fill: #0094d9 }
#svg-map text { fill: #fff; font: 12px Arial-BoldMT, sans-serif; cursor: pointer }
#svg-map a { text-decoration: none }
#svg-map a:hover { cursor: pointer; text-decoration: none }
#svg-map a:hover path { fill: #003399 !important }
#svg-map .circle { fill: #66ccff }
#svg-map a:hover .circle { fill: #003399 !important; cursor: pointer }
*/


/* Small only */
@media screen and (max-width: 39.9375em) {
  #topo li{ min-height:200px; }
  .content{ padding:0 1rem !important }
}
/* Medium and up */
@media screen and (min-width: 40em) {
  #topo li{ min-height:300px; }
  .content{ padding:0 5rem !important }
  .f-esq img{ padding-right: 0.8rem }
  .f-dir img{ padding-right: 0.8rem }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}