/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/**
 * SLIDER
 *
 * Style for slider components
 * Configurations and overrides of Slick
*/
/* ------------------------------------ *\
  #SLIDER
\* ------------------------------------ */
.slick-slider.opd-slider {
  --_slider-arrow-size: var(--slider-arrow-size, 2.1875rem);
  --_slider-arrow-top-margin: var(--slider-arrow-top-margin, " ");
  --_slider-arrow-text-size: var(--slider-arrow-text-size, 2rem);
  --_slider-arrow-color: var(--slider-arrow-color, hsl(214deg, 13%, 24%));
  --_slider-arrow-color-focus: var(--slider-arrow-color-focus, #ffffff);
  --_slider-arrow-prev-position: var(--slider-arrow-prev-position, " ");
  --_slider-arrow-next-position: var(--slider-arrow-next-position, " ");
  --_slider-slide-gap: var(--slider-slide-gap, " ");
  margin-bottom: 0;
}
.slick-slider.opd-slider .slick-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--_slider-arrow-size);
  height: var(--_slider-arrow-size);
  margin-top: var(--_slider-arrow-top-margin);
  padding: 0;
  z-index: 1;
  font-size: var(--_slider-arrow-text-size);
  color: var(--_slider-arrow-color);
}
.slick-slider.opd-slider .slick-arrow [class*=-icon], .slick-slider.opd-slider .slick-arrow::before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 1;
}
.slick-slider.opd-slider .slick-arrow:hover, .slick-slider.opd-slider .slick-arrow:focus {
  background-color: #752e4a;
  color: var(--_slider-arrow-color-focus);
}
.slick-slider.opd-slider .slick-arrow:hover [class*=-icon], .slick-slider.opd-slider .slick-arrow:focus [class*=-icon] {
  /* override Slick style */
  color: var(--_slider-arrow-color-focus);
  font-size: var(--_slider-arrow-text-size);
  margin-left: 0;
}
.slick-slider.opd-slider .slick-arrow.slick-disabled {
  opacity: 0.6;
}
.slick-slider.opd-slider .slick-prev {
  left: var(--_slider-arrow-prev-position);
}
.slick-slider.opd-slider .slick-next {
  right: var(--_slider-arrow-next-position);
}
.slick-slider.opd-slider .slick-prev-icon::before,
.slick-slider.opd-slider .slick-next-icon::before {
  font-family: "Font Awesome 6 Pro" !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  opacity: 1;
}
.slick-slider.opd-slider .slick-prev-icon::before {
  content: "\f053";
}
.slick-slider.opd-slider .slick-next-icon::before {
  content: "\f054";
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */