1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.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. <title>Template mercado livre</title>
  6. <style>
  7. *{padding: 0; margin: 0;}
  8. table { margin: auto;}
  10. /*! normalize.css v2.0.1 | MIT License | git.io/normalize */
  12. /* ==========================================================================
  13. HTML5 display definitions
  14. ========================================================================== */
  16. /*
  17. * Corrects `block` display not defined in IE 8/9.
  18. */
  20. article,
  21. aside,
  22. details,
  23. figcaption,
  24. figure,
  25. footer,
  26. header,
  27. hgroup,
  28. nav,
  29. section,
  30. summary {
  31. display: block;
  32. }
  34. /*
  35. * Corrects `inline-block` display not defined in IE 8/9.
  36. */
  38. audio,
  39. canvas,
  40. video {
  41. display: inline-block;
  42. }
  44. /*
  45. * Prevents modern browsers from displaying `audio` without controls.
  46. * Remove excess height in iOS 5 devices.
  47. */
  49. audio:not([controls]) {
  50. display: none;
  51. height: 0;
  52. }
  54. /*
  55. * Addresses styling for `hidden` attribute not present in IE 8/9.
  56. */
  58. [hidden] {
  59. display: none;
  60. }
  62. /* ==========================================================================
  63. Base
  64. ========================================================================== */
  66. /*
  67. * 1. Sets default font family to sans-serif.
  68. * 2. Prevents iOS text size adjust after orientation change, without disabling
  69. * user zoom.
  70. */
  72. html {
  73. font-family: sans-serif; /* 1 */
  74. -webkit-text-size-adjust: 100%; /* 2 */
  75. -ms-text-size-adjust: 100%; /* 2 */
  76. }
  78. /*
  79. * Removes default margin.
  80. */
  82. body {
  83. margin: 0;
  84. }
  86. /* ==========================================================================
  87. Links
  88. ========================================================================== */
  90. /*
  91. * Addresses `outline` inconsistency between Chrome and other browsers.
  92. */
  94. a:focus {
  95. outline: thin dotted;
  96. }
  98. /*
  99. * Improves readability when focused and also mouse hovered in all browsers.
  100. */
  102. a:active,
  103. a:hover {
  104. outline: 0;
  105. }
  107. /* ==========================================================================
  108. Typography
  109. ========================================================================== */
  111. /*
  112. * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
  113. * Safari 5, and Chrome.
  114. */
  116. h1 {
  117. font-size: 2em;
  118. }
  120. /*
  121. * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
  122. */
  124. abbr[title] {
  125. border-bottom: 1px dotted;
  126. }
  128. /*
  129. * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  130. */
  132. b,
  133. strong {
  134. font-weight: bold;
  135. }
  137. /*
  138. * Addresses styling not present in Safari 5 and Chrome.
  139. */
  141. dfn {
  142. font-style: italic;
  143. }
  145. /*
  146. * Addresses styling not present in IE 8/9.
  147. */
  149. mark {
  150. background: #ff0;
  151. color: #000;
  152. }
  155. /*
  156. * Corrects font family set oddly in Safari 5 and Chrome.
  157. */
  159. code,
  160. kbd,
  161. pre,
  162. samp {
  163. font-family: monospace, serif;
  164. font-size: 1em;
  165. }
  167. /*
  168. * Improves readability of pre-formatted text in all browsers.
  169. */
  171. pre {
  172. white-space: pre;
  173. white-space: pre-wrap;
  174. word-wrap: break-word;
  175. }
  177. /*
  178. * Sets consistent quote types.
  179. */
  181. q {
  182. quotes: "\201C" "\201D" "\2018" "\2019";
  183. }
  185. /*
  186. * Addresses inconsistent and variable font size in all browsers.
  187. */
  189. small {
  190. font-size: 80%;
  191. }
  193. /*
  194. * Prevents `sub` and `sup` affecting `line-height` in all browsers.
  195. */
  197. sub,
  198. sup {
  199. font-size: 75%;
  200. line-height: 0;
  201. position: relative;
  202. vertical-align: baseline;
  203. }
  205. sup {
  206. top: -0.5em;
  207. }
  209. sub {
  210. bottom: -0.25em;
  211. }
  213. /* ==========================================================================
  214. Embedded content
  215. ========================================================================== */
  217. /*
  218. * Removes border when inside `a` element in IE 8/9.
  219. */
  221. img {
  222. border: 0;
  223. }
  225. /*
  226. * Corrects overflow displayed oddly in IE 9.
  227. */
  229. svg:not(:root) {
  230. overflow: hidden;
  231. }
  233. /* ==========================================================================
  234. Figures
  235. ========================================================================== */
  237. /*
  238. * Addresses margin not present in IE 8/9 and Safari 5.
  239. */
  241. figure {
  242. margin: 0;
  243. }
  245. /* ==========================================================================
  246. Forms
  247. ========================================================================== */
  249. /*
  250. * Define consistent border, margin, and padding.
  251. */
  253. fieldset {
  254. border: 1px solid #c0c0c0;
  255. margin: 0 2px;
  256. padding: 0.35em 0.625em 0.75em;
  257. }
  259. /*
  260. * 1. Corrects color not being inherited in IE 8/9.
  261. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  262. */
  264. legend {
  265. border: 0; /* 1 */
  266. padding: 0; /* 2 */
  267. }
  269. /*
  270. * 1. Corrects font family not being inherited in all browsers.
  271. * 2. Corrects font size not being inherited in all browsers.
  272. * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  273. */
  275. button,
  276. input,
  277. select,
  278. textarea {
  279. font-family: inherit; /* 1 */
  280. font-size: 100%; /* 2 */
  281. margin: 0; /* 3 */
  282. }
  284. /*
  285. * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  286. * the UA stylesheet.
  287. */
  289. button,
  290. input {
  291. line-height: normal;
  292. }
  294. /*
  295. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  296. * and `video` controls.
  297. * 2. Corrects inability to style clickable `input` types in iOS.
  298. * 3. Improves usability and consistency of cursor style between image-type
  299. * `input` and others.
  300. */
  302. button,
  303. html input[type="button"], /* 1 */
  304. input[type="reset"],
  305. input[type="submit"] {
  306. -webkit-appearance: button; /* 2 */
  307. cursor: pointer; /* 3 */
  308. }
  310. /*
  311. * Re-set default cursor for disabled elements.
  312. */
  314. button[disabled],
  315. input[disabled] {
  316. cursor: default;
  317. }
  319. /*
  320. * 1. Addresses box sizing set to `content-box` in IE 8/9.
  321. * 2. Removes excess padding in IE 8/9.
  322. */
  324. input[type="checkbox"],
  325. input[type="radio"] {
  326. box-sizing: border-box; /* 1 */
  327. padding: 0; /* 2 */
  328. }
  330. /*
  331. * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
  332. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
  333. * (include `-moz` to future-proof).
  334. */
  336. input[type="search"] {
  337. -webkit-appearance: textfield; /* 1 */
  338. -moz-box-sizing: content-box;
  339. -webkit-box-sizing: content-box; /* 2 */
  340. box-sizing: content-box;
  341. }
  343. /*
  344. * Removes inner padding and search cancel button in Safari 5 and Chrome
  345. * on OS X.
  346. */
  348. input[type="search"]::-webkit-search-cancel-button,
  349. input[type="search"]::-webkit-search-decoration {
  350. -webkit-appearance: none;
  351. }
  353. /*
  354. * Removes inner padding and border in Firefox 4+.
  355. */
  357. button::-moz-focus-inner,
  358. input::-moz-focus-inner {
  359. border: 0;
  360. padding: 0;
  361. }
  363. /*
  364. * 1. Removes default vertical scrollbar in IE 8/9.
  365. * 2. Improves readability and alignment in all browsers.
  366. */
  368. textarea {
  369. overflow: auto; /* 1 */
  370. vertical-align: top; /* 2 */
  371. }
  373. /* ==========================================================================
  374. Tables
  375. ========================================================================== */
  377. /*
  378. * Remove most spacing between table cells.
  379. */
  381. table {
  382. border-collapse: collapse;
  383. border-spacing: 0;
  384. }
  387. .gallery .control-operator:target ~ .controls .control-button {
  388. color: #ccc;
  389. color: rgba(255, 255, 255, 0.4);
  390. }
  392. .gallery .control-button:first-of-type,
  393. .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
  394. .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
  395. .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
  396. .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
  397. .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
  398. color: white;
  399. color: rgba(255, 255, 255, 0.8);
  400. }
  402. .gallery .item:first-of-type {
  403. position: static;
  404. pointer-events: auto;
  405. opacity: 1;
  406. }
  408. .gallery .item {
  409. position: absolute;
  410. top: 0;
  411. left: 0;
  412. width: 100%;
  413. height: 100%;
  414. pointer-events: none;
  415. opacity: 0;
  416. -webkit-transition: opacity .5s;
  417. -o-transition: opacity .5s;
  418. transition: opacity .5s;
  419. }
  421. .gallery .control-operator {
  422. display: none;
  423. }
  425. .gallery .control-operator:target ~ .item {
  426. pointer-events: none;
  427. opacity: 0;
  428. -webkit-animation: none;
  429. -o-animation: none;
  430. animation: none;
  431. }
  433. .gallery .control-operator:target ~ .controls .control-button {
  434. -webkit-animation: none;
  435. -o-animation: none;
  436. animation: none;
  437. }
  439. @-webkit-keyframes controlAnimation-2 {
  440. 0% {
  441. color: #ccc;
  442. color: rgba(255, 255, 255, 0.4);
  443. }
  445. 14.3%, 50% {
  446. color: white;
  447. color: rgba(255, 255, 255, 0.8);
  448. }
  450. 64.3%, 100% {
  451. color: #ccc;
  452. color: rgba(255, 255, 255, 0.4);
  453. }
  454. }
  456. @-o-keyframes controlAnimation-2 {
  457. 0% {
  458. color: #ccc;
  459. color: rgba(255, 255, 255, 0.4);
  460. }
  462. 14.3%, 50% {
  463. color: white;
  464. color: rgba(255, 255, 255, 0.8);
  465. }
  467. 64.3%, 100% {
  468. color: #ccc;
  469. color: rgba(255, 255, 255, 0.4);
  470. }
  471. }
  473. @keyframes controlAnimation-2 {
  474. 0% {
  475. color: #ccc;
  476. color: rgba(255, 255, 255, 0.4);
  477. }
  479. 14.3%, 50% {
  480. color: white;
  481. color: rgba(255, 255, 255, 0.8);
  482. }
  484. 64.3%, 100% {
  485. color: #ccc;
  486. color: rgba(255, 255, 255, 0.4);
  487. }
  488. }
  490. @-webkit-keyframes galleryAnimation-2 {
  491. 0% {
  492. opacity: 0;
  493. }
  495. 14.3%, 50% {
  496. opacity: 1;
  497. }
  499. 64.3%, 100% {
  500. opacity: 0;
  501. }
  502. }
  504. @-o-keyframes galleryAnimation-2 {
  505. 0% {
  506. opacity: 0;
  507. }
  509. 14.3%, 50% {
  510. opacity: 1;
  511. }
  513. 64.3%, 100% {
  514. opacity: 0;
  515. }
  516. }
  518. @keyframes galleryAnimation-2 {
  519. 0% {
  520. opacity: 0;
  521. }
  523. 14.3%, 50% {
  524. opacity: 1;
  525. }
  527. 64.3%, 100% {
  528. opacity: 0;
  529. }
  530. }
  532. .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  533. pointer-events: auto;
  534. opacity: 1;
  535. }
  537. .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  538. pointer-events: auto;
  539. opacity: 1;
  540. }
  542. .items-2.autoplay .control-button {
  543. -webkit-animation: controlAnimation-2 14s infinite;
  544. -o-animation: controlAnimation-2 14s infinite;
  545. animation: controlAnimation-2 14s infinite;
  546. }
  548. .items-2.autoplay .item {
  549. -webkit-animation: galleryAnimation-2 14s infinite;
  550. -o-animation: galleryAnimation-2 14s infinite;
  551. animation: galleryAnimation-2 14s infinite;
  552. }
  554. .items-2 .control-button:nth-of-type(1),
  555. .items-2 .item:nth-of-type(1) {
  556. -webkit-animation-delay: -2s;
  557. -o-animation-delay: -2s;
  558. animation-delay: -2s;
  559. }
  561. .items-2 .control-button:nth-of-type(2),
  562. .items-2 .item:nth-of-type(2) {
  563. -webkit-animation-delay: 5s;
  564. -o-animation-delay: 5s;
  565. animation-delay: 5s;
  566. }
  568. @-webkit-keyframes controlAnimation-3 {
  569. 0% {
  570. color: #ccc;
  571. color: rgba(255, 255, 255, 0.4);
  572. }
  574. 9.5%, 33.3% {
  575. color: white;
  576. color: rgba(255, 255, 255, 0.8);
  577. }
  579. 42.9%, 100% {
  580. color: #ccc;
  581. color: rgba(255, 255, 255, 0.4);
  582. }
  583. }
  585. @-o-keyframes controlAnimation-3 {
  586. 0% {
  587. color: #ccc;
  588. color: rgba(255, 255, 255, 0.4);
  589. }
  591. 9.5%, 33.3% {
  592. color: white;
  593. color: rgba(255, 255, 255, 0.8);
  594. }
  596. 42.9%, 100% {
  597. color: #ccc;
  598. color: rgba(255, 255, 255, 0.4);
  599. }
  600. }
  602. @keyframes controlAnimation-3 {
  603. 0% {
  604. color: #ccc;
  605. color: rgba(255, 255, 255, 0.4);
  606. }
  608. 9.5%, 33.3% {
  609. color: white;
  610. color: rgba(255, 255, 255, 0.8);
  611. }
  613. 42.9%, 100% {
  614. color: #ccc;
  615. color: rgba(255, 255, 255, 0.4);
  616. }
  617. }
  619. @-webkit-keyframes galleryAnimation-3 {
  620. 0% {
  621. opacity: 0;
  622. }
  624. 9.5%, 33.3% {
  625. opacity: 1;
  626. }
  628. 42.9%, 100% {
  629. opacity: 0;
  630. }
  631. }
  633. @-o-keyframes galleryAnimation-3 {
  634. 0% {
  635. opacity: 0;
  636. }
  638. 9.5%, 33.3% {
  639. opacity: 1;
  640. }
  642. 42.9%, 100% {
  643. opacity: 0;
  644. }
  645. }
  647. @keyframes galleryAnimation-3 {
  648. 0% {
  649. opacity: 0;
  650. }
  652. 9.5%, 33.3% {
  653. opacity: 1;
  654. }
  656. 42.9%, 100% {
  657. opacity: 0;
  658. }
  659. }
  661. .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  662. pointer-events: auto;
  663. opacity: 1;
  664. }
  666. .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  667. pointer-events: auto;
  668. opacity: 1;
  669. }
  671. .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  672. pointer-events: auto;
  673. opacity: 1;
  674. }
  676. .items-3.autoplay .control-button {
  677. -webkit-animation: controlAnimation-3 21s infinite;
  678. -o-animation: controlAnimation-3 21s infinite;
  679. animation: controlAnimation-3 21s infinite;
  680. }
  682. .items-3.autoplay .item {
  683. -webkit-animation: galleryAnimation-3 21s infinite;
  684. -o-animation: galleryAnimation-3 21s infinite;
  685. animation: galleryAnimation-3 21s infinite;
  686. }
  688. .items-3 .control-button:nth-of-type(1),
  689. .items-3 .item:nth-of-type(1) {
  690. -webkit-animation-delay: -2s;
  691. -o-animation-delay: -2s;
  692. animation-delay: -2s;
  693. }
  695. .items-3 .control-button:nth-of-type(2),
  696. .items-3 .item:nth-of-type(2) {
  697. -webkit-animation-delay: 5s;
  698. -o-animation-delay: 5s;
  699. animation-delay: 5s;
  700. }
  702. .items-3 .control-button:nth-of-type(3),
  703. .items-3 .item:nth-of-type(3) {
  704. -webkit-animation-delay: 12s;
  705. -o-animation-delay: 12s;
  706. animation-delay: 12s;
  707. }
  709. @-webkit-keyframes controlAnimation-4 {
  710. 0% {
  711. color: #ccc;
  712. color: rgba(255, 255, 255, 0.4);
  713. }
  715. 7.1%, 25% {
  716. color: white;
  717. color: rgba(255, 255, 255, 0.8);
  718. }
  720. 32.1%, 100% {
  721. color: #ccc;
  722. color: rgba(255, 255, 255, 0.4);
  723. }
  724. }
  726. @-o-keyframes controlAnimation-4 {
  727. 0% {
  728. color: #ccc;
  729. color: rgba(255, 255, 255, 0.4);
  730. }
  732. 7.1%, 25% {
  733. color: white;
  734. color: rgba(255, 255, 255, 0.8);
  735. }
  737. 32.1%, 100% {
  738. color: #ccc;
  739. color: rgba(255, 255, 255, 0.4);
  740. }
  741. }
  743. @keyframes controlAnimation-4 {
  744. 0% {
  745. color: #ccc;
  746. color: rgba(255, 255, 255, 0.4);
  747. }
  749. 7.1%, 25% {
  750. color: white;
  751. color: rgba(255, 255, 255, 0.8);
  752. }
  754. 32.1%, 100% {
  755. color: #ccc;
  756. color: rgba(255, 255, 255, 0.4);
  757. }
  758. }
  760. @-webkit-keyframes galleryAnimation-4 {
  761. 0% {
  762. opacity: 0;
  763. }
  765. 7.1%, 25% {
  766. opacity: 1;
  767. }
  769. 32.1%, 100% {
  770. opacity: 0;
  771. }
  772. }
  774. @-o-keyframes galleryAnimation-4 {
  775. 0% {
  776. opacity: 0;
  777. }
  779. 7.1%, 25% {
  780. opacity: 1;
  781. }
  783. 32.1%, 100% {
  784. opacity: 0;
  785. }
  786. }
  788. @keyframes galleryAnimation-4 {
  789. 0% {
  790. opacity: 0;
  791. }
  793. 7.1%, 25% {
  794. opacity: 1;
  795. }
  797. 32.1%, 100% {
  798. opacity: 0;
  799. }
  800. }
  802. .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  803. pointer-events: auto;
  804. opacity: 1;
  805. }
  807. .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  808. pointer-events: auto;
  809. opacity: 1;
  810. }
  812. .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  813. pointer-events: auto;
  814. opacity: 1;
  815. }
  817. .gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  818. pointer-events: auto;
  819. opacity: 1;
  820. }
  822. .items-4.autoplay .control-button {
  823. -webkit-animation: controlAnimation-4 28s infinite;
  824. -o-animation: controlAnimation-4 28s infinite;
  825. animation: controlAnimation-4 28s infinite;
  826. }
  828. .items-4.autoplay .item {
  829. -webkit-animation: galleryAnimation-4 28s infinite;
  830. -o-animation: galleryAnimation-4 28s infinite;
  831. animation: galleryAnimation-4 28s infinite;
  832. }
  834. .items-4 .control-button:nth-of-type(1),
  835. .items-4 .item:nth-of-type(1) {
  836. -webkit-animation-delay: -2s;
  837. -o-animation-delay: -2s;
  838. animation-delay: -2s;
  839. }
  841. .items-4 .control-button:nth-of-type(2),
  842. .items-4 .item:nth-of-type(2) {
  843. -webkit-animation-delay: 5s;
  844. -o-animation-delay: 5s;
  845. animation-delay: 5s;
  846. }
  848. .items-4 .control-button:nth-of-type(3),
  849. .items-4 .item:nth-of-type(3) {
  850. -webkit-animation-delay: 12s;
  851. -o-animation-delay: 12s;
  852. animation-delay: 12s;
  853. }
  855. .items-4 .control-button:nth-of-type(4),
  856. .items-4 .item:nth-of-type(4) {
  857. -webkit-animation-delay: 19s;
  858. -o-animation-delay: 19s;
  859. animation-delay: 19s;
  860. }
  862. @-webkit-keyframes controlAnimation-5 {
  863. 0% {
  864. color: #ccc;
  865. color: rgba(255, 255, 255, 0.4);
  866. }
  868. 5.7%, 20% {
  869. color: white;
  870. color: rgba(255, 255, 255, 0.8);
  871. }
  873. 25.7%, 100% {
  874. color: #ccc;
  875. color: rgba(255, 255, 255, 0.4);
  876. }
  877. }
  879. @-o-keyframes controlAnimation-5 {
  880. 0% {
  881. color: #ccc;
  882. color: rgba(255, 255, 255, 0.4);
  883. }
  885. 5.7%, 20% {
  886. color: white;
  887. color: rgba(255, 255, 255, 0.8);
  888. }
  890. 25.7%, 100% {
  891. color: #ccc;
  892. color: rgba(255, 255, 255, 0.4);
  893. }
  894. }
  896. @keyframes controlAnimation-5 {
  897. 0% {
  898. color: #ccc;
  899. color: rgba(255, 255, 255, 0.4);
  900. }
  902. 5.7%, 20% {
  903. color: white;
  904. color: rgba(255, 255, 255, 0.8);
  905. }
  907. 25.7%, 100% {
  908. color: #ccc;
  909. color: rgba(255, 255, 255, 0.4);
  910. }
  911. }
  913. @-webkit-keyframes galleryAnimation-5 {
  914. 0% {
  915. opacity: 0;
  916. }
  918. 5.7%, 20% {
  919. opacity: 1;
  920. }
  922. 25.7%, 100% {
  923. opacity: 0;
  924. }
  925. }
  927. @-o-keyframes galleryAnimation-5 {
  928. 0% {
  929. opacity: 0;
  930. }
  932. 5.7%, 20% {
  933. opacity: 1;
  934. }
  936. 25.7%, 100% {
  937. opacity: 0;
  938. }
  939. }
  941. @keyframes galleryAnimation-5 {
  942. 0% {
  943. opacity: 0;
  944. }
  946. 5.7%, 20% {
  947. opacity: 1;
  948. }
  950. 25.7%, 100% {
  951. opacity: 0;
  952. }
  953. }
  955. .gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  956. pointer-events: auto;
  957. opacity: 1;
  958. }
  960. .gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  961. pointer-events: auto;
  962. opacity: 1;
  963. }
  965. .gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  966. pointer-events: auto;
  967. opacity: 1;
  968. }
  970. .gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  971. pointer-events: auto;
  972. opacity: 1;
  973. }
  975. .gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
  976. pointer-events: auto;
  977. opacity: 1;
  978. }
  980. .items-5.autoplay .control-button {
  981. -webkit-animation: controlAnimation-5 35s infinite;
  982. -o-animation: controlAnimation-5 35s infinite;
  983. animation: controlAnimation-5 35s infinite;
  984. }
  986. .items-5.autoplay .item {
  987. -webkit-animation: galleryAnimation-5 35s infinite;
  988. -o-animation: galleryAnimation-5 35s infinite;
  989. animation: galleryAnimation-5 35s infinite;
  990. }
  992. .items-5 .control-button:nth-of-type(1),
  993. .items-5 .item:nth-of-type(1) {
  994. -webkit-animation-delay: -2s;
  995. -o-animation-delay: -2s;
  996. animation-delay: -2s;
  997. }
  999. .items-5 .control-button:nth-of-type(2),
  1000. .items-5 .item:nth-of-type(2) {
  1001. -webkit-animation-delay: 5s;
  1002. -o-animation-delay: 5s;
  1003. animation-delay: 5s;
  1004. }
  1006. .items-5 .control-button:nth-of-type(3),
  1007. .items-5 .item:nth-of-type(3) {
  1008. -webkit-animation-delay: 12s;
  1009. -o-animation-delay: 12s;
  1010. animation-delay: 12s;
  1011. }
  1013. .items-5 .control-button:nth-of-type(4),
  1014. .items-5 .item:nth-of-type(4) {
  1015. -webkit-animation-delay: 19s;
  1016. -o-animation-delay: 19s;
  1017. animation-delay: 19s;
  1018. }
  1020. .items-5 .control-button:nth-of-type(5),
  1021. .items-5 .item:nth-of-type(5) {
  1022. -webkit-animation-delay: 26s;
  1023. -o-animation-delay: 26s;
  1024. animation-delay: 26s;
  1025. }
  1027. .gallery .control-button {
  1028. color: #ccc;
  1029. color: rgba(255, 255, 255, 0.4);
  1030. }
  1032. .gallery .control-button:hover {
  1033. color: white;
  1034. color: rgba(255, 255, 255, 0.8);
  1035. }
  1037. /*
  1038. Theme controls how everything looks in Gallery CSS.
  1039. */
  1041. .gallery {
  1042. position: relative;
  1043. }
  1045. .gallery .item {
  1046. height: 400px;
  1047. overflow: hidden;
  1048. text-align: center;
  1049. background: #4d87e2;
  1050. }
  1052. .gallery .controls {
  1053. position: absolute;
  1054. bottom: 0;
  1055. width: 100%;
  1056. text-align: center;
  1057. }
  1059. .gallery .control-button {
  1060. display: inline-block;
  1061. margin: 0 .02em;
  1062. font-size: 3em;
  1063. text-align: center;
  1064. text-decoration: none;
  1065. -webkit-transition: color .1s;
  1066. -o-transition: color .1s;
  1067. transition: color .1s;
  1068. }
  1070. .gallery .control-button {
  1071. color: #ccc;
  1072. color: rgba(255, 255, 255, 0.4);
  1073. }
  1075. .gallery .control-button:hover {
  1076. color: white;
  1077. color: rgba(255, 255, 255, 0.8);
  1078. }
  1080. /*
  1081. Theme controls how everything looks in Gallery CSS.
  1082. */
  1083. .gallery {
  1084. position: relative;
  1085. }
  1086. .gallery .item {
  1087. height: 200px;
  1088. overflow: hidden;
  1089. text-align: center;
  1090. background: #ffffff;
  1091. }
  1092. .gallery .controls {
  1093. position: absolute;
  1094. bottom: 0;
  1095. width: 100%;
  1096. text-align: center;
  1097. }
  1098. .gallery .control-button {
  1099. display: inline-block;
  1100. margin: 0 .02em;
  1101. font-size: 3em;
  1102. text-align: center;
  1103. text-decoration: none;
  1104. transition: color .1s;
  1105. }
  1107. </style>
  1108. </head>
  1110. <body>
  1111. <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  1113. <tr>
  1114. <td>
  1115. <img src="images/template-mercado-livre-03_01.jpg" width="900" height="227" />
  1116. </td>
  1117. </tr>
  1119. <tr>
  1120. <td>
  1121. <div class="gallery autoplay items-3">
  1122. <div id="item-1" class="control-operator"></div>
  1123. <div id="item-2" class="control-operator"></div>
  1124. <div id="item-3" class="control-operator"></div>
  1126. <figure class="item">
  1127. <img src="03.jpg" alt="imagem 1" />
  1128. </figure>
  1130. <figure class="item">
  1131. <img src="01.jpg" alt="imagem 2" />
  1132. </figure>
  1134. <figure class="item">
  1135. <img src="02.jpg" alt="imagem 3" />
  1136. </figure>
  1138. <div class="controls">
  1139. <a href="#item-1" class="control-button">•</a>
  1140. <a href="#item-2" class="control-button">•</a>
  1141. <a href="#item-3" class="control-button">•</a>
  1142. </div>
  1143. </div>
  1144. </td>
  1145. </tr>
  1147. <tr>
  1148. <td>
  1149. <img src="images/template-mercado-livre-03_03.jpg" width="900" height="10" />
  1150. </td>
  1151. </tr>
  1153. <tr>
  1154. <td>
  1155. <img src="images/template-mercado-livre-03_05.jpg" width="900" height="68" />
  1156. </td>
  1157. </tr>
  1159. <tr>
  1160. <td>&nbsp;</td>
  1161. </tr>
  1163. <tr>
  1164. <td>
  1165. <img src="images/template-mercado-livre-03_07.jpg" width="900" height="67" />
  1166. </td>
  1167. </tr>
  1169. <tr>
  1170. <td>&nbsp;</td>
  1171. </tr>
  1173. <tr>
  1174. <td>
  1175. <img src="images/template-mercado-livre-03_09.jpg" width="900" height="66" />
  1176. </td>
  1177. </tr>
  1179. <tr>
  1180. <td>&nbsp;</td>
  1181. </tr>
  1183. <tr>
  1184. <td>
  1185. <img src="images/template-mercado-livre-03_11.jpg" width="900" height="542" />
  1186. </td>
  1187. </tr>
  1189. </table>
  1190. </body>
  1191. </html>