.error-header
  position: relative
.error
  position: absolute
  height: 100vh
  width: 100%
  +flex(center, center)
  top: 0
  left: 0
  z-index: 20
  .content-container
    width: 100%
    max-width: none

  .box
    background: $blue url('/img/noise.png')
    display: block
    width: 100%
    margin: auto
    text-align: right
    padding: 80px 0 120px


    h1
      +header-font()
      font-size: 52px !important
      line-height: 60px !important
      color: $yellowish
      text-shadow: 3px 3px rgba(0,0,0,0.15)
      text-align: center

      max-width: 500px
      margin: auto
      padding: 0 40px

      &.number
        +header-font2()
        font-size: 80px !important
        line-height: 130px !important
        position: relative
        color: $yellowish
        padding-top: 20px

    .return-home
      display: block
      margin: 40px auto
      text-align: center
      a
        +header-font()
        font-size: 30px !important
        line-height: 38px !important
        color: $yellowish
        text-shadow: 3px 3px rgba(0,0,0,0.15)
        padding: 0 20px
        border-radius: 12px
        border: 2px rgba(255,255,255, 0.4) Dashed

        &:before
          content: ''
          background-image: url('/img/prev.png')
          width: 16px
          height: 16px
          margin-right: 20px
          +transition(margin-right 0.3s)
          position: relative
          top: 2px
          display: inline-block

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


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

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