/* Base font size for desktop */
html {
    font-size: 14px;
}

@media (max-width: 768px){
	html {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 12px;
	}
}

@font-face {
	font-family: 'TrajanPro-Regular';
	src: url('../fonts/TrajanPro-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'TrajanPro-Bold';
	src: url('../fonts/TrajanPro-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'OpenSans-Regular';
	src: url('../fonts/OpenSans-Regular.ttf') format('opentype');
}

@font-face {
	font-family: 'Gentium Plus-700';
	src: url('../fonts/Gentium\ Plus-700.ttf') format('opentype');
}

.leaflet-popup-content h1 {
  font-family: 'Gentium Plus-700', arial;
  font-size: 1.6rem;
  color: #2A1D0A;
  margin-top: 2px;
  margin-bottom: 2px;
}

.leaflet-popup-content p {
  font-family: 'OpenSans-Regular', sans-serif;
  font-size: 1.1rem;
  color: #2A1D0A9C;
  margin-top: 2px;
  margin-bottom: 0px;
}

.leaflet-popup-content img.popup-image {
    width: 250px;
    height: 160px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    margin-top: 5px;
}

/* Link onder de afbeelding */
.leaflet-popup-content a.popup-link {
    display: block;
    margin-top: 8px;
    color: #00508b;
    text-decoration: none;
    font-family: 'OpenSans-Regular', sans-serif;
    font-size: 1.1rem;
}

/* Kleur bij hover */
.leaflet-popup-content a.popup-link:hover {
    color: #003d6b;
}

/* Pijltje */
.leaflet-popup-content a.popup-link span {
    display: inline-block;
    margin-left: 3px;
    transition: transform 0.2s ease;
}

/* Pijltje schuift naar rechts */
.leaflet-popup-content a.popup-link:hover span {
    transform: translateX(4px);
}

/* Achtergrond van de Leaflet popup */
.leaflet-popup-content-wrapper {
    background-color: #f9f7f4;
}

/* Kleur van het pijltje onder de popup */
.leaflet-popup-tip {
    background-color: #f9f7f4;
}

/* De code hieronder geeft een blauwe kleur aan de EMK copyright tekst */
.leaflet-control-attribution {
  color: #6693bd;
}

/* De code hieronder geeft de hoogte en de achtergrondkleur van het div element weer */
#map { height: 100vh;
    width: 100%;
	background-color: #fff;
 }

/* Heel subtiele pulse om klikbaarheid af en toe te benadrukken */
@keyframes subtlePulse {
  0% {
    transform: scale(1);
  }
   50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}


/* Marker */
#map .pulse-marker-container img {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;

  animation: subtlePulse 3s infinite;

  filter: drop-shadow(0 2px 4px rgb(255, 255, 255));  

  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover */
#map .pulse-marker-container img:hover {
  filter: drop-shadow(0 1px 2px rgb(0, 0, 0, 0.55));
}