.m-signature-pad {
    position: relative;
    font-size: 10px;
    width: 100%;
    height: 200px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}
  .m-signature-pad:before, .m-signature-pad:after {
      position: absolute;
    z-index: -1;
    content: "";
      width: 40%;
      height: 10px;
      left: 20px;
      bottom: 10px;
      background: transparent;
      -webkit-transform: skew(-3deg) rotate(-3deg);
      -moz-transform: skew(-3deg) rotate(-3deg);
      -ms-transform: skew(-3deg) rotate(-3deg);
      -o-transform: skew(-3deg) rotate(-3deg);
      transform: skew(-3deg) rotate(-3deg);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
    }
    .m-signature-pad:after {
      left: auto;
      right: 20px;
      -webkit-transform: skew(3deg) rotate(3deg);
      -moz-transform: skew(3deg) rotate(3deg);
      -ms-transform: skew(3deg) rotate(3deg);
      -o-transform: skew(3deg) rotate(3deg);
      transform: skew(3deg) rotate(3deg);
  }
  
  .m-signature-pad--body {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 50px;
    border: 1px solid #f4f4f4;
  }
  
  .m-signature-pad--body
    canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
    }
  
  .m-signature-pad--footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    height: 40px;
  }
  
  .m-signature-pad--footer
    .description {
      color: #C3C3C3;
      text-align: center;
      font-size: 1.2em;
      margin-top: 1.8em;
    }
  
  .m-signature-pad--footer
    .button {
      position: absolute;
      bottom: 0;
    }
  
  .m-signature-pad--footer
    .button.clear {
      left: 0;
    }
  
  .m-signature-pad--footer
    .button.save {
      right: 0;
    }
  
  @media screen and (max-width: 1024px) {
    .m-signature-pad {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      height: 200px;
      min-width: 250px;
      min-height: 140px;
  
    }
    #github {
      display: none;
    }
  }
  
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .m-signature-pad {
      height: 200px;
    }
  }
  
  @media screen and (max-height: 320px) {
    .m-signature-pad--body {
      left: 0;
      right: 0;
      top: 0;
      bottom: 32px;
    }
    .m-signature-pad--footer {
      left: 20px;
      right: 20px;
      bottom: 4px;
      height: 28px;
    }
    .m-signature-pad--footer
      .description {
        font-size: 1em;
        margin-top: 1em;
      }
  }