.sidebar
  width: 250px
  height: 100%
  position: fixed
  top: 0
  z-index: 3
  background-color: $background

  .logo-container
    background-color: $orange
    padding: 5% 13px
    width: 90%
    height: 24px
    margin-bottom: 70px
    cursor: pointer

    .logo
      +sprite(0px 0px)
      width: 200px
      height: 24px
      margin-left: auto
      margin-right: auto
      display: block
      text-indent: 99999px
      overflow: hidden
      color: rgba(0,0,0,0.0)

  nav, .social
    width: 80%
    margin: auto auto 40px


    >p
      width: 80%
      margin-left: auto
      margin-right: auto
      line-height: 20px

      &:first-child
        margin-bottom: 20px

      a
        color: $blue

    .newsletter-button
      width: 85%
      margin: 20px auto 0
      cursor: pointer

      a
        text-transform: uppercase
        display: block
        +button


    .nav-header
      width: 80%
      margin-left: auto
      margin-right: auto

      font-size: 15px
      line-height: 24px
      text-transform: uppercase
      color: $orange
      +audiBold

      border-bottom: 1px solid $borderColor

      .icon
        +arrowBottomOrange
        float: right
        margin-top: 8px

    li
      a
        line-height: 40px
        width: 80%
        padding: 0 10%
        display: block
        border-radius: 6px

      ul
        display: none
        margin-left: 20px

        li a
          color: $borderColor
          font-size: 16px
          line-height: 36px
          padding: 0 5%
          width: 90%

          &::first-letter
            text-transform: capitalize

        li a.active
          color: $orange




      &:hover
        >a
          background-color: $contentBackground1

    li.active
      >a
        background-color: $blue

        .icon
          +arrowRightWhite
          float: right
          margin-top: 15px

      ul
        display: block
        
  .gradient
    display: none
    width: 100%
    height: 100px
    position: absolute
    background-image: url("/images/structure/sidebar_gradient.png")

+media-query(900px)
  .sidebar
    display: none

+media-query-height(900px)
  .social
    display: none

+media-query-height(665px)
  .sidebar
    .logo-container
      margin-bottom: 20px

+media-query-height(615px)
  .sidebar
    nav
      li a, li ul li a
        line-height: 28px

+media-query-height(500px)
  .sidebar
    display: none