*{
  margin: 0;
  padding: 0;
}

    path {
      transition: .6s fill;
      fill: #D3D3D3;
      width: 100vh; height: auto;
    }


    .dropdownsmapa{
      margin-top: 15em;
      margin-left: 3em;
    }
    .dropdownsmapa > div > button:hover{
      background-color: rgba(114, 114, 114, 0.801);
      border: 1px solid gray;
    }
    .dropdownsmapa > div > div > div:hover{
      background-color: rgba(114, 114, 114, 0.801);
      border: 1px solid gray;
    }
    .dropdownsmapa div{
      margin-top: .5em;
      margin-bottom: .5em;
    }
    .dropdownses {
      display: none;
    }
    .dropdownses2 {
      display: none;
    }
    .dropdownses3 {
      display: none;
    }
    .dropdownses4 {
      display: none;
    }
    .dropdownses5 {
      display: none;
    }

    .dropdown1{
      width: 100px;
      height: 25px;
      background-color: rgb(4, 103, 150);
      margin: 0 auto;
      text-align: center;
      border-radius: 0.5em;
    }
    .dropdown1 a{
      margin: 0 auto;
      text-decoration: none;
      color: white;
      font-size: 17px;
      text-align: center;
    }
    .dropdown2{
      width: 100px;
      height: 25px;
      background-color: rgb(67, 136, 71);
      margin: 0 auto;
      text-align: center;
      border-radius: 0.5em;
    }
    .dropdown2 a{
      margin: 0 auto;
      text-decoration: none;
      color: white;
      font-size: 17px;
      text-align: center;
    }
    .dropdown3{
      width: 100px;
      height: 25px;
      background-color: rgb(187, 68, 211);
      margin: 0 auto;
      text-align: center;
      border-radius: 0.5em;
    }
    .dropdown3 a{
      margin: 0 auto;
      text-decoration: none;
      color: white;
      font-size: 17px;
      text-align: center;
    }
    .dropdown4{
      width: 100px;
      height: 25px;
      background-color: rgb(211, 68, 99);
      margin: 0 auto;
      text-align: center;
      border-radius: 0.5em;
    }
    .dropdown4 a{
      margin: 0 auto;
      text-decoration: none;
      color: white;
      font-size: 17px;
      text-align: center;
    }
    .dropdown5{
      width: 100px;
      height: 25px;
      background-color: rgb(174, 238, 101);
      margin: 0 auto;
      text-align: center;
      border-radius: 0.5em;
    }
    .dropdown5 a{
      margin: 0 auto;
      text-decoration: none;
      color: white;
      font-size: 17px;
      text-align: center;
    }

    .dropdownbutton1 > button{
      color: white;
      width: 168.7px;
      height: 40px;
      font-size: 12px;
      border-radius: .5em;
      background-color: rgb(4, 103, 150);
      border: 1px
    }

    .dropdownbutton2 > button{
      color: white;
      width: 168.7px;
      height: 40px;
      font-size: 12px;
      border-radius: .5em;
      background-color: rgb(67, 136, 71);
      border: 1px
    }

    .dropdownbutton3 > button{
      color: white;
      width: 168.7px;
      height: 40px;
      font-size: 12px;
      border-radius: .5em;
      background-color: rgb(187, 68, 211);
      border: 1px
    }

    .dropdownbutton4 > button{
      color: white;
      width: 168.7px;
      height: 40px;
      font-size: 12px;
      border-radius: .5em;
      background-color: rgb(211, 68, 99);
      border: 1px
    }
    
    .dropdownbutton5 > button{
      color: white;
      width: 168.7px;
      height: 40px;
      font-size: 12px;
      border-radius: .5em;
      background-color: rgb(174, 238, 101);
      border: 1px
    }

     #rn {
         transition: .6s fill;
       fill: #438847;
     }
     #rn:hover {
         fill: #bd9b34;
       }
     
       #pb {
         transition: .6s fill;
       fill: #438847;
     }
     #pb:hover {
         fill: #bd9b34;
       }
     
     #pe {
         transition: .6s fill;
       fill: #438847;
     }
     #pe:hover {
         fill: #bd9b34;
       }
     
     #ma {
         transition: .6s fill;
       fill: #438847;
     }
     #ma:hover {
         fill: #bd9b34;
       }
     
     #ce {
         transition: .6s fill;
       fill: #438847;
     }
     #ce:hover {
         fill: #bd9b34;
       }
     
     #pi {
         transition: .6s fill;
       fill: #438847;
     }
     #pi:hover {
         fill: #bd9b34;
       }
     
     #ba {
         transition: .6s fill;
       fill: #438847;
     }
     #ba:hover {
         fill: #bd9b34;
       }
     
       #se {
         transition: .6s fill;
       fill: #438847;
     }
     #se:hover {
         fill: #bd9b34;
       }

       #al {
         transition: .6s fill;
       fill: #438847;
     }
     #al:hover {
         fill: #bd9b34;
       }

     #ap {
         transition: .6s fill;
       fill: #046796;
     }
     #ap:hover {
         fill: #bd9b34;
       }
       #am {
         transition: .6s fill;
       fill: #046796;
     }
     #am:hover {
         fill: #bd9b34;
       }
       #pa {
         transition: .6s fill;
       fill: #046796;
     }
     #pa:hover {
         fill: #bd9b34;
       }
       #ac {
         transition: .6s fill;
       fill: #046796;
     }
     #ac:hover {
         fill: #bd9b34;
       }
       #to {
         transition: .6s fill;
       fill: #046796;
     }
     #to:hover {
         fill: #bd9b34;
       }
       #rr {
         transition: .6s fill;
       fill: #046796;
     }
     #rr:hover {
         fill: #bd9b34;
       }
       #ro {
         transition: .6s fill;
       fill: #046796;
     }
     #ro:hover {
         fill: #bd9b34;
       }

     #mt {
         transition: .6s fill;
       fill: #bb44d3;
     }
     #mt:hover {
         fill: #bd9b34;
       }
       #ms {
         transition: .6s fill;
       fill: #bb44d3;
     }
     #ms:hover {
         fill: #bd9b34;
       }
       #go {
         transition: .6s fill;
       fill: #bb44d3;
     }
     #go:hover {
         fill: #bd9b34;
       }
       
       #mg {
         transition: .6s fill;
       fill: #d34463;
     }
     #mg:hover {
         fill: #bd9b34;
       }
       #sp {
         transition: .6s fill;
       fill: #d34463;
     }
     #sp:hover {
         fill: #bd9b34;
       }
       #es {
         transition: .6s fill;
       fill: #d34463;
     }
     #es:hover {
         fill: #bd9b34;
       }
       #rj {
         transition: .6s fill;
       fill: #d34463;
     }
     #rj:hover {
         fill: #bd9b34;
       }
       #rs {
         transition: .6s fill;
       fill: #aeee65;
     }
     #rs:hover {
         fill: #bd9b34;
       }
       #pr {
         transition: .6s fill;
       fill: #aeee65;
     }
     #pr:hover {
         fill: #bd9b34;
       }
       #sc {
         transition: .6s fill;
       fill: #aeee65;
     }
     #sc:hover {
         fill: #bd9b34;
       }


       /* MAPAS TRTS */

       .dropdownbutton1trts > button{
        color: white;
        width: 168.7px;
        height: 40px;
        font-size: 12px;
        border-radius: .5em;
        background-color: #14530f;
        border: 1px
      }
  
      .dropdownbutton2trts > button{
        color: white;
        width: 168.7px;
        height: 40px;
        font-size: 12px;
        border-radius: .5em;
        background-color: #bd5b34;
        border: 1px
      }
  
      .dropdownbutton3trts > button{
        color: white;
        width: 168.7px;
        height: 40px;
        font-size: 12px;
        border-radius: .5em;
        background-color: #ecb650;
        border: 1px
      }
  
      .dropdownbutton4trts > button{
        color: white;
        width: 168.7px;
        height: 40px;
        font-size: 12px;
        border-radius: .5em;
        background-color: #1abea8;
        border: 1px
      }
      
      .dropdownbutton5trts > button{
        color: white;
        width: 168.7px;
        height: 40px;
        font-size: 12px;
        border-radius: .5em;
        background-color: #3436bd;
        border: 1px
      }


       .dropdown1trts{
        width: 170px;
        height: 25px;
        background-color: #14530f;
        margin: 0 auto;
        text-align: center;
        border-radius: 0.5em;
      }
      .dropdown1trts a{
        margin: 0 auto;
        text-decoration: none;
        color: white;
        font-size: 17px;
        text-align: center;
      }
      .dropdown2trts{
        width: 170px;
        height: 25px;
        background-color: #bd5b34;
        margin: 0 auto;
        text-align: center;
        border-radius: 0.5em;
      }
      .dropdown2trts a{
        margin: 0 auto;
        text-decoration: none;
        color: white;
        font-size: 17px;
        text-align: center;
      }
      .dropdown3trts{
        width: 170px;
        height: 25px;
        background-color: #ecb650;
        margin: 0 auto;
        text-align: center;
        border-radius: 0.5em;
      }
      .dropdown3trts a{
        margin: 0 auto;
        text-decoration: none;
        color: white;
        font-size: 17px;
        text-align: center;
      }
      .dropdown4trts{
        width: 170px;
        height: 25px;
        background-color: #1abea8;
        margin: 0 auto;
        text-align: center;
        border-radius: 0.5em;
      }
      .dropdown4trts a{
        margin: 0 auto;
        text-decoration: none;
        color: white;
        font-size: 17px;
        text-align: center;
      }
      .dropdown5trts{
        width: 170px;
        height: 25px;
        background-color: #3436bd;
        margin: 0 auto;
        text-align: center;
        border-radius: 0.5em;
      }
      .dropdown5trts a{
        margin: 0 auto;
        text-decoration: none;
        color: white;
        font-size: 17px;
        text-align: center;
      }

     #decimaprimeiraregiao{
      fill: #14530f;
     }
     #decimaprimeiraregiao:hover{
         fill: #bd9b34;
       }
       
     #oitavaregiao{
         fill: #14530f;
     }
     #oitavaregiao:hover{
         fill: #bd9b34;
     }

     #decimaquartaregiao{
      fill: #14530f;
     }
     #decimaquartaregiao:hover{
      fill: #bd9b34;
     }

     #decimaregiao{
      fill: #14530f;
     }
     #decimaregiao:hover{
      fill: #bd9b34;
     }

     #trtpb{
         fill: #bd5b34;
     }
     #trtpb:hover{
         fill: #bd9b34;
     }

     #trtrn{
         fill: #bd5b34;
     }
     #trtrn:hover{
         fill: #bd9b34;
     }
     
     #trtpe {
         fill: #bd5b34;
       }
     #trtpe:hover {
         fill: #bd9b34;
       }

     #trtma {
         fill: #bd5b34;
       }
     #trtma:hover {
         fill: #bd9b34;
       }

     #trtce {
         fill: #bd5b34;
       }
     #trtce:hover {
         fill: #bd9b34;
       }

     #trtpi {
         fill: #bd5b34;
     }
     #trtpi:hover {
         fill: #bd9b34;
     }
     
     #trtba {
         fill: #bd5b34;
       }
     #trtba:hover {
         fill: #bd9b34;
       }

     #trtse {
         fill: #bd5b34;
       }
     #trtse:hover {
         fill: #bd9b34;
       }

     #trtal {
         fill: #bd5b34;
       }
     #trtal:hover {
         fill: #bd9b34;
       }

     #trtap:hover {
         fill: #bd9b34;
       }

     #trtam:hover {
         fill: #bd9b34;
       }

     #trtpa:hover {
         fill: #bd9b34;
       }

     #trtrr:hover {
         fill: #bd9b34;
       }
     #trtmt{
         fill: #ecb650;
       }
     #trtmt:hover {
         fill: #bd9b34;
       }

     #trtms{
         fill: #ecb650;
       }
     #trtms:hover {
         fill: #bd9b34;
       }

     #trtmg {
         fill: #1abea8;
     }
     #trtmg:hover {
         fill: #bd9b34;
     }

     #trtsp {
         fill: #1abea8;
       }
     #trtsp:hover {
         fill: #bd9b34;
       }

     #trtes {
         fill: #1abea8;
       }
     #trtes:hover {
         fill: #bd9b34;
       }

     #trtrj {
         fill: #1abea8;
     }
     #trtrj:hover {
         fill: #bd9b34;
     }

     #trtrs {
         fill: #3436bd;
       }
     #trtrs:hover {
         fill: #bd9b34;
       }
       
     #trtpr {
         fill: #3436bd;
       }
     #trtpr:hover {
         fill: #bd9b34;
       }

     #trtsc {
         fill: #3436bd;
       }
     #trtsc:hover {
         fill: #bd9b34;
       }

    /* MAPAS TRFS */

    .trfsul{
      margin-top: 15em;
      margin-left: 3em;
    }
    .trfsul{
      list-style-type: none;
    }
    .trfsul li{
      width: 100px;
      height: 35px;
      font-size: 20px;
      border-radius: .5em;
      border: 1px;
      margin: 1em;
    }
    .trfsul li a{
      color: white;
      text-decoration: none;
    }
    .trfsul li:nth-child(1){
      background-color: #2285c7;
    }
    .trfsul li:nth-child(2){
      background-color: #b3b1ff;
    }
    .trfsul li:nth-child(3){
      background-color: #72da77;
    }
    .trfsul li:nth-child(4){
      background-color: #a851c2;
    }
    .trfsul li:nth-child(5){
      background-color: #ffad14;
    }
    .trfsul li:hover{
      background-color: #bd9b34;
    }

     #trf1{
      fill: #2285c7;
   }
     #trf1:hover{
      fill: #bd9b34;
   }
   #trf2{
    fill: #b3b1ff;
   }
   #trf2:hover{
    fill: #bd9b34;
   }
   #trf3{
    fill: #72da77;
   }
   #trf3:hover{
    fill: #bd9b34;
   }
   #trf4{
    fill: #a851c2;
   }
   #trf4:hover{
    fill: #bd9b34;
   }
   #trf5{
    fill: #ffad14;
   }
   #trf5:hover{
    fill: #bd9b34;
   }

