body{
	margin:0;
	/*padding:20px;*/
	background-color:#ccc;
	font-family: Calibri;
}
.encabezado{
    position: relative;
    width: calc(100% - 4cm);
    float: left;
    vertical-align: bottom;
    margin: 1cm 2cm 0;
}
.logo{
	top:1cm;
	left:2cm;
    max-height: 2cm;
}
.fecha{
    float: right;
    margin-top: 1cm;
}
.texto{
    position: relative;
    text-align: justify;
    margin: 1cm 2cm 0;
    float: left;
    height: 23cm;
}
.datos{
    margin-top: 40px;
    float: left;
}
.datos label{
    float: left;
    width: 90%;
    margin: 6px 0;
    margin-left: 5%;
}
label.acepto{
    background-color: #195099;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    width: calc(100% - 4cm);
    padding: 12px 2cm;
    float: left;
}
label.confirmacion{
    background-color: #195099;
    color: #fff;
    font-size: 1.4rem;
    padding: 12px 40px;
    cursor: pointer;
    border-radius: 0;
    width: calc(100% - 80px);
    float: left;
    margin-top: 40px;
}
.datos input{
    float: left;
    width: calc(100% - 40px);
    padding: 6px 20px;
    font-size: 1.2rem;
}
.datos input:required::placeholder{
	color:red;
}
.pagina{
	/*margin-left: calc(50% - 105mm);*/
	position:relative;
	width:210mm;
	height:297mm;
	background-color:#fff;
}
.firma{
    position: absolute;
    border: 2px solid #888;
    right: 2cm;
    bottom: 3cm;
    z-index: 999999;
    background-color: #fff;
    border-radius: 12px;
    cursor: url(lapiz.cur), pointer;
    background-position: center;
    background-size: 200px;
    background-repeat:no-repeat;
}
.firma.vacia{
	background-image:url(fondo-firma.svg);
}
#canvasimg{
    display: none;
    float: right;
    border: 2px solid #888;
    border-radius: 12px;
}
button.borrar{
	position:absolute;
	clear:right;
	float:right;
	cursor:pointer;
    margin: 1cm 2cm 0;
	padding:6px 20px;
	text-transform:uppercase;
	bottom:2cm;
	right:10cm;
    background-color: #cccccc;
    color: #fff;
    font-weight: bold;
    border: 0;
    border-radius: 3px;
}
button.enviar{
	position:absolute;
	clear:right;
	float:right;
	cursor:pointer;
    margin: 1cm 2cm 0;
	padding:6px 20px;
	text-transform:uppercase;
	bottom:2cm;
	right:0;
    background-color: #195099;
    color: #fff;
    font-weight: bold;
    border: 0;
    border-radius: 3px;
}
#enlace{
	color:blue;
	cursor:pointer;
}

@media (max-width: 800px) {
	.pagina{
	    width: 100%;
	    float: left;
	    height: 100%;
	}
	.encabezado{
		width:calc(100% - 40px);
		margin:10px 20px;
	}
	.logo{
		max-height:60px;
	}
	.fecha{
	    float: right;
	    width: calc(100% - 20px);
	    margin: 10px 0 0;
	    padding: 0 10px;
	    text-align: right;
	}
	.datos{
	    margin-top: 0;
	}
	.texto {
	    margin: 0 20px;
	    overflow-y: scroll;
	    max-height: calc(100% - 250px);
	    padding: 0 10px;
	    margin-bottom: 20px;
	}
	.datos label{
	    float: left;
	    width: calc(100% - 20px);
	    margin: 2px 0;
	    margin-left: 20px;
	}
	.datos input{
		font-size:1rem;
	}

	.firma{
	    float: left;
	    position: relative;
	    width: 100%;
	    max-width: calc(100% - 4px);
	    right: auto;
	    bottom: 0;
	    height: 200px;
	    margin-top: 0;
	}
	button.borrar{
		float:left;
		position:relative;
		cursor:pointer;
		padding:6px 20px;
		text-transform:uppercase;
		right:10cm;
	    background-color: #cccccc;
	    color: #fff;
	    font-weight: bold;
	    border: 0;
	    border-radius: 3px;
    	bottom: auto;
    	right: auto;
    	margin: 20px 10px;
	}
	button.enviar{
		float:right;
		position:relative;
		cursor:pointer;
		padding:6px 20px;
		text-transform:uppercase;
		right:0;
	    background-color: #195099;
	    color: #fff;
	    font-weight: bold;
	    border: 0;
	    border-radius: 3px;
    	bottom: auto;
    	right: auto;
		margin: 20px 10px;
	}
}