.brochure-row
  padding: 80px 0
  //background-color: $lightBlue
  background-color: rgba($lightGray2, 0.5)

  .houses &
    background: linear-gradient(0deg, white, rgba($lightGray2, 0.5))

  .grid-col
    vertical-align: middle

  .icon-placeholder
    padding: 70px column(1, 24) 70px 0
    text-align: right
    overflow: visible

    &:after
      content: ''
      position: absolute
      top: 0
      right: 0
      height: 100%
      width: 300px
      background-color: $brown

    .brochure
      position: relative
      z-index: 1
      width: 300px
      display: inline-block

      #brochure

        g
          position: relative

        // Mass assign transform

        #left-page #alinea-1 #image_2, #left-page #alinea-2 #image_1, #right-page #image, #right-page circle,#left-page #title_1, #left-page #text_2 line, #left-page #title, #left-page #text_1 line, #right-page #title-1, #right-page #title-2, #right-page #text line
          transform: scale3d(1, 1, 1)

        #left-page #alinea-1 #image_2, #left-page #alinea-2 #image_1, #right-page #image, #right-page circle
          transform-origin: center center
          transition: transform 0.6s

        #left-page #title_1, #left-page #text_2 line, #left-page #title, #left-page #text_1 line
          transform-origin: 25% 50%
          transition: transform 0.6s

        #right-page #title-1, #right-page #title-2, #right-page #text line
          transform-origin: 75% 50%
          transition: transform 0.6s

        #left-page #title, #left-page #text_1 line, #right-page #title-2
          transform-origin: right center

        #left-page
          #alinea-1
            #image_2
              transition-delay: 0.5s
            #title_1
              transition-delay: 0.6s
            #text_2
              line
                @for $i from 1 through 8
                  &:nth-child(#{$i})
                    transition-delay: 0.7s + ($i / 15)


          #alinea-2
            #image_1
              transition-delay: 0.8s
            #title
              transition-delay: 0.9s
            #text_1
              line
                @for $i from 1 through 8
                  &:nth-child(#{$i})
                    transition-delay: 1s + ($i / 15)

          #background_2
            transform: scale3d(1, 1, 1)
            transform-origin: 50% 50%
            transition: transform 0.8s

        #right-page
          #image
            transition-delay: 1.2s

          #title-1
            transition-duration: 1s
            transition-delay: 1.3s
          #title-2
            transition-duration: 1s
            transition-delay: 1.35s

          circle
            transition-duration: 1.2s
            transition-delay: 1.4s

          #text
            line
              @for $i from 1 through 4
                &:nth-child(#{$i})
                  transition-delay: 1.5s + ($i / 15)

          #background_1
            transform: scale3d(1, 1, 1)
            transform-origin: 50% 50%
            transition: transform 0.8s

      &.fracs-animation.fracamation
        #brochure
          #left-page #alinea-1 #image_2, #left-page #alinea-2 #image_1, #right-page #image, #right-page circle
            transform: scale3d(0, 0, 1)
            transition-delay: 0s
            transition-duration: 0s

          #left-page #background_2, #right-page #background_1, #left-page #title_1, #left-page #text_2 line, #left-page #title, #left-page #text_1 line, #right-page #title-1, #right-page #title-2, #right-page #text line
            transform: scale3d(0, 1, 1)
            transition-delay: 0s
            transition-duration: 0s


  .subscribe-form
    display: inline-block
    vertical-align: top
    margin-left: column(1, 24)
    width: column(9, 24)

    h3
      +phenomena
      color: $blue
      font-size: 2rem
      line-height: 1.25

    //#phone-field, #phone-newsletter
    //  max-height: 80px
    //  transition: max-height 0.3s, margin 0.3s
    //  overflow: hidden
    //
    //  &.hidden
    //    max-height: 0
    //    margin-bottom: 0

    .accept-mailing

      label
        +flex(flex-start, center)

        input
          +appearance(none)
          border: none
          width: 30px
          height: 32px
          margin-top: -6px
          margin-right: 15px
          cursor: pointer
          background:
            image: url("/img/uncheck-2.png")
            size: contain
            repeat: no-repeat
            position: center

          &:checked
            background-image: url("/img/check-2.png")

        span
          display: block
          width: calc(100% - 45px)
          +metropolis
          font-size: 0.8rem

          a
            +metropolisSemiBold
            text-decoration: underline
            color: $darkBlue

    .button
      margin-top: 10px
      //background-color: $blue
      //color: white
      //
      //&:after
      //  +arrowWhite


  +respond-to-width(850)
    padding: 50px 0
    .grid-col
      width: 100%

    .icon-placeholder
      padding: 50px 0
      text-align: center

      .brochure
        display: block
        margin: auto

      &:after
        width: 100%
        max-width: 260px
        left: auto
        right: calc(50% - 200px)

    .subscribe-form
      display: block
      width: column(11, 12)
      max-width: 560px
      margin: 50px auto 0
      text-align: center

      .newsletter-row
        text-align: left

  +respond-to-width(550)
    .subscribe-form
      h3
        font-size: 1.6rem

  +respond-to-width(450)
    .grid-row
      width: 100%

    .icon-placeholder

      .brochure
        width: 80%
      &:after
        right: 0
        width: 75%