@font-face {
  font-family: "Gordita";
  src: url("https://static1.squarespace.com/static/5fc404fe6b97992eb56f861b/t/5fcbeeabb495bd20282ff75b/1607200427292/Gordita+Black.otf");
}

h2 {
  font-family: "Gordita";
  font-size: 1.2em !important;
}
h3 {
  font-size: 0.9em !important;
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.spinner {
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.description {
  font-size: 0.8em !important;
  color: #3c4148 !important;
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.leaflet-top {
  z-index: 9999 !important;
  font-size: 7px !important;
}

input.leaflet-control-layers-selector {
  background-color: #3c4148;
}

leaflet-control-layers-expanded {
  height: 100px;
  width: 100px;
  background-color: white;
  padding: 3px;
}

#sidebar {
  z-index: 999;
  height: 100vh;
  max-width: 600px;
  width: 25rem;
  overflow-y: scroll;
  background-color: rgba(
    255,
    255,
    255,
    0.9
  ); /* Adjust the 0.8 value to control transparency */
}

map {
  position: relative;
  z-index: -1;
}

@media screen and (max-width: 500px) {
  #sidebar {
    height: auto;
    width: 50vw !important;
    background-image: none;
    overflow-y: scroll;
    margin-right: 25vw;
  }

  #likeButton {
    visibility: hidden;
  }
  .leaflet-top {
    max-width: 25vw !important;
  }
}

.markerActive {
  border: 4px solid rgba(0, 0, 0, 0.1);

  width: 50px !important;
  height: 50px !important;
  /* Remove unnecessary CSS properties */
  width: auto;
  height: auto;
  margin: 0;
  /* Increase z-index to make sure it's on top */
  z-index: 99999 !important;
  /* Set position to absolute */
  position: absolute;
}

.leaflet-marker-icon:hover {
  opacity: 0.9;
}

.leaflet-marker-icon {
  border-radius: 2px;
  border: 1px solid #ffffff;
}

a {
  color: #528e9e;
  text-decoration: none;
}

.leaflet-control {
  border: 0px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 2px !important;
}

.leaflet-control-layers-expanded {
  font-size: 1.2em;
  line-height: 1.2em;
}

.leaflet-control-layers-expanded label {
  cursor: pointer;
}

.leaflet-control-layers-expanded label:hover {
  opacity: 0.8;
}

img.cover {
  width: 100%;
  border-radius: 5px;
  background: #e0e0e0;
  -webkit-box-shadow: 2px 2px 8px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 2px 2px 8px 5px rgba(0, 0, 0, 0.12);
  margin: 0 0 20px 0;
}

logo {
  width: 100%;
  height: auto;
}

#logo:hover {
  content: url("https://rpm3.nyc3.cdn.digitaloceanspaces.com/25/rpm2025-logo-black.gif");
}

.custom-control-button {
  height: 44px;
  width: 44px;
  background-color: white;
  padding: 3px;
  cursor: pointer !important;
  border: 0px solid black;
}

.custom-control-button:hover {
  background-color: rgb(239, 239, 239);
}

.material-icons {
  font-size: 30px;
}

#gallery {
  position: relative;
}

.material-icons.arrow {
  font-size: 60px;
  position: relative;
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  text-shadow: 0 0 4px gray;
}

.material-icons.arrow.arrow-right {
  right: 0;
  margin-right: 60px;
}

.leaflet-control-attribution {
  visibility: hidden;
}

/* Change the size of the tooltip */
.leaflet-tooltip {
  font-size: 11px;
  padding: 40px !important;
}

footer {
  visibility: hidden;
}


#next-button {margin-right:15vw;}





/* Base sidebar styles with vertical transition */
#sidebar {
  transition: transform 0.4s ease, opacity 0.4s ease;
  position: absolute !important; /* Override any existing position */
  top: 0;
  left: 0;
  z-index: 999;
  height: 90vh;
  max-width: 600px;
  width: 25rem;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.9);
  transform-origin: top center;
}

/* Map styles */
#map {
  transition: left 0.4s ease, width 0.4s ease, height 0.4s ease, top 0.4s ease;
  position: absolute;
  height: 100%;
  left: 25rem;
  width: calc(100% - 25rem);
}



/* Sidebar toggle button styles */
.sidebar-toggle-control .custom-control-button {
  background-color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle-control .custom-control-button:hover {
  background-color: #f0f0f0;
}

.sidebar-toggle-control .custom-control-button .material-icons {
  font-size: 24px;
  color: #555;
}

/* Fix for leaflet controls to be visible over the sidebar */
.leaflet-top {
  z-index: 1000 !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  #sidebar {
    width: 100% !important;
    max-width: 100%;
  }
  
  #map {
    width: 100% !important;
    left: 0 !important;
  }