.marcas {padding: 10px; border-radius: 10px; float: left; width: 18%; height: 200px; margin: 3%; align-content: center; background-color: white; border: 4px solid var(--azul); overflow: hidden}
.marcas img{padding: 25px; }
.marcas img:hover {padding: 15px;}
.space {float: none; min-height: 50px; clear: both}
.banner_pgs{height: 60px; overflow: hidden; background-color: var( --azul)}


.topicos{ padding: 10px; border-radius: 10px; float: left; width: 46%; box-shadow: 5px 8px 15px #888888; margin: 2%; align-content: center; background-color: white}
.topicos p{font: 17px/24px Dubai; padding: 12px; text-align: left}
.topicos h3{font: 24px/24px Dubai Black; padding: 12px }


.titulo{text-align: left; font: 40px/46px Dubai; color: var( --azul); padding-top: 40px ; padding-bottom: 40px}
.div50{ width: 50%}
.div50 p{text-align: center; font: 17px/24px Dubai}
iframe{ border: 0; width: 100% }

.ico{max-width: 120px;  padding: 5%}


.topicos li {font: 18px/21px Dubai; color:grey /*var( --azul)*/; text-align: left; margin-left: 32px; margin-top: 3px;  padding: 3px;}
.topicos li p{padding-left: 3px}

.topicos a li, .topicos a {text-decoration: none; color: var( --azul)}
.topicos a li:hover {background-color: #E5E5E5; border-radius: 5px;}


.submenu ul{float: right;}
.submenu li{/*text-decoration: none; */ display: inline ; /* border: 1px solid white; font: 13px/15px Dubai; text-transform: uppercase; padding: 4px; float: right; margin: 4px; color: white; width: 140px */}
.submenu li div{text-decoration: none; border: 1px solid white; font: 12px/15px Dubai; text-transform: uppercase; padding: 4px; float: right; margin: 4px; color: white; width: 140px}
.submenu li div:hover{background-color: white; color: var(--azul)}

.ativo{background-color: #A9A9A9; color: var(--azul)}

#p01, #p02, #p03, #p04, #p05,#p06, #p07, #p08, #p09, #p10, #p11, #p12, #p13, #p14, #p15{display: none; position: absolute; width: 50%; border: 1px solid gray; background-color: white; box-shadow: 5px 8px 15px #888888}

.conteudo{margin-top: 50px; float: none}
.conteudo h3{font: 26px/29px Dubai}
.subtitulo{float: left; display: flex}
.conteudo p{float: none; clear: both; font: 18px/22px Dubai; padding-left: 70px}
.conteudo .master{padding: 0}
.conteudo .icone{float: left; width: 55px; margin-right: 15px}
.conteudo .principal{width: 35%; float: right; margin-left: 50px; margin-bottom: 16px}
.conteudo ul li{font: 18px/22px Dubai; color: grey /*var( --azul)*/; text-align: left; margin-left: 90px; margin-top: 3px;  padding: 3px; clear: both; text-decoration: none;}
.conteudo li p{padding-left: 3px; text-decoration: none;}
.conteudo a li, .conteudo a {text-decoration: none; color: grey /*var( --azul)*/; text-decoration: none;}
.conteudo a li:hover {background-color: #E5E5E5; border-radius: 5px;}
.conteudo ul div p{padding: 16px}

h3.tab{ padding: 10px; padding-top: 25px; padding-left:70px; clear:both}

.submenu{height: 34px; background-color: grey; width: 100%}

.container .imagem_texto{width: 40%; float: right; margin-left: 40px}



/* Contato */
.le {float: left; width: 50%}
.ld_contato {float: right; width: 65%; text-align: left;top: 70px;}
.ld_contato input{ width: 90%; padding: 3px; margin: 2px; float:right;}
.ld_contato textarea{ font: 13px/15px Arial; width: 90%; padding: 3px; margin: 2px; height: 120px;  resize: none; float:right;}
.ld p{font: 12px/14px Arial}
.ld .container{text-align: left; clear: both; left: 40px;}
.g-recaptcha{float: right;}
.ld_contato input[type=submit]{border-radius: 5px; background-color: var(--azul); color: white; border: 0; width:300px; float:right; clear: both; cursor: pointer; height: 30px}
.ld_contato input[type=submit]:hover{background-color: #BFBFBF; color: white;}


.contain {display: block;  position: relative; margin-bottom: 160px; margin-left: 10%;  cursor: pointer;  font: 13px/17px Arial;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
/* Hide the browser's default checkbox */
.contain input { position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
/* Create a custom checkbox */
.checkmark { position: absolute;  top: 0;  left: 0;  height: 25px;  width: 25px;  background-color: #D2D2D2;}
.contain input:checked ~ .checkmark {  background-color: var(--azul);}
  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: "";  position: absolute; display: none;}
/* Show the checkmark when checked */
.contain input:checked ~ .checkmark:after {  display: block;}
/* Style the checkmark/indicator */
.contain .checkmark:after {left: 9px;  top: 5px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.icone_rodape{width: 60px; margin: 20px;}

.conteiner_rodape{text-align: right; clear: both}


/* página contato */
.container_contato{clear: both; width: var(--largura); margin: 0 auto;  display: flex; padding-bottom: 30px; padding-top: 30px;}
.sub1, .sub2{ border: 5px solid var( --azul); position: fixed; margin-left: 10px; margin-top: -100px; display: none; ; background-color: white; border-radius: 5px;}
#m01:hover  > .sub1{display: initial}
#m01:hover {border: 5px solid var(--azul)}
#m02:hover  > .sub2{display: initial; transition: all 0.5s ease-out;}	
.marcas div p{font: 20px/24px Dubai; padding: 15px}
 
.le_contato{/*align-content: center;*/ float: left; width: 35%}
.ld_contato{align-content: center; float: left; width: 65%}
label.container{font: 16px/26px Dubai}

.container_contato .icones{max-width: 56px; margin: 0px; border: 0px solid grey; float: left}
.container_contato p{font: 22px/42px Dubai; float: left; }
.container_contato .le_contato p{font: 22px/42px Dubai; float: left; }
.container_contato .ld_contato p{padding: 6px; border: 1px solid grey; border-radius: 5px; margin-left: 10% ;font: 22px/42px Dubai; float: left; text-align: center}
 
.container_contato  label.contain  p{ font:16px/22px Dubai; margin-top: 1px; border: 0; padding: 2px; margin-left: 35px; text-align: left}

.container_contato .ld_contato p:hover {background-color: #D0D0D0; }

.resposta_contato{color: var(--azul); align-content: center; font: 24px/27px Dubai; margin: 0 auto; min-height: 260px; width: 50%; background-color: white; box-shadow: 2px 2px 10px black; padding: 10px}


svg {width: 100%; height: auto; border: 0px solid black; margin-bottom: 30px; padding: 10px}
path{fill: #E6E6E6; stroke: white; stroke-width: 2}
.div_mapa{width: 50%; float: left; min-width: 460px}
.info_mapa{width: 50%; float: left; margin-top: 30px;}
div.scroll{ overflow:auto; max-height: 500px;  margin-bottom: 40px}

table{border-collapse: collapse; border: 2px solid  #DADADA; width: 100%; font: 13px/18px Dubai; margin-bottom: 0px; user-select: none; }
td{border: 1px solid #DADADA; padding: 2px; color: #777777;}
td.azul{background-color: var(--azul); color: white; text-transform: uppercase}

#al, #am, #ba, #ce, #df, #go, #ma, #mg, #ms, #mt, #pa, #pe, #pi, #pr, #rj, #rn, #rs, #sc, #sp{display: none;}
#AL, #AM, #BA, #CE, #DF, #GO, #MA, #MG, #MS, #MT, #PA, #PE, #PI, #PR, #RJ, #RN, #RS, #SC, #SP{fill: #D4D4D4; stroke: white; stroke-width: 2;}
#AL:hover, #AM:hover, #BA:hover, #CE:hover, #DF:hover, #GO:hover, #MA:hover, #MG:hover, #MS:hover, #MT:hover, #PA:hover, #PE:hover, #PI:hover, #PR:hover, #RJ:hover, #RN:hover, #RS:hover, #SC:hover, #SP:hover{fill: #BFBFBF !important;}

td:nth-child(1) {width: 17% }
td:nth-child(2) {width: 17% }
td:nth-child(3) {width: 13% }
td:nth-child(4) {width: 13% }
td:nth-child(5) {width: 40% }


@media only screen and (max-width: 1420px) {
.marcas {width: 26%; height: 200px; }
 .div_mapa{width: 50%; float: left; min-width: 350px; max-width: 90% }
 .info_mapa{float: left; width: 50%; margin-top: 10px;}
 div.scroll{ max-height: 450px; }

}

@media only screen and (max-width: 1230px) {

.marcas {width: 27%; height: 200px; margin: 3% }
 .div_mapa{width: 100%; float: none; min-width: 400px; max-width: 90% }
 .info_mapa{float: none; clear: both; width: 100%}

}


@media only screen and (max-width: 900px) {

.icone_rodape{width: 60px; margin: 10px;}
.conteiner_rodape{text-align: center; clear: both}

.le_contato{align-content: center; float: left; width: 100%}
.ld_contato{align-content: center; float: left; width: 100%}
.container_contato{ display: inline-block; clear: both; width: var(--largura); margin: 0 auto; padding-bottom: 30px; padding-top: 30px;}
.container_contato .ld_contato p{width: 100%;  margin: 10px; margin-left: 0; }
 
 #p01, #p02, #p03, #p04, #p05,#p06, #p07, #p08, #p09, #p10, #p11, #p12, #p13, #p14, #p15{width: 90%; }
 .submenu{display: none}
 
 
 .resposta_contato{font: 22px/26px Dubai; margin: 0 auto; min-height: 260px; width: 80%; }
 .ld_contato input{ width: 98%; padding: 3px; margin: 1%;}
 .ld_contato textarea{ width: 98%; padding: 3px; margin: 1%; }
 
 .div_mapa{width: 100%; float: none; min-width: 500px; max-width: 100% }
 .info_mapa{float: none; clear: both; width: 100%}
 
}


@media only screen and (max-width: 750px) {

.marcas {width: 40%; height: 200px; margin: 5%}
.topicos {width: 96%}
.div50{width: 100%}
.ico{max-width: 120px;  padding: 2%}
.div50 p{padding: 10px}
.conteudo .principal{width: 100%; float: right; margin-left: 20px; margin-top: 20px}

.conteiner_rodape{text-align: center; clear: both}


.icone{max-width: 30px}
.subtitulo{width: 84%; margin-bottom: 20px}
.conteudo h3{font-size: 24px}
.conteudo p{ padding-left: 47px}

h3.tab{padding-left: 45px}

.div_mapa{width: 100%; float: none; min-width: 350px; max-width: 90% }
 div.scroll{ max-height: 100%; }
 td:nth-child(4) {display: none }
 

}


@media only screen and (max-width: 450px) {


.marcas {width: 64%; height: 200px; margin: 18%; margin-top: 9%; margin-bottom: 9%}
.icone_rodape{ width: 55px; margin: 6px;}
table{border-collapse: collapse; border: 2px solid #BFBFBF; width: 100%; font: 12px/18px Dubai; }

}