.information-page-content
  position: relative
  .content-container
    min-height: 650px

    .breadcrumb
      position: absolute
      z-index: 10
      height: 65px
      padding-left: 42px
      background-color: rgba(255,255,255,0.7)

      &:after
        content: ''
        height: 65px
        width: 120px
        background-size: contain
        position: absolute
        top: 0
        right: -120px

        background: rgba(255,255,255,0.7)
        background: -moz-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 12%, rgba(255,255,255,0) 100%)
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.7)), color-stop(12%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0)))
        background: -webkit-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,2255,0.7)12%, rgba(255,255,255,0) 100%)
        background: -o-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 12%, rgba(255,255,255,0) 100%)
        background: -ms-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 12%, rgba(255,255,255,0) 100%)
        background: linear-gradient(to right, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 12%, rgba(255,255,255,0) 100%)
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 )


  .image-container
    display: block
    position: absolute
    background-position: center
    background-size: cover
    height: 100%
    max-height: 100vh
    width: 60%
    left: $contentGrid
    span
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      background-position: 50% 50%
      background-size: cover
      +translate3d(0,0,0)

    img
      position: fixed
      top: 60px
      width: 50%
      z-index: -10

  .background-color
    position: absolute
    z-index: 0
    top: -25px
    background-color: $greyBackground
    opacity: 0.2
    height: calc(100% + 25px)
    width: 100%


  .information-block
    float: right
    +calc(width, "#{$contentGrid}*4 - 120px")
    padding: 80px 60px 0

    h1
      +font-semi-bold(24px, 34px)
      color: $fontColor1
      position: relative
      margin-top: 20px

      small
        position: absolute
        left: 0
        top: -20px
        color: $fontColor1
        +font-default(15px, 18px) 

    p
      +font-default(16px, 22px)
      color: $fontColor1
      strong
        +font-semi-bold(16px, 22px)
        font-weight: bold
        color: $fontColor1
        em
          +font-semi-bold(16px, 22px)
          font-weight: bold
          color: $fontColor1
      a
        +font-semi-bold(16px, 22px)
        text-decoration: underline
        color: $fontColor1
    .text
      padding-bottom: 20px
      ul, ol
        li
          +font-default(15px, 18px)
          color: $fontColor1
          margin-bottom: 10px
          padding-left: 25px
          position: relative
          box-sizing: border-box
      ol
        counter-reset: item
        li:before
          content: counter(item) "."
          counter-increment: item
          font-weight: bold
          position: absolute
          left: 0
    .button
      position: relative

      display: inline-block
      margin-bottom: 60px
      padding: 15px 60px 15px 25px
      font-size: 15px
      line-height: 17px

      span
        position: absolute
        right: 20px
        top: calc(50% - 4px)

    .selectric
      .label
        +font-default(12px, 38px)

  &.windows-doors
    .image-container
      width: $contentGrid*6
    .information-block
      +calc(width, "#{$contentGrid}*5 - 120px")

.isolation
  .information-page-content
    .image-container
      width: calc(50% - 20px)
    .information-block
      +calc(width, "#{$contentGrid}*5 - 120px")

+media-query(1100px)
  .information-page-content
    padding-bottom: 410px
    .image-container
      left: 20px
      width: $contentGrid*5
    .information-block
      width: $contentGrid * 6
      box-sizing: border-box
      padding-left: 0
      padding-right: 0
    .info-menu
      position: absolute
      bottom: -370px
      top: auto
      left: $contentGrid
      width: 315px
    &.windows-doors
      padding-bottom: 310px
      .information-block
        +calc(width, "#{$contentGrid}*6 - 60px")
      .info-menu
        bottom: -270px
  .isolation
    .information-page-content
      padding-bottom: 310px
      .information-block
        +calc(width, "#{$contentGrid}*6 - 60px")
      .info-menu
        bottom: -270px

+media-query(650px)
  .information-page-content
    padding-bottom: 410px
    .content-container
      min-height: 0

      .breadcrumb
        padding-left: 20px
        background-color: transparent
        position: relative

        &:after
          display: none

    .image-container
      left: auto
      bottom: -410px
      right: 0
      width: 50%
      height: 409px
      span
        transform: translate3d(0,0,0) !important

    .information-block
      width: 100%
      padding: 20px 20px 0 20px

    .info-menu
      bottom: -410px
      left: 0
      width: 50%
      box-sizing: border-box
    &.windows-doors
      .information-block
        width: 100%
      .image-container
        bottom: -270px
        height: 313px
  .isolation
    .information-page-content
      .image-container
        width: 50%
        bottom: -270px
        height: 313px
      .information-block
        width: 100%

+media-query(450px)
  .information-page-content, .information-page-content.windows-doors, .isolation .information-page-content
    padding-bottom: 975px
    .image-container
      left: auto
      bottom: -975px
      right: 0
      width: 100%
      height: 500px
    .information-block
      width: 100%
    .info-menu
      width: 100%

  .information-page-content.windows-doors, .isolation .information-page-content
    padding-bottom: 850px
    .image-container
      bottom: -850px