.hero-video
  +overlay
  overflow: hidden
  &.is-transparent
    opacity: 0.3
  video
    left: 50%
    min-height: 100%
    min-width: 100%
    position: absolute
    top: 50%
    transform: translate3d(-50%, -50%, 0)
  +mobile
    display: none

.hero-content
  padding: 40px 20px
  +desktop
    padding: 40px 0

.hero-buttons
  margin-top: 20px
  +mobile
    .button
      display: block
      &:not(:last-child)
        margin-bottom: 10px
  +tablet
    display: flex
    justify-content: center
    .button:not(:last-child)
      margin-right: 20px

.hero
  background: white
  text-align: center
  .header
    background: none
    box-shadow: none
  .tabs
    a
      border: none
    ul
      border-bottom: none
    &.is-boxed
      a
        padding: 8px 15px
  &.is-alt
    background: $background
    color: $text-light
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background: $color
      color: $color-invert
      .title
        color: $color-invert
        a,
        strong
          color: inherit
      .subtitle
        color: rgba($color-invert, 0.7)
        strong
          color: $color-invert
      .header .container
        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
      .header-icon,
      .header-item > a:not(.button)
        color: $color-invert
        opacity: 0.5
        &:hover,
        &.is-active
          opacity: 1
      .tabs
        a
          color: $color-invert
          opacity: 0.5
          &:hover
            opacity: 1
        li.is-active a
          opacity: 1
        &.is-boxed,
        &.is-toggle
          a
            color: $color-invert
            &:hover
              background: rgba(black, 0.1)
          li.is-active a
            &,
            &:hover
              background: $color-invert
              color: $color
      &.is-bold
        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
      +mobile
        .header-toggle
          span
            background: $color-invert
          &:hover
            background: rgba(black, 0.1)
          &.is-active
            span
              background: $color-invert
        .header-menu
          background: $color
          .header-item
            border-top-color: rgba($color-invert, 0.2)
  &.is-fullheight,
  &.is-large
    +tablet
      .tabs
        font-size: $size-medium
  &.is-medium
    +tablet
      .hero-content
        padding: 120px 20px
    +desktop
      .hero-content
        padding: 120px 0
  &.is-large
    .tabs
      a
        padding: 10px 15px
    +tablet
      .hero-content
        padding: 240px 20px
    +desktop
      .hero-content
        padding: 240px 0
  &.is-fullheight
    align-items: stretch
    display: flex
    flex-direction: column
    justify-content: space-between
    min-height: 100vh
    .tabs
      a
        padding: 15px 20px
    .hero-content
      display: flex
      flex: 1
      flex-direction: column
      justify-content: center
  &.is-left
    text-align: left
  &.is-right
    text-align: right