/**
 * 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: 0
  width: 100%
  padding-bottom: 45% /* 1 */
  +flex(flex-start, center) /* 2 */

  background:
    color: white
    image: $mainBgImage /* 3 */
    size: contain
    repeat: no-repeat
    position: 50% 50%
  animation: fade-in-background 1s /* 4 */

  .placeholder
    position: absolute
    top: 0
    left: 0
    height: 100%
    width: 100%
    +flex(flex-end, center)

    .grid-row
      margin-top: -120px
      padding: 0 $contentGrid


  p
    +font-semi-bold(50px, 60px)
    text-align: right
    margin: 0
    text-transform: uppercase
    color: $turquoise




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

.intro
  position: relative
  z-index: 2
  width: 100%
  background:
    color: $blueGrey


/**
 * Introduction container
 *
 */

.intro-container
  position: relative

  +respond-to-width(900)
    padding-bottom: 40px


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

.intro-block
  position: relative
  top: -75px /* 1 */
  right: 62.5px
  background-color: $introBlockBgColor
  padding: 80px $contentGrid*2 80px $contentGrid /* 2 */

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

  +respond-to-width(768)
    width: 100%

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

  h3
    color: $blue
    font-size: 1.3rem


.home-video-news
  .grid-row
    +flex(space-between, flex-start)
    padding: 80px 0 120px

    h2
      text-transform: uppercase
      font-size: 0.9rem
      color: $red
      margin: 0 0 20px

    .video
      width: 50%

      .video-block
        margin-bottom: 0


    .latest-news
      width: column(5, 12)

      .post
        margin-bottom: 30px

        h2
          text-transform: none
          font-size: 1.5rem
          color: $blue

        p
          color: $grey

      .buttons
        a
          color: $blue
          border-bottom: 2px solid $blue

          + a
            margin-left: 35px

          +respond-to-width(420)
            +flex(space-between, center)

            + a
              margin-top: 25px
              margin-left: 0

          img, svg
            width: 10px
            height: 10px
            margin-left: 10px
            transform: translate3d(0,0,0)
            transition: transform 0.3s

          &.news-link
            opacity: 0.6
            transition: opacity 0.3s

          &:hover
            opacity: 1
            img, svg
              transform: translate3d(5px, 0, 0)



    +respond-to-width(1050)
      display: block

      .video, .latest-news
        width: 100%

      .latest-news
        margin-top: 80px

.home-reference
  background-color: $discoverItemsBgColor
  padding-top: 80px
  .references-block
    position: relative
    margin-bottom: 0
    .reference
      display: none
      &:first-of-type
        width: 100%
        display: flex
        box-shadow: none
        margin: 0

      +respond-to-width(900)
        padding-bottom: 50px

    a.reference-link
      position: absolute
      right: 30px
      bottom: 45px
      color: $blue
      border-bottom: 2px solid $blue
      opacity: 0.6
      transition: opacity 0.3s

      +respond-to-width(900)
        bottom: 25px

      img, svg
        width: 10px
        height: 10px
        margin-left: 10px
        transform: translate3d(0,0,0)
        transition: transform 0.3s

      &:hover
        opacity: 1
        img, svg
          transform: translate3d(5px, 0, 0)