.hero {
  background-color: rgb(11, 107, 148);
  background-position: 0 50%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  border-bottom: 1px solid $white;
  color: $white;
  margin-top: -2em;
  margin-bottom: 1.5em;
  padding: 50px 0;
  position: relative;

  // &::before {
  //   background: url("../images/matrix.png") 0 0 rgba(0, 0, 0, 0.35);
  //   box-shadow: inset 0 0 5px $black;
  //   content: "";
  //   display: block;
  //   position: absolute;
  //     top: 0; right: 0; bottom: 0; left: 0;
  //   z-index: 5;
  // }

  > .grid-wrapper {
    position: relative;
    z-index: 7;
  }

  .credit {
    font-size: 0.75em;
    font-style: italic;
    position: absolute;
      bottom: 0; right: 10px;
    z-index: 7;
    a {
      border-bottom: 1px solid;
      color: $white;
      text-decoration: none;
    }
    .licence {
      border: none;
    }
  }

  .avatar {
    @media only screen and (max-width: $lap-end){
      margin-bottom: 30px;
    }
    text-align: center;
    img {
      @include border-radius(100%);
      border: 10px solid $primary-color;
    }
  }

  h1 {
    font-size: 3.5em;
    line-height: 1em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
  }

  hr {
    @extend .divider;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  }

  p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    small {
      color: $grayLighter;
      font-size: .65em;
    }
  }
}