.information-icon-row
  height: 260px
  background-color: $defaultRedBlock
  position: relative

  ul
    +flex(space-around, center)
    height: 100%

    li
      text-align: center
      position: relative
      opacity: 0.5
      +transition(opacity 0.5s)

      &:hover
        opacity: 1

        .icon
          span
            +transform(scale(0.75))

      &.active
        opacity: 1

        p
          position: relative
          &:after
            content: ''
            position: absolute
            bottom: -10px
            height: 2px
            width: 100%
            background: white
            left: 0

      .icon
        border-radius: 9999px
        border: 2px white solid
        height: 80px
        width: 80px
        +flex(center, center)
        margin: auto

        span
          display: block
          +transform(scale(1))
          +transition(all 0.5s)

        &[id$=_benefits] span
          +sprite(-400px 0, 27px, 30px)

        &[id$=_design] span
          +sprite(-400px -35px, 34px, 34px)

        &[id$=_isolation] span
          +sprite(-400px -75px, 35px, 32px)

        &[id$=_safety] span
          +sprite(-440px -0px, 25px, 36px)

        &[id$=_price] span
          +sprite(-440px -40px, 21px, 28px)

        &[id$=_measure] span
          +sprite(-440px -70px, 47px, 47px)
        &#hr_termoparels span
          +sprite(-358px -90px, 38px, 32px) 
          //background-image: url("/img/hr_pearls.jpg")
          //background-size: cover
          //background-position: center
        &#biofoamparels span
          +sprite(-400px -75px, 35px, 32px)
          //background-image: url("/img/bio_pearls.jpg")
          //background-size: cover
          //background-position: center

      p
        +font-semi-bold(20px, 20px)
        margin: 20px 0 0 0
        color: white
        display: inline-block

.isolation
  .information-icon-row
    background-color: $defaultGreen

+media-query(1100px)
  .information-icon-row
    display: none