Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!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" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,900" rel="stylesheet">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse:collapse;}
</style>
<![endif]-->
<style type="text/css">
/* Basics */
body {
	margin:0 !important;
	padding:0;
	background-color:#000000;
}
table {
	border-spacing:0;
	mso-table-lspace:0pt;
	mso-table-rspace:0pt;
	margin:0;
	padding:0;
	border:none;
}
td {
	padding:0;
}
img {
	border:0;
	display:block;
	-ms-interpolation-mode:bicubic;
	outline:none;
}
 div[style*="margin:16px 0"] {
margin:0 !important;
}
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;
}
.ReadMsgBody {
	width:100%;
}
.ExternalClass {
	mso-line-height-rule:exactly;
	line-height:100%;
	width:100%;
}
* {
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
}
#cta_01:hover {
	background-color:#B20710 !important;
	transition:0.2s;
}
.animation_text_01 {
	animation:opacity_01 5s infinite;
}
.animation_text_02 {
	animation:opacity_02 5s infinite;
}
.animation_text_03 {
	animation:opacity_03 5s infinite;
}
.animation_text_04 {
	animation:opacity_04 5s infinite;
}
 @keyframes opacity_01 {
 0% {
opacity:1;
}
 50% {
opacity:0.9;
}
 100% {
opacity:1;
}
}
 @keyframes opacity_02 {
 0% {
opacity:1;
}
 30% {
opacity:0.9;
}
 70% {
opacity:1;
}
}
 @keyframes opacity_03 {
 20% {
opacity:1;
}
 80% {
opacity:0.9;
}
 100% {
opacity:1;
}
}
 @keyframes opacity_04 {
 69% {
opacity:1;
}
 70% {
opacity:0;
}
 71% {
opacity:1;
}
 89% {
opacity:1;
}
 90% {
opacity:0.5;
}
 91% {
opacity:1;
}
 92% {
opacity:1;
}
 93% {
opacity:0;
}
 94% {
opacity:1;
}
}
.animation_cover_01 {
	animation:move_01 120s;
}
 @keyframes move_01 {
 0% {
padding-top:0;
}
 1% {
padding-top:0;
}
 10% {
padding-top:280px;
}
 4% {
opacity:1;
}
 4.1% {
opacity:0.5;
}
 4.2% {
opacity:1;
}
 4.3% {
opacity:0;
}
 4.4% {
opacity:1;
}
 6% {
opacity:1;
}
 6.1% {
opacity:0.5;
}
 6.2% {
opacity:1;
}
 6.3% {
opacity:0;
}
 6.4% {
opacity:1;
}
 8% {
opacity:1;
}
 8.1% {
opacity:0.2;
}
 8.2% {
opacity:1;
}
 8.3% {
opacity:0.5;
}
 8.4% {
opacity:1;
}
 11% {
opacity:1;
}
 11.1% {
opacity:0.5;
}
 11.2% {
opacity:1;
}
 11.3% {
opacity:0;
}
 11.4% {
opacity:1;
}
 14% {
opacity:1;
}
 14.1% {
opacity:0;
}
 100% {
padding-top:280px;
opacity:0;
}
}
.animation_cover_02 {
	animation:move_02 120s;
}
 @keyframes move_02 {
 0% {
opacity:1;
}
 100% {
opacity:1;
}
}
 @media only screen and (max-width:500px) {
 html, body, th {
-webkit-text-size-adjust:none;
}
 div[class="body"] .fontsize24px {
 font-size:24px !important;
}
 div[class="body"] .lineheight28px {
 line-height:28px !important;
}
 div[class="body"] .fontsize60px {
 font-size:60px !important;
}
 div[class="body"] .lineheight60px {
 line-height:60px !important;
}
 div[class="body"] .fontsize17px {
 font-size:17px !important;
}
 div[class="body"] .lineheight21px {
 line-height:21px !important;
}
}
 @media only screen and (max-width:400px) {
 html, body, th {
-webkit-text-size-adjust:none;
}
 div[class="body"] .fontsize24px {
 font-size:20px !important;
}
 div[class="body"] .lineheight28px {
 line-height:24px !important;
}
 div[class="body"] .fontsize60px {
 font-size:50px !important;
}
 div[class="body"] .lineheight60px {
 line-height:50px !important;
}
 div[class="body"] .fontsize17px {
 font-size:13px !important;
}
 div[class="body"] .lineheight21px {
 line-height:17px !important;
}
}
 [style*="Roboto"] {
font-family: 'Roboto', Arial, sans-serif !important
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]><xml xmlns:w="urn:schemas-microsoft-com:office:word"><w:WordDocument><w:AutoHyphenation/></w:WordDocument></xml><![endif]-->
</head>
<body bgcolor="#000000" style="margin:0px; padding:0px; background-color:#000000;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="width:100%; padding:0px; margin:0px;" bgcolor="#000000"><div class="body">
        <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td valign="top" align="center" style="text-align:center;"><center style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto;">
                <div style="max-width:500px; margin:0 auto;">
                  <table align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:500px; width:100%; margin:0px auto;">
                    <tr>
                      <td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="500" style="width:500px; margin:0px auto;" align="center"><tr><td align="center"><![endif]-->
                        
                        <div style="width:100%;">
                          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
                            <tr>
                              <td align="center" style="padding:40px 0 10px;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/netflix.png" alt="NETFLIX" width="150" height="40" border="0" style="display:block; margin:0px auto; color:#E50912; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px;" title="NETFLIX" /></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:12px; text-align:center; font-weight:500; mso-line-height-rule:exactly; line-height:16px; padding-bottom:20px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">A NETFLIX ORIGINAL SERIES</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
                                  <tr>
                                    <td style="line-height:1px; font-size:1px; width:30px;" width="30">&nbsp;</td>
                                    <td align="center" height="560" style="height:560px; vertical-align:top;" valign="top"><div style="width:260px; height:560px;">
                                        <div style="max-height:0; max-width:260px; overflow:visible;">
                                          <div style="width:260px; height:560px; display:inline-block; text-align:center;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/cover_desktop.jpg" alt="The Haunting of Hill House" title="The Haunting of Hill House" width="260" height="280" border="0" class="animation_cover_01" style="margin:0px auto; font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:18px;" /></a></div>
                                        </div>
                                        <div style="max-height:0; max-width:260px; overflow:visible;">
                                          <div style="width:260px;height:280px;display:inline-block;text-align:center; background-color:#000000;" class="animation_cover_02"></div>
                                        </div>
                                      </div></td>
                                    <td style="line-height:1px; font-size:1px; width:20px;" width="20">&nbsp;</td>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMTE5MTMiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(33,25,19,0) 0%, rgba(33,25,19,1) 50%, rgba(33,25,19,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,25,19,0)), color-stop(50%,rgba(33,25,19,1)), color-stop(100%,rgba(33,25,19,0)));
