body {
    /*font-family: Helvetica, Sans-Serif;*/
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.m-signature-pad {
    font-size: 10px;
    position: relative;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 350px;
    max-width: 90%;
    max-height: 90%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translate(-50%, -50%);
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
}

    .m-signature-pad.inline {
        display:block;
        font-size: 10px;
        position: relative;
        left: unset;
        top: unset;
        width: 600px;
        height: 350px;
        max-width: 90%;
        max-height: 90%;
        -moz-transform: unset;
        -webkit-transform: unset;
        -o-transform: unset;
        -ms-transform: unset;
        transform: unset;
        border: 1px solid #e8e8e8;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
        border-radius: 4px;
    }

    .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: 20px;
    right: 20px;
    top: 20px;
    bottom: 60px;
    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: 10px;
    height: 40px;
}

    .m-signature-pad--footer
    .description {
        color: #C3C3C3;
        text-align: center;
        font-size: 1.2em;
        margin-top: 1.8em;
    }

@media screen and (max-width: 1024px) {
    .m-signature-pad {
        /*top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-width: 250px;
    min-height: 140px;*/
        width: 90%;
        left: 5%;
        margin: 5%;
        -moz-transform: translateX(-5%) translateY(-50%);
        -webkit-transform: translateX(-5%) translateY(-50%);
        -o-transform: translateX(-5%) translateY(-50%);
        -ms-transform: translateX(-5%) translateY(-50%);
        transform: translate(-5%, -50%);
    }

        .m-signature-pad.inline {
            width: 90%;
            left: unset;
            margin: 0 auto;
            -moz-transform: unset;
            -webkit-transform: unset;
            -o-transform: unset;
            -ms-transform: unset;
            transform: unset;
        }
    /*#github {
    display: none;
  }*/
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /*.m-signature-pad {
    margin: 10%;
  }*/
}

@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;
    }*/
}