.page-content
  padding-top: 60px
  >header
    +position(fixed, 0 0 null 0)
    height: 60px
    width: 100%
    z-index: 500
    background: white
    .content-container
      +flex(space-between, center)
    h2
      &.show
        +translate3d(0, 0,0)
        opacity: 1

      +font-bold(18px, 18px)
      text-transform: uppercase
      color: $beige
      letter-spacing: 1.8px
      +translate3d(0,-20px,0)
      +transition(all 0.3s)
      opacity: 0
      a
        +font-bold(18px, 18px)
        text-transform: uppercase
        color: $beige 
        letter-spacing: 1.8px

    ul
      list-style: none
      +flex(flex-start, center)
      li
        margin-left: 25px

        &:first-child
          margin-left: 0
        a
          +transition(color 0.2s)
        .active
          font-weight: 700
          color: $beige
    &:after
      content: ""
      display: block
      height: 20px
      width: 100%
      background: url("/img/dropshadow.png") repeat-x
      background-size: contain
      position: absolute
      bottom: -20px
      opacity: 0.15

.home-header
  background: url("/img/home_slider.jpg")
  background-size: cover
  background-position: 50% 50%

  min-height: 400px

  .position
    width: 230px
    position: relative
    top: -35px
    text-align: center
    background: white
    border-radius: 9999px
    z-index: 9999
    +flex(center, center)

    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3)

  .logo
    width: 75%
    max-width: 180px
    margin: auto
    display: inline-block
    img
      width: 100%

+media-query(1350px)
  .home-header
    .position
      width: 200px

+media-query(800px)
  .page-content
    padding-top: 0
    >header
      display: none

  .home-header .position
    top: 10px