background: -webkit-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -o-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -ms-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: linear-gradient(to bottom, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00211913', endColorstr='#00211913',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5">&nbsp;</td>
                                    <td style="line-height:1px; font-size:1px; width:20px;" width="20">&nbsp;</td>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTA0MGIiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(9,4,11,0) 0%, rgba(9,4,11,1) 50%, rgba(9,4,11,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,4,11,0)), color-stop(50%,rgba(9,4,11,1)), color-stop(100%,rgba(9,4,11,0)));
background: -webkit-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -o-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -ms-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: linear-gradient(to bottom, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0009040b', endColorstr='#0009040b',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5">&nbsp;</td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:19px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:23px; padding-top:30px;" class="fontsize17px lineheight21px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">TH<span class="animation_text_01">E</span></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:70px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:70px;" class="fontsize60px lineheight60px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">H<span class="animation_text_04">A</span>U<span class="animation_text_01">N</span>TI<span class="animation_text_02">N</span>G</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;">
                                  <tr>
                                    <td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
                                        <tr>
                                          <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                        </tr>
                                      </table></td>
                                    <td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15">&nbsp;</td>
                                    <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:30px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:34px;" class="fontsize24px lineheight28px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">O<span class="animation_text_03">F</span> <span class="animation_text_04">H</span>IL<span class="animation_text_02">L</span> HOUS<span class="animation_text_01">E</span></a></td>
                                    <td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15">&nbsp;</td>
                                    <td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
                                        <tr>
                                          <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                        </tr>
                                      </table></td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:900; padding-top:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">ALL EPISODES</a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:500; padding-bottom:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">October 31<sup style="font-size:12px; line-height:0; vertical-align:6px;">st</sup></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="padding-bottom:60px;"><div style="margin:0px auto;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" target="_blank" href="http://#toreplace" style="height:50px;v-text-anchor:middle;width:160px;" arcsize="10%" strokecolor="#E50912" fillcolor="#E50912">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;">PLAY TRAILER</center>
  </v:roundrect>
<![endif]--><a target="_blank" href="http://#toreplace"
style="background-color:#E50912;border:1px solid #E50912;border-radius:5px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;line-height:50px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;mso-hide:all;" id="cta_01">PLAY TRAILER</a></div></td>
                            </tr>
                            <tr>
                              <td align="center" style="padding-bottom:25px;"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
                                  <tr>
                                    <td valign="middle" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; mso-line-height-rule:exactly; font-weight:500;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">View All TV Shows &amp; Movies&nbsp;</a></td>
                                    <td valign="middle" style="vertical-align:middle;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/icon_01.png" alt="The Haunting of Hill House" width="27" height="27" border="0" style="display:block;" /></a></td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center">
                                  <tr>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZTZlNmUiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(110,110,110,0) 0%, rgba(110,110,110,1) 50%, rgba(110,110,110,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(110,110,110,0)), color-stop(50%,rgba(110,110,110,1)), color-stop(100%,rgba(110,110,110,0)));
