body {
  background-color: #e8cbab;
  margin: 0;
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.link-none{
  text-decoration: none !important;
}
.primary {
  background-color: #e44403;
}
.secondary {
  background-color: #221c35;
}
.p130 {
  background-color: #5c3c47;
  color: white;
}
.p219 {
  background-color: #df1683;
}
.p638 {
  background-color: #00acd8;
}
.p390 {
  background-color: #b4bd00;
}
.p417 {
  background-color: #bb6125;
}
.p406 {
  background-color: #c5bbb6;
}

.main-container {
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.first-col {
  width: 15%;
  padding: 5px;
}

.content-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
}

.content-list:hover {
  border-radius: 5px;
  box-shadow: 0px 0px 1px 1px rgba(61, 61, 61, 0.174);
}

.second-col {
  width: 70%;
  padding-top: 33px;
}
.third-col {
  width: 15%;
}
.main-map {
  display: block;
  max-width: 100%;
  border: none;
  width: 100%;
  height: 100%;
}


.logo-barrio {
  justify-content: start;
  position: absolute;
  left: 46%;
  top: 8%;
  width: 180px;
}

.logo-barrios-comerciales{
 justify-content: start;
  position: absolute;
  left: 32%;
  top: 52%;
  width: 160px;
} 

.logo-caretas{
  justify-content: start;
  position: absolute;
  left: 54%;
  top: 41%;
  width: 50px;
}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

.link-instagram{
    justify-content: flex-end;
    align-items: center;
    display: flex;
    flex-direction: row;
    padding-top: 0px;
    padding-bottom: 18px;
    padding-right: 30px;
}


.logo-instagram{
  width: 35px;
  margin-top: 4px;
  margin-bottom: 2px;
}

.text-instagram{
  padding: 5px;
  border-radius: 5px;
  color: #5c3c47;
  font-size: 16px;
}

/* NUMBERS */
.number {
  align-items: center;
  text-align: center;
  font-size: 16px;
  padding: 2px 8px 2px 4px;
  border-radius: 100%;
  cursor: pointer;
  text-decoration: none;
}
.number-2 {
  align-items: center;
  text-align: center;
  font-size: 16px;
  padding: 2px 4px 2px 4px;
  border-radius: 100%;
  text-decoration: none;
}
.map-number {
  align-items: center;
  text-align: center;
  font-size: 14px;
  padding: 5px 9px 4px 6px;
  border-radius: 100%;
  position: absolute;
}
.map-number-2 {
  align-items: center;
  text-align: center;
  font-size: 14px;
  padding: 5px 6px 4px 3px;
  border-radius: 100%;
  position: absolute;
}
.map-number:hover {
  cursor: pointer;
  font-size: 18px;
  padding: 5px 9px 4px 6px;
  transition-duration: 450ms;
  background-position: center;
  animation: pulse 2s ease 0s infinite;
  border-radius: 23px;
  box-shadow: 0px 0px 5px 5px rgba(50, 50, 50, 0.174);
}

.map-number-2:hover {
  cursor: pointer;
  font-size: 18px;
  padding: 5px 9px 4px 6px;
  transition-duration: 450ms;
  background-position: center;
  animation: pulse 2s ease 0s infinite;
  border-radius: 23px;
  box-shadow: 0px 0px 5px 5px rgba(50, 50, 50, 0.174);
}

/* POPUP CSS */
.popup {
/*   display: none; */
  text-align: left;
  border-radius: 3%;
  color: white;
  z-index: 1;
  align-items: center;
  justify-content: start;
  position: absolute;
  transition-duration: 500ms;
}
.popup-body {
  padding: 5px;
}
.popup-col-1 {
  width: 300px;
}
.popup-col-2 {
  background-color: #b4bd00;
  width: 300px;
  columns: auto;
  border-radius: 10%;
  margin-left: -10px;
}
.img-popup {
  width: 100%;
  border: 2px;
  border: solid #b4bd00;
  background-color: #b4bd00;
  border-radius: 5%;
}
.logo-popup {
  margin-top: 10px;
  margin-left: 10px;
  width: 40%;
}

.social-item > a {
  color: #e44403;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
}

.item-size {
  width: 16px;
  height: 16px;
}

.contact {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-left: 10px;
  justify-content: start;
  width: 100%;
}
.last-item {
  margin-bottom: 10px;
}

.link {
  color: #ffffff;
  padding: 4px;
  gap: 4px;
  text-decoration: none;
  align-items: center;
}
.link-text {
  font-size: 16px;
  margin-left: 5px;
}

.header-popup{
    display: flex;
    justify-content: space-between;
}

.btn-close{
    padding-top: 10px;
    padding-right: 10px;
    color: #ffffff;
    cursor: pointer;
}

.btn-close-destileria{
    padding-top: 10px;
    padding-right: 10px;
    color: #e44403;
    cursor: pointer;
}



/* CSS LIST */
/* 1.-La Huamantanga */
.popup-col-1-huamantanga{
    width: 150px;
}

.popup-col-2-huamantanga{
    width: 200px;
}

.img-list-huamantanga {
  width: 50px;
  cursor: pointer;
}

.img-list-huamantanga:hover {
  width: 55px;
}

.la-huamantanga-map-number {
  left: 30.2%;
  --hotspot-translate-x: 30.2%;
  top: 36%;
  --hotspot-translate-y: 36%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.la-huamantanga-popup {
   display: none; 
  left: 28%;
  --hotspot-translate-x: 28%;
  top: 55%;
  --hotspot-translate-y: 55%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 2.-Fuente Suiza */
.popup-col-1-fuente-suiza{
    width: 170px;
}

.popup-col-2-fuente-suiza{
    width: 200px;
}

.img-list-fuente-suiza {
  width: 50px;
  cursor: pointer;
}

.img-list-fuente-suiza:hover {
  width: 55px;
}

.fuente-suiza-map-number {
  left: 32%;
  --hotspot-translate-x: 32%;
  top: 39.5%;
  --hotspot-translate-y: 39.5%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.fuente-suiza-popup {
   display: none; 
  left: 28%;
  --hotspot-translate-x: 28%;
  top: 58%;
  --hotspot-translate-y: 58%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 3.-La Finestra */
.popup-col-1-la-finestra{
    width: 140px;
}

.popup-col-2-la-finestra{
    width: 230px;
}

.img-list-la-finestra {
  width: 50px;
  cursor: pointer;
}

.img-list-la-finestra:hover {
  width: 55px;
}

.la-finestra-map-number {
  left: 48.5%;
  --hotspot-translate-x: 48.5%;
  top: 53%;
  --hotspot-translate-y: 53%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.la-finestra-popup {
   display: none; 
  left: 49%;
  --hotspot-translate-x: 49%;
 top: 76%;
  --hotspot-translate-y: 76%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}





/* 4.-Akbar */
.popup-col-1-akbar{
    width: 150px;
}

.popup-col-2-akbar{
    width: 250px;
}

.img-list-akbar {
  width: 50px;
  cursor: pointer;
}

.img-list-akbar:hover {
  width: 55px;
}

.akbar-map-number {
  left: 50.5%;
  --hotspot-translate-x: 50%;
  top: 54.5%;
  --hotspot-translate-y: 54.5%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.akbar-popup {
   display: none; 
  left: 50.5%;
  --hotspot-translate-x: 50%;
   top: 74%;
  --hotspot-translate-y: 74%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}



/* 5.-Bar de Niro */
.popup-col-1-de-niro{
    width: 140px;
}

.popup-col-2-de-niro{
    width: 275px;
}
.img-list-de-niro {
  width: 45px;
  cursor: pointer;
}
.img-list-de-niro:hover {
  width: 50px;
}

.de-niro-map-number {
  left: 52.5%;
  --hotspot-translate-x: 52.5%;
  top: 56%;
  --hotspot-translate-y: 56%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.de-niro-popup {
   display: none; 
  left: 57.5%;
  --hotspot-translate-x: 57.5%;
 top: 93%;
  --hotspot-translate-y: 93%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}



/* 6.-Bar Local */
.popup-col-1-bar-local{
    width: 130px;
}

.popup-col-2-bar-local{
    width: 200px;
}
.img-list-bar-local {
  width: 45px;
  cursor: pointer;
}

.img-list-bar-local:hover {
  width: 50px;
}

.bar-local-map-number {
  left: 54.5%;
  --hotspot-translate-x: 54.5%;
  top: 57%;
  --hotspot-translate-y: 57%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.bar-local-popup {
   display: none; 
  left: 55%;
  --hotspot-translate-x: 55%;
 top: 84%;
  --hotspot-translate-y: 84%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 7.-Las Lanzas */
.popup-col-1-las-lanzas{
    width: 130px;
}

.popup-col-2-las-lanzas{
    width: 220px;
}
.img-list-las-lanzas {
  width: 40px;
  cursor: pointer;
}

.img-list-las-lanzas:hover {
  width: 45px;
}

.las-lanzas-map-number {
  left: 53.5%;
  --hotspot-translate-x: 53.5%;
  top: 60.5%;
  --hotspot-translate-y: 60.5%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.las-lanzas-popup {
   display: none; 
  left: 48%;
  --hotspot-translate-x: 48%;
     top: 94%;
  --hotspot-translate-y: 94%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 8.-Fran Art */
.img-logo-popup-art-fran{
  width: 80% !important;
}
.img-popup-fran-art{
    width: 80% !important;
  
}
.header-fran-art{
      background-color: #ffffff;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}
.popup-col-1-fran-art{
    width: 160px;
}

.popup-col-2-fran-art{
    width: 200px;
    
}

.img-list-fran-art{
  width: 100px;
  margin-left: -30px;
  cursor: pointer;
}
.fran-art-number{
    margin-left: -25px;
}

.img-list-fran-art:hover {
  width: 105px;
}

.fran-art-map-number {
  left: 75%;
  --hotspot-translate-x: 75%;
  top: 91%;
  --hotspot-translate-y: 91%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.fran-art-popup {
   display: none; 
  left: 77%;
  --hotspot-translate-x: 77%;
  top: 85%;
  --hotspot-translate-y: 85%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

/* 9.-La Destileria */
.img-popup-destileria{
    width: 80% !important;
  
}
.header-la-destileria{
      background-color: #ffffff;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}
.popup-col-1-destileria{
    width: 160px;
}
.popup-col-2-destileria{
    width: 200px;
    
}
.img-list-destileria {
  width: 100px;
  margin-left: -30px;
  cursor: pointer;
}
.destileria-number{
    margin-left: -25px;
}
.img-list-destileria:hover {
  width: 105px;
}
.destileria-map-number {
  left: 78%;
  --hotspot-translate-x: 78%;
  top: 21%;
  --hotspot-translate-y: 21%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}
.destileria-popup {
   display: none; 
  left: 78%;
  --hotspot-translate-x: 78%;
  top: 32.5%;
  --hotspot-translate-y: 32.5%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 10.-Casa Mekero */
.popup-col-1-mekero{
    width: 130px;
}

.popup-col-2-mekero{
    width: 200px;
}
.img-list-mekero {
  width: 50px;
  cursor: pointer;
}

.img-list-mekero:hover {
  width: 55px;
}

.mekero-map-number {
   left: 78.5%;
  --hotspot-translate-x: 78.5%;
  top: 17%;
  --hotspot-translate-y: 17%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.mekero-popup {
   display: none; 
    left: 82%;
    --hotspot-translate-x: 82%;
    top: 26%;
    --hotspot-translate-y: 26%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}



/* 11.-Bar Antonia */
.popup-col-1-bar-antonia{
    width: 120px;
}

.popup-col-2-bar-antonia{
    width: 275px;
}
.img-list-bar-antonia {
  width: 50px;
  cursor: pointer;
}

.img-list-bar-antonia:hover {
  width: 55px;
}

.bar-antonia-map-number {
    left: 72.2%;
    --hotspot-translate-x: 72.2%;
    top: 17%;
    --hotspot-translate-y: 17%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.bar-antonia-popup {
   display: none; 
  left: 76%;
  --hotspot-translate-x: 76%;
  top: 24%;
  --hotspot-translate-y: 24%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}



/* 12.-Barba Negra */
.popup-col-1-barba-negra{
    width: 150px;
}

.popup-col-2-barba-negra{
    width: 300px;
}
.img-list-barba-negra {
  width: 50px;
  cursor: pointer;
}

.img-list-barba-negra:hover {
  width: 55px;
}

.barba-negra-map-number {
   left: 69.5%;
    --hotspot-translate-x: 69.5%;
    top: 15%;
    --hotspot-translate-y: 15%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.barba-negra-popup {
   display: none; 
  left: 73%;
  --hotspot-translate-x: 73%;
  top: 24%;
  --hotspot-translate-y: 24%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}



/* 13.-Blue Pub */
.popup-col-1-blue-pub{
    width: 150px;
}

.popup-col-2-blue-pub{
    width: 200px;
}
.img-list-blue-pub {
  width: 50px;
  cursor: pointer;
}

.img-list-blue-pub:hover {
  width: 55px;
}

.blue-pub-map-number {
    left: 66.5%;
    --hotspot-translate-x: 66.5%;
    top: 13%;
    --hotspot-translate-y: 13%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.blue-pub-popup {
   display: none; 
    left: 69%;
    --hotspot-translate-x: 69%;
    top: 20%;
    --hotspot-translate-y: 20%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}



/* 14.-Santo Secreto */
.img-logo-popup-santo-secreto{
    width: 25%;
}
.popup-col-1-santo-secreto{
    width: 180px;
}

.popup-col-2-santo-secreto{
    width: 325px;
}
.img-list-santo-secreto {
  width: 50px;
  cursor: pointer;
}

.img-list-santo-secreto:hover {
  width: 55px;
}

.santo-secreto-map-number {
  left: 61%;
    --hotspot-translate-x: 61%;
    top: 20%;
    --hotspot-translate-y: 20%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.santo-secreto-popup {
   display: none; 
   left: 61%;
    --hotspot-translate-x: 61%;
    top: 38%;
    --hotspot-translate-y: 38%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 14.-Barbudo */
.popup-col-1-barbudo{
    width: 130px;
}

.popup-col-2-barbudo{
    width: 220px;
}
.img-list-barbudo {
  width: 50px;
  cursor: pointer;
}

.img-list-barbudo:hover {
  width: 55px;
}

.barbudo-map-number {
   left: 60%;
    --hotspot-translate-x: 60%;
    top: 23.5%;
    --hotspot-translate-y: 23.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.barbudo-popup {
   display: none; 
    left: 60%;
    --hotspot-translate-x: 60%;
    top: 36.5%;
    --hotspot-translate-y: 36.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 15.-La Tecla */
.popup-col-1-la-tecla{
    width: 150px;
}

.popup-col-2-la-tecla{
    width: 250px;
}
.img-list-la-tecla {
  width: 50px;
  cursor: pointer;
}

.img-list-la-tecla:hover {
  width: 55px;
}

.la-tecla-map-number {
  left: 59%;
    --hotspot-translate-x: 59.5%;
    top: 27.5%;
    --hotspot-translate-y: 27.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.la-tecla-popup {
   display: none; 
   left: 60%;
    --hotspot-translate-x: 60%;
    top: 48%;
    --hotspot-translate-y: 48%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 16.-Kunstmann */
.popup-col-1-kunstmann{
    width: 180px;
}

.popup-col-2-kunstmann{
    width: 310px;
}
.img-list-kunstmann {
  width: 50px;
  cursor: pointer;
}

.img-list-kunstmann:hover {
  width: 55px;
}

.kunstmann-map-number {
    left: 58.4%;
    --hotspot-translate-x: 58.4%;
    top: 31.5%;
    --hotspot-translate-y: 31.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.kunstmann-popup {
   display: none; 
     left: 60%;
    --hotspot-translate-x: 60%;
    top: 54%;
    --hotspot-translate-y: 54%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 18.-La Barba Azul */
.popup-col-1-barba-azul{
    width: 160px;
}

.popup-col-2-barba-azul{
    width: 250px;
}
.img-list-barba-azul {
  width: 50px;
  cursor: pointer;
}

.img-list-barba-azul:hover {
  width: 55px;
}

.barba-azul-map-number {
   left: 57.5%;
    --hotspot-translate-x: 57.5%;
    top: 35%;
    --hotspot-translate-y: 35%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.barba-azul-popup {
   display: none; 
   left: 57%;
    --hotspot-translate-x: 57%;
    top: 61%;
    --hotspot-translate-y: 61%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 19.-La Batuta */
.popup-col-1-la-batuta{
    width: 160px;
}

.popup-col-2-la-batuta{
    width: 250px;
}
.img-list-la-batuta {
  width: 50px;
  cursor: pointer;
}

.img-list-la-batuta:hover {
  width: 55px;
}

.la-batuta-map-number {
    left: 57%;
    --hotspot-translate-x: 57%;
    top: 38.5%;
    --hotspot-translate-y: 38.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}

.la-batuta-popup {
   display: none; 
    left: 55%;
    --hotspot-translate-x: 55%;
    top: 69%;
    --hotspot-translate-y: 69%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
}


/* 20.-Cafe Dante */
.popup-col-1-cafe-dante{
    width: 110px;
}

.popup-col-2-cafe-dante{
    width: 200px;
}
.img-list-cafe-dante {
  width: 45px;
  cursor: pointer;
}

.img-list-cafe-dante:hover {
  width: 50px;
}

.cafe-dante-map-number {
  left: 55.6%;
  --hotspot-translate-x: 55.6%;
  top: 47%;
  --hotspot-translate-y: 47%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.cafe-dante-popup {
   display: none; 
  left: 48%;
  --hotspot-translate-x: 48%;
  top: 66%;
  --hotspot-translate-y: 66%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 21.-Filippo */
.popup-col-1-filippo{
    width: 110px;
}

.popup-col-2-filippo{
    width: 230px;
}

.img-list-filippo {
  width: 50px;
  cursor: pointer;
}

.img-list-filippo:hover {
  width: 55px;
}

.filippo-map-number {
  left: 53%;
  --hotspot-translate-x: 53%;
  top: 47%;
  --hotspot-translate-y: 47%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.filippo-popup {
   display: none; 
  left: 47%;
  --hotspot-translate-x: 47%;
  top: 69%;
  --hotspot-translate-y: 69%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 22.-Hotel Plaza */
.popup-col-1-hotel-plaza{
    width: 110px;
}

.popup-col-2-hotel-plaza{
    width: 210px;
}
.img-list-hotel-plaza {
  width: 50px;
  cursor: pointer;
}

.img-list-hotel-plaza:hover {
  width: 55px;
}

.hotel-plaza-map-number {
  left: 51%;
  --hotspot-translate-x: 51%;
  top: 45.2%;
  --hotspot-translate-y: 45.2%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.hotel-plaza-popup {
   display: none; 
  left: 43%;
  --hotspot-translate-x: 43%;
  top: 62%;
  --hotspot-translate-y: 62%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 23.-Clásico el Dante */
.popup-col-1-clasico-dante{
    width: 120px;
}

.popup-col-2-clasico-dante{
    width: 180px;
}

.img-list-clasico-dante {
  width: 50px;
  cursor: pointer;
}

.img-list-clasico-dante:hover {
  width: 55px;
}

.clasico-dante-map-number {
 left: 49%;
  --hotspot-translate-x: 49%;
  top: 44%;
  --hotspot-translate-y: 44%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.clasico-dante-popup {
   display: none; 
 left: 47%;
  --hotspot-translate-x: 47%;
  top: 62%;
  --hotspot-translate-y: 62%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 24.-Emporio El Dante */
.popup-col-1-emporio-el-dante{
    width: 100px;
}

.popup-col-2-emporio-el-dante{
    width: 200px;
}
.img-list-emporio-el-dante {
  width: 50px;
  cursor: pointer;
}

.img-list-emporio-el-dante:hover {
  width: 55px;
}

.emporio-el-dante-map-number {
 left: 47%;
  --hotspot-translate-x: 47%;
  top: 42%;
  --hotspot-translate-y: 42%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.emporio-el-dante-popup {
   display: none; 
   left: 45%;
  --hotspot-translate-x: 45%;
  top: 59.7%;
  --hotspot-translate-y: 59.7%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 25.-La Vinocracia */
.popup-col-1-la-vinocracia{
    width: 120px;
}

.popup-col-2-la-vinocracia{
    width: 250px;
}
.img-list-la-vinocracia {
  width: 50px;
  cursor: pointer;
}

.img-list-la-vinocracia:hover {
  width: 55px;
}

.la-vinocracia-map-number {
  left: 44.8%;
  --hotspot-translate-x: 47%;
  top: 40.5%;
  --hotspot-translate-y: 42%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.la-vinocracia-popup {
   display: none; 
   left: 42%;
  --hotspot-translate-x: 45%;
  top: 56%;
  --hotspot-translate-y: 56%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 26.- IrarrazaBar */
.popup-col-1-irarrazabar{
    width: 130px;
}

.popup-col-2-irarrazabar{
    width: 230px;
}
.img-list-irarrazabar {
  width: 50px;
  cursor: pointer;
}

.img-list-irarrazabar:hover {
  width: 55px;
}

.irarrazabar-map-number {
  left: 40%;
  --hotspot-translate-x: 40.5%;
  top: 36.5%;
  --hotspot-translate-y: 37.5%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.irarrazabar-popup {
   display: none; 
  left: 35%;
  --hotspot-translate-x: 35%;
  top: 51%;
  --hotspot-translate-y: 51%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}


/* 27.-Minimarket Danelli */
.danelli-text-popup{
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  padding-top: 10px;
  font-size: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.danelli-text{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  flex: none;
  padding: 0 4px 0 5px;
  color: #000000;
}
.popup-col-1-danelli{
    width: 110px;
}

.popup-col-2-danelli{
    width: 200px;
}
.img-list-danelli {
  width: 50px;
  cursor: pointer;
}

.img-list-danelli:hover {
  width: 55px;
}

.danelli-map-number {
    left: 35%;
  --hotspot-translate-x: 35%;
  top: 30%;
  --hotspot-translate-y: 30%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.danelli-popup {
   display: none; 
  left: 32%;
  --hotspot-translate-x: 32%;
  top: 40%;
  --hotspot-translate-y: 40%;
  transform: translate(
    calc(-1 * var(--hotspot-translate-x)),
    calc(-1 * var(--hotspot-translate-y))
  );
}

.small{
    display: none !important;
}
.large{
    display: flex !important;
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (max-width: 992px) {

.logo-barrio {
  left: 41%;
  top: 16%;
  width: 160px;
}

.logo-barrios-comerciales{
  left: 24%;
  top: 52%;
  width: 140px;
} 

/* NUMBERS */
.number {
  font-size: 12px;
  padding: 2px 6px 2px 4px;
}
.number-2 {
  font-size: 12px;
  padding: 2px 4px 2px 4px;
}
.map-number {
  font-size: 12px;
  padding: 4px 8px 3px 5px;
}
.map-number-2 {
  font-size: 12px;
  padding: 4px 5px 3px 2px;
}
.map-number:hover {
  font-size: 13px;
  padding: 5px 9px 4px 6px;
  border-radius: 23px;
}

.map-number-2:hover {
  font-size: 13px;
  padding: 5px 9px 4px 6px;
  border-radius: 23px;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1890px) {

 /*  Fran Art */
.fran-art-map-number {
    left: 75%;
    --hotspot-translate-x: 75%;
    top: 97%;
    --hotspot-translate-y: 97%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }

.fran-art-popup {
  display: none; 
    left: 77%;
    --hotspot-translate-x: 77%;
    top:93%;
    --hotspot-translate-y: 93%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }

 /*  La Destileria */
.destileria-map-number {
    left: 77.5%;
    --hotspot-translate-x: 77.5%;
    top: 16%;
    --hotspot-translate-y: 16%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }

.destileria-popup {
  display: none; 
    left: 78%;
    --hotspot-translate-x: 78%;
    top: 22.5%;
    --hotspot-translate-y: 22.5%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }

/*  La Destileria */
.mekero-map-number {
    left: 78.1%;
    --hotspot-translate-x: 78.1%;
    top: 13%;
    --hotspot-translate-y: 13%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }
.mekero-popup {
  display: none; 
    left: 78%;
    --hotspot-translate-x: 78%;
    top: 19.5%;
    --hotspot-translate-y: 19.5%;
    transform: translate(
      calc(-1 * var(--hotspot-translate-x)),
      calc(-1 * var(--hotspot-translate-y))
    );
  }

/* Antonia */
.bar-antonia-map-number {
      left: 72.2%;
      --hotspot-translate-x: 72.2%;
      top: 13%;
      --hotspot-translate-y: 13%;
      transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

.bar-antonia-popup {
  display: none; 
    left: 76%;
    --hotspot-translate-x: 76%;
    top: 19%;
    --hotspot-translate-y: 19%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

/* Barba Negra */
.barba-negra-map-number {
      left: 69.2%;
      --hotspot-translate-x: 69.2%;
      top: 11%;
/*       --hotspot-translate-y: 11%; */
      transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

.barba-negra-popup {
  display: none; 
    left: 76%;
    --hotspot-translate-x: 76%;
    top: 18%;
/*     --hotspot-translate-y: 19%; */
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

.blue-pub-map-number {
    left: 66.5%;
    /* --hotspot-translate-x: 66.5%; */
    top: 9%;
    /* --hotspot-translate-y: 13%; */
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

.blue-pub-popup {
  display: none; 
    left: 67%;
    /* --hotspot-translate-x: 69%; */
    top: 15%;
    /* --hotspot-translate-y: 20%; */
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Irarrasabar */
.irarrazabar-map-number {
    left: 39.5%;
    --hotspot-translate-x: 41.5%;
    top: 34.5%;
    --hotspot-translate-y: 37.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

.irarrazabar-popup {
  display: none; 
    left: 37%;
    --hotspot-translate-x: 35%;
    top: 45%;
    --hotspot-translate-y: 51%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }
  
  /* Las Lanzas */
.las-lanzas-popup {
  display: none; 
    left: 52%;
    --hotspot-translate-x: 48%;
    top: 81%;
    --hotspot-translate-y: 94%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Bar Local */
  .bar-local-popup {
    display: none; 
    left: 55%;
    --hotspot-translate-x: 55%;
    top: 77.3%;
    --hotspot-translate-y: 84%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* De Niro */
  .de-niro-popup {
    display: none; 
    left: 55.5%;
    --hotspot-translate-x: 57.5%;
    top: 81%;
    --hotspot-translate-y: 93%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Akbar */
  .akbar-popup {
    display: none; 
    left: 50.5%;
    --hotspot-translate-x: 50%;
    top: 70%;
    --hotspot-translate-y: 74%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* La Finestra */
  .la-finestra-popup {
    display: none; 
    left: 48%;
    --hotspot-translate-x: 49%;
    top: 69%;
    --hotspot-translate-y: 76%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Santo Secreto */
  .santo-secreto-popup {
    display: none; 
    left: 63%;
    --hotspot-translate-x: 61%;
    top: 31%;
    --hotspot-translate-y: 38%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Barbudo */
  .barbudo-popup {
    display: none; 
    left: 61%;
    --hotspot-translate-x: 60%;
    top: 32.5%;
    --hotspot-translate-y: 36.5%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* La Tecla */
  .la-tecla-popup {
    display: none; 
    left: 59%;
    --hotspot-translate-x: 60%;
    top: 43%;
    --hotspot-translate-y: 48%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Kunstmann */
  .kunstmann-popup {
    display: none; 
    left: 60%;
    --hotspot-translate-x: 60%;
    top: 47%;
    --hotspot-translate-y: 54%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Barba Azul */
  .barba-azul-popup {
    display: none; 
    left: 57%;
    --hotspot-translate-x: 57%;
    top: 50%;
    --hotspot-translate-y: 61%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* La Batuta */
  .la-batuta-popup {
    display: none; 
    left: 55%;
    --hotspot-translate-x: 55%;
    top: 58%;
    --hotspot-translate-y: 69%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Cafe Dante */
  .cafe-dante-popup {
    display: none; 
    left: 53%;
    --hotspot-translate-x: 48%;
    top: 62%;
    --hotspot-translate-y: 66%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Fillipo */
  .filippo-popup {
    display: none; 
    left: 51%;
    --hotspot-translate-x: 47%;
    top: 62%;
    --hotspot-translate-y: 69%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Hotel Plaza */
  .hotel-plaza-popup {
    display: none; 
    left: 49%;
    --hotspot-translate-x: 43%;
    top: 58%;
    --hotspot-translate-y: 62%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Clasico Dante */
  .clasico-dante-popup {
    display: none; 
    left: 47%;
    --hotspot-translate-x: 47%;
    top: 57.3%;
    --hotspot-translate-y: 62%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Emporio Dante */
  .emporio-el-dante-popup {
    display: none; 
    left: 45%;
    --hotspot-translate-x: 45%;
    top: 55.5%;
    --hotspot-translate-y: 59.7%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* La Vinocracia */
  .la-vinocracia-popup {
    display: none; 
    left: 44%;
    --hotspot-translate-x: 45%;
    top: 52.5%;
    --hotspot-translate-y: 56%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* Fuente Suiza */
  .fuente-suiza-popup {
    display: none; 
    left: 26%;
    --hotspot-translate-x: 28%;
    top: 54%;
    --hotspot-translate-y: 58%;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }

  /* La Huamantanga */
  .la-huamantanga-popup {
    display: none; 
    left: 26%;
    --hotspot-translate-x: 26%;
    top: -188%;
    --hotspot-translate-y: %;
    transform: translate( calc(-1 * var(--hotspot-translate-x)), calc(-1 * var(--hotspot-translate-y)) );
  }
}

/* show Popup */
.show{
    display: flex !important;
}