.message {
  position: relative;

  @include display(flex);
  @include flex-direction(column);

  @include e(top) {
    @include flex(2);
  }
  @include e(middle) {
    @include flex(1);
  }
  @include e(bottom) {
    @include flex(1);
  }

  background: rgba(255,255,255, 0.2);

  @include rem((
    margin: 0,
    padding: 30px
  ));

  &:before, &:after {
    content: ' ';
    width:0;
    height: 0;
    position: absolute;
    top:0;
    right:0;
  }
  &:before {
    border-top: 100px solid #7E62A9;
    border-left: 100px solid transparent;
  }
  &:after {
    border-bottom: 100px solid rgba(255,255,255, 0.2);
    border-right: 100px solid transparent;
  }


  @include rem((
    margin-top: 30px,
    margin-bottom: 20px
  ));



  h1 {
    text-align: center;
    font-family: $hb-font-headings;
    font-size: 18vh;
    @media (max-width: 768px) {
      font-size: 12vh;
    }
    color: white;
    @include rem((
    margin-bottom: 10px
    ));

  }

  h2 {
    font-family: $hb-font-sub-headings;
    text-align: center;
    font-size: 5vh;
    color: #F69333;
    @include rem((
      margin-bottom: 10px
    ));
  }

  h3 {
    font-family: $hb-font-sub-headings;
    text-align: center;
    color: white;
    font-size: 4vh;
    @include rem((
      margin-bottom: 10px
    ));
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
  }
  p {
    font-family: $hb-font-body;
    text-align: center;
    color: white;
    @include rem((
      padding: 0 10px
    ));
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  .call-to-action {
    display: block;
    background: #F69333;
    text-align: center;
    color: white;
    font-size: 1.5em;
    @include rem((
    padding: 20px 10px,
    margin: 0 20px
    ));

    cursor: pointer;
  }

  .message-resolution {
    width: 100%;
    p {
      text-align: left;
      margin-bottom: 2px;
    }
    a {
      color: #F69333;
    }
  }
  .message-steps {
    float: left;
    position: relative;
    bottom: 12px;
    color: #ffffff;
  }

}

.illustration {
  @include rem((
  margin-top: 20px,
  margin-right: 20px
  ));

  @include m(policeman) {
    background: url(asset-path('errors/403/403_policeman.svg')) no-repeat center bottom;
  }
  @include m(death) {
    background: url(asset-path('errors/404a/404a-death.svg')) no-repeat center bottom;
  }
  @include m(thief) {
    background: url(asset-path('errors/404/404-thief.svg')) no-repeat center bottom;
  }
  @include m(robot) {
    background: url(asset-path('errors/500/500-robot.svg')) no-repeat center bottom;
  }
  @include m(guy) {
    background: url(asset-path('errors/503/503-guy.svg')) no-repeat center bottom;
  }


}