/* SVG */

svg{
  max-width: 600px;
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 60%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
iframe{      
  display: block; /* iframes are inline by default */   
  height: 50vh;  /* Set height to 100% of the viewport height */      
  border: none; /* Remove default border */
  max-width: 300px /*background: rgb(243, 211, 141); /* Just for styling */
}
.btn-group button {
  background-color: #e1d1a3; /* Green background */
  border: none ; /* Green border */
  color: #061223; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
}
.btn-group a{
  text-decoration: none;
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #bd9b34;
}



h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

footer p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}


/* Parte de Rafael */

body{
  line-height: 1;
}

main{
  margin: 0 auto;
  text-align: center;
  padding: 1em;
  background-color: #E3E5E8;
}

.cards{
  display: flex;
  margin-top: 3em;
}

.card{
  margin: 0 auto;
}

.clientesmain{
  background-color: #061223;
  padding: 10em;
}

.videosmain{
  padding: 10em;
}

.clientes ol{
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
}

.clientes ol li a{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: white;
}

/*

.conteudos .pesquisa form{
  display: flex;
  align-items: center;
}

.conteudos .pesquisa form #Pesquisar{ 
  padding: 1em;
  border: none;
  background: #D9D9D9;
  color: #A1A1A1;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  margin-left: 0.5em;
  width: 20em;
}

.conteudos .pesquisa form #Pesquisar:focus{
  outline: 0;
  box-shadow: 0 0 0 0;
}

*/

.categorias{
  text-align: center;
}

footer{
  background-color: black;
  padding: 1em;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer ol{
  list-style-type: none;
  display: flex;
}

footer ol li a{
  margin: 0.5em;
}