.large-header-image
  position: relative
  background-color: $offsetWhite

  +respond-to-width(900)
    padding-top: 100px

  +respond-to-width(500)
    padding-top: 60px

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

    +respond-to-width(640)
      height: 50%


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

  .header-image
    position: relative
    z-index: 2
    width: 100%
    img
      width: 100%

    figcaption
      position: absolute
      left: 40px
      bottom: 40px
      font-size: 2.4rem
      font-weight: semibold()
      color: white
      line-height: 1

      span
        display: inline-block
        background-color: $black
        padding: 12px 20px
        margin-bottom: 2px

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

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

      +respond-to-width(640)
        position: relative
        bottom: 0
        left: 0
        margin-top: 40px

      +respond-to-width(500)
        margin-top: 30px
        padding: 0 30px
        font-size: 1.4rem

    &.image-slider
      .controllers
        padding-bottom: 66.67% !important
        .nav-item
          bottom: 50px
          &.previous
            right: calc(100% - 17px)
          &.next
            left: calc(100% - 17px)

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

  .show-scroll
    position: absolute
    left: calc(50% - 40px)
    bottom: -40px
    z-index: 10
    +flex(center, center)
    width: 80px
    height: 40px
    cursor: pointer
    border-radius: 55px 55px 0 0

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

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

    .arrow
      position: relative
      top: calc(-50% + 7px)
      z-index: 2
      display: inline-block
      width: 14px

      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