.header-image-wrapper
  position: relative
  max-height: 810px

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

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

  &:before
    content: ''
    position: absolute
    z-index: -2
    bottom: 0
    left: 0
    background: $broosDarkPurple
    height: 30%
    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: $broosLightPurple
    height: 180px
    width: 100%

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

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

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

    .grid-row
      width: 100%



.header-image
  position: relative
  width: 100%
  max-height: 810px
  overflow: hidden
  img
    width: 100%

  figcaption
    position: absolute
    right: 0
    bottom: 0
    font-size: 2.4rem
    font-weight: medium()
    color: white
    line-height: 1.2
    padding: 40px 65px
    font-family: mainFont()

    span
      text-shadow: 2px 2px 10px rgba(#000, 0.5)

    +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: 80px
  cursor: pointer
  border-radius: 50%
  background-color: $broosLightPurple
  z-index: 5

  .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: 45px
    height: 45px
    left: calc(50% - 22px)
    bottom: -20px
    &:after
      border-width: 0 45px 45px 45px

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