/* Header Slider */
.headerslide {
  position: relative;
  z-index: 10;
  padding: 0;
  height: 100%;
  max-height: 830px;
  width: 100%;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.headerslide-slide.active {
  top: 100%;
  position: absolute;
  height: 100%;
  width: 100%;
}

.headerslide-slide.active {
  animation: move-top 7s ease none;
}

.headerslide-slide.active img {
  animation: zoom-out 7s ease none;
}

.headerslide-slide.active.start {
  animation: move-top-start 7s ease none;
}

.headerslide-slide.active.start img {
  animation: zoom-out-start 7s ease none;
}

@keyframes move-top-start {
  0% {
    top: 0;
  }
  90% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}

@keyframes zoom-out-start {
  0% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1, 1);
  }
  90% {
    transform: scale(0.7, 0.7);
  }
  100% {
    transform: scale(0.7, 0.7);
  }
}

@keyframes move-top {
  0% {
    top: 100%;
  }
  10% {
    top: 0;
  }
  85% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}

@keyframes zoom-out {
  0% {
    transform: scale(0.7, 0.7);
  }
  10% {
    transform: scale(0.7, 0.7);
  }
  30% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1, 1);
  }
  90% {
    transform: scale(0.7, 0.7);
  }
  100% {
    transform: scale(0.7, 0.7);
  }
}

/* Service Slider */
.slider.-service .slider__iteminner {
  background: rgb(var(--c-primary));
  padding: 2rem;
  color: rgb(var(--c-neutral-lightest));
}

.service__text .-likeh3,
.slider.-service .slider__iteminner a {
  color: rgb(var(--c-neutral-lightest));
}

div.service__icon {
  margin-bottom: 1rem;
  height: 50px;
}

div.service__icon > span {
  height: 50px;
  width: 50px;
}

div.service__icon .font__far,
div.service__icon .font__fal,
div.service__icon .font__fab,
div.service__icon .font__fas {
  font-size: 45px;
}

.slider.-service {
  display: grid;
  grid-template-columns: 4% 80px 80px 1fr 4%;
  grid-template-rows: min-content 80px;
  grid-gap: var(--g-gap) var(--g-gap-s);
  overflow: hidden;
}

.slider.-service .slider__itemwrap {
  grid-column: 2 / 5;
  grid-row: 1;
  overflow: visible;
}

.slider.-service > div.slider__prev {
  grid-column: 2;
  grid-row: 2;
  background: rgb(var(--c-neutral));
  text-align: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color ease 0.5s;
}

.slider.-service > div.slider__next {
  grid-column: 3;
  grid-row: 2;
  background: rgb(var(--c-neutral));
  text-align: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color ease 0.5s;
}

.slider.-service > div.slider__prev:hover,
.slider.-service > div.slider__next:hover {
  background: rgb(var(--c-primary));
}

.slider.-service > div.slider__prev .font__far,
.slider.-service > div.slider__next .font__far {
  color: rgb(var(--c-neutral-lightest));
  font-size: 35px;
  display: grid;
  height: 100%;
  align-items: center;
}

.slider.-service > div.slider__prev.disabled,
.slider.-service > div.slider__next.disabled {
  display: block;
  cursor: pointer;
  background: rgb(var(--c-neutral-lighter));
}

.page .slider.service__image.-hover,
.page .service__item:hover .service__image.-hover {
  display: none;
}

.page .slider.service__image.-nohover,
.page .service__item:hover .service__image.-nohover {
  display: block;
}


@media (min-width: 1580px) {
  .slider.-service {
    grid-template-columns: 1fr 80px 80px 1280px 1fr;
  }
}