$animationDelay: 0.8s  //Time logo freezes on load
header
  &.no-start-animation
    .top-bar, .bottom-bar
      &.intro
        height: 100px

    .bottom-bar
      &.intro
        height: 0
    .yellow-bar
      +transition-delay((0.5s))

    .logo
      +transition(all 0.0s)
      +transition-delay((0.0s))
      &.intro
        width: 450px
        top: 5px
        left: 20px
        +transition(all 0.0s)

        .logo-header
          width: 140px
          +transition(all 0.0s)

        .sub-header
          opacity: 0.0
          +transition(all 0.0s)

      .after-intro
        +transition-delay((0.7s))


  .photo-slider
    position: fixed
    top: 0
    height: 100%
    width: 100%
    z-index: -999
    background: url('/images/structure/loader.gif') 50% 50% no-repeat

    .home-slider
      +position(absolute, 0 0 0 0)
      height: 100%
      width: 100%
      +transition(margin-left 2s)
      &.background1
        background-image: url("/images/structure/header/homePhoto1.jpg")
        background-size: cover
        background-position: 50% 50%

      &.background2
        background-image: url("/images/structure/header/homePhoto2.jpg")
        background-size: cover
        background-position: 50% 50%
        margin-left: 100%
        &.active
          margin-left: 0

      &.background3
        background-image: url("/images/structure/header/homePhoto3.jpg")
        background-size: cover
        background-position: 50% 50%
        margin-left: 100%
        &.active
          margin-left: 0




  .top-bar, .bottom-bar
    background: $red
    position: fixed
    height: 100px
    width: 100%
    +transition(height 2s)
    +transition-delay(($animationDelay + 1s))

    &.intro
      height: 35%

    &.no-after-animations
      +transition-delay(0s)
      +transition(all 0.4s)

  .top-bar
    top: 0
    z-index: 999
    nav
      overflow: hidden
      height: 100%
      +flex(flex-end, center)
      ul
        list-style: none
        float: right
        margin-right: 20px
        li
          float: left
          border-left: 1px solid $darkRed
          opacity: 1.0
          margin-top: 0
          +transition(all 2s)
          a
            color: white
            font-size: 22px
            line-height: 24px
            padding: 0 20px 5px
            +transition(all 0.5s)
            position: relative

            span
              +position(absolute, null null 0 0)
              height: 2px
              background: white
              +transition(all 0.2s)
              margin-left: 20px
              width: 0

          &.active
            a
              span
                width: calc(100% - 40px)
                background: $yellow

          &:hover
            a
              span
                width: calc(100% - 40px)

          &:first-of-type
            border: none
            +transition-delay(($animationDelay + 4s))
          &:nth-of-type(2)
            +transition-delay(($animationDelay + 3.8s))
          &:nth-of-type(3)
            +transition-delay(($animationDelay + 3.6s))
          &:nth-of-type(4)
            +transition-delay(($animationDelay + 3.4s))
          &:nth-of-type(5)
            +transition-delay(($animationDelay + 3.2s))
          &:nth-of-type(6)
            +transition-delay(($animationDelay + 3s))

    &.small
      height: 60px
      nav
        margin-top: 0
        margin-bottom: 0
        ul
          li
            +flex()
            a
              font-size: 16px
              line-height: 20px
              +transition(all 2s)

    &.intro
      nav
        ul
          li
            margin-top: -20px
            opacity: 0.0

  .yellow-bar
    height: 5px
    width: 100%
    +position(fixed, 100px null null 0)
    background: $yellow
    z-index: 999
    +transition(all 1s)
    +transition-delay(($animationDelay + 3s))
    &.intro
      left: -100%

    &.no-after-animations
      +transition-delay(0s)
      +transition(all 0.4s)

    &.small
      top: 60px

  .bottom-bar
    bottom: 0
    height: 0
    &.intro
      height: 100%

  .logo
    position: fixed
    +transition(all 2s)
    +transition-delay(($animationDelay + 0.5s))
    width: 450px
    left: 20px
    top: 5px
    z-index: 999
    cursor: pointer

    &.no-after-animations
      +transition-delay(0s)
      +transition(all 0.4s)
      .logo-header, .sub-header, .after-intro
        +transition-delay(0s)
        +transition(all 0.4s)

      .after-intro
        +transition-delay(0s)
        +transition(all 0.4s)

    &.small
      top: -3px
      left: 15px
      width: 375px

      h2
        font-size: 35px

      .logo-header
        width: 100px
      .after-intro
        margin: 15px 0

    .logo-header
      display: block
      width: 140px
      +transition(all 2s)
      +transition-delay(($animationDelay + 0.5s))
      img
        width: 100%

    .sub-header
      +logo-font()
      color: white
      font-size: 84px
      line-height: 35px
      text-align: center
      margin: 0
      width: 100%
      white-space: nowrap
      +transition(all 1s)
      +transition-delay(($animationDelay + 0.5s))
      opacity: 0.0


    .after-intro
      +position(absolute, 0 0 null null)
      +logo-font()
      color: white
      font-size: 40px
      margin: 30px 0
      padding-right: 0
      opacity: 1.0
      +transition(all 1s)
      +transition-delay(($animationDelay + 3s))

      &.intro
        padding-right: 100px
        opacity: 0.0

    &.intro
      width: 45%
      top: 25%
      left: calc(50% - (45% / 2) )

      .logo-header
        width: 100%

      .sub-header
        opacity: 1.0


+media-query(1400px)
  header
    .top-bar.intro
      height: 29%
      nav
        ul
          li
            margin-top: -20px

    .top-bar
      nav
        ul
          li
            a
              font-size: 18px

    .logo
      width: 400px
      .sub-header
        font-size: 64px

      .after-intro
        font-size: 34px
      &.small
        .after-intro
          margin: 22px 0

+media-query(1150px)
  header
    .top-bar
      nav
        ul
          li
            a
              font-size: 16px

    .logo
      width: 350px
      .after-intro
        font-size: 30px


+media-query(1040px)
  header
    .logo
      .after-intro
        display: none

+media-query(900px)
  header
    .top-bar.intro
      height: 28%

    .logo
      .sub-header
        font-size: 48px

+media-query(840px)
  header
    .top-bar
      height: 0

    .logo
      opacity: 0

      &.intro
        opacity: 1.0

    .yellow-bar
      +position(fixed, 60px null null 0)
      +transition-delay(5s)


+media-query(700px)
  header
    .logo
      .logo-header
        margin-bottom: 5px
      .sub-header
        font-size: 38px

+media-query(525px)
  header
    .logo
      .sub-header
        font-size: 30px