#header-row
  overflow-y: hidden
  position: relative

.header-wrapper
  //opacity: 0
  //animation: fade-in-bg 3s forwards
  background: url('/img/structure/horse.jpg')
    position: 50%
    size: cover
  height: 75vh
  +flex(center, center)

  +respond-to(medium)
    height: 50vh

  +respond-to(mobile)
    margin-top: 60px
    padding-top: 40px
    flex-direction: column
    //background: white
    height: auto

  .streamer
    z-index: 50
    text-align: center
    transition: all ease 0.4s
    .cta-buttons
      +flex(center, flex-start)

    +respond-to(medium)

    +respond-to(mobile)
      padding: $paddingSmall
      h1, p
        display: none

    +respond-to(small-mobile)
      .cta-buttons
        flex-direction: column
        .btn-seperator
          height: 15px

.header-wrapper::before
  content: ""
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  opacity: 0
  background: url('/img/structure/bg_horse.jpg')
    position: top 100%
    size: cover
    repeat: no-repeat
  animation: fade-in 10s 5s infinite

.mobile-logo
  width: 300px
  display: none
  z-index: 50

  +respond-to(mobile)
    display: block

@keyframes fade-in
  0%, 75%
    opacity: 0
  15%, 50%
    opacity: 1

@keyframes fade-in-bg
  0%
    opacity: 0
  100%
    opacity: 1