HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/EUmans/umansradepo.be/wwwroot/css/partials/_informationIconRow.sass
.information-icon-row
  height: 260px
  background-color: $defaultRedBlock
  position: relative

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

    &.align-center
      +flex(center, center)
      li
        margin: 0 45px

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

      &:hover
        opacity: 1

        .icon
          span
            +transform(scale(0.75))
          &[id$=_windows], &[id$=_doors]
            span
              transform: scale(1)

      &.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
        &[id$=_windows]
          span
            +sprite(-330px 0, 16px, 23px)
            transform: scale(1.2)
        &[id$=_doors]
          span
            +sprite(-348px 0, 16px, 30.5px)
            transform: scale(1.2)
      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