<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
EmailonAcid.com
Unlock the code email.
Hint: See what happens when you solve for alternate words :)
!-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=600">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<style>
body{
padding:0;
}
input{
display:none;
}
</style>
<style>
/*
Email Version: @media screen and (-webkit-min-device-pixel-ratio: 0)
Web Version: @media screen
*/
.yfix{}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.cbox:checked + .fallback-wrapper {
display:none!important;
}
.cbox:checked + .kinetic-wrapper{
display:block!important;
max-height:none !important;
overflow:visible !important;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
- Add .cbox to ensure CSS specificity weight exceeds earlier block
*/
#MessageViewBody .cbox + .fallback-wrapper,
body.MsgBody .cbox + .fallback-wrapper{
display:block!important;
}
#MessageViewBody .cbox + .kinetic-wrapper,
body.MsgBody .cbox + .kinetic-wrapper{
display:none !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.kinetic{
height:620px;
width:600px;
background-color:#000000;
overflow:hidden;
}
.kinetic .container{
position:relative;
}
.toparrow{
position:absolute;
top:0px;
left:0px;
}
.splat {
z-index:20;
position:absolute;
top:0px;
left:0px;
-webkit-animation: 2s rubberband 0.5s;
animation: 2s rubberband 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/**
CORE combo code:
The following pertain to the unlocking mechanism
**/
.game-container{
z-index:30;
position:absolute;
top:305px;
left:150px;
}
.keybox{
display:inline-block;
border:3px solid white;
margin:1px;
}
.keybox label{
cursor:pointer;
width:65px;
height:55px;
background-color:black;
color:white;
display:none;
padding-top:5px;
font-size:40px;
font-family:Helvetica Neue, Helvetica,Arial;
font-weight:400;
font-style:italic;
text-align:center;
cursor:pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
#key1a:checked ~ .kinetic .box1 label:nth-child(2),
#key2a:checked ~ .kinetic .box2 label:nth-child(2),
#key3a:checked ~ .kinetic .box3 label:nth-child(2),
#key4a:checked ~ .kinetic .box4 label:nth-child(2){
display:block;
}
#key1b:checked ~ .kinetic .box1 label:nth-child(3),
#key2b:checked ~ .kinetic .box2 label:nth-child(3),
#key3b:checked ~ .kinetic .box3 label:nth-child(3),
#key4b:checked ~ .kinetic .box4 label:nth-child(3){
display:block;
}
#key1c:checked ~ .kinetic .box1 label:nth-child(4),
#key2c:checked ~ .kinetic .box2 label:nth-child(4),
#key3c:checked ~ .kinetic .box3 label:nth-child(4),
#key4c:checked ~ .kinetic .box4 label:nth-child(4){
display:block;
}
#key1d:checked ~ .kinetic .box1 label:nth-child(1),
#key2d:checked ~ .kinetic .box2 label:nth-child(1),
#key3d:checked ~ .kinetic .box3 label:nth-child(1),
#key4d:checked ~ .kinetic .box4 label:nth-child(1){
display:block;
}
#key1c:checked ~ #key2b:checked ~ #key3c:checked ~ #key4b:checked ~ .kinetic label{
background-color:green;
}
#key1c:checked ~ #key2b:checked ~ #key3c:checked ~ #key4b:checked ~ .kinetic .win-wrapper{
z-index:40;
display:block!important;
position:absolute;
height:620px;
width:600px;
}
#key1c:checked ~ #key2b:checked ~ #key3c:checked ~ #key4b:checked ~ .kinetic .win{
text-decoration:none;
position:absolute;
display:block;
top:380px;
left:120px;
width:300px;
text-align:center;
font-size:40px;
padding:20px 30px;
background-color:red;
border-radius:5px;
color:white;
font-family: Lobster,Arial;
-webkit-animation: popinanim 2.5s ease;
}
/**
END OF CORE COMBO CODE
**/
/**
The following code are for frills and effects not core to the unlock mechanism
**/
@-webkit-keyframes popinanim{
0% {
opacity:0;
transform: scale(0.75);
}
90% {
opacity:0;
transform: scale(0.75);
}
95% {
opacity:1;
transform: scale(1.3);
}
100% {
opacity:1;
transform: scale(1);
}
}
@-webkit-keyframes rubberband {
0%{
opacity:0;
}
40%{
transform: scale3d(2, 2, 2);
opacity:0;
}
50% {
opacity:1;
transform: scale3d(1, 1, 1);
}
65% {
transform: scale3d(1.25, 0.75, 1);
}
70% {
transform: scale3d(0.75, 1.25, 1);
}
75% {
transform: scale3d(1.15, 0.85, 1);
}
82% {
transform: scale3d(.95, 1.05, 1);
}
90% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
.lateentrance{
-webkit-animation: lateentrance 3s linear;
}
@-webkit-keyframes lateentrance {
0%{
opacity:0;
}
70%{
opacity:0;
}
100%{
opacity:1;
}
}
/*http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/*/
.rocket {
position: absolute;
background-image:url(http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_rocket-down.png);
width:45px;
height:45px;
background-size:cover;
left: 275px;
top: 275px;
-webkit-animation: circlepath 30s linear infinite; /* Chrome, Safari */
animation: circlepath 30s linear infinite; /* Chrome, Firefox, IE 10+, Safari */
}
.planet{
z-index:10;
position:absolute;
background-color: #4e4e51;
left:100px;
top:100px;
width:400px;
height:400px;
border-radius:200px;
}
@-webkit-keyframes circlepath {
from { transform: rotate(0deg) translateX(235px) }
to { transform: rotate(360deg) translateX(235px) }
}
/* Rocket liftoff */
#key1c:checked ~ #key2b:checked ~ #key3c:checked ~ #key4b:checked ~ .kinetic .rocket{
-webkit-animation: 3s liftoff ease-in !important;
animation: 3s liftoff ease-in !important;
}
@-webkit-keyframes liftoff {
from { transform: rotate(180deg) translateX(235px) translateY(0px) }
40%{
transform: rotate(270deg) translateX(235px) translateY(0px)
}
to { transform: rotate(270deg) translateX(235px) translateY(1000px) }
}
/************
STEP 4: Psychedelic background
background gradient animator - https://www.gradient-animator.com/
Will display when four keys are turned
************/
input[id$=d]:checked ~ .kinetic {
-webkit-animation: none;
animation:none;
background:none;
background-color:#000000;
}
.kinetic {
-webkit-animation: psychedelic 30s ease infinite;
animation: psychedelic 30s ease infinite;
background: linear-gradient(90deg, #ff00a9, #ffaa00, #ff00a9, #aa00ff,#aaff00, #04aaff, #aa00ff,#ff00a9);
background-size: 500% 500%;
}
@-webkit-keyframes psychedelic {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
/************
STEP 3: Horizontal scrolling email code
Will display when three keys are turned
************/
input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic div[class^=scrolltext],
div[class^=scrolltext]{
display:none;
}
input[id$=d]:checked ~ .kinetic div[class^=scrolltext]{
display:block;
position:absolute;
left:0px;
top:0px;
color:#19701a;
font-family:VT323;
font-size:35px;
line-height:100px;
width:2100px;
overflow:hidden;
letter-spacing:7px;
-webkit-animation: 25s scrollleft -5s linear infinite;
animation: 25s scrollleft -5s linear infinite;
word-break: break-all;
}
input[id$=d]:checked ~ .kinetic div[class^=scrolltext2]{
margin-top:50px;
-webkit-animation: 20s scrollright -5s linear infinite;
animation: 20s scrollright -5s linear infinite;
}
@-webkit-keyframes scrollleft {
from{
transform:translateX(600px);
}
to{
transform:translateX(-2100px);
}
}
@-webkit-keyframes scrollright {
from{
transform:translateX(-2100px);
}
to{
transform:translateX(600px);
}
}
/************
STEP 2: Orbiting '@' sign
Will display when two keys are turned
************/
input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .ball,
input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .ball::before,
.kinetic .ball,
.kinetic .ball::before{
-webkit-animation:none;
animation:none;
display:none;
}
/* let stars float out */
input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic{
overflow:visible;
}
input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .ball{
z-index:0;
display: block!important;
position: absolute;
left: 400px;
top:280px;
-webkit-animation: atcircle 10s linear 0s infinite ;
}
input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .ball::before{
background-image:url(http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_at.png);
display:block!important;
background-size:cover;
width: 50px;
height: 50px;
content:'';
-webkit-animation: orbitshift 5s ease-in-out -0s infinite alternate ;
}
@-webkit-keyframes atcircle {
0% { -webkit-transform: rotate(0deg) translateX(130px) rotate(0deg) scale(1);z-index:11;}
25% { -webkit-transform: rotate(90deg) translateX(130px) rotate(-90deg) scale(1.8);}
50% { -webkit-transform: rotate(180deg) translateX(130px) rotate(-180deg) scale(1);}
75%{
-webkit-transform: rotate(270deg) translateX(130px) rotate(-270deg) scale(0.5);
}
100%{ -webkit-transform: rotate(360deg) translateX(130px) rotate(-360deg) scale(1);z-index:10; }
}
@-webkit-keyframes orbitshift {
0%{
-webkit-transform: translateY(0px);
}
100%{
-webkit-transform: translateX(-220px);
}
}
/************
Step 1: STAR animations
Stars will display when user turns one or two keys
*************/
.star{
position:absolute;
left: 300px;
top: 440px;
}
input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .star::before
{
-webkit-animation: none;
animation: none;
}
input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic .star::before{
width:8px;
height:8px;
border-radius:8px;
background-color:white;
content:'';
display:inline-block;
-webkit-animation: 3s starry ease-in infinite;
animation: 3s starry ease-in infinite;
}
.s1{
-webkit-transform: rotate(170deg);
}
.s1::before{
-webkit-animation-delay:-1.8s!important;
}
.s2{
-webkit-transform: rotate(20deg);
}
.s2::before{
-webkit-animation-delay:-1.2s!important;
}
.s3{
-webkit-transform: rotate(280deg);
}
.s3::before{
-webkit-animation-delay:-2s!important;
}
.s4{
-webkit-transform: rotate(190deg);
}
.s4::before{
-webkit-animation-delay:-3.1s!important;
}
.s5{
-webkit-transform: rotate(130deg);
}
.s5::before{
-webkit-animation-delay:-1.6s!important;
}
.s6{
-webkit-transform: rotate(320deg);
}
.s6::before{
-webkit-animation-delay:-2.2s!important;
}
.s7{
-webkit-transform: rotate(230deg);
}
.s7::before{
-webkit-animation-delay:-1.3s!important;
}
.s8{
-webkit-transform: rotate(60deg);
}
.s8::before{
-webkit-animation-delay:-4.7s!important;
}
.s9{
-webkit-transform: rotate(100deg);
}
.s9::before{
-webkit-animation-delay:-2.9s!important;
}
@-webkit-keyframes starry {
from {
-webkit-transform: translateX(0px);
}
to{
-webkit-transform: translateX(500px);
}
}
} /* Code Media Query */
</style>
<style>
/*
IE and Firefox keyframes - not needed if targeting Webkit (ie. email)
This is mainly for "Web version"
Note: IE does not like keyframes within media queries;
*/
@keyframes rubberband {
0%{
opacity:0;
}
40%{
transform: scale3d(2, 2, 2);
opacity:0;
}
50% {
opacity:1;
transform: scale3d(1, 1, 1);
}
65% {
transform: scale3d(1.25, 0.75, 1);
}
70% {
transform: scale3d(0.75, 1.25, 1);
}
75% {
transform: scale3d(1.15, 0.85, 1);
}
82% {
transform: scale3d(.95, 1.05, 1);
}
90% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes circlepath {
from { transform: rotate(0deg) translateX(235px) }
to { transform: rotate(360deg) translateX(235px) }
}
@keyframes liftoff {
from { transform: rotate(180deg) translateX(235px) translateY(0px) }
30%{
transform: rotate(270deg) translateX(235px) translateY(0px)
}
to { transform: rotate(270deg) translateX(235px) translateY(1450px) }
}
@keyframes psychedelic {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes scrollleft {
from{
transform:translateX(600px);
}
to{
transform:translateX(-2100px);
}
}
@keyframes scrollright {
from{
transform:translateX(-2100px);
}
to{
transform:translateX(600px);
}
}
.s1{
transform: rotate(170deg);
}
.s1::before{
animation-delay:-1.8s!important;
}
.s2{
transform: rotate(20deg);
}
.s2::before{
animation-delay:-1.2s!important;
}
.s3{
transform: rotate(280deg);
}
.s3::before{
animation-delay:-2s!important;
}
.s4{
transform: rotate(195deg);
}
.s4::before{
animation-delay:-3.1s!important;
}
.s5{
transform: rotate(130deg);
}
.s5::before{
animation-delay:-1.6s!important;
}
.s6{
transform: rotate(320deg);
}
.s6::before{
animation-delay:-2.2s!important;
}
.s7{
transform: rotate(230deg);
}
.s7::before{
animation-delay:-1.3s!important;
}
.s8{
transform: rotate(60deg);
}
.s8::before{
animation-delay:-4.7s!important;
}
.s9{
transform: rotate(100deg);
}
.s9::before{
animation-delay:-2.9s!important;
}
@keyframes starry {
from {
transform: translateX(0px);
}
to{
transform: translateX(500px);
}
}
/* End of FF/IE */
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
.retina_image {display:none !important;height: 0 !important;width:0 !important;}
</style>
<![endif]-->
</head>
<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#000000;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow:hidden;">
<div class="webkit" style="max-width:600px;margin:0 auto;background-color:#000000;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Calibri, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<!-- ======= start main body ======= -->
<table class="outer" align="center" width="600" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;font-family: Calibri, sans-serif, 'open sans';color:#333333;Margin:0 auto;min-width:100%;">
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<!-- ======= start header ======= -->
<table border="0" width="600" cellpadding="0" cellspacing="0" bgcolor="#1f212d" style="border-bottom: 2px solid #7ac043;min-width:100%;">
<tr>
<td style="background-color: #1f212d;" bgcolor="#1f212d" align="center">
<table style="width:100%;border-bottom: 1px solid #2d3039;">
<tbody>
<tr>
<td align="center">
<center>
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="Margin: 0 auto;">
<tbody>
<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0;font-family: Calibri, sans-serif, 'open sans';color:#333333;">
<tr>
<!-- ======= PREHEADER TEXT HERE ======= -->
<td style="width:100%;mso-hide:all;font-size:1px;color:#1f212d;line-height:1px;max-height:1px;opacity:0;overflow:hidden;">
Go ahead and try a few different options! | Email on Acid provides email testing, troubleshooting and tracking tools to help you simplify and improve your email marketing efforts.</td>
</tr>
<tr>
<td class="contents" style="width:100%;">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto;">
<tbody>
<tr>
<!-- ======= logo ======= -->
<td align="center">
<a href="https://www.emailonacid.com" style="display: block; border: 0px !important;text-decoration:none;">
<img border="0" width="174" style="border:0; display:block; height:73px; width:174px;background-color:#1f212d;color:#ffffff;font-size:20px;text-align:center;line-height:73px;text-decoration:none !important;" src="https://www.emailonacid.com/images/emails/eoa2016/logo.png?noresize" alt="Email on Acid">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- ======= end header ======= -->
<!-- ======= start MAIN_BODY ======= -->
<table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td>
<img height="180" width="600" src="http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_solve-banner.png" style="display:block;" border=0></a>
</td></tr></table>
<!-- Begin KINETIC_CONTENT -->
<!--[if !mso]><!-- -->
<input type=radio class="cbox" style="display:none !important" checked>
<div class="kinetic-wrapper overflow1" style="overflow:hidden;display:none;max-height:0px;">
<input id="key1a" name="key1" type=radio>
<input id="key1b" name="key1" type=radio>
<input id="key1c" name="key1" type=radio>
<input id="key1d" name="key1" type=radio checked>
<input id="key2a" name="key2" type=radio>
<input id="key2b" name="key2" type=radio>
<input id="key2c" name="key2" type=radio>
<input id="key2d" name="key2" type=radio checked>
<input id="key3a" name="key3" type=radio>
<input id="key3b" name="key3" type=radio>
<input id="key3c" name="key3" type=radio>
<input id="key3d" name="key3" type=radio checked>
<input id="key4a" name="key4" type=radio>
<input id="key4b" name="key4" type=radio>
<input id="key4c" name="key4" type=radio>
<input id="key4d" name="key4" type=radio checked>
<div class="kinetic"><table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td>
<div class="container">
<!-- This text is displayed only when the user turns three keys -->
<div class="scrolltext">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/‌/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/‌/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ padding:0; }
@media screen and (-webkit-min-device-pixel-ratio: 0) { .cbox:checked + .kinetic-wrapper{ display:block!important;
-webkit-animation: circlepath 30s linear infinite; /* Webkit clients */ .planet{ z-index:10; position:absolute;
@-webkit-keyframes circlepath { from { -webkit-transform: rotate(0deg) translateX(235px) }
</div>
<div class="scrolltext2">
<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" ><![endif]-->
<input type=radio class="cbox" style="display:none !important" checked><!-- Begin KINETIC_CONTENT -->
<div class="keybox box1"> <label for="key1a">X</label> <label for="key1b">G</label> <label for="key1c">H</label>
</div>
<div class="ball"></div>
<div class="star s1"></div>
<div class="star s2"></div>
<div class="star s3"></div>
<div class="star s4"></div>
<div class="star s5"></div>
<div class="star s6"></div>
<div class="star s7"></div>
<div class="star s8"></div>
<div class="star s9"></div>
<div class="star s10"></div>
<div class="rocket lateentrance"></div>
<div class="planet"></div>
<img class="splat" src="http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_eoa-splat.png">
<img class="toparrow" src="http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_toparrow.png">
<div class="game-container lateentrance">
<div class="keybox box1">
<label for="key1a">X</label>
<label for="key1b">G</label>
<label for="key1c">H</label>
<label for="key1d">A</label>
</div>
<div class="keybox box2">
<label for="key2a">X</label>
<label for="key2b">E</label>
<label for="key2c">C</label>
<label for="key2d">O</label>
</div>
<div class="keybox box3">
<label for="key3a">X</label>
<label for="key3b">E</label>
<label for="key3c">L</label>
<label for="key3d">I</label>
</div>
<div class="keybox box4">
<label for="key4a">X</label>
<label for="key4b">K</label>
<label for="key4c">D</label>
<label for="key4d">A</label>
</div>
<style>
/* GEEK */
#key1a:checked ~ #key2a:checked ~ #key3a:checked ~ #key4a:checked ~ .kinetic .nicetry::before{
content:'We love email geeks. We really do. But that is not the answer.';
opacity:0.9;
padding:25px 35px;
transition: opacity 0.3s 0.3s;
}
/* GOLD */
#key1a:checked ~ #key2c:checked ~ #key3b:checked ~ #key4b:checked ~ .kinetic .nicetry::before{
content:'Nope. But it sure feels golden when your email gets noticed!';
opacity:0.9;
padding:25px 35px;
transition: opacity 0.3s 0.3s;
}
/* HOLD */
#key1b:checked ~ #key2c:checked ~ #key3b:checked ~ #key4b:checked ~ .kinetic .nicetry::before{
content:'Nope. But a bug in your code can sure hold up your email!';
opacity:0.9;
padding:25px 35px;
transition: opacity 0.3s 0.3s;
}
/* HOLA */
#key1b:checked ~ #key2c:checked ~ #key3b:checked ~ #key4c:checked ~ .kinetic .nicetry::before{
content:'Hi there! Not the answer, but good try!';
opacity:0.9;
padding:25px 35px;
transition: opacity 0.3s 0.3s;
}
/* ACED */
#key1c:checked ~ #key2b:checked ~ #key3a:checked ~ #key4b:checked ~ .kinetic .nicetry::before{
content:'Close! Hint: Who helps you ace your email campaigns?';
opacity:0.9;
padding:25px 35px;
transition: opacity 0.3s 0.3s;
}
.nicetry::before{
z-index:70;
opacity:0;
position:absolute;
display:block;
top:380px;
left:130px;
width:270px;
display:block;
color:white;
background-color:#222222;
border-radius:5px;
text-align:center;
font-size:18px;
content:'';
}
</style>
</div>
<div class="nicetry"></div>
<div class="win-wrapper" style="display:none;">
<a class="win" target="_blank" href="https://www.emailonacid.com/blog/article/email-development/code-tutorial-how-to-build-an-interactive-puzzle-in-email">
Get Your Coupon!
</a>
</div>
</div>
</td></tr>
</table>
</div>
</div>
<!--<![endif]-->
<!-- END KINETIC_CONTENT -->
<!-- BEGIN FALLBACK_CONTENT -->
<!--[if !mso]><!-- -->
<!-- Leave out the last semicolon in the style attribute due to Office 365 bug -->
<input type=radio class="cbox" style="display:none !important" checked>
<!--<![endif]-->
<div class="fallback-wrapper">
<table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="https://www.emailonacid.com/blog/article/email-development/code-tutorial-how-to-build-an-interactive-puzzle-in-email"><img height="620" width="600" src="http://marketing.emailonacid.com/hubfs/images/emails/eoa2016/November_Innovative_Email/NovInt_fallback.png" style="display:block;" border=0></a>
</td></tr></table>
</div>
<!-- END FALLBACK_CONTENT -->
<!-- ======= end MAIN_BODY ======= -->
<!-- ======= start footer ======= -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;background-color:#313743;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;font-family: Calibri, sans-serif;color:#333333;" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;">
<table border="0" cellpadding="10" cellspacing="0" width="100%" style="border-spacing:0;font-family: Calibri, sans-serif, 'open sans';color:#333333;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#313743" style="width:100%;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;max-width:300px;">
<tbody>
<tr>
<td class="footer_h1" style="color: #E8E8E8; font-size: 20px; font-family: Calibri, sans-serif, 'open sans'; line-height: 22px;text-align:left;">
About Us
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
<tr>
<td class="footer_p" style="color: #848484; font-family: Calibri, sans-serif; font-size: 14px;line-height: 18px;text-align:left;max-width: 300px;">
Email on Acid provides email testing, troubleshooting and tracking tools to help you simplify and improve your email marketing efforts. <a href="https://www.emailonacid.com/signup" style="color: #848484;">Sign up</a> today.
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<a href="https://www.facebook.com/EmailAcid" style="display: block; width: 8px; height: 13px; color: #3498DB; border: 0px !important;font-size:1px;">
<img width="8" height="13" border="0" style="display: block; width: 8px; height: 13px;font-size:1px;" src="https://www.emailonacid.com/images/emails/eoa2016/icon-facebook.gif" alt="facebook">
</a>
</td>
<td style="font-size: 10px; line-height: 10px;">
</td>
<td>
<a href="https://plus.google.com/112790802529977430226/posts" style="display: block; width: 8px; height: 13px; color: #3498DB; border: 0px !important;font-size:1px;">
<img width="13" height="13" border="0" style="display: block; width: 13px; height: 13px;font-size:1px;" src="https://www.emailonacid.com/images/emails/eoa2016/icon-google_plus.gif" alt="google">
</a>
</td>
<td style="font-size: 10px; line-height: 10px;">
</td>
<td>
<a href="https://twitter.com/EmailonAcid" style="display: block; width: 13px; height: 10px; color: #3498DB; border: 0px !important;font-size:1px;">
<img width="13" height="10" border="0" style="display: block; width: 13px; height: 10px;font-size:1px;" src="https://www.emailonacid.com/images/emails/eoa2016/icon-twitter.gif" alt="twitter">
</a>
</td>
<td style="font-size: 10px; line-height: 10px;">
</td>
<td>
<a href="http://www.linkedin.com/company/email-on-acid?trk=cp_followed_name_email-on-acid" style="display: block; width: 12px; height: 12px; color: #3498DB; border: 0px !important;font-size:1px;">
<img width="12" height="12" border="0" style="display: block; width: 12px; height: 12px;font-size:1px;" src="https://www.emailonacid.com/images/emails/eoa2016/icon-linkedin.gif" alt="linkedin">
</a>
</td>
<td style="font-size: 10px; line-height: 10px;">
</td>
<td>
<a href="https://www.pinterest.com/emailonacid/" style="display: block; width: 12px; height: 12px; color: #3498DB; border: 0px !important;font-size:1px;">
<img width="12" height="12" border="0" style="display: block; width: 12px; height: 12px;font-size:1px;" src="https://www.emailonacid.com/images/emails/eoa2016/icon-pinterest.gif" alt="pinterest">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;">
<table border="0" cellpadding="10" cellspacing="0" width="100%" style="border-spacing:0;font-family: Calibri, sans-serif, 'open sans';color:#333333;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container550">
<tbody>
<tr>
<td class="footer_h1" style="color: #E8E8E8; font-size: 20px; font-family: Calibri, sans-serif, 'open sans'; line-height: 22px;text-align:left;">
Contact Us
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
<tr>
<td class="footer_p" style="color: #848484; font-family: Calibri, sans-serif, 'open sans'; font-size: 14px;line-height: 18px;text-align:left;">
<span class="footer_h2" style="color: #D6D6D6;font-size: 16px;line-height: 20px;">
Address
</span>
<br>
<div class="appleFix">
Email on Acid<br>
5670 Greenwood Plaza Blvd.<br>
Greenwood Village, CO 80111
</div>
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
<tr>
<td class="footer_p" style="color: #848484; font-size: 14px; font-family: Calibri, sans-serif, 'open sans'; line-height: 18px;text-align:left;">
<span class="footer_h2" style="color: #D6D6D6;font-size: 16px;line-height: 20px;">
Phone
</span>
<br>
720-242-7633
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="one-column" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0;min-width: 600px;">
<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#ffffff" width="100%">
<tbody>
<tr>
<td height="10" style="font-size: 10px; line-height: 10px;">
</td>
</tr>
<tr>
<td class="footer_p" align="left" style="color: #848484; font-size: 14px; font-family: Calibri, sans-serif, 'open sans'; line-height: 18px;">
Copyright (C) 2016 Email on Acid All rights reserved.
</td>
</tr>
<tr>
<td class="footer_p" align="left" style="color: #848484; font-size: 14px; font-family: Calibri, sans-serif, 'open sans'; line-height: 18px;">
</td>
</tr>
<tr>
<td height="10" style="font-size: 10px; line-height: 10px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- ======= end footer ======= -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- ======= start pixel holder ======= -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0;">
<tr>
<td height="20">
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
</td>
</tr>
</table>
<!-- ======= end pixel holder ======= -->
</body>
</html>