@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: "Montserrat", sans-serif;
font-family: "Barlow Condensed", sans-serif;
*/
html{ font-family: "Montserrat", sans-serif;  font-weight: 400; font-size: 16px; }
body{ padding: 0px; margin: 0px; background-color: #ffffff; }


div.ast-container{ padding-left: 0px !important; padding-right: 0px !important;}

.ast-primary-header-bar.ast-primary-header.main-header-bar.site-header-focus-item{ padding-left: 60px !important; padding-right: 60px !important;}

.header-over{
    /* position: absolute; left: 0; width: 99vw; margin: 60px 0px 0px 30px; */
    margin-left: calc(-50vw + 50%) !important; /* -de 50 mas pegado al borde */
    margin-right: calc(-50vw + 45%) !important;
    max-width: 100vw;
    width: 100vw;
    height: auto;
    padding-top: 60px !important;
    padding-left: 60px;
    padding-bottom: 70px;

    background-image: linear-gradient(rgba(255, 255, 255, 0.5) 90%, rgba(84, 184, 180, 0.07) 100%);  /* linea de abajo hacia arriba */
    /*background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 90%, rgba(84, 184, 180, 0.13) 100%); /* linea de arriba hacia abajo */
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
}

.header-over-left{float:left; width: 49%; text-align: left; }
.header-over-right{float:left; width: 49%; text-align: right; padding-right: 20px;}
#textote{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 300 !important;
  font-size: 100px;
  line-height: 1em;
  letter-spacing: -4px;
  margin-bottom: 0px;
}
#texto-head-over{ padding-top:10px; padding-bottom: 20px !important; margin: 0px !important; font-size: 1.2em;}
#imajota{
  max-height: 450px;
  height: inherit;
  width: 99%;
  object-fit:contain;
}

.container{padding-top: 80px;}
/*.container{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items:  flex-start; align-content: flex-start; gap: 0px;}*/


.sidebar {
  float:left;
  padding: 10px 50px 0px 30px;
  width: 390px;
  min-width: 390px;
  height: auto;
  z-index: 1; /* Stay on top */
  overflow-x: hidden; /* Disable horizontal scroll */
  background-image: url('imgs/sombra.png');
  background-position: right center;
  background-repeat: no-repeat;
  /*background-color: #ffffff;*/
  background-size: contain;
}

.content {
  margin-left: 390px;
  height: auto;
  text-align: center;
  padding-left: 20px;
  padding-right: 15px;
}

