:root {
  --theme-color: white;
  /* --primary-color: #D5137F;
  --secundary-color: #610B21;
  --text-color-inverse: white;
  --text-color: rgb(29, 28, 28);
  --navbar-shallow-color: rgb(122, 111, 111);
  --navbar-shadowmenu-color: #f8f9fa;
  --menu-mobile-background-color: #610B38;

  --profile-suave-color: #F2F2F2;
  --profile-border-color: #E6E6E6;

  --fondo-azul-color: #0C3C54;
  --letra-colorside: #ddd;

  --color-suave1: #EEEBDD;
  --color-suave2: #D8B6A4;
  --color-cafe: #630000;
  --color-negro: #000000;

  --color-coral: #F8A39D;
  --color-cafeieepco: #8a2b2b;
 */
  --color-morado-primario: #f3e4da;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'coolvetica';
  src: url('./../FUENTES/COOLVETICA_CONDENSED_RG.OTF') format('opentype');
}

@font-face {
  font-family: 'gill-sans';
  src: url('./../FUENTES/GIL_____.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gill-sans';
  src: url('./../FUENTES/GILB____.TTF') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'modestic-sans';
  src: url('./../FUENTES/MODESTICSANS-BOLD.OTF') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'modestic-sans-italic';
  src: url('./../FUENTES/MODESTICSANS-BOLDITALIC.TTF') format('truetype');
  font-weight: bold;
  font-style: italic;
}

html {
  height: 100%;
}



body {
  /*font-family: "Public Sans", sans-serif;*/
  font-family: "coolvetica" !important;
  /*font-size: 1.2rem;*/
  min-height: 100%;

}

/*
  .observer-root-margin{
    pointer-events: none;
    z-index: 1000;
    border: 4px solid blue;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }*/

.ir-arriba {
  display: inline-none;
  padding: 14px;
  background-color: crimson;
  font-size: 30px;
  color: floralwhite;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  right: 0;
}

.grid-container>* {
  /* box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);*/
  /*border-radius: 4px;*/
  /*padding: 10px;*/
  text-align: center;
}

.header {
  grid-area: header;
  text-align: left;
  /* margin:0px 15px 15px 15px;*/

  /*border-bottom: 2px solid var(--color-coral);
    border-right: 2px solid var(--color-coral);*/


  box-shadow: rgba(0, 0, 5, 0.25) 0px 0px 60px -12px inset, rgba(0, 0, 0, 0.25) 0px 18px 36px -18px inset;

  /* box-shadow:  0px 1px 2px 2px rgba(0, 0, 0, 0.5);*/


  color: var(--color-negro);
  background-image: url("../public/bg3.png");
}

.header p {
  font-size: 17px;
  text-align: justify;
  padding-right: 8px;
  color: #777;
}

.encabside {
  background-color: #F2F2F2;

}

.encabside img {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 200px;
  height: 90px;
}

.barranavbar {
  grid-area: barranavbar;

  display: flex;
  justify-content: space-between;
  /*background-color: #afd6af;*/
  box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);

  z-index: 1000;
}

.sidebar {
  grid-area: sidebar;
  /* background-color: var(--color-negro);*/
  background-color: var(--color-morado-primario);

  color: var(--letra-colorside);
  overflow-y: auto;
  grid-gap: 21px 82%;

  border-radius: 25px;
  margin-left: 15px;
  /* position: relative;*/



}




.side-tempicon {
  display: none;
}


.main {
  grid-area: main;
  /*   padding-top: 50px;
 */
  /*  display: flex;
  flex-direction: column;
  justify-content: center; */
  /* 
  align-items: center; */

  height: 100%;
  min-height: 0;
  /*************/
  /*width: 70%;
    height: 100%;
    background-color: #ccc;
    transition: 1s ease;*/
  /***********/
}



.footer {
  grid-area: footer;
  /*background-color: var(--color-suave1);*/
  color: var(--secundary-color);
  margin-top: 0px;

  border-top: 1px solid var(--color-coral);

}


.footer-text {
  font-size: 12px;
  padding: 15px;
  /*max-width: 900px;*/
  font-size: 15px;


}


.linea {
  border-top: 2px solid var(--color-coral);
  height: 5px;
  max-width: 98%;
  padding: 0;
  margin: 50px auto 0 auto;
}

/*******/
.horizontal-padding {
  padding-left: 25px;
  padding-right: 25px;

}

.vertical-padding {
  padding-top: 25px;
  padding-right: 25px;
}

/*******/

.grid-container {
  display: grid;
  gap: 0px;
  grid-template:
    "hero-banner" auto
    "sidebar" 500px
    "main" auto
    "footer" 80px / 100%;
}

/* .main {
  margin-top: 20px;
}
 */
.elmenu {
  display: none;
}

/*  600 */
@media (min-width: 900px) {
  /* .grid-container {
    grid-template:
      "hero-banner hero-banner" auto "sidebar main" auto
      "footer footer" 80px / 20% auto;
  } */

  .horizontal-padding {
    padding-left: 70;
    padding-right: 70;

  }

  .vertical-padding {
    padding-top: 70;
    padding-right: 70;

  }


  .side_chec {
    display: none;
  }


}

@media (min-width: 900px) {

  .grid-container {
    grid-template:
      "hero-banner hero-banner" auto
      /* <-- Ocupa las dos columnas */
      "sidebar main" auto
      "sidebar footer" 80px / 20% auto;
  }

  /*.encabside img{
      margin-top: 15px;
       margin-bottom: 10px;
       width: 80%;
       height: 90px;
    }*/


  /*************************/
  .elmenu {
    display: block;
  }

  .gridContrae {
    grid-template:
      "sidebar  header" auto
      /* "barranavbar  barranavbar" 50px*/
      "sidebar main" auto
      "sidebar  footer" 80px /
      90px auto;

    transition: 0.2s;
  }

  .sidebar-contenido-quita {
    /*display: block;*/
    /* max-width: 90%;*/
    /* background-color: green;*/
    display: none;
  }




  .side-tempicon-pone {
    display: block;
  }

  .rotate {
    transform: rotate(180deg);
    transition: .5s;

  }

  /****************/


  .horizontal-padding {
    padding-left: 70;
    padding-right: 70;

  }

  .vertical-padding {
    padding-top: 70;
    padding-right: 70;

  }

  .navbarmenu {
    display: flex;
    justify-content: space-between;

  }

}



/*********ESTILOS EN  MAPS**************/

/*mapa transparente*/
.leaflet-container {
  background: none !important;
}


.leaflet-popup-content {
  /* change size of margin */
  margin: 14px 14px;
  font-weight: bold;
  /* make the line height smaller */
  line-height: 1.4;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  color: #EEEBDD;


}

.info h4 {
  margin: 0 0 5px;
  color: #777;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;

}

.banner-superior {
  grid-area: hero-banner;
  width: 100%;
}


.banner-superior img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 900px) and (max-width: 1650px) {
  .grid-container {
    display: grid;
    grid-template:
      "hero-banner hero-banner" auto
      "sidebar     main" auto
      "sidebar     footer" 80px / 0.5fr 1fr;
  }
}

@media (max-width: 900px) {
  .main {
    padding-top: 50px !important;
  }
}