.error-header
  position: relative
.error
  margin-top: 120px
  +linear-gradient(top,  $gradient2 0%, $gradient1 100%)
  position: relative

  .background
    position: absolute
    width: 100%
    top: 0
    left: 0
    height: 100%
    background-image: url("/img/header_image.jpg")
    background-repeat: no-repeat
    background-position: 50% 50%
    background-size: cover
    mix-blend-mode: overlay
    opacity: 0.2

  .content-container
    padding: 80px 0
    position: relative

  .box
    display: block
    min-width: 300px
    width: 80%
    max-width: 500px
    margin: auto
    text-align: right


    h1
      max-width: 500px
      margin: auto
      font-size: 45px
      line-height: 52px
      font-weight: bold
      padding: 0 40px
      color: #3C3C3B
      font-family: 'Josefin Slab', serif

      &.number
        font-family: 'Lato', sans-serif
        text-align: left
        font-size: 165px
        line-height: 200px
        position: relative
        color: white
    p
      color: white
      +font-semi-bold()
      font-size: 21px !important
      line-height: 26px !important
      text-align: center
    .return-home
      display: inline-block
      margin: 40px
      background: $gradient2
      border-radius: 40px
      a
        font-size: 18px
        line-height: 18px
        display: inline-block
        padding: 13px 20px
        color: white
        font-family: 'Lato', sans-serif

        &:before
          content: ''
          +arrowWhite
          margin-right: 20px
          +transform(rotate(180deg))
          +transition(margin-right 0.3s)
          position: relative
          display: inline-block

      &:hover
        a
          &:before
            margin-right: 30px

footer.error-f
  height: 600px

  .contact-info
    position: relative
    .content
      position: relative

+media-query(580px)
  .error
    .box
      h1
        &.number
          font-size: 140px

+media-query(420px)
  .error
    .box
      h1
        &.number
          font-size: 100px