<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>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 25px !important;
font-family: 'Lato', sans-serif;
font-weight: bold;
color:#b93639;
text-align:center;
}
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;
}
}
.emailImage{max-width:540px;}
@media only screen and (max-width: 480px){
.emailImage{
height:auto !important;
max-width:540px !important;
width: 100% !important;
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: 'Lato', 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; width: 100%; background-color: #f6f6f6;">
<tbody><tr>
<td style="font-family: 'Lato', sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: 'Lato', sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<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; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- START MAIN CONTENT AREA -->
<tbody><tr>
<td class="wrapper" style="font-family: 'Lato', 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%;">
<tbody><tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<h1 style="font-size: 28px !important; margin-bottom: 25px !important; font-family: 'Lato', sans-serif; color:#b93639; text-align:center;">Your Order Status</h1>
<p style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Order Email: {{customer.email}}</p>
<p style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Order Number: {{order_number}}</p>
<p style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hello {{customer.first_name}},</p>
<p style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="font-family: 'Lato', sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Thank You,<br> Store Owner Name</p>
<center>
<p style="width:100%; text-align:center">
{{ordertable_with_properties_vendor}}
</p>
</center>
{{w3_public_notes}}
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" 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%;">
<tbody>
<tr>
<td height="50" style="width:100%; display:block; font-family: 'Lato', sans-serif; font-size: 14px; vertical-align: middle; background-color: #b93639; border-radius: 5px; text-align: center;"> <p><a href="https://nine5-2.myshopify.com/pages/order-lookup" target="_blank" style="line-height:50px; display: inline-block; color: #ffffff; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; text-transform: capitalize; width:100% !important">View My Order</a></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</tbody></table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: 'Lato', sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</tbody></table>
</body></html>
