/**
 * Hero image
 *
 * 1. Part of the next block visible in viewport
 * 2. Vertically centers the streamer in the hero image
 * 3. Set background image src in CSS
 * 4. Animation fires when page is loaded
 */

.hero-image
  position: relative
  height: calc( 100vh - #{$navigationHeight + 75px} ) /* 1 */
  +flex(flex-start, center) /* 2 */

  background:
    color: darken($primaryColor, 20%)
    image: $mainBgImage /* 3 */
    size: cover
    repeat: no-repeat
    position: 50% 50%
  animation: fade-in-background 1s /* 4 */

  h1
    +font-semi-bold($bigStreamerFontSize, $bigStreamerLineHeight)
    color: $bigStreamerColor
    display: inline-block
    max-width: 400px

  h3
    p
      +font-default($subStreamerFontSize, $subStreamerLineHeight)
      color: $subStreamerColor
      max-width: 550px

/**
 * Full-width intro div
 *
 */

.intro
  position: relative
  width: 100%
  background:
    color: $primaryColor


/**
 * Introduction container
 *
 */

.intro-container
  position: relative


/**
 * Introduction
 *
 * 1. Get the introduction block up into the starting viewport
 * 2. Give some padding to the right for the buttons
 */

.intro-block
  min-height: 300px
  position: relative
  top: -75px /* 1 */
  right: 62.5px
  background-color: $introBlockBgColor
  padding: 50px 175px 50px 50px /* 2 */

  +respond-to-width(900)
    padding: 50px
    top: -50px
    right: 0

  +respond-to-width(500)
    padding: 40px


.mobile-number-white
  color: white !important