.banner
  background-color: rgba(0, 34, 43, 0.9)
  position: fixed
  width: 100%
  height: 60px
  top: 0
  left: 0
  z-index: 10
  +translate3d(0,0,0)
  transition: all 0.3s

  &.closed
    +translate3d(0,-100%,0)

  .close
    position: absolute
    right: 20px
    top: 15px
    display: block
    width: 20px
    height: 20px
    &:before, &:after
      position: absolute
      left: 10px
      content: ''
      height: 20px
      width: 2px
      background-color: white
      transform: rotate(-45deg)
    &:before
      transform: rotate(45deg)


  .content-container
    +flex(space-between, center)
    height: 100%

    .logo
      +flex(center, center)
      height: 100%
      width: 90px
      span
        width: 100%
        height: 100%
        display: block
        background-image: url("/img/logo.svg")
        background-size: contain
        background-position: center
        background-repeat: no-repeat

    .text
      padding: 0 10px
      p
        color: white
        text-align: center
        margin: 0
        +font-header(21px, 24px)
        strong, a
          +font-header(21px, 24px)
          color: $beige
          white-space: nowrap
    .buttons
      +flex(space-between, center)

      .button
        +flex(space-between, center)
        height: 40px
        width: 150px
        border: 2px solid white
        border-radius: 5px

        a
          color: white
          +font-header(18px, 18px)
          +flex(center, center)
          text-align: center
          width: 100%
          height: 100%
          p
            color: white
            +font-header(15px, 16px)
            margin: 0

        &.facebook
          width: 140px
          a
            &:before
              content: ''
              display: inline-block
              margin-right: 10px
              +sprite(-115px -135px, 18px, 18px)
        &.invest
          width: 160px
          margin-left: 10px
          a
            span
              +sprite(-135px -135px, 27px, 25px)
              position: relative
              top: -2px
              margin-right: 10px

+media-query(1575px)
  .banner
    .content-container
      margin-left: 28px
      margin-right: 40px
      padding-right: 40px
    .close
      right: 28px
+media-query(1250px)
  .banner
    .content-container
      .text
        padding: 0 30px
        p, p a
          font-size: 18px
          line-height: 18px

+media-query(1060px)
  .banner
    height: 120px
    .content-container
      +flex-rows
      .logo
        height: 45px

      .text
        width: calc( 100% - 100px)

      .buttons
        width: calc( 100% - 100px)
        margin-left: 100px
        position: relative
        top: -10px
        +flex(center, center)

+media-query(820px)
  .banner
    height: 200px
    .content-container
      padding-right: 0
      margin-left: auto
      margin-right: auto
      .logo
        margin: auto
      .text, .buttons
        width: 100%
        margin: 0
      .buttons
        top: -5px

+media-query(450px)
  .banner
    .content-container
      .buttons
        display: none