.services {
  padding: var(--p) 0;
  background: #e6007e;
  background: -moz-linear-gradient(
    left,
    #b4005a 0%,
    #e6007e 35%,
    #e6007e 65%,
    #b4005a 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0%, #b4005a),
    color-stop(35%, #e6007e),
    color-stop(65%, #e6007e),
    color-stop(100%, #b4005a)
  );
  background: -webkit-linear-gradient(
    left,
    #b4005a 0%,
    #e6007e 35%,
    #e6007e 65%,
    #b4005a 100%
  );
  background: -o-linear-gradient(
    left,
    #b4005a 0%,
    #e6007e 35%,
    #e6007e 65%,
    #b4005a 100%
  );
  background: -ms-linear-gradient(
    left,
    #b4005a 0%,
    #e6007e 35%,
    #e6007e 65%,
    #b4005a 100%
  );
  background: linear-gradient(
    to right,
    #b4005a 0%,
    #e6007e 35%,
    #e6007e 65%,
    #b4005a 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6007e',endColorstr='#e6007e',GradientType=1);

  & h2 {
    color: rgb(var(--c-neutral-lightest));
  }

  & .slider__wrap {
    padding: 0 50px;
    position: relative;

    & .swiper {
      max-width: 1440px;
    }
  }

  & div[role="button"] {
    background-color: rgb(var(--c-primary));
    width: 40px;
    height: 60px;
  }

  & .swiper-button-prev {
    left: 0;
  }

  & .swiper-button-next {
    right: 0;
  }

  & .service__item {
    text-align: center;
    color: rgb(var(--c-neutral-lightest));

    & h3 {
      color: rgb(var(--c-neutral-lightest));
    }

    & a {
      color: rgb(var(--c-neutral-lightest));
      position: relative;
    }

    & a::after {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
    }

    & .service__icon {
      box-shadow: inset rgba(var(--c-neutral-lightest), 0.2) 0 0 0 3px;
      position: relative;
      width: 68px;
      height: 68px;
      line-height: 68px;
      margin: 0 0 1em 0;
      display: flex;
      justify-self: center;

      & .font__fas {
        font-size: var(--f-size-l-5);
        line-height: 68px;
        display: block;
        position: absolute;
        z-index: 5000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        color: rgb(var(--c-neutral-lightest));
      }
    }

    & .service__icon:before {
      background-color: rgb(var(--c-neutral-lightest));
      transition-duration: 0.35s;
      transform: scale(0);
      content: "";
      display: block;
      position: absolute;
      z-index: 5000;
      top: 7px;
      left: 7px;
      width: 54px;
      height: 54px;
    }
  }
}

.page.-ccm .services {
  background: #5173a3;
  background: -moz-linear-gradient(
    left,
    #134174 0%,
    #5173a3 35%,
    #5173a3 65%,
    #134174 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0%, #134174),
    color-stop(35%, #5173a3),
    color-stop(65%, #5173a3),
    color-stop(100%, #134174)
  );
  background: -webkit-linear-gradient(
    left,
    #134174 0%,
    #5173a3 35%,
    #5173a3 65%,
    #134174 100%
  );
  background: -o-linear-gradient(
    left,
    #134174 0%,
    #5173a3 35%,
    #5173a3 65%,
    #134174 100%
  );
  background: -ms-linear-gradient(
    left,
    #134174 0%,
    #5173a3 35%,
    #5173a3 65%,
    #134174 100%
  );
  background: linear-gradient(
    to right,
    #134174 0%,
    #5173a3 35%,
    #5173a3 65%,
    #134174 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5173a3',endColorstr='#5173a3',GradientType=1);
}

/* Slider Hover Icon */
.service__icon .font__fas {
  color: rgb(var(--c-neutral-lightest));
  font-size: 267%;
  line-height: 68px;
  display: block;
  position: absolute;
  z-index: 5000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.service__icon,
.service__icon .font__fas {
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.service__icon {
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.2) 0 0 0 3px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.2) 0 0 0 3px;
  box-shadow: inset rgba(255, 255, 255, 0.2) 0 0 0 3px;
  display: block;
  position: relative;
  width: 68px;
  height: 68px;
  line-height: 68px;
  margin: 0 0 1em 0;
}

.service__icon:before {
  background-color: rgb(var(--c-neutral-lightest));
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  content: "";
  display: block;
  position: absolute;
  z-index: 5000;
  top: 7px;
  left: 7px;
  width: 54px;
  height: 54px;
}

@media (hover: hover) {
  .service__item:hover .service__icon {
    -webkit-box-shadow: inset rgb(var(--c-neutral-lightest)) 0 0 0 5px;
    -moz-box-shadow: inset rgb(var(--c-neutral-lightest)) 0 0 0 5px;
    -ms-box-shadow: inset rgb(var(--c-neutral-lightest)) 0 0 0 5px;
    -o-box-shadow: inset rgb(var(--c-neutral-lightest)) 0 0 0 5px;
    box-shadow: inset rgb(var(--c-neutral-lightest)) 0 0 0 5px;
  }

  .service__item:hover .service__icon .font__fas {
    color: rgb(var(--c-primary));
  }

  .service-subtitle {
    font-weight: normal;
  }

  .service__item:hover .service__icon:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  .swiper.-services a:hover {
    color: rgb(var(--c-neutral-lightest));
  }
}


@media (min-width: 640px) {
  .services {
    & .service__item {
      text-align: left;

      & a::after {
        left: 72px;
        transform: none;
      }

      & a[href^="https://www.gmvd.de"][href$=".pdf"]::after
      {
        display: none;
      }

      & .service__icon {
        justify-self: flex-start;
      }
    }
  }
}