<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td-primary:hover,
.button-a-primary:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Whatsapp specific */
.wa-tip {
margin-top: 45px !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 90% !important;
padding-left: 5% !important;
padding-right: 5% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
.stack-column-left {
text-align: left !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
padding-left: 10px;
padding-right: 10px;
}
table.center-on-narrow {
display: inline-block !important;
}
.left-on-narrow {
text-align: left !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
padding-left: 10px;
padding-right: 10px;
}
table.left-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 22px !important;
}
.email-container .responsive-enlarge-text {
font-size: 22px !important;
}
/* Whatsapp banner specific */
.wa-tip {
font-size: 16px !important;
padding-bottom: 4px !important;
}
.wa-text {
width: 100% !important;
font-size: 18px !important;
line-height: 22px !important;
padding-bottom: 10px !important;
}
.wa-btn-container {
padding-bottom: 10px !important;
}
.wa-btn-container .wa-btn {
padding: 10px 12px 8px 12px !important;
}
.wa-btn-container .wa-btn .wa-btn-text {
font-size: 12px !important;
font-weight: normal !important;
padding-left: 2px !important;
}
.wa-bak {
font-size: 10px !important;
line-height: 12px !important;
padding-bottom: 20px !important;
}
.stack-column-center .wa-convo-img {
width: 80% !important;
height: auto;
}
}
/* Smaller phone screens ie : iphone 5, SE etc. */
@media screen and (max-width: 320px) {
/* Whatsapp banner specific */
.wa-tip {
font-size: 14px !important;
}
.wa-text {
font-size: 16px !important;
line-height: 20px !important;
}
.wa-btn-container .wa-btn .wa-btn-text {
font-size: 10px !important;
}
.wa-btn-container .wa-btn img {
height : 18px !important;
width : 18px !important;
}
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<body vlink="#ffffff">
<div style="font-size:10px;line-height:10px;"> </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td></td>
<td width="600">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-family:sans-serif;font-size:15px;line-height:30px;line-height:200%;text-align:center;">
<img src="https://cally.com/content/img/logo_d.png" alt="Logo">
<br><a href="#" rel="nofollow" style="text-decoration:none;color:#179fe8;font-weight:bold;">cally.com</a>
<div style="font-size:20px;line-height:20px;"> </div>
</td>
</tr>
<tr>
<td style="background-color:#fff;font-family:sans-serif;font-size:14px;line-height:22px;line-height:155%;color:#333333;">
<div style="font-size:20px;line-height:20px;"> </div>
<div style="font-size:20px;line-height:32px;margin-bottom:5px;text-align:center;">Beschikbaarheid opgegeven</div>
<div style="font-size:10px;line-height:10px;"> </div>
Beste Apocalypse Cow,
<div style="font-size:10px;line-height:10px;"> </div>
Je hebt je beschikbaarheid opgegeven voor de afspraak 'Brouwerijbezoek 't Kroontje'. Druk op de onderstaande knop als je de afspraak wil bekijken of je beschikbaarheid wil aanpassen.
<div style="font-size:30px;line-height:30px;"> </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="text-align:center;">
<table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center;display:inline-block;">
<tr>
<td style="border-radius:3px;" bgcolor="#179fe8"><a href="https://cally.com/mail/114/mn25pmmade82ged4z" style="font-family:sans-serif;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:3px;padding:12px 18px;border:1px solid #179fe8;display:inline-block;">afspraak bekijken</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="font-size:30px;line-height:30px;"> </div>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>