@keyframes trigger-point-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes trigger-point-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.trigger-point {
  width: auto;
  position: absolute;
  color: #fff;
  bottom: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  z-index: 40;
  opacity: 0;
  display: none;
  --duration: 10s;
  --delay: 9s;
  will-change: transform;
}
@media only screen and (min-width: 768px) {
  .trigger-point {
    left: calc(50% - 200px);
  }
}

.trigger-point.active {
  display: block;
  overflow: auto;
  animation-name: trigger-point-fade-in, move-text, trigger-point-fade-out;
  animation-duration: 0.5s, var(--duration), 1s;
  animation-timing-function: linear, linear, linear;
  animation-delay: 0s, 0s, var(--delay);
  animation-fill-mode: forwards;
  transform: translateX(var(--left-start)) translateY(var(--bottom-start));
}

@keyframes move-text {
  100% {
    /* bottom: var(--bottom-position);*/
    transform: translateX(var(--left-position)) translateY(var(--bottom-position));
  }
}

h2 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.text-content {
  display: block;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  width: 500px;
}

p {
  font-size: 16px;
}
a {
  text-decoration: underline;
  color: #fff;
  font-size: 16px;
}

.video-overlay {
  min-width: 120vw;
  min-height: 120vh;
  position: absolute;
  z-index: 10;
  background-color: #000;
  bottom: 0px;
  left: 0px;
  opacity: 0;
}

@keyframes opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes opacity-out {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0;
  }
}

/* The element to apply the animation to */
.video-overlay.active {
  animation-name: opacity-in;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}
.video-overlay.passive {
  animation-name: opacity-out;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

@keyframes show-txt {
  from {
    opacity: 0;
    height: 0px;
  }
  to {
    opacity: 1;
    height: auto;
  }
}

@keyframes hide-txt {
  from {
    opacity: 1;
    height: auto;
  }
  to {
    opacity: 0;
    height: 0px;
  }
}

.text-content.active {
  animation-name: show-txt;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.text-content.passive {
  animation-name: hide-txt;
  animation-duration: 0.4s;
  /* animation-delay: 0.2s;*/
  animation-fill-mode: forwards;
}

.accommodation_1 {
}

.accommodation_2 {
}
.activities_1 {
}
.activities_2 {
}
.activities_3 {
}
.activities_4 {
}
.activities_5 {
}
.birdwatching_1 {
}
.birdwatching_2 {
}
.birdwatching_3 {
}
.dining_1 {
}
.dining_2 {
}

.fishing_1 {
}

.fishing_2 {
}
.fishing_2 {
}
.gettingaround_1 {
}
.gettingaround_2 {
}
.gettingaround_3 {
}
.gettingaround_4 {
}
.gettinghere_1 {
}
.gettinghere_2 {
}
.gettinghere_3 {
}
.hiking_1 {
}
.hiking_2 {
}
.hiking_3 {
}
.hiking_4 {
}
.hiking_5 {
}
.hiking_6 {
}
.shopping_1 {
}
.shopping_2 {
}
.shopping_3 {
}
.whatson_1 {
}
.whatson_2 {
}
.whatson_3 {
}
.whatson_4 {
}