.header-image-row
  position: relative
  width: 100%
  z-index: 5
  background: $darkBlue
  min-height: 350px

  .logo
    position: absolute
    z-index: 10
    width: 25%
    left: 15%
    height: 100%
    +flex(flex-start, center)
    min-width: 300px
    pointer-events: none

    img
      width: 100%

    h1
      display: none

  .background-content
    position: absolute
    height: 100%
    width: 100%

    .stripes
      +position(absolute, 0 0 0 0)
      width: 100%
      height: 100%
      z-index: 6
      pointer-events: none

      .hori, .vert
        background: white
        position: absolute
        opacity: 0.3

      .hori
        width: 100%
        height: 2px

        left: 0
        top: calc(100% / 3 * 2)

        &:first-of-type
          top: calc(100% / 3)

      .vert
        width: 2px
        height: 100%
        top: 0
        left: calc(100% / 3 * 2)

        &:nth-of-type(3)
          left: calc(100% / 3)



    .main-image
      cursor: pointer
      +position(absolute, 0 null 0 0)
      width: calc(100% /3 + 1px)
      height: 100%
      background-size: cover !important
      background-position: 50% 50% !important
      opacity: 0.4
      +transition(all 0.5s)
      a
        +position(absolute, 0 0 0 0)
        width: 100%
        height: 100%

      &:hover
        opacity: 1

      &.width50
        width: calc(100% / 2 + 1px)
      &.width66
        width: calc(100% / 3 * 2  + 1px)

    .sub-images
      +position(absolute, 0 0 0 null)
      width: calc(100% /3 * 2 - 1px)
      height: 100%

      &.width50
        width: calc(100% / 2 - 1px)
      &.width66
        width: calc(100% / 3 - 1px)

      .sub-1, .sub-2
        cursor: pointer
        width: 100%
        background-size: cover !important
        background-position: 50% 50% !important
        position: relative
        opacity: 0.4
        +transition(all 0.5s)
        a
          +position(absolute, 0 0 0 0)
          width: 100%

        &:hover
          opacity: 1

      .sub-1
        height: calc(100% / 3 * 2)
      .sub-2
        height: calc(100% / 3)

+media-query(700px)
  .header-image-row
    margin-top: 60px