* {
  margin: 0;
  font-family: "ocr-aregular";
}

@font-face {
  font-family: "ocr-aregular";
  src: url("font/ocr-aregular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
 
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


body {
  
  overflow-x: hidden;
  
  background-color: #000000;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */


}
body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.about-bar::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}


  /* about*/



  .title {
    color: rgb(255, 255, 255);
    margin: 0%;
    width:29.8%;
    left:9.08%;
    display: block;
    text-align: left;
    position: fixed;
    display: block;
    padding: 0.4% 1% 0.5% 1%;
    border: 1px solid rgb(255, 255, 255);
    background-color: #00000091;
    z-index: 100;
    font-size: 1.3vw;
    transition: 0.2s ease-in;
  
  }

  .title:hover{

color: #ffffff;
font-style: italic;
border-bottom:5px solid white;
cursor: pointer;
transition: 0.2s ease-in;
animation: changeBg 0.5s infinite;
background: url(R1.jpeg);

}



span.typing1{  font-style: italic;}
  

b.arrow{display: none;}

.title:hover b.arrow{ display: inline-block; font-size: 2vw; }


  .about-bar {
    position: fixed;
    top: 0%;
    left: 0px;
    height: 100%;
    width: 0px;
    z-index: 9;
    padding-top: 100px;

    transition: 1s cubic-bezier(0, 0, 0.17, 0.84);
    background-color: rgba(0, 0, 0, 0.904);

  }


  .title-about{
    color: rgb(136, 136, 136);
    font-size: 1.3vw;
    margin-left: 12.5%;
    overflow-y: hidden;
    margin-top: 5%;
  }

.menu{
  display: inline-block;
}

.menucontainer{
  top: 5%;
  left: 5%;
  position: fixed;
  z-index: 999;


}


.top{
  position: fixed;
  border-bottom: 1px solid white;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 0%;
  z-index: 99;
}
.toparquivo{
  position: fixed;
    border-top: 1px solid white;
    background-color: #000000a6;
    filter: blur(10px);
    width: 90%;
    height: 25%;
    left: 5%;
    top: -5%;
    z-index: 89;
}
.left{
  position: fixed;
  border-right: 1px solid white;
  width: 5%;
  height: 90%;
  top: 5%;
  z-index: 999;
  left: 0%;
}



.bottomarquivo{
  position: fixed;
  border-top: 1px solid white;
  width: 90%;
  height: 5%;
  left: 5%;
  background-color: #000000d1;
  bottom: 0%;
  z-index: 89;
}

.bottom{
  position: fixed;
  border-top: 1px solid white;
  width: 90%;
  height: 5%;
  left: 5%;
  background-color: rgba(0, 0, 0, 0);
  bottom: 0%;
  z-index: 999;
}


.right{
  position: fixed;
  border-right: 1px solid white;
  right: 5%;
  height: 90%;
  top: 5%;
  z-index: 999;

}


/* blur layer index  */
.top2{
  position: fixed;
  background-color: #00000091;
 
  width: 100%;
  height: 5%;
  left: 0%; 
  top: 0%;
  z-index: 9;
}


.left2{
  position: fixed;
  background-color: #00000091;

  width: 5%;
  height: 90%;
  top: 5%;
  z-index: 9;
}


.bottom2{
  position: fixed;
  background-color: #00000091;
  width: 100%;
  height: 5%;
  left: 0%;
  bottom: 0%;
  z-index: 9;
}


.right2{
  position: fixed;
  background-color: #00000091;
top: 5%;
  right: 0%;
  width: 5%;
  height: 90%;
 
  z-index: 999;

}


.legenda1{
  position: fixed;
  bottom: 5%;
  left: 15%;
  width: 70%;
  display: flex;
  flex-direction: row;
  z-index: -1;
  /* border: 1px solid white; */
  /* background-color: #000000; */
  text-align: center;
 
}

.legendatexto{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  display: flex;
  width: 50%;
  font-size: 0.7vw;
  flex-direction: row;
  z-index: 80;
  border: 1px solid white;
  background-color: #00000083;
  color: white;
  text-align: center;
}
.legendatexto p{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  /* margin: 0; */
  padding: 1%;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  z-index: 80;
  /* border: 1px solid white; */
  /* background-color: #00000083; */
  color: white;
  text-align: center;

}


.headerarquivo{
   top: 0px;
position: fixed;
width: 100%;
z-index: 10;

height: 10vw;
}

.background{
  top: 0px;
position: fixed;
width: 100%;
z-index: 10;
background-color: #000000ab;
height: 10vw;
filter: blur(5px);
}


.mapa{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  left: 40.88%;
  position: fixed;
  background-color: #00000091;
  z-index: 100;
  font-size: 1.3vw;
  transition: 0.2s ease-in;
    width: auto;
    border: 1px solid white;
    text-decoration: none;
    
}

.mapa:hover{
  color: rgb(0, 0, 0);
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
}

.mapa-ativo{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  left: 40.88%;
  position: fixed;
  background-color: #00000091;
  z-index: 100;
  font-size: 1.3vw;
  transition: 0.2s ease-in;
    width: auto;
    border: 1px solid white;
    border-bottom: 5px solid white;
    text-decoration: none;
  
}

.mapa-ativo:hover{
  color: rgb(0, 0, 0);
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
}




.arquivo{

  padding: 0.4% 1% 0.5% 1%;
align-items: center;
  position: fixed;
  z-index: 100;
  font-size: 1.3vw;
 border: 1px solid white;
  text-decoration: none;
  text-align: center;
 width: 6%;
 left:46%;
 margin: 0%;
 transition: 0.2s ease-in; 
 background-color: #00000091;
 
}
.arquivo:hover{

  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
}

.arquivo-ativo{

  padding: 0.4% 1% 0.5% 1%;
align-items: center;
  position: fixed;
  z-index: 100;
  font-size: 1.3vw;
 border: 1px solid white;
  text-decoration: none;
  text-align: center;
  width: 6%;
 left:46%;
 margin: 0%;
 transition: 0.2s ease-in;  
 border-bottom: 5px solid white;
 animation: changeBg 0.5s infinite;
 background: url(R1.jpeg);
}
.arquivo-ativo:hover{
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  background: transparent ;
  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
 
}



.rede{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  right: 40.8%;
  position: fixed;
  z-index: 100;
  font-size: 1.3vw;
  width:auto;
  background-color: #00000091;
      width: auto;
      border: 1px solid white;
      text-decoration: none;
      transition: 0.2s ease-in;
     
}
.rede:hover{

  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
 
}

.rede-ativo{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  right: 40.8%;
  position: fixed;
  z-index: 100;
  font-size: 1.3vw;
  width:auto;
  background-color: #00000091;
      border: 1px solid white;
      text-decoration: none;
      transition: 0.2s ease-in;
      border-bottom: 10px solid white;
    
}
.rede-ativo:hover{
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  border-bottom: 5px solid white;
  transition: 0.2s ease-in;
 
}

.blank{
 
  margin: 0%;
  padding: 0.45% 0.9%;
  right: 7.9%;
  position: fixed;
  z-index: 100;
  font-size: 1.3vw;
  width: 31.1%;
  color: #ffffff00;
  background-color: #00000091;
      border: 1px solid white;
      text-decoration: none;
}

.blank2{
 
  margin-top: 0%;
  /* padding: 0.5% 1% 0.5% 1%; */
  left: 5%;
  /* margin-top: 6.48%; */
  position: fixed;
  z-index: 6;
  height: 88%;
  font-size: 1.3vw;
  width: 20%;
  color: #ffffff00;
  background-color: #00000091;
  border: 1px solid white;
  text-decoration: none;
}

.addmore{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  right: 5%;
  position: fixed;

  z-index: 100;
  font-size: 1.3vw;
  color: #000000;
  background-color: #00000091;
  transition: 0.2s ease-in;
    width: auto;
    border: 1px solid white;
    text-decoration: none;
  
  
}
.addmore:hover{
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  border-bottom: 5px solid white;
  font-style: none !important;
  transition: 0.2s ease-in;
}

.addmore-ativo{
 
  margin: 0%;
  padding: 0.4% 1% 0.5% 1%;
  right: 5%;
  position: fixed;

  z-index: 100;
  font-size: 1.3vw;
  color: #000000;
  background-color: #00000091;
  transition: 0.2s ease-in;
    width: auto;
    border: 1px solid white;
    text-decoration: none;
    border-bottom:5px solid white;
  
}
.addmore-ativo:hover{
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  border-bottom: 10px solid white;
  font-style: none !important;
  transition: 0.2s ease-in;
}


.noise{
 
  margin: 0%;
  margin: 2.5% 0% 0%;
  left: 5%;
  position: fixed;
  z-index: 50;
  font-size: 1.8vw;
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  transition: 0.2s ease-in;
  width: 90%;
  height: 2.5vw;
  border-bottom: 1px solid white;
  text-decoration: none;
 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.noise2{
 
  margin: 0%;
  margin: 3.5% 0% 0%;
  left: 5%;
  position: fixed;
  z-index: 50;
  font-size: 1.8vw;
  background: url(R1.jpeg);
  animation: changeBg 0.5s infinite;
  transition: 0.2s ease-in;
  width: 90%;
  height: 2.5vw;
  border: 1px solid white;
  text-decoration: none;
 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}



@keyframes changeBg{
 50%  {background: url(R.jpeg);}
}

.aviso{
 
  bottom: 5%;
  left: 5%;
  position: fixed;
  padding: 0.5% 0 0.5% 0;
  color: white;
  z-index: 19;
  font-size: 1vw;
  transition: 0.2s ease-in;
  width: 90%;
  border: 1px solid white;
  text-decoration: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #000000;
}

.introduction{
  position: fixed;
  width: 60%;
  text-align: center;
  top: 45%;
  left: 30%;
  margin-right: auto;
  margin-left: auto;
  color: white;
  font-size: 1.5vw;
}



  .texto{
width: 75%;

  margin-left: auto;
  margin-right: auto;
  display: flex;
 flex-wrap: nowrap;
 justify-content: center;
 align-content: stretch;
 padding-top: 2%;
 height: 55%;
  
  }

  

  .about{ 
    position: relative;
    color: white;
    font-size:1.1vw;
    width: 90%;
    overflow-y: scroll;
    padding-right: 2%;
    
  }
  
  .names {
    padding-left: 10%;
  position: relative;
  width: 20%;
  color: rgb(255, 255, 255);
  font-size: 0.95vw;
  display: block;
  overflow-y: hidden;
  }
 
.mapafilter_container{
  

  color: rgb(255, 255, 255);
  left: 15vw;
  padding: 1%;
  display: block;
  text-align: left;
  position: fixed;
  z-index: 70;
  transition: 0.2s ease-in;

}


.mapafilterbtn{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
p.radiofilter{
  MARGIN-TOP: 0.15vw;
  width: 0.6vw;
  height: 0.6vw;
  color: white;
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 50%;
}

.filtrohover:hover{
  background: rgb(255, 255, 255);
}

p.radiofilter2{

  width: 70%;
  position: relative;
  top: 0px;
  left: 5px;
  padding: 1%;
  font-size: 0.8vw;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0);
}



.radiofiltercontainer{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 3.5px;
  font-size: 15px;
  list-style: none;
}

.radiofiltercontainer.active p.radiofilter{
  background: rgb(255, 255, 255);

}



  ul.radio{
    list-style: none;
    padding: 1%;
  }
  

  
  .CloseBTNlexicon1{
    position: sticky;
    top: 14%;
    color: white;
    float: right;
    right: 22.5%;
    margin-top: -10%;
    font-size: 5vw;
  z-index: 2000;
  cursor:pointer;
  
  }



.CloseBTNlexicon1:hover{

  font-size: 5vw;


}



   /* a LINKS */

   
 
   a.mapa:link, .mapa-ativo:link, a.arquivo:link, a.arquivo-ativo:link, a.rede:link, a.rede-ativo:link, a.addmore:link, a.addmore-ativo:link, a.blank:link   {
    color: rgb(255, 255, 255);
    text-decoration: none;
    }
   
      
    a.mapa:visited, .mapa-ativo:visited, a.arquivo:visited, a.arquivo-ativo:visited, a.rede:visited, a.rede-ativo:visited, a.title:visited, a.addmore:visited, a.addmore-ativo:visited, a.blank:visited, a.redebtn:visited {
      color: rgba(255, 255, 255, 0.5);
    background-color: transparent;
    text-decoration: none;
    }
    
    a.mapa:hover, .mapa-ativo:hover,a.arquivo:hover, a.arquivo-ativo:hover, a.rede:hover, a.rede-ativo:hover, a.addmore:hover, a.redebtn:hover, a.addmore-ativo:hover {
      color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
   
  
  
    }
    
    a.mapa:active,a.arquivo:active, a.rede:active, a.title:active, a.addmore:active, a.redebtn:active {
      color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    }
    


  
a.ppitags{
  color: rgb(192, 192, 192);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0);
  
}

a.ppitags:hover{
  color:#ffffff;
  border: 1px solid white;
  border-radius: 10px;
  font-style: italic;
}

a.redebtn:link  {
  color: rgba(255, 255, 255, 0.432);
  background-color: transparent;
  text-decoration: none;
  }

.active  {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    }


  a.mapafilterbtn:active{
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
  } 


 a.mapafilterbtn:link{
  color: rgb(255, 255, 255);
    text-decoration: none;
 }

 a.mapafilterbtn:visited{
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: none;
 }



 .mapafilter_legend{
  margin-top: 55vh;
  color: rgb(255, 255, 255);
  right: 22vw;
  display: block;
  text-align: left;
  position: fixed;
  z-index: 70;
  transition: 0.2s ease-in;
}


.mapafilterlegend{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

p.radiofilterfreguesia{

  width: 2vh;
  height: 0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgba(255, 255, 255, 0.404); 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}



p.radiofilterfreguesia0{

  width: 2vw;
  height:0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #85ff85; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia100{

  width: 2vw;
  height: 0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #5cff5c; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia200{

  width: 2vw;
  height:0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #00e000; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia300{

  width: 2vw;
  height: 0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #008f00; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}


p.radiofilterfreguesia300plus{

  width: 2vw;
  height:0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #003d00; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterponto{

  
  height: 0.1vw;
  margin-top: 10%;
  margin-left: 20%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  background-color: rgb(0, 0, 0);
 
  /* flex: 1 0 auto; */
  border-radius: 50%;
}
p.radiofilterponto2{


  height: 0.1vw;
  margin-top: 7%;
  margin-left: 9%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  background-color: rgb(255, 255, 255);
 
  /* flex: 1 0 auto; */
  border-radius: 50%;
}
p.radiofilterfreguesia{

  width: 2vh;
  height:0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgba(255, 255, 255, 0.404); 
  border: 1px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesiablack{
  width: 11vh;
  height: 0.8vw;
  margin-left: 0%;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgb(0, 0, 0); 
  border: 1px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}



p.radiofilterstreetart{

  height: 0.1vw;
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  background-color: rgb(0, 255, 21);
  /* flex: 1 0 auto; */
  border-radius: 50%;
}

p.radiofilterartepublica{

  height: 0.1vw;
  margin-top: 8%;
  margin-left: 8%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  
  /* flex: 1 0 auto; */
  border-radius: 50%;
}


.radiofilterlegend{
  display: flex;
  flex-wrap: nowrap;
  width: 40%;
  font-size: 15px;
  list-style: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}





.imagepopup {
  width:50%;
  height: 50%;
  align-content: center;
  padding: 0%;
  border: 0px solid rgb(255, 255, 255);
  cursor: pointer;

}



 @media only screen and (max-width: 550px) {
 
  .mapafilter_container{
    margin-top: 70vh!important;
    color: rgb(255, 255, 255);
    left:55vw;
    right: 0;
    display: block;
    text-align: left;
    position: fixed;
    z-index: 70;
    transition: 0.2s ease-in;
  }

  p.radiofilter2{

    width: 60%;
    position: relative;
    top: 0px;
    padding-left: 5px;
    font-size: 2.5vw;
    white-space: nowrap;
  }
  .radiofiltercontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0px;
    font-size: 15px;
    list-style: none;
}
  

  .container {
  
    margin-top: 10vh;
  
    
  
  }
  button.freguesiatag {
    height: 7vh;
    font-size: 2.5vw !important;
    line-height: 3vw;
    white-space: inherit !important;
  }
  
  .blank2 {
    height: 89.6vh;
  }
  .toparquivo {
    height: 14%;
  
  }
  .filterDiv {
    margin: 2%;
    width: 40%;
  
  }
  .shuffle-button {
    font-size: 3vw;
    margin-top: 12vh;
   
  }
  .ppicontainer {
    margin: 15% 5%;
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    border: 1px solid white;
  }
.toparquivo {
  position: fixed;
  border-top: 1px solid white;
  background-color: #000000a6;
  filter: blur(10px);
  width: 90%;
  height: 15%;
  left: 5%;
  top: -5%;
  z-index: 89;
}
.tagbtn {
  font-size: 1.6vw;
  text-decoration: none;

}
.blank {
 display: none;
}
.title {
  color: rgb(255, 255, 255);
  margin: 0%;
  width: 73.5%;
  left: 13%;
  display: block;
  text-align: center;
  position: fixed;
  display: block;
  padding: 0.4% 1% 0.5% 1%;
  border: 1px solid rgb(255, 255, 255);
  background-color: #00000091;
  z-index: 100;
  font-size: 3vw;
  transition: 0.2s ease-in;
}
.addmore {
  padding: 0.4% 2% 0.5% 2%;
  font-size: 3vw;

}
.addmore-ativo {
  padding: 0.4% 2% 0.5% 2%;
  font-size: 3vw;

}

.noise {
 display: none;
}
.aviso{
  font-size: 3vw;
}
.mapa {
  left: 35.5%;
  margin-top: 5.2%;
   font-size: 3vw;
 
 }
 .mapa-ativo {
  left: 35.5%;
  margin-top: 5.2%;
   font-size: 3vw;
 
 }
.arquivo-ativo{
  width: auto;
  left: 45%;
  margin-top: 5.2%;
  font-size: 3vw;
  border-bottom: 5px solid white;

}
.arquivo{
  width: auto;
  left: 45%;
  margin-top: 5.2%;
  font-size: 3vw;

}
.rede {
  right: 31.5%;
  margin-top: 5.2%;
   font-size: 3vw;
 
 }
 .rede-ativo {
  right: 31.5%;
  margin-top: 5.2%;
   font-size: 3vw;
 
 }
 .title-about {
  color: rgb(136, 136, 136);
  font-size: 3vw;
  margin-left: 12.5%;

}
 .texto {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: flex
;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  padding-top: 2%;
  height: 60dvh;
  flex-direction: column;
  gap: 5%;
}
.about {
  position: relative;
  color: white;
  font-size: 3.1vw;
  width: 100%;
  overflow-y: scroll;
  padding-right: 0%;
}
.names {
  padding-left: 0%;
  position: relative;
  width: 100%;
  color: rgb(255, 255, 255);
  font-size: 3vw;
  display: block;
  overflow-y: scroll;
}
.CloseBTNlexicon1 {
  position: sticky;
  top: 9%;
  color: white;
  float: right;
  right: 11.5%;
  margin-top: -10%;
  font-size: 10vw;
  z-index: 2000;
  cursor: pointer;
}
.CloseBTNlexicon1:hover{

  font-size: 10vw;


}
.legenda1{
  position: fixed;
  bottom: 5%;
  left: 5%;
  width: 90%;
  display: flex;
  flex-direction: row;
  z-index: -1;
  /* border: 1px solid white; */
  /* background-color: #000000; */
  text-align: center;
 
}

.legendatexto{

  width: 100%;
  font-size: 2vw;
  flex-direction: row;
  z-index: 80;
  border: 1px solid white;
  background-color: #00000083;
  color: white;
  text-align: center;
}

}