<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple Transactional Email</title>
<style type="text/css">
.spoiler {
display: none;
}
.trigger.close {
display: none;
}
.trigger.open:target {
display: none;
}
.trigger.open:target + .trigger.close {
display: inline;
}
.trigger.open:target + .trigger.close + .spoiler {
display: block;
}
/* -------------------------------------
INLINED WITH https://putsmail.com/inliner
------------------------------------- */
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important; }
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important; }
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important; }
table[class=body] .content {
padding: 0 !important; }
table[class=body] .container {
padding: 0 !important;
width: 100% !important; }
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
table[class=body] .btn table {
width: 100% !important; }
table[class=body] .btn a {
width: 100% !important; }
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; }}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; }
.btn-primary table td:hover {
background-color: #34495e !important; }
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important; } }
</style>
</head>
<body class="" style="background-color:#f6f6f6;font-family:sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4;margin:0;padding:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#f6f6f6;width:100%;">
<tr>
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;"> </td>
<td class="container" style="font-family:sans-serif;font-size:14px;vertical-align:top;display:block;max-width:580px;padding:10px;width:580px;Margin:0 auto !important;">
<div class="content" style="box-sizing:border-box;display:block;Margin:0 auto;max-width:580px;padding:10px;">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader" style="color:transparent;display:none;height:0;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;visibility:hidden;width:0;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#fff;border-radius:3px;width:100%;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family:sans-serif;font-size:14px;vertical-align:top;box-sizing:border-box;padding:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;">
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="alert" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 16px; vertical-align: top; color: #000; font-weight: 500; text-align: center; border-radius: 3px 3px 0 0; background-color: #fff; margin: 0; padding: 20px;" align="center" bgcolor="#fff" valign="top">
<img src="http://citas.hospitalmetropolitano.ml/views/assets/images/metro_logo.gif" width="25%">
<br/>
Servicios En Línea - Hospital Metropolitano
<hr/>
</td>
</tr>
<tr>
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;">
<br/>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">Estimad@ Sra. <strong style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">Martin</strong>.-</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px; text-align: justify; text-justify: inter-word;">
Ponemos a su disposición el Servicio de Metromaternidad, permítanos por favor extenderle la invitación para que Ud. sea parte del selecto grupo de personas que gracias a esta gran decisión, garantizaron su bienestar y el de su familia.
El<b> Hospital Metropolitano </b>cuenta con la mejor tecnología de punta, al igual que los más prestigiosos Profesionales Médicos, somos los únicos en el país acreditados por la Joint Comission International, que nos exige cumplir con altos estándares de calidad y seguridad en la atención a pacientes.
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px; text-align: justify; text-justify: inter-word;color: darkcyan;">
<em></i>¡Un bebé no nace solo, con él también nacen nuevos momentos.
Es por eso que queremos compartir con ustedes ese día tan especial, ofreciéndoles la mejor alternativa para recibir a su mayor tesoro, SU HIJO.!</em>
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">
<b>Beneficios:</b>
<hr/>
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;margin-bottom: 5px;">
<tr>
<td class="content-block" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
<img src="http://serviciosenlinea.hospitalmetropolitano.ml/views/habitaciones.jpg" width="100%" height="29%">
</td>
<td class="content-block" style="font-family:verdana;font-size:14px;vertical-align:top;font-size:12px;text-align:center;width:70%">
<h4>Habitaciones Privadas y Élite.</h4>
<p style="font-family:verdana;font-size:14px;text-align:left;text-justify: inter-word;margin-left:15px;">Adecuadas para una experiencia de mayor confort.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%; margin-bottom: 5px;">
<tr>
<td class="content-block" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
<img src="http://serviciosenlinea.hospitalmetropolitano.ml/views/quirofano.jpg" width="100%">
</td>
<td class="content-block" style="font-family:verdana;font-size:14px;vertical-align:top;font-size:12px;text-align:center;width:70%">
<h4>Quirofano</h4>
<p style="font-family:verdana;font-size:14px;text-align:left;text-justify: inter-word;margin-left:15px;">Con la más alta tecnología y moderna infraestructura.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;margin-bottom: 5px;">
<tr>
<td class="content-block" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
<img src="http://serviciosenlinea.hospitalmetropolitano.ml/views/neonatologia.jpg" width="100%" height="65%">
</td>
<td class="content-block" style="font-family:verdana;font-size:14px;vertical-align:top;font-size:12px;text-align:center;width:70%">
<h4>Neonatología</h4>
<p style="font-family:verdana;font-size:14px;text-align:left;text-justify: inter-word;margin-left:15px;">Preparada para una atención oportuna y especializada. Contámos con médicos Pediatras,
Neonatólogos y personal calificado para el cuidado del neonato.</p>
</td>
</tr>
</table>
</p>
<hr/>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">
<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" style="text-decoration:none;color:#000;"><b>Ver Presupuesto para:</b> Parto Normal - Recien Nacido - Hab. Privada.</a>
</div><div><div class="spoiler" style="display: none;">
<p style="margin-top: 10px;
margin-bottom: -15px;">Descripción: <b style="float:right;">Valor:</b></p>
<hr/>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p>Habitación Privada (2 Días): <b style="float:right;">360 USD</b></p>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p>Emergencia: <b style="float:right;">60 USD</b></p>
<p><b> </b> <b style="float:right;">Total: 60 USD</b></p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;text-aling:center;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;box-sizing:border-box;width:100%;text-align:center;">
<tbody>
<tr>
<td align="center" style="font-family:sans-serif;font-size:14px;vertical-align:top;padding-bottom:15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;width:auto;">
<tbody>
<tr>
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;background-color:#ffffff;border-radius:5px;text-align:center;background-color:#3498db;"> <a href="http://htmlemail.io" target="_blank" style="text-decoration:underline;background-color:#ffffff;border:solid 1px #3498db;border-radius:5px;box-sizing:border-box;color:#3498db;cursor:pointer;display:inline-block;font-size:14px;font-weight:bold;margin:0;padding:12px 25px;text-decoration:none;text-transform:capitalize;background-color:#3498db;border-color:#3498db;color:#ffffff;">Reservar Ahora </a></td>
<t
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px; text-align: right; text-justify: inter-word;">
<a href="http://hospitalmetropolitano.org/" style="color:#3498db;text-decoration:underline;color:#999999;font-size:12px;text-align:center;color:darkcyan;">¿Tienes Preguntas?</a></a>.
</p>
</div></div>
<hr/>
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">
Recuerda que para cualquier consulta puedes contactarnos al 1800 HMETRO. Gracias por preferirnos.
</p>
<p style="font-family:sans-serif;font-size:14px;font-weight:normal;margin:0;Margin-bottom:15px;">
Hospital Metropolitano.
</p>
<a href="#spoiler-open-1" id="spoiler-open-1" class="trigger open" style="font-size:15px">Open</a>
<a href="#spoiler-close-1" id="spoiler-close-1" class="trigger close" style="font-size:15px">Close</a>
<div class="spoiler">
Ololo, Imma spoiler
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear:both;padding-top:10px;text-align:center;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;">
<tr>
<td class="content-block powered-by" style="font-family:sans-serif;font-size:14px;vertical-align:top;color:#999999;font-size:12px;text-align:center;">
<a href="http://hospitalmetropolitano.org/" style="color:#3498db;text-decoration:underline;color:#999999;font-size:12px;text-align:center;color:darkcyan;">Hospital Metropolitano</a>.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family:sans-serif;font-size:14px;vertical-align:top;"> </td>
</tr>
</table>
</body>
</html>