*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contenedor {
    background: #e0e0e0;
    width: 90%;
    margin: 0 auto;
    height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;
}

.sign-pad {
    background: white;
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 460px;
    min-width: 700px;
    min-height: 360px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
        0 0 40px rgba(0, 0, 0, 0.08) inset;

    border-radius: 4px;
}

.sign-pad-body {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

canvas {

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.buttons {
    display: flex;
    flex-grow: 1;
}

@media (max-width: 788px) {
    .sign-pad {
        -webkit-transform: rotate(90deg);
        /* Safari and Chrome */
        -moz-transform: rotate(90deg);
        /* Firefox */
        -ms-transform: rotate(90deg);
        /* IE 9 */
        -o-transform: rotate(90deg);
        /* Opera */
        transform: rotate(90deg);
    }

}