.showreel-row
  position: relative
  z-index: 4
  margin-bottom: 20px

  .video
    min-height: 200px
    position: relative


    .background
      +position(absolute, -5px -5px null null null)
      background: $orange
      width: calc( 100% + 10px)
      height: calc( 100% + 5px)
      z-index: -1

  .information
    h3
      text-transform: uppercase
      color: $orange
      +font-bold(36px)

    p
      a
        color: $orange
        +font-bold(18px)

.showreel-sub
  position: relative
  height: 0
  z-index: 6
  margin: 100px 0 200px

  &.extra-margin-top
    margin-top: 400px
    margin-bottom: 0
    .blocks
      .block1
        margin-top: -60px
      .block2
        margin-top: 60px
      .block3
        margin-top: 180px

  .blocks
    +position(absolute, 0 0 0 0)
    width: 100%
    height: 100%
    z-index: 9

    div
      background: $orange

    .block1
      position: absolute
      right: calc(100% / 3)
      width: 70px
      height: 70px
      top: 150px

    .block2
      position: absolute
      left: calc(100% / 3)
      width: 50px
      height: 50px
      top: 400px

    .block3
      position: absolute
      right: calc(100% / 3)
      width: 20px
      height: 20px
      top: 600px

  .image-background
    //background: url("/img/showreel-background.jpg")
    opacity: 0.15

+media-query(1000px)
  .video
    width: $contentGrid*10
    margin-left: $contentGrid

  .information
    margin-top: 50px
    clear: left
    width: $contentGrid*10
    margin-left: $contentGrid