:root {
  --arrows-color: var(--color-primary);
  --arrows-bg-color: var(--color-white);
}

.arrow-button-up,
.arrow-button-down {
  position: relative;
  padding: 5px;
  margin: 30px auto;
  background: var(--arrows-bg-color);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: all 0.2s linear;
}

.arrow-button-down:hover {
  transform: translate3d(0, 10px, 0);
}

.arrow-button-up:hover {
  transform: translate3d(0, -10px, 0);
}

.arrow-button-up::after,
.arrow-button-down::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-button-up::after {
  top: 20px;
  transform: rotate(45deg);
}

.arrow-button-down::after {
  top: 10px;
  transform: rotate(225deg);
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-right,
.long-arrow-right {
  transform: rotate(135deg);
}

.arrow-left,
.long-arrow-left {
  transform: rotate(-45deg);
}

.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom {
  width: 0;
  height: 0;
  margin: 30px auto;
}

.triangle-left,
.triangle-right {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.triangle-top,
.triangle-bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

.triangle-right {
  border-left: 30px solid var(--arrows-color);
}

.triangle-left {
  border-right: 30px solid var(--arrows-color);
}

.triangle-top {
  border-bottom: 30px solid var(--arrows-color);
}

.triangle-bottom {
  border-top: 30px solid var(--arrows-color);
}

:root {
  --swiper-theme-color: var( --color-primary);
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 2px;
  --swiper-pagination-bullet-size: 3px;
  --swiper-pagination-bullet-width: 30px;
  --swiper-pagination-bullet-height: 3px;
  --swiper-pagination-bullet-inactive-color: var( --color-white);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  --swiper-pagination-bullet-border-radius: var(--swiper-pagination-bullet-size);
  --swiper-pagination-width: var(--container--max-width,100%);
  --swiper-pagination-align: start;
  --swiper-pagination-margin-x: auto;
  --swiper-pagination-margin-y: 0;
  --swiper-pagination-padding-y: .5rem;
  --swiper-pagination-padding-x: 0;
}

.swiper-container {
  margin: 0 auto;
}

.swiper-button-prev, .swiper-button-next {
  text-rendering: auto;
  outline: none;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  --swiper-navigation-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction,
.swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  text-align: var(--swiper-pagination-align);
  width: 100%;
  width: var(--swiper-pagination-width);
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-top: var(--swiper-pagination-padding-y);
  padding-bottom: var(--swiper-pagination-padding-y);
  padding-left: 0;
  padding-right: 0;
  padding-left: var(--swiper-pagination-padding-x);
  padding-right: var(--swiper-pagination-padding-x);
  margin-top: 0;
  margin-bottom: 0;
  margin-top: var(--swiper-pagination-margin-y);
  margin-bottom: var(--swiper-pagination-margin-y);
  margin-left: auto;
  margin-right: auto;
  margin-left: var(--swiper-pagination-margin-x);
  margin-right: var(--swiper-pagination-margin-x);
}

.swiper-pagination-bullet {
  transition: width 0.2s ease-in-out;
}

.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 90px;
}

/**** hp slider ***/
#swiper-slider-home-block-1 {
  --bandeau-w: max(60px, min(10vw, 150px));
  --bandeau-a: 22.5deg;
  --bandeau-off7: calc( var(--bandeau-w) * sin(var(--bandeau-a)) + 20px);
}
#swiper-slider-home-block-1::after {
  content: "";
  width: var(--bandeau-w);
  height: 100%;
  position: absolute;
  right: 0;
  bottom: calc(var(--bandeau-off7) * -1);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-primary)), color-stop(30%, var(--color-primary)), to(var(--color-primary-tr)));
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary) 30%, var(--color-primary-tr) 100%);
  transform: rotate(var(--bandeau-a));
  z-index: 1;
}
#swiper-slider-home-block-1 .swiper-button-prev, #swiper-slider-home-block-1 .swiper-button-next {
  display: none;
}
/*# sourceMappingURL=libraries.css.map */