background: -webkit-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -o-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -ms-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: linear-gradient(to right, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e6e6e', endColorstr='#006e6e6e',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:14px; mso-line-height-rule:exactly; line-height:18px; text-align:center; padding:30px 0 10px;">Questions? Call <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">0800-724-0697</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
                                  <tr>
                                    <td align="left" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:12px; mso-line-height-rule:exactly; line-height:18px; text-align:left; padding:0 40px 30px;">This informational email has been sent to you as part of your Netflix membership. If you would like to stop receiving these emails, please <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">click here to unsubscribe</a>, or visit the <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Communication Settings page</a>, uncheck the <span style="font-weight:bold;">Now on Netflix</span> box, and click "Update." Please do not reply to this email, as we are unable to respond from this email address. If you need help or would like to contact us, please visit our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Help Center</a>.<br />
                                      <br />
                                      This message was mailed to [<a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">[email protected]</a>] by Netflix.<br />
                                      SRC: 11893_en_DE<br />
                                      Use of the Netflix service and website is subject to our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Terms of Use</a> and <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Privacy Statement</a>.<br />
                                      Netflix International B.V.‬</td>
                                  </tr>
                                </table></td>
                            </tr>
                          </table>
                        </div>
                        
                        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
                    </tr>
                  </table>
                </div>
              </center></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
</body>
</html><!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" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,900" rel="stylesheet">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse:collapse;}
</style>
<![endif]-->
<style type="text/css">
/* Basics */
body {
	margin:0 !important;
	padding:0;
	background-color:#000000;
}
table {
	border-spacing:0;
	mso-table-lspace:0pt;
	mso-table-rspace:0pt;
	margin:0;
	padding:0;
	border:none;
}
td {
	padding:0;
}
img {
	border:0;
	display:block;
	-ms-interpolation-mode:bicubic;
	outline:none;
}
 div[style*="margin:16px 0"] {
margin:0 !important;
}
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;
}
.ReadMsgBody {
	width:100%;
}
.ExternalClass {
	mso-line-height-rule:exactly;
	line-height:100%;
	width:100%;
}
* {
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
}
#cta_01:hover {
	background-color:#B20710 !important;
	transition:0.2s;
}
.animation_text_01 {
	animation:opacity_01 5s infinite;
}
.animation_text_02 {
	animation:opacity_02 5s infinite;
}
.animation_text_03 {
	animation:opacity_03 5s infinite;
}
.animation_text_04 {
	animation:opacity_04 5s infinite;
}
 @keyframes opacity_01 {
 0% {
opacity:1;
}
 50% {
opacity:0.9;
}
 100% {
opacity:1;
}
}
 @keyframes opacity_02 {
 0% {
opacity:1;
}
 30% {
opacity:0.9;
}
 70% {
opacity:1;
}
}
 @keyframes opacity_03 {
 20% {
opacity:1;
}
 80% {
opacity:0.9;
}
 100% {
opacity:1;
}
}
 @keyframes opacity_04 {
 69% {
opacity:1;
}
 70% {
opacity:0;
}
 71% {
opacity:1;
}
 89% {
opacity:1;
}
 90% {
opacity:0.5;
}
 91% {
opacity:1;
}
 92% {
opacity:1;
}
 93% {
opacity:0;
}
 94% {
opacity:1;
}
}
.animation_cover_01 {
	animation:move_01 120s;
}
 @keyframes move_01 {
 0% {
padding-top:0;
}
 1% {
padding-top:0;
}
 10% {
padding-top:280px;
}
 4% {
opacity:1;
}
 4.1% {
opacity:0.5;
}
 4.2% {
opacity:1;
}
 4.3% {
opacity:0;
}
 4.4% {
opacity:1;
}
 6% {
opacity:1;
}
 6.1% {
opacity:0.5;
}
 6.2% {
opacity:1;
}
 6.3% {
opacity:0;
}
 6.4% {
opacity:1;
}
 8% {
opacity:1;
}
 8.1% {
opacity:0.2;
}
 8.2% {
opacity:1;
}
 8.3% {
opacity:0.5;
}
 8.4% {
opacity:1;
}
 11% {
opacity:1;
}
 11.1% {
opacity:0.5;
}
 11.2% {
opacity:1;
}
 11.3% {
opacity:0;
}
 11.4% {
opacity:1;
}
 14% {
opacity:1;
}
 14.1% {
opacity:0;
}
 100% {
padding-top:280px;
opacity:0;
}
}
.animation_cover_02 {
	animation:move_02 120s;
}
 @keyframes move_02 {
 0% {
opacity:1;
}
 100% {
opacity:1;
}
}
 @media only screen and (max-width:500px) {
 html, body, th {
-webkit-text-size-adjust:none;
}
 div[class="body"] .fontsize24px {
 font-size:24px !important;
}
 div[class="body"] .lineheight28px {
 line-height:28px !important;
}
 div[class="body"] .fontsize60px {
 font-size:60px !important;
}
 div[class="body"] .lineheight60px {
 line-height:60px !important;
}
 div[class="body"] .fontsize17px {
 font-size:17px !important;
}
 div[class="body"] .lineheight21px {
 line-height:21px !important;
}
}
 @media only screen and (max-width:400px) {
 html, body, th {
-webkit-text-size-adjust:none;
}
 div[class="body"] .fontsize24px {
 font-size:20px !important;
}
 div[class="body"] .lineheight28px {
 line-height:24px !important;
}
 div[class="body"] .fontsize60px {
 font-size:50px !important;
}
 div[class="body"] .lineheight60px {
 line-height:50px !important;
}
 div[class="body"] .fontsize17px {
 font-size:13px !important;
}
 div[class="body"] .lineheight21px {
 line-height:17px !important;
}
}
 [style*="Roboto"] {
font-family: 'Roboto', Arial, sans-serif !important
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]><xml xmlns:w="urn:schemas-microsoft-com:office:word"><w:WordDocument><w:AutoHyphenation/></w:WordDocument></xml><![endif]-->
</head>
<body bgcolor="#000000" style="margin:0px; padding:0px; background-color:#000000;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="width:100%; padding:0px; margin:0px;" bgcolor="#000000"><div class="body">
        <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td valign="top" align="center" style="text-align:center;"><center style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto;">
                <div style="max-width:500px; margin:0 auto;">
                  <table align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:500px; width:100%; margin:0px auto;">
                    <tr>
                      <td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="500" style="width:500px; margin:0px auto;" align="center"><tr><td align="center"><![endif]-->
                        
                        <div style="width:100%;">
                          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
                            <tr>
                              <td align="center" style="padding:40px 0 10px;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/netflix.png" alt="NETFLIX" width="150" height="40" border="0" style="display:block; margin:0px auto; color:#E50912; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px;" title="NETFLIX" /></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:12px; text-align:center; font-weight:500; mso-line-height-rule:exactly; line-height:16px; padding-bottom:20px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">A NETFLIX ORIGINAL SERIES</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
                                  <tr>
                                    <td style="line-height:1px; font-size:1px; width:30px;" width="30">&nbsp;</td>
                                    <td align="center" height="560" style="height:560px; vertical-align:top;" valign="top"><div style="width:260px; height:560px;">
                                        <div style="max-height:0; max-width:260px; overflow:visible;">
                                          <div style="width:260px; height:560px; display:inline-block; text-align:center;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/cover_desktop.jpg" alt="The Haunting of Hill House" title="The Haunting of Hill House" width="260" height="280" border="0" class="animation_cover_01" style="margin:0px auto; font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:18px;" /></a></div>
                                        </div>
                                        <div style="max-height:0; max-width:260px; overflow:visible;">
                                          <div style="width:260px;height:280px;display:inline-block;text-align:center; background-color:#000000;" class="animation_cover_02"></div>
                                        </div>
                                      </div></td>
                                    <td style="line-height:1px; font-size:1px; width:20px;" width="20">&nbsp;</td>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMTE5MTMiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(33,25,19,0) 0%, rgba(33,25,19,1) 50%, rgba(33,25,19,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,25,19,0)), color-stop(50%,rgba(33,25,19,1)), color-stop(100%,rgba(33,25,19,0)));
