/**
 * Default Variables.
 *
 * Modify this file to provide default Bootstrap Framework variables. The
 * Bootstrap Framework will not override any variables defined here because it
 * uses the `!default` flag which will only set their default if not already
 * defined here.
 *
 * You can copy existing variables directly from the following file:
 * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss
 */
.paragraph {
  overflow: hidden;
}

.blog-slider-swiper {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}
.blog-slider-swiper .swiper-slide {
  border-radius: 20px;
  margin-right: 24px;
  overflow: hidden;
  padding: 25px;
  width: 254px;
}
@media (min-width: 768px) {
  .blog-slider-swiper .swiper-slide {
    width: 292px;
  }
}
@media (min-width: 1200px) {
  .blog-slider-swiper .swiper-slide {
    width: 370.3333px;
  }
}
.variant-1 .blog-slider-swiper .swiper-slide, .variant-2 .blog-slider-swiper .swiper-slide {
  background: #f5f5f4;
}
.variant-1 .blog-slider-swiper .swiper-slide:nth-child(4n+1) h3, .variant-2 .blog-slider-swiper .swiper-slide:nth-child(4n+1) h3 {
  color: #6dfdaf;
}
.variant-1 .blog-slider-swiper .swiper-slide:nth-child(4n+2) h3, .variant-2 .blog-slider-swiper .swiper-slide:nth-child(4n+2) h3 {
  color: #ffa8e1;
}
.variant-1 .blog-slider-swiper .swiper-slide:nth-child(4n+3) h3, .variant-2 .blog-slider-swiper .swiper-slide:nth-child(4n+3) h3 {
  color: #3ef0dd;
}
.variant-1 .blog-slider-swiper .swiper-slide:nth-child(4n+4) h3, .variant-2 .blog-slider-swiper .swiper-slide:nth-child(4n+4) h3 {
  color: #beb2ad;
}
.variant-2 .blog-slider-swiper .swiper-slide {
  background: #000;
}
.variant-3 .blog-slider-swiper .swiper-slide:nth-child(4n+1) {
  background: #6dfdaf;
}
.variant-3 .blog-slider-swiper .swiper-slide:nth-child(4n+2) {
  background: #ffa8e1;
}
.variant-3 .blog-slider-swiper .swiper-slide:nth-child(4n+3) {
  background: #3ef0dd;
}
.variant-3 .blog-slider-swiper .swiper-slide:nth-child(4n+4) {
  background: #beb2ad;
}
.blog-slider-swiper .swiper-slide:first-child {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .blog-slider-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 750px + 30px) / 2);
  }
}
@media (min-width: 992px) {
  .blog-slider-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 970px + 30px) / 2);
  }
}
@media (min-width: 1200px) {
  .blog-slider-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 1170px + 30px) / 2);
  }
}
@media (min-width: 1270px) {
  .blog-slider-swiper .swiper-slide:first-child {
    margin-left: calc((100vw - 1230px + 30px) / 2);
  }
}

.blog-slider-swiper-button-prev {
  display: none;
  height: 45px;
  left: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 45px;
  z-index: 1;
}
@media (min-width: 992px) {
  .blog-slider-swiper-button-prev {
    left: 22px;
  }
  .blog-slider-swiper-button-prev.show-prev {
    display: block;
  }
}
@media (min-width: 1200px) {
  .blog-slider-swiper-button-prev {
    height: 110px;
    width: 110px;
  }
}

.blog-slider-swiper-button-next {
  height: 45px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  z-index: 1;
}
@media (max-width: 992px) {
  .blog-slider-swiper-button-next {
    display: none;
  }
}
@media (min-width: 992px) {
  .blog-slider-swiper-button-next {
    right: 22px;
  }
}
@media (min-width: 1200px) {
  .blog-slider-swiper-button-next {
    height: 110px;
    width: 110px;
  }
}