<style>
.cabecera {width: 100%; height:30px; background-color:#3797f7; margin: 0px auto;
text-align:center; font-size:16px; line-height:30px; color:#ffffff;}
.cuerpo {border-width: 1px; border-color: #e5e5e5; border-style: none solid solid solid;
background-color: #f5f5f5; padding: 25px 0px 30px 0px;}
.marco {padding: 0 18px 0 18px;}
.formulario-blog {width: 100%;}
.formulario-blog tr.campo td { padding: 6px 0; }
.formulario-blog td p {text-align:right; line-height: 12px; alignment-baseline:middle;
font-size: 12px !important; font-weight: lighter !important; }
.formulario-blog input, select { border: solid 1px #999; min-height: 22px; min-width:200px;
line-height: 22px; padding: 0px 5px; color: #999; font-size: 12px; border-radius: 2px;
white-space: nowrap; text-decoration: none; color:#333; margin-left:5px; background-color:#ffffff;
}
input[type="submit"] {
display: inline-block; border: solid 1px #1c83ea; min-height: 34px;
line-height: 34px; padding: 0px 20px; background-color: #3797f7; color: #FFFFFF;
font-size: 14px; font-weight: 200; border-radius: 3px; white-space: nowrap;
text-decoration: none; margin-top: 20px; }
.leyenda{text-align: center; font-size: 11px;}
.leyenda a {color: #3366cc; text-decoration: none; alignment-adjust:central;}
.txt-cap {text-transform: capitalize;}
.error { color: #8A0808; font-size: 11px; margin-right: 40px; }
@media screen and (min-width: 328px) and (max-width: 370px) {
.marco {padding: 0px !important;}
}
@media screen and (min-width: 320px) and (max-width: 328px) {
.modal-blog{padding-right: 0px !important;}
.modal-body{padding: 7px;}
.marco {padding: 0 10px 0 10px !important;}
}
</style>
<div id="js-modalBlog" class="modal fade modal-blog" style="overflow: hidden; ">
<div class="modal-dialog" style="max-width:420px;">
<div class="modal-content">
<div style="margin: 0px auto;">
<div class="modal-header">
<button id="close-alert-modal" type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<!--CABECERA-->
<div class="cabecera">Complete aquí sus datos</div>
<!--CUERPO-->
</div>
<div id="js-ajaxBlog" class="modal-body">
<div class="cuerpo">
<!--FORMULARIO-->
<div class="marco">
<form method="GET" action="https://app.embluemail.com/TriggerUrlExterna.aspx">
<input type="hidden" name="key" value="6abad4d2-1bf2-43bf-a48f-4064a2d7e789">
<table class="formulario-blog campos">
<tbody>
<tr class="campo">
<td><p>Email *</p></td>
<td><input id="email" type="email" placeholder="miemail@miemail.com" name="email" required data-error="Campo requerido|Formato inválido"></td>
</tr>
<tr class="error-email">
<td colspan="2" style="text-align: right;"></td>
</tr>
<tr id="campo-209798" class="campo">
<td>
<p class="txt-cap">nombre<span class="req">*</span></p>
</td>
<td><input id="209798" type="text" name="209798" data-error="Campo requerido|Formato inválido" required=""></td>
</tr>
<tr class="error-209798">
<td colspan="2" style="text-align: right;"></td>
</tr><tr id="campo-209799" class="campo">
<td>
<p class="txt-cap">apellido<span class="req">*</span></p>
</td>
<td><input id="209799" type="text" name="209799" data-error="Campo requerido|Formato inválido" required=""></td>
</tr>
<tr class="error-209799">
<td colspan="2" style="text-align: right;"></td>
</tr></tbody>
</table>
<div>
<input type="checkbox" id="check-politica" name="check-politica" required="">
<span style="font-size: 11px;">Al hacer clic en Suscribirse, usted autoriza a AVIATUR para realizar el envío de correos publicitarios. Para mayor información consultar la <a href="https://www.aviatur.com/contenidos/politica-de-privacidad" target="_blank">Política de Privacidad y Tratamiento de Datos</a>.</span>
</div>
<table class="formulario-blog">
<tbody><tr>
<td colspan="2" align="center">
<input type="submit" value="Suscribirse">
</td>
</tr>
</tbody></table>
</form>
</div>
<!--FIN FORMULARIO-->
</div>
</div>
<!--FIN CUERPO-->
<div class="modal-footer">
<!--LEYENDA-->
<div class="leyenda">
Formulario creado a través de
<a href="http://www.embluemail.com" target="_blank">emBluemail</a>.
</div>
</div>
<!--FIN LEYENDA-->
</div>
</div>
</div>
</div>