@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
  font-family: Mont-Heavy;
  src: url("../typography/Mont-Heavy.woff") format("opentype");
  src: url("../typography/Mont-Heavy.woff2") format("opentype");
}

:root {
  --bs-font-sans-serif: "Mont-Heavy";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: "Lato", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-size: 1.2rem;
  --bs-gray: #bcbcbc;
  --bs-orange: #dea032;
  --bs-body-color: #f7f7f5;
  --bs-dark: #0C0C0C;
  /* Duotone */
  --duotone-base: #f7f7f5;
  --duotone-bg-blend: multiply;
  --duotone-blur: 0px;
  --duotone-fg-blend: multiply;
  --duotone-foreground: #dea032;
  --duotone-opacity: 1;
  --duotone-spacing: 0px;
}

/* 
INDEX 
1. Body
2. Loading
3. Carousel
4. Photos and video
5. Buttons
6. Links
7. Typography
8. Footer
9. Mountain Range grid
10. Calendar
11. Background
12. Accordions
13. Navigation
14. Mountain page header
15. Scroll gallery 
/* 

/*=============================================
*                  1. Body                    *
=============================================*/

body {
  padding: 0;
  background-color: var(--bs-dark);
  overflow-x:hidden;
  margin: 0;
}

.frameTop {
  width: 100%;
  height: 1px;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: var(--bs-body-color);
  z-index: 999;
}

.frameRight {
  width: 1px;
  height: 100%;
  position: fixed;
  right: 0px;
  top: 0px;
  background-color: var(--bs-body-color);
  z-index: 999;
}

.frameBottom {
  width: 100%;
  height: 1px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: var(--bs-body-color);
  z-index: 999;
}

.frameLeft {
  width: 1px;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: var(--bs-body-color);
  z-index: 999;
}

@media (min-width: 576px) {
  .frameTop {
    height: 1px;
  }

  .frameRight {
    width: 1px;
  }

  .frameBottom {
    height: 1px;
  }

  .frameLeft {
    width: 1px;
  }
}

@media (min-width: 768px) {
  .frameTop {
    height: 2px;
  }

  .frameRight {
    width: 2px;
  }

  .frameBottom {
    height: 2px;
  }

  .frameLeft {
    width: 2px;
  }
}

@media (min-width: 992px) {
  .frameTop {
    height: 3px;
  }

  .frameRight {
    width: 3px;
  }

  .frameBottom {
    height: 3px;
  }

  .frameLeft {
    width: 3px;
  }
}

@media (min-width: 1200px) {
  .frameTop {
    height: 4px;
  }

  .frameRight {
    width: 4px;
  }

  .frameBottom {
    height: 4px;
  }

  .frameLeft {
    width: 4px;
  }
}

@media (min-width: 1400px) {
  .frameTop {
    height: 5px;
  }

  .frameRight {
    width: 5px;
  }

  .frameBottom {
    height: 5px;
  }

  .frameLeft {
    width: 5px;
  }
}

/*=============================================
*                 2. Loading                  *
=============================================*/

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-dark);
  display: flex;
  justify-content: center;
  align-items: end;
  z-index: 99999;
}

.progress-bar-container {
  width: 100%;
  height: 1px;
  background-color: var(--bs-light);
  overflow: hidden;
}

@media (min-width: 576px) {
  .progress-bar-container {
    height: 1px;
  }
}

@media (min-width: 768px) {
  .progress-bar-container {
    height: 2px;
  }
}

@media (min-width: 992px) {
  .progress-bar-container {
    height: 3px;
  }
}

@media (min-width: 1200px) {
  .progress-bar-container {
    height: 4px;
  }
}

@media (min-width: 1400px) {
  .progress-bar-container {
    height: 5px;
  }
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: var(--bs-orange);
}

/*=============================================
*                 3. Carousel                 *
=============================================*/

/********* Version 1 *********/

/*

#mbCarousel {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1;
}

.mbCarouselItem {
  visibility: hidden;
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

.mbCarouselPhoto {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pin-spacer {
  pointer-events: none;
}

*/

#tmbCarousel {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: fixed;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
}

