/* scrolly.css defines the styles for scrollytelling elements */

.scrolly-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
}

/* increase margin for larger screens */
@media (min-width: 1024px) {
  .scrolly-container {
    margin: 2rem;
  }
  .sticky-container {
    margin-left: 1rem;
  }
}

.scrolly-container > * {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 0 0 auto;
}

/* CSS properties common to all sticky content */
.sticky-container {
  position: -webkit-sticky;
  position: sticky;
  z-index: 0;
  top: 12.5vh;
  height: 75vh;
  width: 75%;
  /* The opacity transition will fade the content in/out when it gets replaced, 
  so set the opacity to 1 when fading in and 0 when fading out */
  transition: opacity 0.5s linear;
}

.sticky-image-container {
  margin: 0;

  /* Center everything inside */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: none; /* hide by default, let meta data decide when to display */
  height: 100%; /* fill space provided by sticky-container parent */
  width: 100%; /* fill space provided by sticky-container parent */
}

.sticky-image-container img {
  padding: 0rem;
  object-position: center;
  width: 100%;
  height: 100%;
  /* by default, "object-fit: cover" works better for images that are more horizontally oriented,
   fits more of the horizontal width of the image (though not entirely -- we don't display the full
   width, because it will be letterboxed if it doesn't fit).
   This will switch to "object-fit: contain" when the user specifices the image is more vertically
   oriented, which will ensure the full height of the image is displayed */
  object-fit: cover; 
}

.sticky-map-container {
  display: none; /* hide by default, let meta data decide when to display */
  z-index: 1; /* Ensure map displays above other content */
  height: 100%; /* fill space provided by sticky-container parent */
  width: 100%; /* fill space provided by sticky-container parent */
}

.sticky-video-container {
  width: 100%;
  height: 100%;
}

/* videos have an iframe inserted inside them so need an extra layer of width/height specification */
.sticky-video-container * {
  width: 100%;
  height: 100%;
}

.sticky-container img {
  /* eases transition when zoomming an image */
  transition: transform 1s linear, opacity 0.5s linear;
}

.sticky-container video,
map {
  /* eases transition when zooming an image or video */
  transition: opacity 0.5s linear;
}

.steps-container {
  position: relative;
  width: 33%;
  padding: 0 0rem;
}

.step {
  margin: 0rem 1rem 10rem 0rem;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0%;
}

.step-content {
  padding: 1rem;
  filter: drop-shadow(lightgray 0.5rem 0.5rem 10px);
  font-size: 1.25rem;
}

.step:first-child {
  margin-top: 5rem;
}
.step:last-child {
  margin-bottom: 0;
}

.step.is-active {
  opacity: 100%;
  transition: opacity 1s linear;
}

.step p {
  text-align: center;
  padding: 1rem;
  font-size: clamp(10px, 3.5vw, 24px);
}

.text-content {
  width: 75%;
  margin: 5rem auto 5rem auto;
}

.text-content * {
  text-align: left;
  margin-bottom: 1rem;
}