@import '../styles'

@import top-bar
@import mist
@import member-info
@import map
@import contact
@import footer


#content-main
  display: none
  overflow: hidden

  &.visible
    display: block

.headline
  font-size: 4.5rem
  letter-spacing: .1vw

  display: block
  width: 100vw
  margin: 0

  position: fixed
  left: 0
  top: 50vh
  z-index: 1
  transform: translateY(-50%)

  @media (orientation: portrait) and (max-width: 420px)
    font-size: 6rem
    text-align: left
    width: auto
    left: 50vw
    transform: translate(-50%, -50%)

    &.center
      text-align: left

  opacity: 0
  transition: 1.5s opacity

  &.visible
    opacity: 1

  // All subsequent elements should be on top. This can be overridden if needed
  & ~ *
    position: relative
    z-index: 2

@import '../styles'

@import top-bar
@import mist
@import member-info
@import map
@import contact
@import footer


#content-main
  display: none
  overflow: hidden

  &.visible
    display: block

.headline
  font-size: 4.5rem
  letter-spacing: .1vw

  display: block
  width: 100vw
  margin: 0

  position: fixed
  left: 0
  top: 50vh
  z-index: 1
  transform: translateY(-50%)

  @media (orientation: portrait) and (max-width: 420px)
    font-size: 6rem
    text-align: left
    width: auto
    left: 50vw
    transform: translate(-50%, -50%)

    &.center
      text-align: left

  opacity: 0
  transition: 1.5s opacity

  &.visible
    opacity: 1

  // All subsequent elements should be on top. This can be overridden if needed
  & ~ *
    position: relative
    z-index: 2

  & ~ .contact
    z-index: 3

Move contact form back above footer
Move contact form back above footer