background: -webkit-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -o-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -ms-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: linear-gradient(to bottom, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00211913', endColorstr='#00211913',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5">&nbsp;</td>
                                    <td style="line-height:1px; font-size:1px; width:20px;" width="20">&nbsp;</td>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTA0MGIiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(9,4,11,0) 0%, rgba(9,4,11,1) 50%, rgba(9,4,11,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,4,11,0)), color-stop(50%,rgba(9,4,11,1)), color-stop(100%,rgba(9,4,11,0)));
background: -webkit-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -o-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -ms-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: linear-gradient(to bottom, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0009040b', endColorstr='#0009040b',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5">&nbsp;</td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:19px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:23px; padding-top:30px;" class="fontsize17px lineheight21px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">TH<span class="animation_text_01">E</span></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:70px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:70px;" class="fontsize60px lineheight60px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">H<span class="animation_text_04">A</span>U<span class="animation_text_01">N</span>TI<span class="animation_text_02">N</span>G</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;">
                                  <tr>
                                    <td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
                                        <tr>
                                          <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                        </tr>
                                      </table></td>
                                    <td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15">&nbsp;</td>
                                    <td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:30px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:34px;" class="fontsize24px lineheight28px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">O<span class="animation_text_03">F</span> <span class="animation_text_04">H</span>IL<span class="animation_text_02">L</span> HOUS<span class="animation_text_01">E</span></a></td>
                                    <td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15">&nbsp;</td>
                                    <td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
                                        <tr>
                                          <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                        </tr>
                                      </table></td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:900; padding-top:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">ALL EPISODES</a></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:500; padding-bottom:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">October 31<sup style="font-size:12px; line-height:0; vertical-align:6px;">st</sup></a></td>
                            </tr>
                            <tr>
                              <td align="center" style="padding-bottom:60px;"><div style="margin:0px auto;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" target="_blank" href="http://#toreplace" style="height:50px;v-text-anchor:middle;width:160px;" arcsize="10%" strokecolor="#E50912" fillcolor="#E50912">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;">PLAY TRAILER</center>
  </v:roundrect>
<![endif]--><a target="_blank" href="http://#toreplace"
style="background-color:#E50912;border:1px solid #E50912;border-radius:5px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;line-height:50px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;mso-hide:all;" id="cta_01">PLAY TRAILER</a></div></td>
                            </tr>
                            <tr>
                              <td align="center" style="padding-bottom:25px;"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
                                  <tr>
                                    <td valign="middle" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; mso-line-height-rule:exactly; font-weight:500;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">View All TV Shows &amp; Movies&nbsp;</a></td>
                                    <td valign="middle" style="vertical-align:middle;"><a href="#toreplace" target="_blank"><img src="https://live.lepatron.email/articles/20181024_netflix/icon_01.png" alt="The Haunting of Hill House" width="27" height="27" border="0" style="display:block;" /></a></td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center">
                                  <tr>
                                    <td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZTZlNmUiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(110,110,110,0) 0%, rgba(110,110,110,1) 50%, rgba(110,110,110,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(110,110,110,0)), color-stop(50%,rgba(110,110,110,1)), color-stop(100%,rgba(110,110,110,0)));