.tmbCarouselItem {
  visibility: hidden;
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

.tmbCarouselPhoto {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*=============================================
*             4. Photos & video               *
=============================================*/

.fullWidthPhotosContainer {
  max-height: 90vh;
  overflow: hidden;
  align-content: center;
}

.mountainFeaturePhoto {
  width: 100%;
  aspect-ratio: 16/10;
}

.eventPhoto {
  aspect-ratio: 16/10;
}

@media (min-width: 992px) {
  .eventPhoto {
    aspect-ratio: 4/5;
  }
}

.eventPhoto>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-top: 8px;
}

.videoContainer {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*=============================================
*                 5. Buttons                  *
=============================================*/

.tmbBtn {
  border-radius: 0px !important;
  border: none;
  padding: 12px 24px 12px 24px;
  font-size: 0.7em;
  color: var(--bs-dark);
  margin-top: 20px;
}

@media (min-width: 768px) {
  .tmbBtn {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.tmbBtn:hover {
  border-radius: 0px !important;
  padding: 12px 24px 12px 24px;
  font-size: 0.7em;
  background-color: var(--bs-orange);
  color: var(--bs-light) !important;
}

.tmbPressBtn {
  border-radius: 0px !important;
  border: none;
  padding: 12px 24px 12px 24px;
  font-size: 0.7em;
  color: var(--bs-dark);
  margin-top: 0px;
}

@media (min-width: 768px) {
  .tmbPressBtn {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

.tmbPressBtn:hover {
  border-radius: 0px !important;
  padding: 12px 24px 12px 24px;
  font-size: 0.7em;
  background-color: var(--bs-orange);
  color: var(--bs-light) !important;
}



/*=============================================
*                  6. Links                   *
=============================================*/

a {
  color: var(--bs-orange);
  opacity: 0.85;
  text-decoration: none;
}

a:hover {
  color: var(--bs-orange);
  opacity: 1;
  text-decoration: none;
}

/*=============================================
*               7. Typography                 *
=============================================*/

/*/ Heading /*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bs-font-sans-serif);
  letter-spacing: 1px;
  line-height: 1em;
  color: var(--bs-gray)
}

.duotoneHeading {
  text-transform: uppercase;
}

/*/ Brand /*/

.tmbBrand {
  font-family: var(--bs-font-sans-serif);
  font-size: 3.25em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bs-body-color);
  line-height: 1em;
  z-index: 2;
  position: absolute;
  bottom: 30px;
  left: 50px;
}

@media (max-width: 575.98px) {
  .tmbBrand {
    font-size: 2em;
  }

  .tmbBrand {
    bottom: 10px !important;
    left: 20px !important;
  }
}

.tmbPress {
  font-family: var(--bs-body-font-family);
  font-size: 0.875rem;
  line-height: 1.6em;
  color: var(--bs-gray);
  font-weight: 300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/*/ Paragraphs /*/

.lead>p {
  font-family: var(--bs-body-font-family);
  font-size: 2em;
  line-height: 1.4em;
  color: var(--bs-gray);
  font-weight: 300;
  letter-spacing: 0.10em;
  padding-bottom: 0em !important;
}

@media (max-width: 575.98px) {
  .lead p {
    font-size: 1.5em;
  }
}

.tmbCarouselText {
  padding-bottom: 100px;
  padding-top: 500px;
}

p {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: 1.6em;
  color: var(--bs-gray);
  font-weight: 300;
  letter-spacing: 0.20em;
  padding-bottom: 3em;
}

@media (max-width: 575.98px) {
  p {
    font-size: 0.9em;
  }
}

/*/ Highlights /*/

::selection {
  background: none !important;
  color: var(--bs-orange);
}

::-moz-selection {
  background: none !important;
  color: var(--bs-orange);
}

.smallText p {
  font-size: 0.8rem;
}

/*=============================================
*                 8. Footer                   *
=============================================*/

ul.tmbFooter {
  flex-direction: column;
  text-align: end;
  padding-bottom: 3rem;
}

.mbBrandFooter {
  padding-bottom: 0px !important;
  align-content: space-around !important;
  padding-left: 0rem;
}
@media (min-width: 768px) {
  .mbBrandFooter {
    padding-left: 1rem;
  }
}

ul.tmbFooter>li>a {
  padding-top: 8px !important;
  color: var(--bs-body-color);
  font-size: 12px !important;
  font-weight: 300 !important;
  font-family: 'Lato';
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mbBrandFooter h5 {
  font-family: var(--bs-font-sans-serif);
  font-size: 0.75em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bs-grey);
  line-height: 1em;
}

@media (min-width: 1400px) {
  ul.tmbFooter {
    justify-content: end;
    flex-direction: row;
  }
}

ul.tmbFooter>li>a:hover {
  color: #dea032;
}

ul.tmbFooter>li>a.active {
  color: #dea032 !important;
}

/*=============================================
*          9. Mountain Range grid             *
=============================================*/

/*/ Container /*/

.mountainRangeContainer {
  padding-left: 7.5%;
  padding-right: 7.5%;
}

@media (max-width: 991.98px) {
  .mountainRangeContainer {
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*/ Masonary grid /*/

/*/ grid /*/

.grid-sizer {
  width: 1px;
}

.grid {
  max-width: 100%;
  margin: 0 auto;
}

/*/ clearfix /*/

.grid:after {
  content: '';
  display: block;
  clear: both;
}

/*/ grid-item /*/

.grid-item {
  float: left;
}

.grid-item[data-size=full] {
  width: 99%;
}

.grid-item[data-size=large] {
  width: 66%;
}

.grid-item[data-size=medium] {
  width: 49.5%;
}

.grid-item[data-size=small] {
  width: 33%;
}

@media (max-width: 991.98px) {
  .grid-item {
    width: 90% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
  }
}

/*/ Duotone /*/

.duotoneWrapperPadding {
  padding: 2em 1em 2em 1em;
}

@media (min-width: 576px) { 
  .duotoneWrapperPadding {
    padding: 2em 1.5em 2em 1.5em;
  }
 }

@media (min-width: 768px) { 
  .duotoneWrapperPadding {
    padding: 3em 2em 3em 2em;
  }
 }

@media (min-width: 992px) { 
  .duotoneWrapperPadding {
    padding: 3em 2em 4em 2em;
  }
 }

@media (min-width: 1200px) { 
  .duotoneWrapperPadding {
    padding: 3em 2em 4em 2em;
  }
 }

@media (min-width: 1400px) { 
  .duotoneWrapperPadding {
    padding: 5em 10% 10% 10%;
  }
 }

.duotoneWrapper {
  background-color: var(--duotone-base);
  display: flex;
  flex: 1 1 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.grid-item .duotoneWrapper>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duotoneLink:hover .duotoneWrapper img {
  filter: grayscale(100%) contrast(1) blur(var(--duotone-blur));
  transition: 300ms;
  mix-blend-mode: var(--duotone-fg-blend);
}

.duotoneWrapper img {
  flex: 1 0 100%;
  height: 100%;
  max-width: 100%;
  mix-blend-mode: normal;
  object-fit: cover;
  opacity: var(--duotone-opacity);
  position: relative;
  width: 100%;
}

.duotoneWrapper::before {
  background-color: none;
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: var(--duotone-fg-blend);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.duotoneLink:hover .duotoneWrapper::before {
  transition: 300ms;
  background-color: var(--duotone-foreground);
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: var(--duotone-fg-blend);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.duotoneLink {
  display: block;
}

.duotoneLink:hover .duotoneHeading {
  color: #dea032;
}

.duotoneLink:hover .duotoneSubHeading {
  color: #dea032;
}

.duotoneCoordinates {
  font-size: 9px;
}

.duotoneLink:hover .duotoneCoordinates {
  color: #dea032;
}

/*=============================================
*                10. Calendar                 *
=============================================*/

.tmbCalendarDate p {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1em;
  line-height: 0.9em;
  color: var(--bs-orange);
}

.tmbCalendarItemLocation p {
  text-transform: uppercase;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0px !important;
  font-size: 0.7em;
}

.tmbCalendarItemTitle h4, h1 {
  text-transform: none;
}

.tmbCalanderYear h1 {
  padding: 0px 0px 0px 0px;
}

@media (min-width: 1200px) {
  .tmbCalendarDate p {
    padding: 0px 0px 0px 0px;
  }

  .tmbCalendarItemLocation p {
    text-transform: uppercase;
    padding: 0px 0px 0px 0px;
  }

  .tmbCalendarItemLink p {
    text-transform: none;
    padding: 0px 0px 0px 0px;
    font-size: 0.8em;
  }

  .tmbCalendarItemTitle h3 {
    padding: 0px 200px 0px 0px;
  }
}

.tmbProgramme p {
  font-family: var(--bs-body-font-family);
  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--bs-gray);
  font-weight: 300;
  letter-spacing: 0.20em;
  padding-bottom: 0em;
  margin-bottom: 0px;
}

.tmbProgramme {
  border-left: 1px var(--bs-orange) solid;
}

/*=============================================
*                11. Background               *
=============================================*/

.wrapper {
  min-height: 460px;
  position: fixed;
  overflow: hidden;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -9999;
}

.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.scene {
  min-height: 460px;
  position: relative;
  overflow: hidden;
}

.background {
  background: no-repeat 50% 50%;
  bottom: -40%;
  background-size: cover;
  position: absolute;
  z-index: -9999;
  width: 140%;
  left: -20%;
  top: -20%;
}

/*=============================================
*                12. Accordions               *
=============================================*/

.accordion {
  --bs-accordion-color: none;
  --bs-accordion-bg: none;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: none;
  --bs-accordion-border-width: none;
  --bs-accordion-border-radius: none;
  --bs-accordion-inner-border-radius: none;
  --bs-accordion-btn-padding-x: 0.5rem;
  --bs-accordion-btn-padding-y: 0.5rem;
  --bs-accordion-btn-color: none;
  --bs-accordion-btn-bg: none;
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-btn-icon-transition: none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0.5rem;
  --bs-accordion-body-padding-y: 0.5rem;
  --bs-accordion-active-color: var(--bs-orange);
  --bs-accordion-active-bg: none;
}

.accordion-hover:hover {
  color: var(--bs-orange);
}

.accordion {
  padding-left: 0px;
}

.accordion-button {
  font-family: var(--bs-body-font-family);
  font-size: 1em;
  line-height: 1.7em;
  color: var(--bs-gray);
  font-weight: 300;
  letter-spacing: 0.20em;
}

.accordion-item p {
  padding-bottom: 1em;
}

/*=============================================
*               13. Navigation                *
=============================================*/

/********* Version 2 *********/

header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000; /* Increase z-index to be on top of the nav-menu */
  padding: 15px;
}

@media (min-width: 576px) {
  header {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  header {
    padding: 30px;
  }
}

@media (min-width: 992px) {
  header {
    padding: 40px;
  }
}

@media (min-width: 1200px) {
  header {
    padding: 50px;
  }
}

@media (min-width: 1400px) {
  header {
    padding: 50px;
  }
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 35px;
  height: 35px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger div {
  width: 35px;
  height: 5px;
  background-color: var(--bs-body-color);
  border-radius: 2px;
  transition: all 0.25s linear;
  position: relative;
  transform-origin: 1px;
}

.hamburger.active div {
  background-color: var(--bs-body-color);
}

.hamburger.active div:nth-child(1) {
  transform: rotate(45deg);
}

.hamburger.active div:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg);
}

.nav-menu {
  position: fixed;
  top: -100%; /* Start above the screen */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-dark);
  display: flex;
  justify-content: center;
  text-align: start;
  align-items: center;
  z-index: 998; /* Lower than the hamburger */
  opacity: 0; /* Start hidden */
}

.navContainer ul {
  height: 80vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* Distribute items evenly */
  padding: 50px;
  margin: 0;
  list-style-type: none;
  font-family: var(--bs-font-sans-serif);
  letter-spacing: 1px;
  line-height: 1em;
  text-transform: uppercase;
}

.navContainer li {
  font-size: 2em;
  line-height: 1em;
}

@media (min-width: 576px) {
  .navContainer li {
    font-size: 2em;
  }
}

@media (min-width: 768px) {
  .navContainer li {
    font-size: 3em;
  }
}

@media (min-width: 992px) {
  .navContainer li {
    font-size: calc(80vh / 10); /* Adjust the divisor to change the font size relative to the screen height */
  }
}

@media (min-width: 1200px) {
  .navContainer li {
    font-size: calc(80vh / 12); /* Adjust the divisor to change the font size relative to the screen height */
  }
}

@media (min-width: 1400px) {
  .navContainer li {
    font-size: calc(80vh / 14); /* Adjust the divisor to change the font size relative to the screen height */
  }
}

.navContainer li a {
  color: var(--bs-body-color);
}

.navContainer li a.currentPage {
  color: var(--bs-orange);
}

/********* Version 1 *********/

/* Nav */

.mbNavbar {
  z-index: 4;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  vertical-align: middle;
  background-color: var(--bs-dark);
  padding-top: 12px;
}

/* Top Menu */

.mbTopMenu {
  display: none !important;
  width: 100%;
}

@media (min-width: 768px) {
  .mbTopMenu {
    display: block !important;
  }
}

.mbTopMenu>ul>li>a {
  padding-top: 8px !important;
  color: #e8e8e8;
  font-size: 12px;
  font-weight: 300;
  font-family: 'Lato';
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mbTopMenu>ul>li>a:hover {
  color: #dea032;
}

.mbTopMenu>ul>li>a.active {
  color: #dea032 !important;
}

/* Offcanvas Menu */

.mbOffcanvasMenuContainer {
  display: none !important;
}

@media (max-width: 767.98px) {
  .mbOffcanvasMenuContainer {
    display: block !important;
    padding-left: 2em;
  }
}

.mbOffcanvasMenu {
  width: 100% !important;
  border: none !important;
  background-color: rgba(12, 12, 12, 1) !important;
}

.mbOffcanvasMenuItem>ul {
  padding-top: 30% !important;
}

.mbOffcanvasMenuItem>ul>li>a {
  padding-top: 8px !important;
  color: #e8e8e8;
  font-size: 32px;
  font-weight: 400;
  font-family: 'Lato';
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 575.98px) {
  .mbOffcanvasMenuItem>ul>li>a {
    font-size: 1em;
  }
 }

.mbOffcanvasMenuItem>ul>li>a:hover {
  color: #dea032;
}

.mbOffcanvasMenuItem>ul>li>a.active {
  color: #dea032 !important;
}

/* Toggle */

.mbToggle {
  float: inline-end;
  color: #e8e8e8;
}

#mbMenu-icon .line {
  background: #e8e8e8;
  margin: 8px 0 0 0;
  height: 2px;
  display: block;
  transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.line-1 {
  margin-top: 0;
  width: 20px;
}

.line-2 {
  width: 30px;
}

.line-3 {
  width: 10px;
}

#mbMenu-icon:hover .line-1 {
  width: 30px;
}

#mbMenu-icon:hover .line-2 {
  width: 30px;
}

#mbMenu-icon:hover .line-3 {
  width: 30px;
}

/*=============================================
*          14. Mountain page header           *
=============================================*/

/********* Version 1 *********/

/*
#mountainHeader {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
}

.mbBrandMountain h1 {
  font-family: var(--bs-font-sans-serif);
  font-size: 3.25em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: white;
  line-height: 1em;
}

.mbBrandMountain {
  z-index: 2;
  position: absolute;
  bottom: 30px;
  left: 50px;
}

@media (max-width: 575.98px) {
  .mbBrandMountain h1 {
    font-size: 2em;
  }
  .mbBrandMountain {
    bottom: 10px !important;
    left: 20px !important;
  }
}

.mountainFeaturePhoto {
  height: 100%;
}

.mountainFeaturePhoto img {
  width: 100%;
  height:100%;
  object-fit: cover;
}

.jumboMountainName {
  z-index: 2;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  padding: 0px 50px 50px 50px;
  text-transform: uppercase;
}

*/

/********* Version 2 *********/

.tmbMountainPageHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.tmbMountainPageHeader picture,
.tmbMountainPageHeader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmbBrandMountainPage h1 {
  font-family: var(--bs-font-sans-serif);
  font-size: 3.25em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: white;
  line-height: 1em;
}

.tmbBrandMountainPage {
  z-index: 2;
  position: absolute;
  bottom: 30px;
  left: 50px;
}

@media (max-width: 575.98px) {
  .tmbBrandMountainPage h1 {
    font-size: 2em;
  }
  .tmbBrandMountainPage {
    bottom: 10px !important;
    left: 20px !important;
  }
}

/*=============================================
*             15. Scroll gallery              *
=============================================*/

/*/ small screen /*/

.scrollGalleryVertical {
  overflow: hidden;
  width: 100vw;
}

.scrollGalleryVertical {
  width: 100%;
}

.scrollGalleryVertical picture {
  display: block;
  padding: 1em;
}

.scrollGalleryVertical img {
  object-fit: contain;
  width: 100%;
}

/*/ large screen /*/

.scrollGalleryWrapper {
  overflow: hidden;
  width: 100vw;
  display: none;
}

.scrollGallery {
  display: flex;
  height: 100vh;
  width: max-content; /* Ensure it expands to fit all images */
  align-items: center; /* Center the picture elements vertically */
}

.scrollGallery picture {
  display: block;
  margin-right: 3em;
  height: 70%;
}

.scrollGallery img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block; /* Ensures that the image doesn't inherit inline elements' space characteristics */
}

.scrollGallery picture:first-child img {
  padding-left: 3em;
}

.scrollGallery picture:last-child img {
  padding-right: 3em;
}

@media (min-width: 992px) {
  .scrollGalleryWrapper {
    display: block;
  }
  .scrollGalleryWrapperVertical {
    display: none;
  }
}