headerHeight = 400px

.header
  background url('/static/images/jumbo.jpg')
  background-position bottom center
  background-size cover
  height headerHeight
  overflow hidden
  position relative
  width 100%
  transform translateZ(0)

  @media screen and (max-width: 1030px)
    height 300px

    video
     display none

.header__container
  background #3E7394
  background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
  display table
  height 100%
  text-align center
  vertical-align middle
  width 100%

.header__nav
  position absolute
  left 90px
  top 40px

  @media screen and (max-width: 810px)
    left auto
    right auto
    width: 100%

  a
    display: block;
    max-width: 180px;

    @media screen and (max-width: 810px)
      margin-left auto
      margin-right auto

    img
      width: 100%;

.header__headline
  display table-cell
  padding 0 1em
  vertical-align middle

.header__title
  color #fff
  display inline-block
  font-size 3em
  letter-spacing -1px
  line-height 1.1
  margin auto
  max-width 780px
  text-align center
  text-shadow 0 2px 0 rgba(#000, 0.1)
  vertical-align middle

  @media screen and (max-width: 1030px)
    font-size 2em
    max-width 640px

  @media screen and (max-width: 810px)
    display block
    font-size 1.6em
    max-width 440px
    text-align center

  @media screen and (max-width: 410px)
    font-size 1.4em

  a
    color inherit
    text-decoration underline

.header__video-bg
  height 100%
  position absolute
  bottom 0
  z-index -2

  @media (min-aspect-ratio: 1/2)
    width 100%
    height auto

@keyframes spin
  0%
    top 0
  50%
    top -(headerHeight)
  50.0001%
    top headerHeight
  100%
    top 0

@keyframes spin2
  0%
    top (headerHeight)
  50%
    top 0
  99.99999%
    top -(headerHeight)
  100%
    top (headerHeight)

.header__members
  width 100%
  height 100%
  z-index -1
  position absolute
  top 0
  left 0

  .member
    margin 0
    border-radius 0
    width (100/18)%

    @media screen and (min-width: 2000px)
      width 5%
    @media screen and (max-width: 1200px)
      width (100/15)%
    @media screen and (max-width: 810px)
      width 10%
    @media screen and (max-width: 450px)
      width 20%

  .members
    position absolute
    overflow hidden
    top 0
    left 0
    right 0
    height headerHeight
    animation spin 40s infinite linear
    &:first-child
      z-index 1
    &:last-child
      animation spin2 40s infinite linear