.fact-row
  background: white
  position: relative

  .content-container

    ul
      +flex(space-between, center)
      position: relative
      height: 200px

      li
        border-right: 1px solid $greyBackground
        text-align: center
        height: 100%
        opacity: 0.7
        box-sizing: border-box
        background-color: transparent
        transition: all 0.3s

        &:hover
          background-color: $semiLightGrey

        a
          display: block
          padding: 40px 0 20px

        p
          padding: 0 10px
          +font-default(15px, 18px)
        span
          display: block
          margin: 0 auto 35px

        &:last-of-type
          border-right: none

        &.happy-customers
          span
            +sprite(-470px 0, 78px, 41px)

        &.delivery
          span
            +sprite(-550px 0, 44px, 42px)

        &.measure
          span
            +sprite(-500px -45px, 47px, 47px)

        &.isolating
          span
            +sprite(-550px -45px, 37px, 46px)

+media-query(950px)
  .fact-row
    .content-container
      ul
        li
          p
            font-size: 15px
            line-height: 18px


+media-query(650px)
  .fact-row
    .content-container
      width: 100%
      padding: 0
      ul
        height: auto
        display: block
        li
          height: 125px
          padding: 0
          width: 100% !important

          border-right: none
          border-bottom: 1px solid $semiLightGrey

          a
            +flex(center, center)

          p
            width: 220px
            text-align: left
          .icon-placeholder
            +flex(center, center)
            margin-right: 20px
            width: 80px
          span
            margin: 0
          &:last-of-type
            border-bottom: none
          &:nth-of-type(even)
            background-color: $lightGreyBackground
          &.happy-customers
            span
              +transform-origin(50% 50%)
              +transform(scale(0.8))