Hamburger menu – I Dig Email

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
* {
-webkit-font-smoothing: antialiased;
‑webkit‑text‑size‑adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
Margin: 0;
padding: 0;
min-width: 100%;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
mso-line-height-rule: exactly;
‑webkit‑text‑size‑adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
border-spacing: 0;
color: #595959;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
img {
border: 0;
}
.ExternalClass * {
line-height: 100%;
}
.appleLinksWhite,
.appleLinksWhite a {
color: #ffffff;
text-decoration: none;
}
.appleLinksGrey,
.appleLinksGrey a {
color: #595959;
text-decoration: none;
}
.appleLinksBlack,
.appleLinksBlack a {
color: #000001;
text-decoration: none;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
a {
text-decoration: none;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.inner {
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
br {
font-size: 10px;
mso-line-height-rule: exactly;
line-height: 10px;
}
.one-column .contents {
text-align: left;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
‑webkit‑text‑size‑adjust: 100%;
-ms-text-size-adjust: 100%;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
max-width: 280px;
/*height: auto;*/
}
.two-column .text {
padding-top: 10px;
}
.transparent:hover {
-khtml-opacity: 0.95;
-moz-opacity: 0.95;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=95);
filter: alpha(opacity=95);
opacity: 0.95;
zoom: 1
}
#navcheckbox{
display:none;
overflow:hidden;
max-height:0px;
}
/*Media Queries*/
@media (max-width:480px) and (-webkit-min-device-pixel-ratio: 0) {
#logo {
height: 37px !important;
margin-top: 0;
width: 100px !important;
}
.main-table {
width: 100% !important;
}
#navcontainer {
position: relative;
}
#navcontainer th {
display: block;
width: 100%;
background-color: #ded6bf;
border-bottom: 1px solid #222222;
height: 20px;
padding: 15px 0px 15px;
}
#menucontainer {
position: relative;
overflow: hidden;
max-height: 200px;
border-top: 10px solid #222222;
}
#menucontainer .menu-items {
width: 100% !important;
background-color: #333333 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
#menucontainer .menu-item {
color: #222222 !important;
font-size: 18px !important;
}
#menucontainer .menu-item:hover {
-khtml-opacity: 0.80;
-moz-opacity: 0.80;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
filter: alpha(opacity=80);
opacity: 0.80;
zoom: 1;
}
#navcontainer table {
margin-top: -500px;
-ms-transition: margin-top .5s ease-in-out;
-webkit-transition: margin-top .5s ease-in-out;
}
/* checkbox mechanism */
#navcheckbox:checked + table {
margin-top: 0%;
}
/* fallback hover mechanism */
.nav-over,
.nav-under {
display: block !important;
max-height: none !important;
padding-top: 3px;
padding-bottom: 3px;
}
.nav-over img,
.nav-under img {
display: block;
float: right;
margin-right: 10px;
}
/*
to deal with quirks in windows 8.1 and Outlook iOS
*/
.nav-over {
-ms-transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
#navcontainer > .nav-over:hover + div table {
margin-top: 0% !important;
}
#navcontainer > .nav-over:hover {
visibility: hidden;
}
/*
to hide in Gmail/Inbox
*/
u + .body #navcontainer {
display: none !important;
}
.gmailfix {
display: none;
display: none!important;
}
}
</style>


</head>
<body style="Margin:0; padding-top:0; padding-bottom:0; padding-right:0; padding-left:0; min-width:100%; background-color:#4d3e39; -webkit-font-smoothing:antialiased; mso-line-height-rule:exactly; font-family:Arial, sans-serif; ">
<span style="display:none !important;visibility:hidden;opacity:0;color:transparent;height:0;width:0;line-height:0;overflow:hidden;" class="preheader">Preheader text</span>
<center class="wrapper" style="width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color:#4d3e39;">
<table style="background-color: #4d3e39;" width="100%" bgcolor="#4d3e39" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">
<div class="webkit" style="max-width: 600px; Margin: 0 auto;">


<table class="outer" style="border-spacing: 0; font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; color: #595959; Margin: 0 auto; width: 100%; max-width: 600px;" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center" bgcolor="#222222">