.centros-info{ margin: 0; padding: 0px 0px 0px 0px}
.columns {
  display: inline-block;
  box-sizing: border-box;
  column-count: 3;
  column-width: 200px;
  column-gap: 0px;
  margin: 0px;
  padding: 0px 0px 20px 0px;
  width: 100%;

}
.columns article {height: 40px; margin-bottom: 30px; padding: 15px 30px 15px 30px;  }
.columns article.with-borders{border-left: 1px solid #54b7b3; border-right: 1px solid #54b7b3; }

.cca, .sic, .fye, .ee, .ei, .oe{
  color: #ffffff;
  padding: 1px 5px 2px 5px;
  width: fit-content;
  font-size: 1.375em;
  font-weight: 700px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  margin: 0px auto 10px auto;
}
.cca {background-color: #54b7b3;}
.sic {background-color: #f30100;}
.fye {background-color: #0dac5a;}
.ee {background-color: #72cbb7;}
.ei {background-color: #0d8aaa;}
.oe {background-color: #aacc1d;}
.description{ font-size: 0.9em; color: #444444; text-align: center;}

div.canvas-container{
  z-index: 0;
  width: 100%;
  height: 700px;
}



/* canvas */
canvas#map{
  margin: auto;
  padding: auto;
  /*background-image: url("imgs/background-mapa.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;*/
  background: radial-gradient(circle at 50% 50%, #54b7b3, white 45%, white 45%, white 45%);
  /*padding-top: 30px;
  padding-bottom: 30px;*/
 }

a#borrar_filtros_top, #borrar_filtros_sidebar{ display: block; text-align: right; color: #333333; text-decoration: none; font-size: 0.8em; font-family: "Barlow Condensed"; padding-right: 10px;}
a#borrar_filtros_top:hover, #borrar_filtros_sidebar{ color: red;}
a#borrar_filtros_sidebar{ margin-bottom: 20px;}

div#botones_zoom{
  display: block;
  text-align: left;
  user-select: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  border-radius: 2px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  width: fit-content;
  margin-top: -20px;
}
#zoomin, #zoomout{
  background: white;
  color: #999999;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0px 10px 5px 10px;
  margin: 4px;
  font-size: 2.9em;
  line-height: 30px;
  font-family: "Barlow Condensed";
}
#zoomin:hover, #zoomout:hover{ cursor: pointer; color: #000000;}

div#title-sidebar{
  background-color: #54b7b3;
  color: #ffffff;
  font-size: 1.4em;
  text-align: left;
  padding: 3px 3px 3px 3px;
  font-family: "Barlow Condensed", sans-serif;
  width: fit-content;
  margin: 0px;
}

div#title-sidebar-center{
  background-color: #54b7b3;
  color: #ffffff;
  font-size: 1.4em;
  text-align: left;
  padding: 3px 3px 3px 3px;
  font-family: "Barlow Condensed", sans-serif;
  width: fit-content;
  margin: 0px auto 10px auto;
}

.nav {margin:0px; padding-left: 10px;}
.nav p.featured{font-weight: 600;}
.nav p{font-size: 1em; color: #333333;}
.nav p b{font-weight: 600;}

.featured-mobile{font-size: 0.9em;}



#textSearch{ width: 90%; height: 30px; border: 1px solid #cccccc; padding: 5px; border-radius: 5px; width: 80%; font-family: "Barlow Condensed", sans-serif;}
#textSearch:placeholder { color: #cccccc; }
#textSearch:focus { border: 1px solid #54b7b3 !important;}
#btnSearch:hover { cursor: pointer; }

.titulo-filtro{
  margin: 0px 0px 20px 0px;
  padding: 20px 0px 0px 0px;
  font-weight: 700;
  border-bottom: 3px solid #54b7b3;
  color: #333 !important;
  font-size: 15px;
  font-weight: 500;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.cat-filtro{
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 5px; margin-bottom: 5px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 0.95em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.8);}

.select_filtros{ font-family: "Barlow Condensed", sans-serif; padding: 0px !important; color: #9e9e9e; background-color: #ffffff; height: 35px; border: 1px solid #cccccc; border-radius: 5px; width: 100%;}
.select_filtros option:not(:first-of-type) { color: #333333; font-family: "Barlow Condensed", sans-serif;}

.search-list input{
  background-image: url('imgs/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 84%; /* Full-width */
  font-size: 13px; /* Increase font-size */
  padding: 15px 10px 15px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin: 0px; /* Add some space below the input */
}

.search-list ul {
  width: 100%; /* Full-width */
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.search-list li {
  width: 100%; /* Full-width */
  padding: 0px;
  margin: 0px;
}

.search-list li a {
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a border to all links */
  margin:0px;
  /*background-color: #f6f6f6; /* Grey background color */
  padding: 10px 0px 10px 10px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 1em; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  text-align: left;
  text-transform: uppercase;
}

.search-list li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

.marker-info { width: 600px; height: 400px; padding: 20px 0px 0px 20px; border-radius: 4px; z-index: 1000; box-shadow: 0 2px 6px rgba(0,0,0,0.3); overflow-x: scroll; transition: opacity 0.2s; position: absolute; background-color: white; }
.marker-info button { padding: 0px 5px 3px 5px; position: absolute; top: 0; right: 0; background-color: black; color: #ffffff; cursor: pointer; border: none; font-size: 2.5em; font-weight: 500; width: 40px; }
.marker-info button:hover {background-color: red;}
.marker-info h3 {font-size: 1.2em; font-weight: 700; margin: 0px; padding: 0px 0px 10px 0px; font-family: "Barlow Condensed", sans-serif;}
.marker-info p { margin: 0 0 10px 0; color: #666; font-size: 0.8em;}
.marker-info .xlogo{ padding-bottom: 10px; width: 90%; margin: 0px;}
.marker-info .xtitle { color: #54b7b3; font-size: 0.85em; font-weight: 600;}
.marker-info .xleft {float:left; width:50%; padding: 0px 10px 20px 0px; border-right: 1px solid #54b7b3; }
.marker-info .xright {float:left; width:40%; padding-left: 20px; padding-right: 20px;}
.marker-info .www_txt{ text-decoration: none; font-weight: 700; color: #333333;}
.marker-info .www_img{ width: 20px; vertical-align:bottom;}

.lipin { width: 24px; margin-right: 5px; float: right; z-index: 0;}
.clear{ clear: both; height: 0px;}

.tooltip {
  float: right;
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  width: 18px;
  border:1px solid black;
  border-radius: 25px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 10px 10px 10px;
  font-size: 15px;
  line-height: 19px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -190px;
  z-index: 1000000000000;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}



#close-sidebar{
  color: #ffffff;
  font-size: 2em;
  text-align: center;
  background-color: black;
  width: 50px;
  float:right;
  cursor: pointer;
  padding-bottom: 10px;
  z-index: 2;
  position: fixed;
  top: 0;
  right: 0;
  display: none;
}

#footer-bar-nav{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  background-color: #54b7b3;
  color: #ffffff;
  vertical-align: baseline;
  font-size: 1.5em;
  text-align: center;
  height: 50px;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 10px;
  width:auto;
  display: none;
  cursor: pointer;
}
#footer-bar-nav:hover{}
#footer-bar-nav a{color: #ffffff; vertical-align: baseline; text-decoration: none; font-size: 1.5em;}
#footer-bar-nav img{vertical-align: middle; padding-right: 10px;}

.info_mobile{ width: 90%; margin: 20px auto 0px auto; text-align: center; display: none;}

#mobile-apply-filters-button{
  text-align: center;
  margin: auto;
  padding: 10px 30px 10px 30px;
  background: red;
  color: white;
  width: 80%;
  border: none;
  font-size: 1.2em;
  font-family: "Barlow Condensed", sans-serif;
  display: none;
}



@media only screen and (max-width: 1540px) {
  #textote{
    font-size: 90px;
    line-height: 1em;
    letter-spacing: -3px;
  }
}

@media only screen and (max-width: 1410px) {
  #textote{
    font-size: 80px;
    line-height: 1em;
    letter-spacing: -3px;
  }
}

@media only screen and (max-width: 1275px) {
  .ast-primary-header-bar.ast-primary-header.main-header-bar.site-header-focus-item{ padding-left: 30px !important; padding-right: 30px !important;}
  .container{margin-top: 0px;}
  .header-over{padding-left: 30px;}
  #textote{
    font-size: 65px;
    line-height: 0.9em;
    letter-spacing: -2px;
  }
}

/* avoid info titles two lines */
@media only screen and (max-width: 1290px) {
    article {height: 20px; margin-bottom: 30px; padding: 5px 15px 5px 15px;  }
    article .description{ font-size: 0.8em;}
    .cca, .sic, .fye, .ee, .ei, .oe{
      padding: 1px 5px 2px 5px;
      font-size: 1em;
    }
}

/* avoid info two columns */
@media only screen and (max-width: 1189px) {
    .centros-info{ margin: 0; padding: 10px 0px 0px 0px}
    .columns { column-width: 160px;}
}


/* hide info columns */
@media only screen and (max-width: 1159px) {
  div.centros-info{ display: none;}
  /*#borrar_filtros_top{ display: none;}*/
  /*.canvas-container{ padding-top: 60px;}*/
}
/*
@media only screen and (max-width: 1100px){
    div.canvas-container{ height: 600px; }
}
*/


@media only screen and (max-width: 1024px) { /* ipad vertical */
  .container{padding-top: 0px;}
  .header-over{ display: none;}
  #mobile-apply-filters-button{ display: block;}
  div.canvas-container{ height: 660px; padding-top: 0px;}
  .sidebar {width: auto; float:none; padding-right: 90px; padding-left: 90px; padding-top: 90px; background: none; display: none;}
  .info_desktop{ display: none;}
  .info_mobile{ display: block;}
  #footer-bar-nav{ display: block;}
  /*a#borrar_filtros_top{display: none;}*/
  .content {z-index: 0; margin-left: 0px; padding-left: 0px; padding-right: 0px;}
  .marker-info { width: 100%; height: 180vh; overflow-x:auto; padding-right: 10px; padding-bottom: 20px;}
  .marker-info button { position: fixed; top:0; right: 0;}
  .marker-info p { color: #333; font-size: 1em;}
  .marker-info h3 {padding-left:0px; padding-top: 5px;}
  .marker-info .xleft {float:none; width:100%; padding: 0px 10px 0px 0px; border: none;}
  .marker-info .xright {float:none; width:100%; padding-left: 0px; padding-top: 20px;}
  div#botones_zoom{ margin-left: 20px;  }
  #zoomin, #zoomout{
    padding: 0px 10px 5px 10px;
    margin: 5px;
    font-size: 2em;
    line-height: 20px;
  }
}



@media only screen and (max-width: 789px) { /* movil */
    .marker-info { height: 160vh;}
    div.canvas-container{ height: 600px;}
    /*canvas#map{ margin-top: 0px;}*/
    .sidebar {
      width: auto;
      float:none;
      padding-right: 30px;
      padding-left: 30px;
      padding-top: 50px;
      background: none;
      position:inherit;
      overflow-x: scroll;
    }
    #close-sidebar{
      font-size: 1.3em;
      font-weight: 500;
      width: 40px;
      padding-top: 5px;
    }
}


@media only screen and (max-width: 399px) { /* movil pequeño */
    .marker-info { height: 180vh;}
    div.canvas-container{ height: 550px;}
}











/* fin css */