.fadeSlider {
  position: relative;
}

.fadeSlider__item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
}
.fadeSlider__item.-active {
  opacity: 1;
  visibility: visible;
}

.fadeSlider__wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #FFFFFF;
}
.fadeSlider__wrap > * {
  margin-left: 0;
  margin-right: 0;
}

.fadeSlider__nav {
  position: absolute;
  z-index: 1;
  bottom: 0.9375rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.fadeSlider__toggle {
  position: relative;
  height: 18px;
  width: 18px;
  margin: 0 2px;
}
.fadeSlider__toggle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75%;
  width: 75%;
  border-radius: 50%;
  opacity: 0.45;
  background: #FFFFFF;
  transition: background-color 0.3s ease-out, opacity 0.3s ease-out;
}
.fadeSlider__toggle.-active::after {
  opacity: 1;
  background: var(--color-primary);
}

.fadeSlider__arrow {
  display: none;
}

.fadeSlider__toggle.-dark:not(.-active)::after {
  background-color: #22262C;
}

.fadeSlider__toggle.-bright:not(.-active)::after {
  background: #FFFFFF;
}

.fadeSlider__item--text-dark {
  color: #22262C;
}

.fadeSlider__item--text-bright {
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .fadeSlider__arrow {
    display: flex;
  }
  .fadeSlider__toggle {
    height: 1.375rem;
    width: 1.375rem;
    margin: 0 0.125rem;
  }
  body.--arrows-modern .fadeSlider__arrow.-dark {
    color: #22262C;
  }
  body.--arrows-modern .fadeSlider__arrow.-bright {
    color: #FFFFFF;
  }
  body.--arrows-modern .fadeSlider:hover .fadeSlider__arrow.-dark {
    color: #22262C;
  }
  body.--arrows-modern .fadeSlider:hover .fadeSlider__arrow.-bright {
    color: #FFFFFF;
  }
  body.--arrows-square .fadeSlider__arrow.-dark,
  body.--arrows-circle .fadeSlider__arrow.-dark {
    background-color: rgba(34, 38, 44, 0.5);
    color: #FFFFFF;
  }
  body.--arrows-square .fadeSlider__arrow.-bright,
  body.--arrows-circle .fadeSlider__arrow.-bright {
    background-color: rgba(255, 255, 255, 0.5);
    color: #22262C;
  }
  body.--arrows-square .fadeSlider__arrow.-dark:hover,
  body.--arrows-square .fadeSlider__arrow.-dark:not(.-disable):focus,
  body.--arrows-square .fadeSlider__arrow.-dark:not(.-disable):hover,
  body.--arrows-circle .fadeSlider__arrow.-dark:hover,
  body.--arrows-circle .fadeSlider__arrow.-dark:not(.-disable):focus,
  body.--arrows-circle .fadeSlider__arrow.-dark:not(.-disable):hover {
    background-color: #22262C;
    color: #FFFFFF;
  }
  body.--arrows-square .fadeSlider__arrow.-bright:hover,
  body.--arrows-square .fadeSlider__arrow.-bright:not(.-disable):focus,
  body.--arrows-square .fadeSlider__arrow.-bright:not(.-disable):hover,
  body.--arrows-circle .fadeSlider__arrow.-bright:hover,
  body.--arrows-circle .fadeSlider__arrow.-bright:not(.-disable):focus,
  body.--arrows-circle .fadeSlider__arrow.-bright:not(.-disable):hover {
    background-color: #FFFFFF;
    color: #22262C;
  }
}
@media (min-width: 1000px) {
  .fadeSlider__nav {
    bottom: 1.875rem;
  }
}
body.--arrows-square .fadeSlider__arrow.-dark,
body.--arrows-circle .fadeSlider__arrow.-dark {
  background-color: rgba(34, 38, 44, 0.9);
}
/*# sourceMappingURL=fade_slider.css.map */