.header-image-wrapper
  position: relative

  +respond-to-width(1240)
    padding-top: 40px

  +respond-to-width(500)
    padding-top: 0

  &:before
    content: ''
    position: absolute
    z-index: -2
    top: 0
    left: 0
    background: $royalForkBlue
    height: 70%
    width: 100%

    +respond-to-width(840)
      height: calc(100% - 100px)

    +respond-to-width(640)
      height: calc(100% - 150px)

  &:after
    content: ''
    position: absolute
    z-index: -1
    bottom: 30%
    left: 0
    background: $royalForkLightBlue
    height: 180px
    width: 100%

    +respond-to-width(1100)
      height: 120px

    +respond-to-width(840)
      bottom: 100px

    +respond-to-width(640)
      display: none

  +respond-to-width(640)
    padding-top: 0

    .grid-row
      width: 100%



.header-image
  position: relative
  width: 100%
  img
    width: 100%

  figcaption
    position: absolute
    right: 0
    bottom: 20%
    font-size: 2.4rem
    font-weight: medium()
    color: white
    line-height: 1.2
    padding: 40px 65px
    background-color: $agrimacBlue

    +respond-to-width(1500)
      font-size: 1.8rem

    +respond-to-width(840)
      font-size: 1.5rem
      bottom: 100px

    +respond-to-width(640)
      position: relative
      bottom: 0
      height: 150px

    +respond-to-width(500)
      padding-left: column(1, 14)
      padding-right: column(1, 14)

  .show-scroll
    position: absolute
    left: calc(50% - 40px)
    bottom: -40px
    +flex(center, center)
    width: 80px
    height: 40px
    cursor: pointer
    border-radius: 55px 55px 0 0
    //background-color: $agrimacBlue

    &:after
      content: ''
      position: absolute
      left: 0
      top: -40px
      z-index: -1
      width: 80px
      height: 80px
      background: $royalForkGradient
      transform: rotate(45deg)

    .arrow
      position: relative
      top: -4px
      z-index: 2
      display: inline-block
      width: 8px

      transform: translate3d(0,0,0)
      transition: transform 0.3s

      svg
        width: 100%

        path
          fill: white

    &:hover
      .arrow
        transform: translate3d(0,3px,0)

    +respond-to-width(900)
      width: 90px
      height: 45px
      left: calc(50% - 45px)
      &:after
        border-width: 0 45px 45px 45px

    +respond-to-width(640)
      display: none