.houses-row
  padding: 90px 0 80px

  .map-side
    width: column(14, 24)
    display: inline-block

    h2
      font-size: 2rem
      line-height: 1
      text-align: center
      color: $blue
      +phenomena

    #house-map
      width: 100%
      max-width: 700px
      margin: auto
      background-image: url("/img/180205-map.svg")

      svg
        width: 100%

        .houses-group
          >g
            cursor: pointer
            opacity: 0
            pointer-events: none 
            transition: opacity 0.3s

            @for $i from 1 to 20
              &:nth-child(#{$i})
                transition-delay: #{$i*0.08}s


          &.active
            >g
              opacity: 1
              pointer-events: all

        &.loaded
          .houses-group
            >g
              opacity: 1
              pointer-events: all


  .side-text
    width: column(8, 24)
    margin-left: column(1, 24)
    display: inline-block
    vertical-align: top

    p
      font-size: 1.2rem
      line-height: 1.5
      margin: 0
      color: $blue

      span
        color: $brown
        font-weight: bold()

    .filters
      margin-top: 45px
      padding: 40px
      max-width: 420px
      border-radius: 10px
      border: 1px solid $lightBlue

      >p
        text-transform: uppercase
        color: $blue
        +metropolisSemiBold
        font-size: 0.75rem
        line-height: 1
        margin-bottom: 30px
        letter-spacing: 0.4px

      hr
        border: none
        border-bottom: 1px solid $lightBlue
        margin: 18px 0

      .check
        +flex(flex-start, flex-start)
        cursor: pointer

        p
          width: calc(100% - 30px)
          padding-left: 25px
          font-size: 0.9rem
          color: $blue
          margin-top: 4px

        .icon
          display: block
          width: 30px
          #checkbox
            width: 100%

            polyline
              stroke-dasharray: 40px
              stroke-dashoffset: 40px
              transition: stroke-dashoffset 0.4s

        &.active
          .icon
            #checkbox
              polyline
                stroke-dashoffset: 0
                transition: stroke-dashoffset 0.6s

    .more-info-about
      margin-top: 40px
      >p
        +phenomena
        font-size: 1.2rem
        line-height: 1.5
        margin: 0
        color: $blue
        margin-bottom: 40px

      a
        background-color: $blue
        border-color: $blue
        transition: background 0.4s
        color: white
        +flex(space-between, flex-start)
        max-width: 325px
        margin-top: 10px
        font-size: 0.7rem

        &:hover
          background-color: darken($blue, 5%)

        &:nth-child(odd)
          background-color: $brown
          border-color: $brown

          &:hover
            background-color: darken($brown, 10%)

        &:after
          +arrowWhite
          margin-top: 4px

  +respond-to-width(1000)
    .map-side
      width: 100%

    .side-text
      width: 100%
      margin: auto
      +flex(space-between, flex-start)
      +flex-rows

      p
        width: 100%

      .filters
        width: 50%

      .more-info-about
        width: 45%
        max-width: 350px

      +respond-to-width(740)
        >p
          text-align: center

        .filters
          width: 100%
          display: block
          margin: 30px auto 10px
          text-align: left

        .more-info-about
          width: 100%
          margin: 60px auto 0

          a
            font-size: 0.8rem