<table class="main-table" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout: fixed;" width="100%" bgcolor="#222222">
<tr>
<td style="padding-top: 20px;padding-right:0;padding-bottom: 2px;padding-left: 0;">

<table class="centered" align="left" cellspacing="0" cellpadding="0" border="0" width="32%" bgcolor="#222222" style="width:32% !important">
<tr>
<td class="centered" valign="top" style="padding-left: 20px;">
<a href="#" style="color: #111111; text-decoration:none;" target="_blank"><img border="0" width="125" alt="Logo" id="logo" src="https://gallery.mailchimp.com/fa9065ac83955ec7117a3a8cd/images/9f2ec4b1-bc1e-4915-9ea0-0820d97139ba.png" style="display:block; width:100%;max-width:125px;"></a>
</td>
</tr>
</table>

<div id="navcontainer">

<label for="navcheckbox">
<div class="nav-under" style="display:none;overflow:hidden;max-height:0px;background-color:#222222;"><img src="https://gallery.mailchimp.com/fa9065ac83955ec7117a3a8cd/images/345b65cb-0208-47e5-a40f-b3c09735e045.png" width="30" height="30" alt="Show Menu" title="Show Menu" border="0" style="padding-top: 5px;"></div>
<div class="nav-over" style="display:none;overflow:hidden;max-height:0px;position:absolute;top:0px;width:100%;opacity:0;"><img src="https://gallery.mailchimp.com/fa9065ac83955ec7117a3a8cd/images/345b65cb-0208-47e5-a40f-b3c09735e045.png" width="30" height="30" alt="Show Menu" title="Show Menu" border="0" style="padding-top: 5px;"></div>
</label>

<div id="menucontainer">

<input id="navcheckbox" type="checkbox" style="display:none !important;mso-hide:all">

<table class="menu-items" align="right" cellspacing="0" cellpadding="0" border="0" width="66%" bgcolor="#222222" style="width:66%;padding-top:10px;padding-right: 15px;padding-bottom:10px;padding-left:10px;">
<tr>
<th height="42" align="center" valign="middle"><a href="#" class="menu-item" title="Link 1" style="font-family:Arial, Tahoma;font-size:11px;line-height:22px;font-weight:bold;font-style:normal;color:#ffffff;Margin: 0;letter-spacing: -.25px;text-decoration:none;text-transform:uppercase;padding-right: 5px;" target="_blank">LinkOne</a></th>
<th height="42" align="center" valign="middle"><a href="#" class="menu-item" title="Link 2" style="font-family:Arial, Tahoma;font-size:11px;line-height:22px;font-weight:bold;font-style:normal;color:#ffffff;text-decoration:none;text-transform:uppercase;padding-right: 5px;" target="_blank">LinkTwo</a></th>
<th height="42" align="center" valign="middle"><a href="#" class="menu-item" title="Link 3" style="font-family:Arial, Tahoma;font-size:11px;line-height:22px;font-weight:bold;font-style:normal;color:#ffffff;Margin: 0;letter-spacing: -.25px;text-decoration:none;text-transform:uppercase;padding-right: 5px;" target="_blank">LinkThree</a></th>
<th class="mobile-hide" height="42" align="center" valign="middle"><a href="#" title="Link 4" class="menu-item" style="font-family:Arial, Tahoma;font-size:11px;line-height:22px;font-weight:bold;font-style:normal;color:#ffffff;Margin: 0;letter-spacing: -.25px;text-decoration:none;text-transform:uppercase;padding-right: 5px;" target="_blank">LinkFour</a></th>
<th height="42" align="center" valign="middle"><a href="#" class="menu-item" title="Link 5" style="font-family:Arial, Tahoma;font-size:11px;line-height:22px;font-weight:bold;font-style:normal;color:#ffffff;Margin: 0;letter-spacing: -.25px;text-decoration:none;text-transform:uppercase;padding-right: 5px;" target="_blank">LinkFive</a></th>
</tr>
</table>
</div>
</div>

</td>
</tr>
</table>


