$bannerHeight : 600px

.banner
  position: relative
  overflow: hidden

  width: 100%
  background: #ccc
  max-height: 600px
  +transition(height 200ms ease-out)

  img
    width: 100%

  .circle-logo
    +position( absolute, null 40px 40px null)
    z-index: 12
    width: 300px

  // Home banner
  &.home

    .overlay
      position: absolute
      width: 100%
      height: 100%
      background: rgba(0,0,0,0.4)
      +transition(background 300ms ease-out)

    .container
      position: relative
      z-index: 15 // Higher than backgrounds
      height: 100%

      .overlay.left
        margin-left: 40px
        left: -100%
        // Hide on mobile
        +respond-to(mobileNavigation)
          display: none

      .overlay.right
        margin-right: 40px
        right: -100%
        // Hide on mobile
        +respond-to(mobileNavigation)
          display: none

      ul
        position: relative
        @extend %clearfix

      li
        position: relative
        float: left
        width: 16.65%
        height: $bannerHeight

        &:hover,&.hovered
          .overlay
            background: rgba(0,0,0,0)

        a
          position: absolute
          width: 100%
          height: 100%

      ul.banner-overlays
        padding: 0 40px
        +position(absolute, 0 null null 0)
        width: 100%
        height: 100%

        // Hide on mobile
        +respond-to(mobileNavigation)
          display: none

      ul.banner-columns
        z-index: 15 // Higher than titles

        // Hide on mobile
        +respond-to(mobileNavigation)
          display: none
        li
          border-left: 1px solid rgba(255,255,255,0.7)

          &:last-child
            border-right: 1px solid rgba(255,255,255,0.7)


      ul.banner-titles
        +position(absolute, null null 160px 80px )
        z-index: 10 // Higher than backgrounds, lower than container
        width: 100%

        color: #fff
        font-size: 6em

        +respond-to(medium)
          font-size: 5em
          bottom: 120px
        +respond-to(small)
          font-size: 5em
          bottom: 100px
        //+respond-to(mobile)
        //  font-size: 3em
        //  bottom: 60px
        // Hide on mobile
        +respond-to(mobileNavigation)
          display: none

        li
          +position(absolute, 40px null null 0)
          width: 100%
          opacity: 0
          +transition(opacity 300ms ease-out, top 300ms ease-out)

          &.show
            top: 0
            opacity: 1


    .backgrounds
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%

      ul
        +position(absolute, 0 null null 0)
        width: 100%
        height: 100%
        z-index: 5 // Higher than default background

      li
        +position(absolute, 0 null null 0)
        width: 100%
        height: 100%
        opacity: 0
        +transition(opacity 300ms ease-out)

      li.show
        opacity: 1