/*
******************************
** Carousel Custom Styles
******************************
*/
/*
******************************
** Media Query Mixin
******************************
*/
/* ***** Carousel ***** */
.f-carousel {
  height: 370px;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .f-carousel {
    height: calc(100vh - 130px);
  }
}
@media screen and (min-width:768px) {
  .f-carousel.slider-small {
    height: 550px;
  }
}
.f-carousel.slider-small .text {
  bottom: 45px;
}
.f-carousel .signet {
  width: 250px;
  position: absolute;
  right: 15px;
  bottom: 0;
  opacity: 0.4;
  z-index: 90;
}
@media screen and (min-width: 1021px) {
  .f-carousel .signet {
    opacity: 1;
  }
}
@media screen and (min-width: 1401px) {
  .f-carousel .signet {
    right: 150px;
    width: 400px;
  }
}
@media screen and (min-width: 1650px) {
  .f-carousel .signet {
    width: 500px;
  }
}
.f-carousel .f-carousel__slide {
  height: 100%;
}
.f-carousel .image {
  height: 100%;
}
.f-carousel .image:after {
  content: "";
  width: 100%;
  height: 400px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--color-minor-rgb), 0) 0%, var(--color-darkest) 100%);
}
.f-carousel .text {
  position: absolute;
  bottom: 100px;
  padding: 0 var(--width-margin);
  color: var(--color-minor);
  font-size: var(--fontsize-m);
  line-height: 1em;
  z-index: 100;
}
@media screen and (min-width:768px) {
  .f-carousel .text {
    font-size: var(--fontsize-xl);
  }
}
@media screen and (min-width: 1021px) {
  .f-carousel .text {
    font-size: var(--fontsize-3xl);
  }
}
@media screen and (min-width: 1850px) {
  .f-carousel .text {
    width: var(--width-header);
    left: 50%;
    margin-left: calc(-1 * var(--width-header) / 2);
  }
}

/* ***** Prev + Next Buttons ***** */
.f-carousel__nav .f-button {
  background: rgba(var(--color-minor-rgb), 0.7);
  border-radius: 30px;
}
.f-carousel__nav .f-button:hover {
  background: var(--color-minor);
}
.f-carousel__nav .f-button svg {
  stroke: var(--color-main);
}

/* ***** Dot Navigation ***** */
.f-carousel__dots {
  bottom: 30px;
}
.f-carousel__dots .f-carousel__dot {
  opacity: 1 !important;
  margin-bottom: 0;
}
.f-carousel__dots .f-carousel__dot:after {
  background: var(--color-minor);
}
.f-carousel__dots .f-carousel__dot:hover:after {
  background: var(--color-highlight);
}
.f-carousel__dots .f-carousel__dot.is-selected:after {
  background: var(--color-highlight);
}