/* Feature - Items */
.feature-items {
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  float: none;
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 4;
  padding: 0 0 0 0;
  margin-top: -150px;
  margin-left: auto;
  margin-right: auto;

  .container.fourcol-25-25-25-25 {
    max-width: 1050px!important;
    padding-left: 0!important;
    padding-right: 0!important;
  }

  .row {
    padding: 0;
    margin: 0 -15px -30px -15px;

    > div {
      padding: 0 15px 30px 15px;
      margin: 0;
    }
  }

  @include media-breakpoint-up(md) {
    max-width: 1050px;
  }

  @include media-breakpoint-down(xl) {
    margin-top: -100px;
  }

  @include media-breakpoint-down(md) {
    margin-top: -85px;

    .row {
      margin: 0 -7px -14px -7px;

      > div {
        padding: 0 5px 14px 5px;
      }
    }

    .iconbox {
      font-size: 13px;
      line-height: 17px;
      padding: 20px 10px;

      @include media-breakpoint-up(xl) {
        padding: 30px 10px;
      }

      .icon {
        img {
          height: 38px;
        }
      }

      .iconbox-headline {
        font-size: $font-size-14;
      }
    }
  }
  @include media-breakpoint-down(sm) {
    margin-top: 0px !important;
  }
}

.iconbox {
  text-align: center;
  width: 100%;
  height: 100%;
  float: left;
  font-weight: $font-weight-bold;
  font-size: $font-size-18;
  color: $primary-color;
  line-height: 22px;
  text-decoration: none;
  background: $tertiary-color;
  overflow: hidden;
  padding: 45px 20px 35px 20px;
  border: 3px solid $secondary-color;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &.round {
    width: 240px;
    height: 240px;
    max-width: 100%;
    border-radius: 360px;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @include media-breakpoint-down(xl) {
      width: 20vw;
      height: 20vw;
    }
    @include media-breakpoint-down(md) {
      width: 43vw;
      height: 43vw;
    }
  }

  &.transparent {
    background: transparent !important;
  }

  .value {
    font-size: $font-size-24;
    font-weight: $font-weight-bold;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: inherit;
  }

  .icon {
    line-height: 1em;
    height: 50px;
    position: relative;

    img {
      height: 50px;
      filter: invert(1);
    }

    .icon-image {
      height: 45px;
      width: 45px;
      background: $primary-color;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  h3 {
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
    text-transform: uppercase;
    padding-bottom: 4px;

    &:last-child {
      padding-bottom: 0;
    }
  }
}

.iconbox-link-wrapper {
  &:hover,
  &:focus,
  &:active {
    .iconbox {
      background: $quaternary-color;
      box-shadow: $box-shadow-box;

      * {
        color: white;
      }
    }
  }
}