/* Declaracion de variables css */
:root {
  --color-estadios: #38BAED;
  --color-transporte: #78C487;
  --color-emergencias: #BFD630;
  --color-entretenimiento: #F7941C;
  --color-asistencia_consular: #7880BD;
  --color-main-background: #50535c;
  --color-claro: #fafafa;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

@font-face {
  font-family: "Encode Sans Medium";
  src: url('../fonts/EncodeSans-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

body {
  font-family: "Encode Sans Medium";
  color: var(--color-claro);
  margin: 0;
  padding: 0;
  font-size: 14px;
}

/* categorias de POI */
.estadios {
  color:  var(--color-estadios)
}
.transporte {
  color:  var(--color-transporte)
}
.emergencias {
  color:  var(--color-emergencias)
}
.entretenimiento {
  color:  var(--color-entretenimiento)
}
.asistencia_consular {
  color:  var(--color-asistencia_consular)
}

/* estilo marcadores */
.marker-pin {
  width: 40px;
  height: 40px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-main-background);
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}

.marker-pin::after {
  content: '';
  width: 34px;
  height: 34px;
  margin: 3px 0 0 3px;
  background: var(--color-claro);
  position: absolute;
  border-radius: 50%;
 }

.custom-div-icon i {
   position: absolute;
   left: 0;
   right: 0;
   text-align: center;
   margin: 11px auto;
   font-size: 18px;
   
}
/* mapa */
.contiene-map {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 0px;
}

#map {
  width: 100%;
  height: 100%;
}

.titulo {
  text-align: center;
}

.logo {
  text-align: center;
}


/* Estilo basico de las áreas. Sin incluir color */

.footer {
  width: 814px;
  margin: auto;
  padding-top: 25px;
  padding-bottom: 25px;
  
}

/* Estilos leaflet*/
a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out {
  background-color: var(--color-main-background);
  color: var(--color-claro);
  border: 2px solid var(--color-claro);
  border-radius: 4px;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control span {
  margin-top: 10px;
  background-color: var(--color-main-background);
  width: 90%;
  padding: 4px 0;
  border: 2px solid var(--color-claro);
  border-radius: 4px;
  cursor: pointer;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control span:hover {
  color: var(--color-main-background);
  background-color: var(--color-claro);
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
  text-align: center;
  border: 0;
}

a.leaflet-control-layers-toggle {
  background-color: var(--color-main-background);
}

.leaflet-control-layers.leaflet-control {
  border-color: var(--color-claro);
  border-width: 2px;
}


/* -.-.-.-.-.-.-.-.-.- */
.embajada h2{
  position: relative;
}
.embajada h2 span{
  position: absolute; top: -200px;
}

/* Media queries */

@media (max-width: 813px) {
  .contiene-map, .footer{
    width: 100%;
  }
  
  .header {
    display: none;
  }
  .footer {
    display: none;
  }
}