.video-block
  position: relative
  margin-top: -100px

  .background
    position: absolute
    width: 100%
    height: calc(100% - 200px)
    top: 100px
    left: 0
    background-color: $lightGray

  .video-header
    .video-placeholder
      width: column(22, 24)
      margin-left: column(1, 24)

    .text-overlay
      position: absolute

    #video
      position: relative
      width: 100%
      height: 0
      padding-bottom: 56.25%
      background-color: white
      background-image: url("/img/video-placeholder.jpg")
      background-repeat: no-repeat
      background-position: center
      background-size: cover

      &.showPlaceholder
        background-image: url("/img/video-tablet.jpg")

      .text-overlay
        position: absolute
        z-index: 2
        width: 100%
        height: 100%
        +flex(flex-start, center)
        padding: 0 column(2, 22)

        &:after
          content: ''
          position: absolute
          top: 0
          left: 0
          width: 40%
          height: 100%
          background: linear-gradient(90deg, rgba(white, 0.4), rgba(white, 0.0))


        .text-placeholder
          position: relative
          z-index: 2
          padding-bottom: 80px

        h1
          +phenomena
          font-size: 3rem
          line-height: 1
          color: $blue
          text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1)

        .button
          margin-top: 40px
          color: white
          background-color: $blue

      iframe
        position: absolute
        z-index: 1
        left: 0
        top: 0
        height: 100%
        width: 100%
        opacity: 0
        transition: opacity 0.8s

        &.show
          opacity: 1

  +respond-to-width(950)
    .video-header
      width: 100%

      #video
        .text-overlay
          h1
            font-size: 2.2rem

  +respond-to-width(750)
    .background
      display: none
    .video-header
      .video-placeholder
        width: 100%
        margin-left: 0

      #video
        .text-overlay
          +flex(flex-start, flex-end)
          .text-placeholder
            padding-bottom: 60px

          +respond-to-width(575)
            .text-placeholder
              padding-bottom: 40px

            .button
              margin-top: 20px

  +respond-to-width(650)
    .video-header
      &:before
        display: block
        content: ''
        width: 100%
        padding-bottom: 80%
        background:
          image: url("/img/mobile-header.jpg")
          size: cover
          position: center
          repeat: no-repeat

      #video
        position: relative
        height: auto
        padding-bottom: 0

        iframe
          display: none

        .text-overlay
          position: relative
          height: auto
          padding: 30px column(2, 22) 10px
          background-color: $lighterGray
          h1
            font-size: 2.7rem
            margin-bottom: 20px