/* Frontpage slider ------------------------- */

.slider {
  position: relative;
}

.slider__viewport {
  height: calc(100vh - 3rem * 2);
  overflow: hidden;
  position: relative;
}

@media all and (max-width: 56.25em) {
  .slider__viewport {
    overflow-y: scroll;
    height: calc(100vh - 3rem);
  }
}

.slider__down {
  background: rgba(42, 46, 48, 0);
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.5s cubic-bezier(0, 0.99, 0.99, 1);
  transition: all 0.5s cubic-bezier(0, 0.99, 0.99, 1);
}

@media all and (min-width: 56.25em) {
  .slider__down {
    width: 100%;
  }
}

@media all and (max-width: 56.25em) {
  .slider__down {
    height: fit-content;
  }
}

.slider__down > img {
  height: calc(100vh - 3rem * 2);
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

@media all and (max-width: 56.25em) {
  .slider__down > img {
    height: auto;
    width: 100%;
    margin-bottom: 0.5em;
  }
}

.slider__down.no-animation {
  -webkit-transition: none 0.5s ease-in-out;
  transition: none 0.5s ease-in-out;
}

.slider__up {
  display: none !important;
}

/* Dots pagination ------------------------- */

.slider-dots {
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media all and (min-width: 56.25em) {
  .slider-dots {
    position: absolute;
    width: 6px;
  }
}

@media all and (max-width: 56.25em) {
  .slider-dots {
    display: none !important;
  }
}

.slider-dots--invisible {
  visibility: hidden;
}

@media all and (min-width: 56.25em) {
  .slider-dots--right {
    right: calc(-1.5rem - 6px);
    top: calc(50% - 1.5rem);
    -webkit-transform: translate(0, calc(100% - 1.5rem));
    transform: translate(0, calc(100% - 1.5rem));
  }
}

@media all and (min-width: 56.25em) {
  .slider-dots--left {
    left: calc(-1.5rem - 6px);
    top: calc(50% - 1.5rem);
    -webkit-transform: translate(0, calc(50% - 1.5rem));
    transform: translate(0, calc(50% - 1.5rem));
  }
}

.slider-dots__item {
  background: #838793 !important;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 6px;
  opacity: 0.25;
  margin: calc(3rem / 2 - 6px) 6px;
  padding: 0;
  text-indent: -99999rem;
  width: 6px;
}

@media all and (min-width: 56.25em) {
  .slider-dots__item {
    display: block;
    margin: 6px 0;
  }
}

.slider-dots__item.is-active {
  opacity: 1;
}

/* Preloading ------------------------- */

.zoomIn {
  -webkit-animation: zoomIn 0.8s;
  animation: zoomIn 0.8s;
}

.js-loading .zoomIn {
  opacity: 0;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.88, 0.88, 0.88);
    transform: scale3d(0.88, 0.88, 0.88);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.88, 0.88, 0.88);
    transform: scale3d(0.88, 0.88, 0.88);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.slider-preloader {
  color: #fff;
  display: none;
  left: 50%;
  position: fixed;
  text-indent: -9999999rem;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.slider-preloader:before {
  -webkit-animation: long-scaling 0.5s infinite alternate;
  animation: long-scaling 0.5s infinite alternate;
  background: #4e5360;
  content: "";
  display: block;
  height: 1px;
  left: -5rem;
  position: absolute;
  width: 10rem;
  top: 0;
}

@-webkit-keyframes long-scaling {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes long-scaling {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.js-loading .slider-preloader {
  display: block;
}