$speed: 300ms
$ease : ease-out
$delay : null

header.main
  position: relative
  z-index: 10
  +row-height(5)
  background: $purpleLight

  @extend %clearfix
  +transition(height $speed $ease $delay)

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

  .home &
    +row-height(14)

    +respond-to-width(1024)
      +row-height(10)

    +respond-to-width(480)
      display: block
      +row-height(6)

  /*
    |--------------------------------------------------------------------------
    | Logo panels
    |--------------------------------------------------------------------------

  .logo-holder
    height: 100%
    background: $blue
    text-align: center

    .logo
      +sprite(0,0,317px,140px,.6)
      +transition(all 300ms ease-out)

      .home &
        +sprite(0,0,317px,140px)

        +respond-to-width(1024)
          +sprite(0,0,317px,140px,.7)

    +respond-to(mobileNavigation)
      display: none


  /*
    |--------------------------------------------------------------------------
    | Animating panel
    |--------------------------------------------------------------------------

  .animate
    +transition(top $speed $ease $delay, left $speed $ease, width $speed $ease, height $speed $ease $delay)

  .header-panel
    text-align: center

    .above-button
      display: block
      height: 60px
      .home &
        height: auto

      +respond-to-width(1280)
        height: auto

    .button
      margin: 0 auto
      vertical-align: bottom
      +transition(margin-top $speed $ease $delay)

      .home &
        margin-top: 20px

        +respond-to-width(480)
          margin-top: 0


  /*
    |--------------------------------------------------------------------------
    | Animating panels - Appointment
    |--------------------------------------------------------------------------

  .appointment
    +position(absolute, 0 null null 0)
    width: 33.34%
    height: 100%
    //background: $green url(/images/structure/pattern.png) center center
    //background-size: cover

    +respond-to-width(1280)
      height: 50%
      width: 66.67%

    .home &
      width: 66.67%
      height: 50%

      +respond-to-width(1680)
        width: 50%

      +respond-to-width(480)
        height: 33.34%
        width: 100%

    .clock
      display: inline-block
      +sprite(-340px, 0, 60px, 60px, .7)
      +transition(all 300ms ease-out)

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

        .home &
          display: inline-block

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

      .home &
        margin-top: 20px
        +sprite(-340px, 0, 60px, 60px)

        +respond-to-width(1024)
          +sprite(-340px, 0, 60px, 60px, .7)


  /*
    |--------------------------------------------------------------------------
    | Animating panels - Sign Up
    |--------------------------------------------------------------------------

  .sign-up
    +position(absolute, 0 null null 33.33333%)
    width: 33.34%
    height: 100%
    text-align: center
    line-height: 1.3

    &.striped
      +stripedCount(3)

    +respond-to-width(1280)
      top: 50%
      left: 0
      height: 50%
      width: 66.67%

      &.striped
        +stripedCount(6)

    +respond-to-width(480)
      &.striped
        +stripedCount(3)

    .home &
      top: 50%
      left: 0
      width: 66.67%
      height: 50%

      +respond-to-width(1680)
        width: 50%

      +respond-to-width(480)
        top: 33.33333%
        height: 33.34%
        width: 100%

    .text
      display: inline-block
      max-width: 400px
      padding: 0 40px

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

        .home &
          display: inline-block

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

    .table-child
      padding: 0 30px

    .question
      display: none

      .home &
        display: inline

  /* 
    |--------------------------------------------------------------------------
    | Animating panels - Emergency
    |--------------------------------------------------------------------------

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

    color: #FFD7CB
    text-align: center

    a:not(.button)
      color: #fff

    .home &
      +respond-to-width(1680)
        width: 50%

      +respond-to-width(480)
        top: 66.64%
        right: auto
        left: 0
        height: 35%
        width: 100%

    .cross
      display: inline-block
      +sprite(-420px, 0, 42px, 42px)
      +transition(all 300ms ease-out)

      +respond-to-width(1024)
        +sprite(-420px, 0, 42px, 42px, .7)

      .home &
        +respond-to-width(480)
          display: none

    .text
      display: none
      line-height: 1.5

      .home &
        display: block
        padding: 0 40px

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

      .comment
        display: block
        margin-top: 5px
        color: #fff
        font-size: 0.8em
        font-weight: 600
        line-height: 1


    strong
      color: #fff