body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

a {
  color: unset;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  background-color: #157cbc;
  z-index: 3;
}

h2 {
  font-family: "Edu NSW ACT Cursive", cursive;
  font-weight: 400;
  font-style: normal;
}

section {
  scroll-snap-align: start;
  height: 100%;
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  font-size: 200%;
  font-weight: 700;
  color: whitesmoke;
  padding: 2rem;
  padding-top: calc(32px + 2rem);
  box-sizing: border-box;
  position: relative;
}

.vertical-scroller {
  scroll-snap-type: y mandatory;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.horizontal-scroller {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.horizontal-scroller > div {
  width: 100vw;
  max-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow-x: hidden;
  flex-shrink: 0;
  padding: 2rem;
  position: relative;
}

.horizontal-section--white {
  background-color: white; 
  opacity: 99.9%;
  color: black;
}

.who-text {
  font-size: medium;
}

.who-text__fine-print {
  margin-top: 2rem;
  font-size: small;
  font-weight: lighter;
}

.background-image {
  filter: brightness(0.4);
  z-index: 0;
}

.background-image--light {
  filter: none;
}

.background-image--stretched {
  height: 60%;
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.background-image--mirrored {
  height: 60%;
  -webkit-box-reflect: below 5px
    linear-gradient(to bottom, transparent 30%, rgba(255, 255, 255, 0.2) 100%);

  /* Adds a gaussian blur to the mirror effect */
  filter: blur(4px);
  transform: scaleY(-1);
}

.slideshow-container {
  position: absolute;
  top: 0;
  width: 100%;
  max-width: 800px;
  height: 100%;
  overflow: hidden;
}

/* 2. Image Common Styles */
.slideshow-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fade-slideshow 16s infinite ease-in-out;
}

/* 3. Staggered Delays (4s increments) */
.slideshow-container img:nth-child(4) {
  animation-delay: -1s;
}
.slideshow-container img:nth-child(3) {
  animation-delay: 3s;
}
.slideshow-container img:nth-child(2) {
  animation-delay: 7s;
}
.slideshow-container img:nth-child(1) {
  animation-delay: 11s;
}

/* 4. Animation Keyframes */
@keyframes fade-slideshow {
  0% {
    opacity: 0;
  }
  6.25% {
    opacity: 1;
  } /* Fades in for 1 second */
  31.25% {
    opacity: 1;
  } /* Stays fully visible for 4 seconds */
  37.5% {
    opacity: 0;
  } /* Fades out for 1 second */
  100% {
    opacity: 0;
  } /* Remains hidden for the rest of the loop */
}

#where-video {
  position: absolute;
  height: 100%;
  opacity: 40%;
  left: 0;
  top: 0;
  transform: translateX(-50%);
}

.sunday-worship-details {
  font-size: 50%;
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
}

.sunday-worship-details h2 {
  font-family: Arial, Helvetica, sans-serif;
}

.sunday-faq h2 {
  color: #157cbc;
}

.swipe-notice {
  position: absolute;
  bottom: 2rem;
  font-size: 1.5rem;
  width: 100%;
}

.sermons {
  display: flex;
  flex-direction: column;
}

.sermons > article {
  margin-top: 4rem;
}
.BlogList-item-title {
  margin-bottom: 28px;
  font-family: "futura-pt";
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .1em;
  font-size: 34px;
  font-family: futura-pt;
  line-height: 1.1em;
  font-style: normal;
  text-decoration: none;
}
.Blog-meta {
  display: flex;
  font-family: "Helvetica Neue",Arial,sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 15px;
  font-family: proxima-nova;
  font-style: normal;
  color: #b5b5b5;
}
.Blog-meta-item:not(.Blog-meta-item--date) {
  display: none;
}