/* ------------------------------------ *\
  CONTENTS
\* ------------------------------------ */

/**
 * CONTENTS..............You’re reading it!
 * SLIDER STYLE ............................
 * MEDIA QUERIES ..........................
*/

/* ------------------------------------ *\
  ==SLIDER STYLE
\* ------------------------------------ */
.paragraph.paragraph-slider {
  max-width: calc(100vw - 20rem);
  margin: 1rem;
}

.paragraph-slider .slick-slider {
  position: relative;
}

.paragraph-slider .slick-slider .slick-arrow {
  position: absolute;
  top: 99%;
  color: var(--bs-blue);
  cursor: pointer;
  font-size: 1.25rem;
}

.paragraph-slider .slick-slider .next-arrow {
  right: -1rem;
  top: 45%;
}

.paragraph-slider .slick-slider .prev-arrow {
  left: -1rem;
  top: 45%;
}

.paragraph-slider .slick-slider ul.slick-dots {
  top: 98%;
}

.paragraph-slider .slick-slider .slick-dots li button .slick-dot-icon {
  opacity: 1;
}

.paragraph-slider
  .slick-slider
  .slick-dots
  li:not(.slick-active)
  button
  .slick-dot-icon:before {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 1px var(--bs-blue);
  color: transparent;
}

.paragraph-slider
  .slick-slider
  .slick-dots
  li.slick-active
  button
  .slick-dot-icon,
.paragraph-slider
  .slick-slider
  .slick-dots
  li
  button:focus
  .slick-dot-icon:before {
  color: var(--bs-blue);
}

.paragraph-slider
  .slick-slider
  .slick-dots
  li.slick-active
  button
  .slick-dot-icon:before {
  margin-top: 0;
  font-size: 1rem;
}

/* ------------------------------------ *\
  ==MEDIA QUERIES
\* ------------------------------------ */
@media screen and (max-width: 991.98px) {
  .paragraph.paragraph-slider {
    max-width: calc(100vw - 6rem);
  }
}