#xbase-page-front-fixed-image {
  height: auto;
  background-size: cover;
  background-position: top center;
  overflow: auto;
  margin-bottom: 20px;
}

#xbase-page-front-fixed-image-caption {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 20px auto 10px;
  width: 75%;
  background-color: #ffffff;
  background-color: rgb(255,255,255,0.6);

  /* Frosted glass effect */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    /* Bottom and right depth effect */
    inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
    /* Top and left depth effect */
    inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
    /* Shadow effect */
    3px 2px 10px rgba(0, 0, 0, 0.25),
    /* Short subsurface effect */
    inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
    /* Long subsurface effect */
    inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
  border-radius: 5px;
  overflow: hidden;

}

#xbase-page-front-fixed-image-caption-preamble,
#xbase-page-front-fixed-image-caption-postamble {
  font-family: var(--FONT-FAMILY-TITLE-SECONDARY);
  font-size: 3vw;
  color: #000000;
  text-align: center;
}

#xbase-page-front-fixed-image-caption-title {
  font-family: var(--FONT-FAMILY-TITLE-SECONDARY);
  font-weight: 600;
  font-size: 4vw;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
}


#carousel-front-page {
  height: auto;
}

.carousel-overlay {
  background: url(../images/overlay.png);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 100;
}

.carousel-caption {
  display: block !important;
  text-align: center;
  color: #fff;
}

.carousel-caption .carousel-caption-title {
  text-transform: uppercase;
  font-family: var(--FONT-FAMILY-TITLE-SECONDARY);
  font-size: var(--FONT-SIZE-TITLE-SECONDARY-SMALL);
  font-weight: var(--FONT-WEIGHT-TITLE-SECONDARY-BOLD);
  color: #ffffff;
  text-shadow: 1px 0 1px #333333, 0 -1px 1px #333333, 0 1px 1px #333333, -1px 0 1px #333333;
}

.carousel-caption .carousel-caption-link {
  background: rgba(255,255,255,0.2);
  display: block;
  text-transform: uppercase;
  color: #ffffff;
  width: auto;
  border: 1px solid #ffffff;
  padding: 0px;
  margin: 0px auto;
  font-family: var(--FONT-FAMILY-TITLE-SECONDARY);
  font-size: var(--FONT-SIZE-TITLE-SECONDARY-EXTRA-SMALL);
  font-weight: var(--FONT-WEIGHT-TITLE-SECONDARY-BOLD);
  color: #ffffff;
  text-shadow: 1px 0 1px #333333, 0 -1px 1px #333333, 0 1px 1px #333333, -1px 0 1px #333333;
}

.carousel-caption .carousel-caption-link a {
  color: #ffffff;
  display: table;
  width: 100%;
}

.carousel-caption,
.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
  z-index: 200;
}



/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

/*
  #xbase-page-front-fixed-image-caption {
    margin: 40px auto 15px;
  }

  .carousel-caption .carousel-caption-title {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-LARGE);
  }

  .carousel-caption .carousel-caption-link {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-SMALL);
    padding: 5px 0px;
    margin: 10px auto;
  }
*/

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

/*  
  #xbase-page-front-fixed-image-caption {
    margin: 60px auto 20px;
  }
*/

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

/*
  .carousel-caption .carousel-caption-title {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-EXTRA-LARGE);
  }

  .carousel-caption .carousel-caption-link {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-NORMAL);
  }
*/

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

/*
  .carousel-caption .carousel-caption-title {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-EXTREME);
  }

  .carousel-caption .carousel-caption-link {
    font-size: var(--FONT-SIZE-TITLE-SECONDARY-LARGE);
  }
*/

}