background: -webkit-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -o-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -ms-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: linear-gradient(to right, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e6e6e', endColorstr='#006e6e6e',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1">&nbsp;</td>
                                  </tr>
                                </table></td>
                            </tr>
                            <tr>
                              <td align="center" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:14px; mso-line-height-rule:exactly; line-height:18px; text-align:center; padding:30px 0 10px;">Questions? Call <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">0800-724-0697</a></td>
                            </tr>
                            <tr>
                              <td align="center"><table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
                                  <tr>
                                    <td align="left" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:12px; mso-line-height-rule:exactly; line-height:18px; text-align:left; padding:0 40px 30px;">This informational email has been sent to you as part of your Netflix membership. If you would like to stop receiving these emails, please <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">click here to unsubscribe</a>, or visit the <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Communication Settings page</a>, uncheck the <span style="font-weight:bold;">Now on Netflix</span> box, and click "Update." Please do not reply to this email, as we are unable to respond from this email address. If you need help or would like to contact us, please visit our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Help Center</a>.<br />
                                      <br />
                                      This message was mailed to [<a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">[email protected]</a>] by Netflix.<br />
                                      SRC: 11893_en_DE<br />
                                      Use of the Netflix service and website is subject to our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Terms of Use</a> and <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Privacy Statement</a>.<br />
                                      Netflix International B.V.‬</td>
                                  </tr>
                                </table></td>
                            </tr>
                          </table>
                        </div>
                        
                        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
                    </tr>
                  </table>
                </div>
              </center></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console