hero.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>Title</title>
  7. <style>
  8. .wrapper {
  9. width: 100%; }
  10. #outlook a {
  11. padding: 0; }
  12. body {
  13. width: 100% !important;
  14. min-width: 100%;
  15. -webkit-text-size-adjust: 100%;
  16. -ms-text-size-adjust: 100%;
  17. margin: 0;
  18. Margin: 0;
  19. padding: 0;
  20. -moz-box-sizing: border-box;
  21. -webkit-box-sizing: border-box;
  22. box-sizing: border-box; }
  23. .ExternalClass {
  24. width: 100%; }
  25. .ExternalClass,
  26. .ExternalClass p,
  27. .ExternalClass span,
  28. .ExternalClass font,
  29. .ExternalClass td,
  30. .ExternalClass div {
  31. line-height: 100%; }
  32. #backgroundTable {
  33. margin: 0;
  34. Margin: 0;
  35. padding: 0;
  36. width: 100% !important;
  37. line-height: 100% !important; }
  38. img {
  39. outline: none;
  40. text-decoration: none;
  41. -ms-interpolation-mode: bicubic;
  42. width: auto;
  43. max-width: 100%;
  44. clear: both;
  45. display: block; }
  46. center {
  47. width: 100%;
  48. min-width: 580px; }
  49. a img {
  50. border: none; }
  51. p {
  52. margin: 0 0 0 10px;
  53. Margin: 0 0 0 10px; }
  54. table {
  55. border-spacing: 0;
  56. border-collapse: collapse; }
  57. td {
  58. word-wrap: break-word;
  59. -webkit-hyphens: auto;
  60. -moz-hyphens: auto;
  61. hyphens: auto;
  62. border-collapse: collapse !important; }
  63. table, tr, td {
  64. padding: 0;
  65. vertical-align: top;
  66. text-align: left; }
  67. @media only screen {
  68. html {
  69. min-height: 100%;
  70. background: #f3f3f3; } }
  71. table.body {
  72. background: #f3f3f3;
  73. height: 100%;
  74. width: 100%; }
  75. table.container {
  76. background: #fefefe;
  77. width: 580px;
  78. margin: 0 auto;
  79. Margin: 0 auto;
  80. text-align: inherit; }
  81. table.row {
  82. padding: 0;
  83. width: 100%;
  84. position: relative; }
  85. table.spacer {
  86. width: 100%; }
  87. table.spacer td {
  88. mso-line-height-rule: exactly; }
  89. table.container table.row {
  90. display: table; }
  91. td.columns,
  92. td.column,
  93. th.columns,
  94. th.column {
  95. margin: 0 auto;
  96. Margin: 0 auto;
  97. padding-left: 16px;
  98. padding-bottom: 16px; }
  99. td.columns .column,
  100. td.columns .columns,
  101. td.column .column,
  102. td.column .columns,
  103. th.columns .column,
  104. th.columns .columns,
  105. th.column .column,
  106. th.column .columns {
  107. padding-left: 0 !important;
  108. padding-right: 0 !important; }
  109. td.columns .column center,
  110. td.columns .columns center,
  111. td.column .column center,
  112. td.column .columns center,
  113. th.columns .column center,
  114. th.columns .columns center,
  115. th.column .column center,
  116. th.column .columns center {
  117. min-width: none !important; }
  118. td.columns.last,
  119. td.column.last,
  120. th.columns.last,
  121. th.column.last {
  122. padding-right: 16px; }
  123. td.columns table:not(.button),
  124. td.column table:not(.button),
  125. th.columns table:not(.button),
  126. th.column table:not(.button) {
  127. width: 100%; }
  128. td.large-1,
  129. th.large-1 {
  130. width: 32.33333px;
  131. padding-left: 8px;
  132. padding-right: 8px; }
  133. td.large-1.first,
  134. th.large-1.first {
  135. padding-left: 16px; }
  136. td.large-1.last,
  137. th.large-1.last {
  138. padding-right: 16px; }
  139. .collapse > tbody > tr > td.large-1,
  140. .collapse > tbody > tr > th.large-1 {
  141. padding-right: 0;
  142. padding-left: 0;
  143. width: 48.33333px; }
  144. .collapse td.large-1.first,
  145. .collapse th.large-1.first,
  146. .collapse td.large-1.last,
  147. .collapse th.large-1.last {
  148. width: 56.33333px; }
  149. td.large-1 center,
  150. th.large-1 center {
  151. min-width: 0.33333px; }
  152. .body .columns td.large-1,
  153. .body .column td.large-1,
  154. .body .columns th.large-1,
  155. .body .column th.large-1 {
  156. width: 8.33333%; }
  157. td.large-2,
  158. th.large-2 {
  159. width: 80.66667px;
  160. padding-left: 8px;
  161. padding-right: 8px; }
  162. td.large-2.first,
  163. th.large-2.first {
  164. padding-left: 16px; }
  165. td.large-2.last,
  166. th.large-2.last {
  167. padding-right: 16px; }
  168. .collapse > tbody > tr > td.large-2,
  169. .collapse > tbody > tr > th.large-2 {
  170. padding-right: 0;
  171. padding-left: 0;
  172. width: 96.66667px; }
  173. .collapse td.large-2.first,
  174. .collapse th.large-2.first,
  175. .collapse td.large-2.last,
  176. .collapse th.large-2.last {
  177. width: 104.66667px; }
  178. td.large-2 center,
  179. th.large-2 center {
  180. min-width: 48.66667px; }
  181. .body .columns td.large-2,
  182. .body .column td.large-2,
  183. .body .columns th.large-2,
  184. .body .column th.large-2 {
  185. width: 16.66667%; }
  186. td.large-3,
  187. th.large-3 {
  188. width: 129px;
  189. padding-left: 8px;
  190. padding-right: 8px; }
  191. td.large-3.first,
  192. th.large-3.first {
  193. padding-left: 16px; }
  194. td.large-3.last,
  195. th.large-3.last {
  196. padding-right: 16px; }
  197. .collapse > tbody > tr > td.large-3,
  198. .collapse > tbody > tr > th.large-3 {
  199. padding-right: 0;
  200. padding-left: 0;
  201. width: 145px; }
  202. .collapse td.large-3.first,
  203. .collapse th.large-3.first,
  204. .collapse td.large-3.last,
  205. .collapse th.large-3.last {
  206. width: 153px; }
  207. td.large-3 center,
  208. th.large-3 center {
  209. min-width: 97px; }
  210. .body .columns td.large-3,
  211. .body .column td.large-3,
  212. .body .columns th.large-3,
  213. .body .column th.large-3 {
  214. width: 25%; }
  215. td.large-4,
  216. th.large-4 {
  217. width: 177.33333px;
  218. padding-left: 8px;
  219. padding-right: 8px; }
  220. td.large-4.first,
  221. th.large-4.first {
  222. padding-left: 16px; }
  223. td.large-4.last,
  224. th.large-4.last {
  225. padding-right: 16px; }
  226. .collapse > tbody > tr > td.large-4,
  227. .collapse > tbody > tr > th.large-4 {
  228. padding-right: 0;
  229. padding-left: 0;
  230. width: 193.33333px; }
  231. .collapse td.large-4.first,
  232. .collapse th.large-4.first,
  233. .collapse td.large-4.last,
  234. .collapse th.large-4.last {
  235. width: 201.33333px; }
  236. td.large-4 center,
  237. th.large-4 center {
  238. min-width: 145.33333px; }
  239. .body .columns td.large-4,
  240. .body .column td.large-4,
  241. .body .columns th.large-4,
  242. .body .column th.large-4 {
  243. width: 33.33333%; }
  244. td.large-5,
  245. th.large-5 {
  246. width: 225.66667px;
  247. padding-left: 8px;
  248. padding-right: 8px; }
  249. td.large-5.first,
  250. th.large-5.first {
  251. padding-left: 16px; }
  252. td.large-5.last,
  253. th.large-5.last {
  254. padding-right: 16px; }
  255. .collapse > tbody > tr > td.large-5,
  256. .collapse > tbody > tr > th.large-5 {
  257. padding-right: 0;
  258. padding-left: 0;
  259. width: 241.66667px; }
  260. .collapse td.large-5.first,
  261. .collapse th.large-5.first,
  262. .collapse td.large-5.last,
  263. .collapse th.large-5.last {
  264. width: 249.66667px; }
  265. td.large-5 center,
  266. th.large-5 center {
  267. min-width: 193.66667px; }
  268. .body .columns td.large-5,
  269. .body .column td.large-5,
  270. .body .columns th.large-5,
  271. .body .column th.large-5 {
  272. width: 41.66667%; }
  273. td.large-6,
  274. th.large-6 {
  275. width: 274px;
  276. padding-left: 8px;
  277. padding-right: 8px; }
  278. td.large-6.first,
  279. th.large-6.first {
  280. padding-left: 16px; }
  281. td.large-6.last,
  282. th.large-6.last {
  283. padding-right: 16px; }
  284. .collapse > tbody > tr > td.large-6,
  285. .collapse > tbody > tr > th.large-6 {
  286. padding-right: 0;
  287. padding-left: 0;
  288. width: 290px; }
  289. .collapse td.large-6.first,
  290. .collapse th.large-6.first,
  291. .collapse td.large-6.last,
  292. .collapse th.large-6.last {
  293. width: 298px; }
  294. td.large-6 center,
  295. th.large-6 center {
  296. min-width: 242px; }
  297. .body .columns td.large-6,
  298. .body .column td.large-6,
  299. .body .columns th.large-6,
  300. .body .column th.large-6 {
  301. width: 50%; }
  302. td.large-7,
  303. th.large-7 {
  304. width: 322.33333px;
  305. padding-left: 8px;
  306. padding-right: 8px; }
  307. td.large-7.first,
  308. th.large-7.first {
  309. padding-left: 16px; }
  310. td.large-7.last,
  311. th.large-7.last {
  312. padding-right: 16px; }
  313. .collapse > tbody > tr > td.large-7,
  314. .collapse > tbody > tr > th.large-7 {
  315. padding-right: 0;
  316. padding-left: 0;
  317. width: 338.33333px; }
  318. .collapse td.large-7.first,
  319. .collapse th.large-7.first,
  320. .collapse td.large-7.last,
  321. .collapse th.large-7.last {
  322. width: 346.33333px; }
  323. td.large-7 center,
  324. th.large-7 center {
  325. min-width: 290.33333px; }
  326. .body .columns td.large-7,
  327. .body .column td.large-7,
  328. .body .columns th.large-7,
  329. .body .column th.large-7 {
  330. width: 58.33333%; }
  331. td.large-8,
  332. th.large-8 {
  333. width: 370.66667px;
  334. padding-left: 8px;
  335. padding-right: 8px; }
  336. td.large-8.first,
  337. th.large-8.first {
  338. padding-left: 16px; }
  339. td.large-8.last,
  340. th.large-8.last {
  341. padding-right: 16px; }
  342. .collapse > tbody > tr > td.large-8,
  343. .collapse > tbody > tr > th.large-8 {
  344. padding-right: 0;
  345. padding-left: 0;
  346. width: 386.66667px; }
  347. .collapse td.large-8.first,
  348. .collapse th.large-8.first,
  349. .collapse td.large-8.last,
  350. .collapse th.large-8.last {
  351. width: 394.66667px; }
  352. td.large-8 center,
  353. th.large-8 center {
  354. min-width: 338.66667px; }
  355. .body .columns td.large-8,
  356. .body .column td.large-8,
  357. .body .columns th.large-8,
  358. .body .column th.large-8 {
  359. width: 66.66667%; }
  360. td.large-9,
  361. th.large-9 {
  362. width: 419px;
  363. padding-left: 8px;
  364. padding-right: 8px; }
  365. td.large-9.first,
  366. th.large-9.first {
  367. padding-left: 16px; }
  368. td.large-9.last,
  369. th.large-9.last {
  370. padding-right: 16px; }
  371. .collapse > tbody > tr > td.large-9,
  372. .collapse > tbody > tr > th.large-9 {
  373. padding-right: 0;
  374. padding-left: 0;
  375. width: 435px; }
  376. .collapse td.large-9.first,
  377. .collapse th.large-9.first,
  378. .collapse td.large-9.last,
  379. .collapse th.large-9.last {
  380. width: 443px; }
  381. td.large-9 center,
  382. th.large-9 center {
  383. min-width: 387px; }
  384. .body .columns td.large-9,
  385. .body .column td.large-9,
  386. .body .columns th.large-9,
  387. .body .column th.large-9 {
  388. width: 75%; }
  389. td.large-10,
  390. th.large-10 {
  391. width: 467.33333px;
  392. padding-left: 8px;
  393. padding-right: 8px; }
  394. td.large-10.first,
  395. th.large-10.first {
  396. padding-left: 16px; }
  397. td.large-10.last,
  398. th.large-10.last {
  399. padding-right: 16px; }
  400. .collapse > tbody > tr > td.large-10,
  401. .collapse > tbody > tr > th.large-10 {
  402. padding-right: 0;
  403. padding-left: 0;
  404. width: 483.33333px; }
  405. .collapse td.large-10.first,
  406. .collapse th.large-10.first,
  407. .collapse td.large-10.last,
  408. .collapse th.large-10.last {
  409. width: 491.33333px; }
  410. td.large-10 center,
  411. th.large-10 center {
  412. min-width: 435.33333px; }
  413. .body .columns td.large-10,
  414. .body .column td.large-10,
  415. .body .columns th.large-10,
  416. .body .column th.large-10 {
  417. width: 83.33333%; }
  418. td.large-11,
  419. th.large-11 {
  420. width: 515.66667px;
  421. padding-left: 8px;
  422. padding-right: 8px; }
  423. td.large-11.first,
  424. th.large-11.first {
  425. padding-left: 16px; }
  426. td.large-11.last,
  427. th.large-11.last {
  428. padding-right: 16px; }
  429. .collapse > tbody > tr > td.large-11,
  430. .collapse > tbody > tr > th.large-11 {
  431. padding-right: 0;
  432. padding-left: 0;
  433. width: 531.66667px; }
  434. .collapse td.large-11.first,
  435. .collapse th.large-11.first,
  436. .collapse td.large-11.last,
  437. .collapse th.large-11.last {
  438. width: 539.66667px; }
  439. td.large-11 center,
  440. th.large-11 center {
  441. min-width: 483.66667px; }
  442. .body .columns td.large-11,
  443. .body .column td.large-11,
  444. .body .columns th.large-11,
  445. .body .column th.large-11 {
  446. width: 91.66667%; }
  447. td.large-12,
  448. th.large-12 {
  449. width: 564px;
  450. padding-left: 8px;
  451. padding-right: 8px; }
  452. td.large-12.first,
  453. th.large-12.first {
  454. padding-left: 16px; }
  455. td.large-12.last,
  456. th.large-12.last {
  457. padding-right: 16px; }
  458. .collapse > tbody > tr > td.large-12,
  459. .collapse > tbody > tr > th.large-12 {
  460. padding-right: 0;
  461. padding-left: 0;
  462. width: 580px; }
  463. .collapse td.large-12.first,
  464. .collapse th.large-12.first,
  465. .collapse td.large-12.last,
  466. .collapse th.large-12.last {
  467. width: 588px; }
  468. td.large-12 center,
  469. th.large-12 center {
  470. min-width: 532px; }
  471. .body .columns td.large-12,
  472. .body .column td.large-12,
  473. .body .columns th.large-12,
  474. .body .column th.large-12 {
  475. width: 100%; }
  476. td.large-offset-1,
  477. td.large-offset-1.first,
  478. td.large-offset-1.last,
  479. th.large-offset-1,
  480. th.large-offset-1.first,
  481. th.large-offset-1.last {
  482. padding-left: 64.33333px; }
  483. td.large-offset-2,
  484. td.large-offset-2.first,
  485. td.large-offset-2.last,
  486. th.large-offset-2,
  487. th.large-offset-2.first,
  488. th.large-offset-2.last {
  489. padding-left: 112.66667px; }
  490. td.large-offset-3,
  491. td.large-offset-3.first,
  492. td.large-offset-3.last,
  493. th.large-offset-3,
  494. th.large-offset-3.first,
  495. th.large-offset-3.last {
  496. padding-left: 161px; }
  497. td.large-offset-4,
  498. td.large-offset-4.first,
  499. td.large-offset-4.last,
  500. th.large-offset-4,
  501. th.large-offset-4.first,
  502. th.large-offset-4.last {
  503. padding-left: 209.33333px; }
  504. td.large-offset-5,
  505. td.large-offset-5.first,
  506. td.large-offset-5.last,
  507. th.large-offset-5,
  508. th.large-offset-5.first,
  509. th.large-offset-5.last {
  510. padding-left: 257.66667px; }
  511. td.large-offset-6,
  512. td.large-offset-6.first,
  513. td.large-offset-6.last,
  514. th.large-offset-6,
  515. th.large-offset-6.first,
  516. th.large-offset-6.last {
  517. padding-left: 306px; }
  518. td.large-offset-7,
  519. td.large-offset-7.first,
  520. td.large-offset-7.last,
  521. th.large-offset-7,
  522. th.large-offset-7.first,
  523. th.large-offset-7.last {
  524. padding-left: 354.33333px; }
  525. td.large-offset-8,
  526. td.large-offset-8.first,
  527. td.large-offset-8.last,
  528. th.large-offset-8,
  529. th.large-offset-8.first,
  530. th.large-offset-8.last {
  531. padding-left: 402.66667px; }
  532. td.large-offset-9,
  533. td.large-offset-9.first,
  534. td.large-offset-9.last,
  535. th.large-offset-9,
  536. th.large-offset-9.first,
  537. th.large-offset-9.last {
  538. padding-left: 451px; }
  539. td.large-offset-10,
  540. td.large-offset-10.first,
  541. td.large-offset-10.last,
  542. th.large-offset-10,
  543. th.large-offset-10.first,
  544. th.large-offset-10.last {
  545. padding-left: 499.33333px; }
  546. td.large-offset-11,
  547. td.large-offset-11.first,
  548. td.large-offset-11.last,
  549. th.large-offset-11,
  550. th.large-offset-11.first,
  551. th.large-offset-11.last {
  552. padding-left: 547.66667px; }
  553. td.expander,
  554. th.expander {
  555. visibility: hidden;
  556. width: 0;
  557. padding: 0 !important; }
  558. table.container.radius {
  559. border-radius: 0;
  560. border-collapse: separate; }
  561. .block-grid {
  562. width: 100%;
  563. max-width: 580px; }
  564. .block-grid td {
  565. display: inline-block;
  566. padding: 8px; }
  567. .up-2 td {
  568. width: 274px !important; }
  569. .up-3 td {
  570. width: 177px !important; }
  571. .up-4 td {
  572. width: 129px !important; }
  573. .up-5 td {
  574. width: 100px !important; }
  575. .up-6 td {
  576. width: 80px !important; }
  577. .up-7 td {
  578. width: 66px !important; }
  579. .up-8 td {
  580. width: 56px !important; }
  581. table.text-center,
  582. th.text-center,
  583. td.text-center,
  584. h1.text-center,
  585. h2.text-center,
  586. h3.text-center,
  587. h4.text-center,
  588. h5.text-center,
  589. h6.text-center,
  590. p.text-center,
  591. span.text-center {
  592. text-align: center; }
  593. table.text-left,
  594. th.text-left,
  595. td.text-left,
  596. h1.text-left,
  597. h2.text-left,
  598. h3.text-left,
  599. h4.text-left,
  600. h5.text-left,
  601. h6.text-left,
  602. p.text-left,
  603. span.text-left {
  604. text-align: left; }
  605. table.text-right,
  606. th.text-right,
  607. td.text-right,
  608. h1.text-right,
  609. h2.text-right,
  610. h3.text-right,
  611. h4.text-right,
  612. h5.text-right,
  613. h6.text-right,
  614. p.text-right,
  615. span.text-right {
  616. text-align: right; }
  617. span.text-center {
  618. display: block;
  619. width: 100%;
  620. text-align: center; }
  621. @media only screen and (max-width: 596px) {
  622. .small-float-center {
  623. margin: 0 auto !important;
  624. float: none !important;
  625. text-align: center !important; }
  626. .small-text-center {
  627. text-align: center !important; }
  628. .small-text-left {
  629. text-align: left !important; }
  630. .small-text-right {
  631. text-align: right !important; } }
  632. img.float-left {
  633. float: left;
  634. text-align: left; }
  635. img.float-right {
  636. float: right;
  637. text-align: right; }
  638. img.float-center,
  639. img.text-center {
  640. margin: 0 auto;
  641. Margin: 0 auto;
  642. float: none;
  643. text-align: center; }
  644. table.float-center,
  645. td.float-center,
  646. th.float-center {
  647. margin: 0 auto;
  648. Margin: 0 auto;
  649. float: none;
  650. text-align: center; }
  651. .hide-for-large {
  652. display: none !important;
  653. mso-hide: all;
  654. overflow: hidden;
  655. max-height: 0;
  656. font-size: 0;
  657. width: 0;
  658. line-height: 0; }
  659. @media only screen and (max-width: 596px) {
  660. .hide-for-large {
  661. display: block !important;
  662. width: auto !important;
  663. overflow: visible !important;
  664. max-height: none !important;
  665. font-size: inherit !important;
  666. line-height: inherit !important; } }
  667. table.body table.container .hide-for-large * {
  668. mso-hide: all; }
  669. @media only screen and (max-width: 596px) {
  670. table.body table.container .hide-for-large,
  671. table.body table.container .row.hide-for-large {
  672. display: table !important;
  673. width: 100% !important; } }
  674. @media only screen and (max-width: 596px) {
  675. table.body table.container .callout-inner.hide-for-large {
  676. display: table-cell !important;
  677. width: 100% !important; } }
  678. @media only screen and (max-width: 596px) {
  679. table.body table.container .show-for-large {
  680. display: none !important;
  681. width: 0;
  682. mso-hide: all;
  683. overflow: hidden; } }
  684. body,
  685. table.body,
  686. h1,
  687. h2,
  688. h3,
  689. h4,
  690. h5,
  691. h6,
  692. p,
  693. td,
  694. th,
  695. a {
  696. color: #0a0a0a;
  697. font-family: Helvetica, Arial, sans-serif;
  698. font-weight: normal;
  699. padding: 0;
  700. margin: 0;
  701. Margin: 0;
  702. text-align: left;
  703. line-height: 1.3; }
  704. h1,
  705. h2,
  706. h3,
  707. h4,
  708. h5,
  709. h6 {
  710. color: inherit;
  711. word-wrap: normal;
  712. font-family: Helvetica, Arial, sans-serif;
  713. font-weight: normal;
  714. margin-bottom: 10px;
  715. Margin-bottom: 10px; }
  716. h1 {
  717. font-size: 34px; }
  718. h2 {
  719. font-size: 30px; }
  720. h3 {
  721. font-size: 28px; }
  722. h4 {
  723. font-size: 24px; }
  724. h5 {
  725. font-size: 20px; }
  726. h6 {
  727. font-size: 18px; }
  728. body,
  729. table.body,
  730. p,
  731. td,
  732. th {
  733. font-size: 16px;
  734. line-height: 1.3; }
  735. p {
  736. margin-bottom: 10px;
  737. Margin-bottom: 10px; }
  738. p.lead {
  739. font-size: 20px;
  740. line-height: 1.6; }
  741. p.subheader {
  742. margin-top: 4px;
  743. margin-bottom: 8px;
  744. Margin-top: 4px;
  745. Margin-bottom: 8px;
  746. font-weight: normal;
  747. line-height: 1.4;
  748. color: #8a8a8a; }
  749. small {
  750. font-size: 80%;
  751. color: #cacaca; }
  752. a {
  753. color: #2199e8;
  754. text-decoration: none; }
  755. a:hover {
  756. color: #147dc2; }
  757. a:active {
  758. color: #147dc2; }
  759. a:visited {
  760. color: #2199e8; }
  761. h1 a,
  762. h1 a:visited,
  763. h2 a,
  764. h2 a:visited,
  765. h3 a,
  766. h3 a:visited,
  767. h4 a,
  768. h4 a:visited,
  769. h5 a,
  770. h5 a:visited,
  771. h6 a,
  772. h6 a:visited {
  773. color: #2199e8; }
  774. pre {
  775. background: #f3f3f3;
  776. margin: 30px 0;
  777. Margin: 30px 0; }
  778. pre code {
  779. color: #cacaca; }
  780. pre code span.callout {
  781. color: #8a8a8a;
  782. font-weight: bold; }
  783. pre code span.callout-strong {
  784. color: #ff6908;
  785. font-weight: bold; }
  786. table.hr {
  787. width: 100%; }
  788. table.hr th {
  789. height: 0;
  790. max-width: 580px;
  791. border-top: 0;
  792. border-right: 0;
  793. border-bottom: 1px solid #0a0a0a;
  794. border-left: 0;
  795. margin: 20px auto;
  796. Margin: 20px auto;
  797. clear: both; }
  798. .stat {
  799. font-size: 40px;
  800. line-height: 1; }
  801. p + .stat {
  802. margin-top: -16px;
  803. Margin-top: -16px; }
  804. span.preheader {
  805. display: none !important;
  806. visibility: hidden;
  807. mso-hide: all !important;
  808. font-size: 1px;
  809. color: #f3f3f3;
  810. line-height: 1px;
  811. max-height: 0px;
  812. max-width: 0px;
  813. opacity: 0;
  814. overflow: hidden; }
  815. table.button {
  816. width: auto;
  817. margin: 0 0 16px 0;
  818. Margin: 0 0 16px 0; }
  819. table.button table td {
  820. text-align: left;
  821. color: #fefefe;
  822. background: #2199e8;
  823. border: 2px solid #2199e8; }
  824. table.button table td a {
  825. font-family: Helvetica, Arial, sans-serif;
  826. font-size: 16px;
  827. font-weight: bold;
  828. color: #fefefe;
  829. text-decoration: none;
  830. display: inline-block;
  831. padding: 8px 16px 8px 16px;
  832. border: 0 solid #2199e8;
  833. border-radius: 3px; }
  834. table.button.radius table td {
  835. border-radius: 3px;
  836. border: none; }
  837. table.button.rounded table td {
  838. border-radius: 500px;
  839. border: none; }
  840. table.button:hover table tr td a,
  841. table.button:active table tr td a,
  842. table.button table tr td a:visited,
  843. table.button.tiny:hover table tr td a,
  844. table.button.tiny:active table tr td a,
  845. table.button.tiny table tr td a:visited,
  846. table.button.small:hover table tr td a,
  847. table.button.small:active table tr td a,
  848. table.button.small table tr td a:visited,
  849. table.button.large:hover table tr td a,
  850. table.button.large:active table tr td a,
  851. table.button.large table tr td a:visited {
  852. color: #fefefe; }
  853. table.button.tiny table td,
  854. table.button.tiny table a {
  855. padding: 4px 8px 4px 8px; }
  856. table.button.tiny table a {
  857. font-size: 10px;
  858. font-weight: normal; }
  859. table.button.small table td,
  860. table.button.small table a {
  861. padding: 5px 10px 5px 10px;
  862. font-size: 12px; }
  863. table.button.large table a {
  864. padding: 10px 20px 10px 20px;
  865. font-size: 20px; }
  866. table.button.expand,
  867. table.button.expanded {
  868. width: 100% !important; }
  869. table.button.expand table,
  870. table.button.expanded table {
  871. width: 100%; }
  872. table.button.expand table a,
  873. table.button.expanded table a {
  874. text-align: center;
  875. width: 100%;
  876. padding-left: 0;
  877. padding-right: 0; }
  878. table.button.expand center,
  879. table.button.expanded center {
  880. min-width: 0; }
  881. table.button:hover table td,
  882. table.button:visited table td,
  883. table.button:active table td {
  884. background: #147dc2;
  885. color: #fefefe; }
  886. table.button:hover table a,
  887. table.button:visited table a,
  888. table.button:active table a {
  889. border: 0 solid #147dc2; }
  890. table.button.secondary table td {
  891. background: #777777;
  892. color: #fefefe;
  893. border: 0px solid #777777; }
  894. table.button.secondary table a {
  895. color: #fefefe;
  896. border: 0 solid #777777; }
  897. table.button.secondary:hover table td {
  898. background: #919191;
  899. color: #fefefe; }
  900. table.button.secondary:hover table a {
  901. border: 0 solid #919191; }
  902. table.button.secondary:hover table td a {
  903. color: #fefefe; }
  904. table.button.secondary:active table td a {
  905. color: #fefefe; }
  906. table.button.secondary table td a:visited {
  907. color: #fefefe; }
  908. table.button.success table td {
  909. background: #3adb76;
  910. border: 0px solid #3adb76; }
  911. table.button.success table a {
  912. border: 0 solid #3adb76; }
  913. table.button.success:hover table td {
  914. background: #23bf5d; }
  915. table.button.success:hover table a {
  916. border: 0 solid #23bf5d; }
  917. table.button.alert table td {
  918. background: #ec5840;
  919. border: 0px solid #ec5840; }
  920. table.button.alert table a {
  921. border: 0 solid #ec5840; }
  922. table.button.alert:hover table td {
  923. background: #e23317; }
  924. table.button.alert:hover table a {
  925. border: 0 solid #e23317; }
  926. table.button.warning table td {
  927. background: #ffae00;
  928. border: 0px solid #ffae00; }
  929. table.button.warning table a {
  930. border: 0px solid #ffae00; }
  931. table.button.warning:hover table td {
  932. background: #cc8b00; }
  933. table.button.warning:hover table a {
  934. border: 0px solid #cc8b00; }
  935. table.callout {
  936. margin-bottom: 16px;
  937. Margin-bottom: 16px; }
  938. th.callout-inner {
  939. width: 100%;
  940. border: 1px solid #cbcbcb;
  941. padding: 10px;
  942. background: #fefefe; }
  943. th.callout-inner.primary {
  944. background: #def0fc;
  945. border: 1px solid #444444;
  946. color: #0a0a0a; }
  947. th.callout-inner.secondary {
  948. background: #ebebeb;
  949. border: 1px solid #444444;
  950. color: #0a0a0a; }
  951. th.callout-inner.success {
  952. background: #e1faea;
  953. border: 1px solid #1b9448;
  954. color: #fefefe; }
  955. th.callout-inner.warning {
  956. background: #fff3d9;
  957. border: 1px solid #996800;
  958. color: #fefefe; }
  959. th.callout-inner.alert {
  960. background: #fce6e2;
  961. border: 1px solid #b42912;
  962. color: #fefefe; }
  963. .thumbnail {
  964. border: solid 4px #fefefe;
  965. box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
  966. display: inline-block;
  967. line-height: 0;
  968. max-width: 100%;
  969. transition: box-shadow 200ms ease-out;
  970. border-radius: 3px;
  971. margin-bottom: 16px; }
  972. .thumbnail:hover, .thumbnail:focus {
  973. box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); }
  974. table.menu {
  975. width: 580px; }
  976. table.menu td.menu-item,
  977. table.menu th.menu-item {
  978. padding: 10px;
  979. padding-right: 10px; }
  980. table.menu td.menu-item a,
  981. table.menu th.menu-item a {
  982. color: #2199e8; }
  983. table.menu.vertical td.menu-item,
  984. table.menu.vertical th.menu-item {
  985. padding: 10px;
  986. padding-right: 0;
  987. display: block; }
  988. table.menu.vertical td.menu-item a,
  989. table.menu.vertical th.menu-item a {
  990. width: 100%; }
  991. table.menu.vertical td.menu-item table.menu.vertical td.menu-item,
  992. table.menu.vertical td.menu-item table.menu.vertical th.menu-item,
  993. table.menu.vertical th.menu-item table.menu.vertical td.menu-item,
  994. table.menu.vertical th.menu-item table.menu.vertical th.menu-item {
  995. padding-left: 10px; }
  996. table.menu.text-center a {
  997. text-align: center; }
  998. .menu[align="center"] {
  999. width: auto !important; }
  1000. body.outlook p {
  1001. display: inline !important; }
  1002. @media only screen and (max-width: 596px) {
  1003. table.body img {
  1004. width: auto;
  1005. height: auto; }
  1006. table.body center {
  1007. min-width: 0 !important; }
  1008. table.body .container {
  1009. width: 95% !important; }
  1010. table.body .columns,
  1011. table.body .column {
  1012. height: auto !important;
  1013. -moz-box-sizing: border-box;
  1014. -webkit-box-sizing: border-box;
  1015. box-sizing: border-box;
  1016. padding-left: 16px !important;
  1017. padding-right: 16px !important; }
  1018. table.body .columns .column,
  1019. table.body .columns .columns,
  1020. table.body .column .column,
  1021. table.body .column .columns {
  1022. padding-left: 0 !important;
  1023. padding-right: 0 !important; }
  1024. table.body .collapse .columns,
  1025. table.body .collapse .column {
  1026. padding-left: 0 !important;
  1027. padding-right: 0 !important; }
  1028. td.small-1,
  1029. th.small-1 {
  1030. display: inline-block !important;
  1031. width: 8.33333% !important; }
  1032. td.small-2,
  1033. th.small-2 {
  1034. display: inline-block !important;
  1035. width: 16.66667% !important; }
  1036. td.small-3,
  1037. th.small-3 {
  1038. display: inline-block !important;
  1039. width: 25% !important; }
  1040. td.small-4,
  1041. th.small-4 {
  1042. display: inline-block !important;
  1043. width: 33.33333% !important; }
  1044. td.small-5,
  1045. th.small-5 {
  1046. display: inline-block !important;
  1047. width: 41.66667% !important; }
  1048. td.small-6,
  1049. th.small-6 {
  1050. display: inline-block !important;
  1051. width: 50% !important; }
  1052. td.small-7,
  1053. th.small-7 {
  1054. display: inline-block !important;
  1055. width: 58.33333% !important; }
  1056. td.small-8,
  1057. th.small-8 {
  1058. display: inline-block !important;
  1059. width: 66.66667% !important; }
  1060. td.small-9,
  1061. th.small-9 {
  1062. display: inline-block !important;
  1063. width: 75% !important; }
  1064. td.small-10,
  1065. th.small-10 {
  1066. display: inline-block !important;
  1067. width: 83.33333% !important; }
  1068. td.small-11,
  1069. th.small-11 {
  1070. display: inline-block !important;
  1071. width: 91.66667% !important; }
  1072. td.small-12,
  1073. th.small-12 {
  1074. display: inline-block !important;
  1075. width: 100% !important; }
  1076. .columns td.small-12,
  1077. .column td.small-12,
  1078. .columns th.small-12,
  1079. .column th.small-12 {
  1080. display: block !important;
  1081. width: 100% !important; }
  1082. table.body td.small-offset-1,
  1083. table.body th.small-offset-1 {
  1084. margin-left: 8.33333% !important;
  1085. Margin-left: 8.33333% !important; }
  1086. table.body td.small-offset-2,
  1087. table.body th.small-offset-2 {
  1088. margin-left: 16.66667% !important;
  1089. Margin-left: 16.66667% !important; }
  1090. table.body td.small-offset-3,
  1091. table.body th.small-offset-3 {
  1092. margin-left: 25% !important;
  1093. Margin-left: 25% !important; }
  1094. table.body td.small-offset-4,
  1095. table.body th.small-offset-4 {
  1096. margin-left: 33.33333% !important;
  1097. Margin-left: 33.33333% !important; }
  1098. table.body td.small-offset-5,
  1099. table.body th.small-offset-5 {
  1100. margin-left: 41.66667% !important;
  1101. Margin-left: 41.66667% !important; }
  1102. table.body td.small-offset-6,
  1103. table.body th.small-offset-6 {
  1104. margin-left: 50% !important;
  1105. Margin-left: 50% !important; }
  1106. table.body td.small-offset-7,
  1107. table.body th.small-offset-7 {
  1108. margin-left: 58.33333% !important;
  1109. Margin-left: 58.33333% !important; }
  1110. table.body td.small-offset-8,
  1111. table.body th.small-offset-8 {
  1112. margin-left: 66.66667% !important;
  1113. Margin-left: 66.66667% !important; }
  1114. table.body td.small-offset-9,
  1115. table.body th.small-offset-9 {
  1116. margin-left: 75% !important;
  1117. Margin-left: 75% !important; }
  1118. table.body td.small-offset-10,
  1119. table.body th.small-offset-10 {
  1120. margin-left: 83.33333% !important;
  1121. Margin-left: 83.33333% !important; }
  1122. table.body td.small-offset-11,
  1123. table.body th.small-offset-11 {
  1124. margin-left: 91.66667% !important;
  1125. Margin-left: 91.66667% !important; }
  1126. table.body table.columns td.expander,
  1127. table.body table.columns th.expander {
  1128. display: none !important; }
  1129. table.body .right-text-pad,
  1130. table.body .text-pad-right {
  1131. padding-left: 10px !important; }
  1132. table.body .left-text-pad,
  1133. table.body .text-pad-left {
  1134. padding-right: 10px !important; }
  1135. table.menu {
  1136. width: 100% !important; }
  1137. table.menu td,
  1138. table.menu th {
  1139. width: auto !important;
  1140. display: inline-block !important; }
  1141. table.menu.vertical td,
  1142. table.menu.vertical th, table.menu.small-vertical td,
  1143. table.menu.small-vertical th {
  1144. display: block !important; }
  1145. table.menu[align="center"] {
  1146. width: auto !important; }
  1147. table.button.small-expand,
  1148. table.button.small-expanded {
  1149. width: 100% !important; }
  1150. table.button.small-expand table,
  1151. table.button.small-expanded table {
  1152. width: 100%; }
  1153. table.button.small-expand table a,
  1154. table.button.small-expanded table a {
  1155. text-align: center !important;
  1156. width: 100% !important;
  1157. padding-left: 0 !important;
  1158. padding-right: 0 !important; }
  1159. table.button.small-expand center,
  1160. table.button.small-expanded center {
  1161. min-width: 0; } }
  1162. </style>
  1163. <style>
  1164. .header {
  1165. background: #8a8a8a;
  1166. }
  1167. .header .columns {
  1168. padding-bottom: 0;
  1169. }
  1170. .header p {
  1171. color: #fff;
  1172. margin-bottom: 0;
  1173. }
  1174. .header .wrapper-inner {
  1175. padding: 20px;
  1176. /*controls the height of the header*/
  1177. }
  1178. .header .container {
  1179. background: #8a8a8a;
  1180. }
  1181. .wrapper.secondary {
  1182. background: #f3f3f3;
  1183. }
  1184. </style>
  1185. </head>
  1186. <body>
  1187. <!-- <style> -->
  1188. <table class="body" data-made-with-foundation="">
  1189. <tr>
  1190. <td class="float-center" align="center" valign="top">
  1191. <center data-parsed="">
  1192. <table align="center" class="wrapper header float-center">
  1193. <tr>
  1194. <td class="wrapper-inner">
  1195. <table align="center" class="container">
  1196. <tbody>
  1197. <tr>
  1198. <td>
  1199. <table class="row collapse">
  1200. <tbody>
  1201. <tr>
  1202. <th class="small-6 large-6 columns first">
  1203. <table>
  1204. <tr>
  1205. <th> <img src="http://placehold.it/200x50/663399"> </th>
  1206. </tr>
  1207. </table>
  1208. </th>
  1209. <th class="small-6 large-6 columns last">
  1210. <table>
  1211. <tr>
  1212. <th>
  1213. <p class="text-right">HERO</p>
  1214. </th>
  1215. </tr>
  1216. </table>
  1217. </th>
  1218. </tr>
  1219. </tbody>
  1220. </table>
  1221. </td>
  1222. </tr>
  1223. </tbody>
  1224. </table>
  1225. </td>
  1226. </tr>
  1227. </table>
  1228. <table align="center" class="container float-center">
  1229. <tbody>
  1230. <tr>
  1231. <td>
  1232. <table class="spacer">
  1233. <tbody>
  1234. <tr>
  1235. <td height="16px" style="font-size:16px;line-height:16px;">&#xA0;</td>
  1236. </tr>
  1237. </tbody>
  1238. </table>
  1239. <table class="row">
  1240. <tbody>
  1241. <tr>
  1242. <th class="small-12 large-12 columns first last">
  1243. <table>
  1244. <tr>
  1245. <th>
  1246. <h1>Hi, Elijah Baily</h1>
  1247. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p> <img src="http://placehold.it/580x300" alt="">
  1248. <table class="callout">
  1249. <tr>
  1250. <th class="callout-inner primary">
  1251. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
  1252. </th>
  1253. <th class="expander"></th>
  1254. </tr>
  1255. </table>
  1256. <h2>Title Ipsum <small>This is a note.</small></h2>
  1257. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt.
  1258. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates,
  1259. assumenda quisquam.</p>
  1260. <table class="button large secondary">
  1261. <tr>
  1262. <td>
  1263. <table>
  1264. <tr>
  1265. <td><a href="#">Click Me!</a></td>
  1266. </tr>
  1267. </table>
  1268. </td>
  1269. </tr>
  1270. </table>
  1271. </th>
  1272. <th class="expander"></th>
  1273. </tr>
  1274. </table>
  1275. </th>
  1276. </tr>
  1277. </tbody>
  1278. </table>
  1279. <table class="wrapper secondary" align="center">
  1280. <tr>
  1281. <td class="wrapper-inner">
  1282. <table class="spacer">
  1283. <tbody>
  1284. <tr>
  1285. <td height="16px" style="font-size:16px;line-height:16px;">&#xA0;</td>
  1286. </tr>
  1287. </tbody>
  1288. </table>
  1289. <table class="row">
  1290. <tbody>
  1291. <tr>
  1292. <th class="small-12 large-6 columns first">
  1293. <table>
  1294. <tr>
  1295. <th>
  1296. <h5>Connect With Us:</h5>
  1297. <table align="left" class="menu vertical">
  1298. <tr>
  1299. <td>
  1300. <table>
  1301. <tr>
  1302. <th style="text-align: left;" class="menu-item float-center"><a href="#">Twitter</a></th>
  1303. <th style="text-align: left;" class="menu-item float-center"><a href="#">Facebook</a></th>
  1304. <th style="text-align: left;" class="menu-item float-center"><a href="#">Google +</a></th>
  1305. </tr>
  1306. </table>
  1307. </td>
  1308. </tr>
  1309. </table>
  1310. </th>
  1311. </tr>
  1312. </table>
  1313. </th>
  1314. <th class="small-12 large-6 columns last">
  1315. <table>
  1316. <tr>
  1317. <th>
  1318. <h5>Contact Info:</h5>
  1319. <p>Phone: 408-341-0600</p>
  1320. <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
  1321. </th>
  1322. </tr>
  1323. </table>
  1324. </th>
  1325. </tr>
  1326. </tbody>
  1327. </table>
  1328. </td>
  1329. </tr>
  1330. </table>
  1331. <center data-parsed="">
  1332. <table align="center" class="menu float-center">
  1333. <tr>
  1334. <td>
  1335. <table>
  1336. <tr>
  1337. <th class="menu-item float-center"><a href="#">Terms</a></th>
  1338. <th class="menu-item float-center"><a href="#">Privacy</a></th>
  1339. <th class="menu-item float-center"><a href="#">Unsubscribe</a></th>
  1340. </tr>
  1341. </table>
  1342. </td>
  1343. </tr>
  1344. </table>
  1345. </center>
  1346. </td>
  1347. </tr>
  1348. </tbody>
  1349. </table>
  1350. </center>
  1351. </td>
  1352. </tr>
  1353. </table>
  1354. </body>
  1355. </html>