<table class="one-column" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0;max-width: 600px;">
<tr>
<td align="center" valign="top">
<a href="#" target="_blank" style="border:none;"><img class="hero-img" src="https://www.emailonacid.com/images/emails/coffeeshop/hero.jpg" width="100%" style="max-width:600px;display:block;Margin: 0 auto;" alt="" /></a>
</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>
</table>


<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background:#ffffff;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ded6bf">
<tr>
<td align="left" valign="top" style="padding: 14px 15px 14px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="right">
<table align="right" style="background-color: #ded6bf;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" width="220" bgcolor="#fdda24" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" align="center" width="20%">
<a href="#" target="_blank"><img src="https://www.emailonacid.com/images/emails/coffeeshop/social-icon-facebook-black.png" width="22" alt="" style="border-width:0;Margin: 0 auto;display: inline-block;vertical-align: middle;" /></a>
</td>
<td valign="middle" align="center" width="20%">
<a href="#" target="_blank"><img src="https://www.emailonacid.com/images/emails/coffeeshop/social-icon-twitter-black.png" width="22" alt="" style="border-width:0;Margin: 0 auto;display: inline-block;vertical-align: middle;" /></a>
</td>
<td valign="middle" align="center" width="20%">
<a href="#" target="_blank"><img src="https://www.emailonacid.com/images/emails/coffeeshop/social-icon-google-plus-black.png" width="22" alt="" style="border-width:0;Margin: 0 auto;display: inline-block;vertical-align: middle;" /></a>
</td>
<td valign="middle" align="center" width="20%">
<a href="#" target="_blank"><img src="https://www.emailonacid.com/images/emails/coffeeshop/social-icon-instagram-black.png" width="22" alt="" style="border-width:0;Margin: 0 auto;display: inline-block;vertical-align: middle;" /></a>
</td>
<td valign="middle" align="center" width="20%">
<a href="#" target="_blank"><img src="https://www.emailonacid.com/images/emails/coffeeshop/social-icon-pinterest-black.png" width="22" alt="" style="border-width:0;Margin: 0 auto;display: inline-block;vertical-align: middle;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>


<table class="one-column" style="background-color: #ffffff;" width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#222222">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 0;"> </td>
</tr>
<tr>
<td align="left" style="padding-left: 25px;">
<table width="350" cellpadding="0" cellspacing="0" border="0" bgcolor="#222222" style="min-width:300px;">
<tr>
<td valign="middle" align="left">
<a href="#"><img style="display:block;" src="https://gallery.mailchimp.com/fa9065ac83955ec7117a3a8cd/images/9f2ec4b1-bc1e-4915-9ea0-0820d97139ba.png" width="125" border="0" alt="Logo"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Tahoma;font-size:12px;line-height:16px;font-weight:normal;font-style:normal;color: #ffffff;padding-top:21px;border-style:none;" align="left">
If you'd rather not receive our emails, you can unsubscribe from our mailing list by clicking <a href="#" style="color: #ffffff;text-decoration:underline;">here</a>. If you have any questions, feel free to contact Customer Care by email at <a href="#" style="color: #ffffff;text-decoration:underline;">customercare@thecoffeeshop.com</a> or call us at 1-800-COFFEE.
</td>
</tr>
<tr>
<td style="font-family:font-family:Arial, Tahoma, sans-serif;;Font-size:12px;line-height:16px;font-weight:normal;font-style:normal;color:#FFFFFF;padding-top:21px;" align="left"><span class="appleLinksWhite">
727 Vine St.
<br/> Los Angeles, CA 90038</span>
</td>
</tr>
<tr>
<td style="font-family:font-family:Arial, Tahoma, sans-serif;;Font-size:12px;line-height:16px;font-weight:normal;font-style:normal;color:#FFFFFF;padding-top:18px;padding-bottom:22px;" align="left">
<span class="appleLinksWhite">© 2017 Coffee Shop, Inc.</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5" width="100%" style="font-size: 5px; mso-line-height-rule: exactly; line-height: 5px;"> </td>
</tr>
</table>
</td>
</tr>
</table>


</div>
</td>
</tr>
</table>
</center>
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
                                                           
</div>
</body>
</html>