HTML-140

SHAPE HOVER EFFECT WITH SVG

<div dir="ltr"><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><a href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/" style="margin:0px;padding:0px;color:rgb(5,100,149);text-decoration:none;outline:none;font-weight:bold"><img alt="ShapeHoverEffect" class="" height="315" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/01/ShapeHoverEffect.png" style="margin: 10px auto; padding: 0px; max-width: 100%; height: auto; border: none; display: block; text-align: center;" width="580"></a></p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><a class="" href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/" style="padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">VIEW DEMO</a> <a class="" href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/ShapeHoverEffectSVG.zip" style="margin:0px 0px 25px 5px;padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">DOWNLOAD SOURCE</a></p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">If you have visited the fantastic new edition of <a href="http://christmasexperiments.com/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold">The Christmas Experiments</a> then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using borders and today I would like to show you how to achieve the same effect using SVG and <a href="http://snapsvg.io/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold">Snap.svg</a>. The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we'll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container's size and make everything fluid.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><span style="margin:0px;padding:0px;font-weight:600">The illustrations used in the demos are by talented <a href="http://cargocollective.com/isaac317" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">Isaac Montemayor</a>. See his original artwork on his <a href="http://cargocollective.com/isaac317" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">website</a> or <a href="http://dribbble.com/isaac317" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">Dribbble</a>.</span></p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">So, let's get started!</p><h3 style="margin:1.5em 0px 0.5em;padding:0px 0px 0.25em;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-size:2.1em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(245,245,245);line-height:1.2;color:rgb(51,51,51)">  THE MARKUP</h3><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">What we'll do first, is to draw two shapes in a vector graphics editor like Adobe Illustrator or Inkscape. Each shape will consist of one path and when we are done, we'll copy the points of our paths to be used in our markup. Note that we've transformed a polygon into a path. If you are using Inkscape you can do that by selecting the object and choosing <span style="margin:0px;padding:0px;font-weight:600">Path > Object to Path</span>. The points for the path can be obtained from <span style="margin:0px;padding:0px;font-weight:600">Edit > XML Editor…</span> which will open a view as seen in the following screenshot:</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><img alt="InkscapeShape" class="" height="520" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/01/InkscapeShape.jpg" style="margin: 10px auto; padding: 0px; max-width: 100%; height: auto; display: block; text-align: center;" width="814"></p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The "d" (path data) value is what you are looking for.</p><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  For the markup we'll have a section with the class "grid" which contains figures wrapped in anchors. You could as well use a list here which would need some extra markup.<br>The <code style="margin:0px;padding:0px 10px;font-family:'Courier New',Courier,monospace;font-weight:bold;color:rgb(101,117,128);display:inline-block;background-color:rgba(0,0,0,0.0470588)">figure</code> will contain the image, the initially visible shape and a <code style="margin:0px;padding:0px 10px;font-family:'Courier New',Courier,monospace;font-weight:bold;color:rgb(101,117,128);display:inline-block;background-color:rgba(0,0,0,0.0470588)">figcaption</code>:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_919942" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:946px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:914px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">section</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">id</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"grid"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"grid clearfix"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">data-path-hover</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"m 180,34.57627 -180,0 L 0,0 180,0 z"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">figure</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">img</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">src</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"img/1.png"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">/></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">svg</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">viewBox</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"0 0 180 320"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">preserveAspectRatio</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"none"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">path</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">d</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"M 180,160 0,218 0,0 180,0 z"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">/></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">svg</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">figcaption</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">h2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Crystalline</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">h2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">p</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Soko radicchio bunya nuts gram dulse.</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">p</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">button</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>View</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">button</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">figcaption</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">figure</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(0,158,115);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-style:italic;min-height:inherit"></code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">section</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The SVG will have the respective viewBox values for the graphic and a preserveAspectRatio of "none". This will allow us to resize and stretch the shape to the dimensions we want, which is 100% in this case. We'll define the width and height in our style sheet. The information of the hover path will be stored in the data-attribute <span style="margin:0px;padding:0px;font-weight:600">data-path-hover</span> of the wrapping anchor.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">Let's style all this.</p><div class="" style="padding:3px 51px 3px 50px;width:814px;background-color:rgb(244,246,248);overflow:hidden;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  <div class="" style="padding:10px 50px;width:814px;max-width:100%;height:auto;clear:both;background-color:rgba(255,255,255,0.6)"><img class="" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/images/advertisement.jpg" style="margin: 0px; padding: 0px; max-width: 100%; height: auto; display: block; text-align: center; max-height: 100%;"><div id="bsap_1279993" class="" style="margin:0px;padding:0px">  <a class="" href="http://stats.buysellads.com/click.go?z=1279993&b=3910293&g=&s=&sw=1440&sh=900&br=chrome,31,win&r=0.4846857956144959&link=http://www.utest.com/landing-page/can-your-testing-keep-agile?ls=Banner%20Ad&cc=Pd&mc=Display-Codrops-Agile-728x90-Static" id="bsa_3910293" style="margin:0px auto;padding-bottom:0px;padding-left:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold;float:none;max-width:100%" target="_blank" title="Free Whitepaper: 10 Tips of Agile Testing"><img alt="Free Whitepaper: 10 Tips of Agile Testing" height="90" src="http://s3.buysellads.com/1279993/188088-1379213717.jpg" style="margin: 0px auto; padding: 0px; max-width: 100%; height: auto; border: none; display: block; text-align: center;" width="728"></a></div>  <div style="margin:0px;padding:0px;clear:both"></div></div></div><h3 style="margin:1.5em 0px 0.5em;padding:0px 0px 0.25em;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-size:2.1em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(245,245,245);line-height:1.2;color:rgb(51,51,51)">  THE CSS</h3><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><em style="margin:0px;padding:0px">Note that the CSS will not contain any vendor prefixes, but you will find them in the files.</em><br>  The style that we'll be going through is for all three examples. First, we'll take a look at the common style and then we'll set the individual styles for all the demos.</p><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  We'll start with the grid. Let's center it and give it a max-width and a percentage width to make it fluid:</p><div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  <div id="highlighter_298517" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)"><table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">40px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">auto</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">120px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1000px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">90%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The anchors should float left and we'll give them a max-width of 250px and a width of 25% since we'd like them to be fluid and show four items in a row. We'll take care of smaller screen sizes in our media queries later on:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_522262" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">float</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">left</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">250px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">25%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#333</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">To create some offset for the odd items, we'll set a top margin of 30px and a bottom margin of -30px. This will create a nice look for the grid, just like in the grid on The Christmas Experiments website:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_259897" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(odd) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The figure should be positioned relatively because we'll need some of the children to be absolute. Since our hover effect might cause some overflow, and we don't want that to be visible, we'll set the overflow to "hidden":</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_265826" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">position</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">relative</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">overflow</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">hidden</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">5px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#333</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The image will occupy all the width of its parent and the opacity is set to 0.7. On hover we want to animate the opacity, so we'll add a transition:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_73399" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure img {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">position</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">relative</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">display</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">block</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">opacity</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.7</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: opacity </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The <code style="margin:0px;padding:0px 10px;font-family:'Courier New',Courier,monospace;font-weight:bold;color:rgb(101,117,128);display:inline-block;background-color:rgba(0,0,0,0.0470588)">figcaption</code> needs to be absolutely positioned and we'll stretch it over the whole item:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_868349" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">position</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">absolute</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">top</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">z-index</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">11</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">padding</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">10px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">height</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">text-align</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">center</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The headline and the paragraph will both be animated on hover, so let's give them the respective transitions and move their initial position a bit:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_20660" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  20</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  21</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">20px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#3498db</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">text-transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">uppercase</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">letter-spacing</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">font-weight</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">300</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">font-size</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">130%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: transform </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">padding</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">20px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#aaa</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">font-weight</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">300</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: opacity </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s, transform </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">50px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The common button style for all three examples is the following. The button will also animate, so we'll add a transition for the opacity and for the transform:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_654344" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">position</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">absolute</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">padding</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">4px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">20px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">border</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">none</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">text-transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">uppercase</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">letter-spacing</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">font-weight</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">bold</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: opacity </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s, transform </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">To avoid some flickering and glitches, we'll need to give the animating elements and their parent a hidden backface-visibility:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_681719" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">backface-visibility</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">hidden</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The SVG will also be positioned absolutely and we'll stretch it over the item by setting the width and height to 100%. Giving it a top value of -1px instead of 0 will ensure that there is not strange line in Firefox (26.0 / Mac).</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_510739" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid svg {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">position</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">absolute</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">top</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">; </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(0,158,115);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-style:italic;min-height:inherit">/* fixes rendering issue in FF */</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">z-index</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">10</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">height</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The fill color of the path will be white:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_436518" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid svg path {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">fill: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#fff</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">At this point you could also try to add some transitions to the path and e.g. change the fill color on hover.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The common hover effects for the anchors will be the following:</p><div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  <div id="highlighter_300173" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)"><table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figure img {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">opacity</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">opacity</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The opacity of the image will be set to 1 while the paragraph of the captions slides up and disappears. The headline will move to up, too.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">Let's style the individual demos. Some of the styles will be common to more than one demo.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">In the first and third example, we want the button to have a white border and be centered on the item. It will be hidden initially and scaled down. The other transforms are used to "pull" it into position and center it. On hover, we'll make the button scale up and fade in:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_685440" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  20</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">body {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#3498db</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure button,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">top</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">left</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">border</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">3px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">solid</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#fff</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transparent</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#fff</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">opacity</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateX</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">scale</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.25</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figure button,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">opacity</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateX</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">scale</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">For the second demo, we'll redefine some colors and set the button to be hidden at the bottom of the figure. For that we set the bottom to 0 and translate it 100% (of its own height). On hover we'll make it slide up with a different easing function "ease-out" (the deafult is "ease"):</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_932914" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  20</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  21</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  22</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  23</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  24</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  25</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  26</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  27</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">body {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#e74c3c</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#e74c3c</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition-delay</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.05</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">bottom</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">left</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">padding</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">15px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#fff</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#333</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">font-weight</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">300</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figure button {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition-timing-function</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: ease-out;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">The headline and paragraph of the second and third example will have a cubic-bezier easing function that will help emulate an elastic transition. We'll also set a different duration with no delay for the paragraph when hovering. This will ensure that the paragraph fades out quickly before our SVG shape reaches the top:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_382924" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">, </code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">timing-function: cubic-bezier(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.250</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">, </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.250</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">, </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.115</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">, </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1.445</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption p,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition-delay</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition-duration</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">For the third demo we'll change some colors and leave the headline translated a bit on hover instead of making it go to 0:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_885604" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">body {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#52be7f</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#52be7f</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.demo</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-3</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:hover figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">5px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">For smaller screens, we want to change the number of items in a row, so we'll reset the width and also the margin of the odd children. The anchors that should have a margin are the 2nd, 5th, 8th, 11th and so on, which is described by the sequence <span style="margin:0px;padding:0px;font-weight:600">3n-1</span>. <span style="margin:0px;padding:0px;font-weight:600">Tip: If you want to find the sequence to a row of numbers quickly, you can for example go to <a href="http://www.wolframalpha.com/input/?i=2%2C5%2C8%2C11" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">WolframAlpha</a> and type your numbers. A possible sequence identification with the closed form can be found in one last boxes.</span></p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">For even smaller sizes, we'll adjust the max-width of the grid and redefine some margins for the caption elements:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_456741" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  20</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  21</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  22</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  23</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  24</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  25</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  26</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  27</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  28</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  29</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  30</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  31</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  32</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  33</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  34</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  35</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  36</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  37</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  38</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  39</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  40</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  41</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  42</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  43</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  44</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  45</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  46</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  47</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  48</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  49</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  50</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  51</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  52</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  53</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  54</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  55</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  56</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">@media </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">screen</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">and (</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">58em</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">33.333%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(odd) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">n</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">@media </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">screen</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">and (</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">45em</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">500px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">50%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">3</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">n</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(even) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-30px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption h</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin-bottom</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">translateY</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">30px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid figcaption p {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">padding</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">10px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">@media </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">screen</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">and (</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">27em</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">max-width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">250px</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">width</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">100%</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.grid a:nth-child(even) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">margin</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">And that's all the style! Let's move over to the JavaScript.</p>  <h3 style="margin:1.5em 0px 0.5em;padding:0px 0px 0.25em;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-size:2.1em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(245,245,245);line-height:1.2;color:rgb(51,51,51)">  THE JAVASCRIPT</h3><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">We'll be using <a href="http://snapsvg.io/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold">Snap.svg</a>, a great library for working with SVGs. Please take a look at the <a href="http://snapsvg.io/docs/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold">documentation</a>and the <a href="http://snapsvg.io/start/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none;font-weight:bold">interactive Getting Started tutorial</a> for a better understanding on how it can be used.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">Let's start by defining the speed and the easing variable. We'll also define a variable that will contain the info on the path and the hover path. When hovering over an anchor, we'll animate the path to morph into the "to" path. When leaving the anchor, we'll animate back to the "from" path:</p>  <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><div id="highlighter_985748" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)">  <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;line-height:24px;min-height:inherit">  <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)">  <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  20</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  21</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  22</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  23</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  24</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  25</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre">  26</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit">  <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">function</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">() {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">    </code> </div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">function</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">init() {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">var</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">speed = 250,</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">easing = mina.easeinout;</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">[].slice.call ( document.querySelectorAll( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'#grid > a'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">) ).forEach( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">function</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">( el ) {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">var</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">s = Snap( el.querySelector( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'svg'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">) ), path = s.select( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'path'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">),</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">pathConfig = {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">from : path.attr( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'d'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">),</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">to : el.getAttribute( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'data-path-hover'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">)</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">};</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">el.addEventListener( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'mouseenter'</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">, </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">function</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">() {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">path.animate( { </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'path'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">: pathConfig.to }, speed, easing );</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">} );</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">el.addEventListener( </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'mouseleave'</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">, </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">function</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">() {</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">                </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">path.animate( { </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">'path'</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">: pathConfig.from }, speed, easing );</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">            </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">} );</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">} );</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">}</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">init();</code></div>  <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">   </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:left;vertical-align:baseline;width:auto;min-height:inherit">})();</code></div>  </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">And that's it! We've just shown you three examples, but there are so many possibilities for cool shape morphing or color effects.</p>  <p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px"><span style="margin:0px;padding:0px;font-weight:600">I hope you enjoyed this tutorial and find it inspiring!</span></p>  <div class="" style="margin:20px 0px;padding:30px 20px 30px 100px;background-image:url(http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/images/Github_Icon.png);border-top-width:1px;border-top-style:solid;border-top-color:rgb(247,247,247);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(247,247,247);font-size:15px;font-weight:bold;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;background-repeat:no-repeat no-repeat">  <a href="https://github.com/codrops/ShapeHoverEffectSVG" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">Find this project on Github</a></div><p style="margin:0px;padding:0.75em 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  <a class="" href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/" style="padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">VIEW DEMO</a> <a class="" href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/ShapeHoverEffectSVG.zip" style="margin:0px 0px 25px 5px;padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">DOWNLOAD SOURCE</a></p>  <div class="" style="margin:20px 0px 0px;padding:30px 0px 0px;clear:both;border-top-width:1px;border-top-style:solid;border-top-color:rgb(245,245,245);color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:26px">  courtesy: <a href="http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/" style="font-family:arial;font-size:small;line-height:normal">http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/</a></div>  </div>

SHAPE HOVER EFFECT WITH SVG

VIEW DEMO DOWNLOAD SOURCE If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the...

How to Walk On the Road Towards Web Design Excellence

<div dir="ltr"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">You could be a newbie in web design or you could be a veteran. Either way, it's an exciting time to be in the web design business.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">As the Internet reach spreads across the world, the wheels of entrepreneurship take traction on the web. The Internet, as a medium, has a lot to offer entrepreneurs who decide to embrace the web. Today, the demands on web designers are not just technical skills as the days of putting together HTML code with CSS tied in are long gone. Designers are stepping into the toes of developers. That super combination of skill has to align with marketing and business.<span id="more-21903"></span></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">It's almost foolish to think that a basic skillset of HTML5, CSS3, PHP, MySQL, JavaScript and jQuery can fill in for the industry's demands that are more aligned towards business results with an equal emphasis on utility, aesthetics, and on design that really works.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/171030-Strive-For-Excellence" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence01.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/Eckstatic" style="text-decoration:none;color:rgb(43,141,192)">Kyle Gallant</a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Here's how to walk on the road that leads to web design excellence:</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  Measure up</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Are you a good designer or a great one? Rob Bowen asks that question on Myinkblog.com and that's <a href="http://myinkblog.com/measuring-up-are-you-a-good-designer-or-a-great-one/" style="text-decoration:none;color:rgb(43,141,192)">a good starting point for designers</a>. Good designers know basics of web design and can do a job "well enough". If they were to be rated on a typical corporate-style rating on performance, you'd give them a "met expectations" rating. Great web designers might get the "exceptional, and went beyond the call of duty".</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">How does a designer go from good to great? For great web designers, the pursuit of knowledge is never ending. The itch to apply design principles that far exceed business objectives is habitual. Great designers always dig deeper into the complexities of web design. They try new things. They aren't afraid of making mistakes. They put in the hours. They take up challenging work.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/451453-Learn-Never-Quit" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence02.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/seanwes" style="text-decoration:none;color:rgb(43,141,192)">Sean McCabe</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">"Learning" must be on your "to-do" list</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  As the web evolves, so will the technology driving it. With an industry like web design or development, it's a never-ending call for change. With change comes the need to learn, adapt, and apply. It's easy to get stuck in the rut of finding projects, delivering before deadlines, chasing invoices, and collaborating with clients or with teams.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">The deeper you get into the maze of business management, the farther you get away from "keeping up with the changes". It's not even hard to find courses and lessons on skills – from mundane to technical aspects; from business side of web design to inspiration.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Excellence doesn't come with routine work. It comes from the sides. It seeps in from the extra hours you spend learning in a day.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Set trends and lead</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  If you haven't done anything new yet, you haven't done anything at all.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">As long as you stick to basic principles of web design and your designs are in sync with user experience, utility, and practicality, you have the license to try anything.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If you can, then why stick to the norm?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  If success comes to those who dare, when was the last time you deviated from the norm and did something new? Even if it were ridiculous, it'd still work for your publicity, wouldn't it?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Avoid being a slave to what's out there. Instead, try something new. If it works, you've set a new trend.</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  Collaborate and grow</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">You can't succeed alone. You'd only know so much at any given point of time. Collaborating with others gives you juicy insights. It also helps you leverage your work, share your learning, get more business, network better, and learn faster. With others in your immediate ecosystem, you have to constantly push yourself to do better. If you aren't exhausted or dead yet, you'd emerge successful.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If you have a team, you can collaborate with them to grow faster and leverage your business. If you are networking with fellow designers, you'll learn a lot and gain inspiration. If you are collaborating with designers more experienced and established than you are, you can find mentors.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Collaboration works. There's history to prove its efficacy.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center">  <a href="http://dribbble.com/shots/124473-Collaboration-Nation" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence03.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/TrentWalton" style="text-decoration:none;color:rgb(43,141,192)">Trent Walton</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Challenge yourself, for the fun of it</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  We won't suggest pushing yourself until you break. We'd, however, implore you to challenge yourself nonetheless. Use technology, experiment with grids, explore different palettes, and try to design to tell a story (great brands are great storytellers, right?). If you've never used the good old pen and paper, start your workflow with that. If you have an iPad, use touch apps to begin your workflow. Take multiple approaches to a single idea. Work on different ideas and don't settle for one.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">There's power in having options – whether you are showcasing them to a client for approval or working for yourself. Learn what you don't know yet.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Move into more domains, just for the sake of it</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Everything changes, so will web design. We already have responsive design as a major trend. Mobile is everywhere. New technologies emerge and older technologies will see the grave sooner or later.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  As for most things in life, you need a diversification strategy inbuilt into your path for web design excellence. Strive to reach out to other domains. If you've only designed websites, embrace responsive design. If you just design for now, get into programming and code. Attempt graphic design, content development, copywriting, and marketing in general. Open that window to learn how to make videos or podcasts.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If none of this seems exciting enough for you, get into data analytics, application development, mobile apps, and even building new operating systems.<br>  If you are business-inclined, develop new web-based apps. You see where we are going with this?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Diversify, and then diversify some more.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/564227-App-Icon-Design-Learn" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence04.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/Creativedash" style="text-decoration:none;color:rgb(43,141,192)">Creativedash</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Gain inspiration, from everywhere</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  We are boxed into thinking that we can gain inspiration from a running display at sites like <a href="http://dribbble.com/" style="text-decoration:none;color:rgb(43,141,192)">Dribbble</a> and<a href="http://behance.com/" style="text-decoration:none;color:rgb(43,141,192)">Behance</a>.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">They are certainly great places to start but inspiration from design can come from anywhere. Does the coke bottle look inspiring enough to design a car? Ferrari's design seems to match the outline of the bottle, anyway. Did you know that <a href="http://webdesignledger.com/tips/www.autoevolution.com/news-image/2030-electric-mercedes-benz-aria-swanwing-design-study-presented-video-35408-2.html" style="text-decoration:none;color:rgb(43,141,192)">Aria "Swanwing" is inspired by a woman's body?</a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Your inspiration could come from everything around you. That includes animals, cars, other objects that most people don't even give much thought.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Well, most people aren't designers, are they? Fill your mind up with so much inspiration that ideas come to you by the dozen.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">How inspired are you? What do want to make of your career in web design? What are the steps you are taking to get ahead and make a mark for yourself?</p>  <div style="color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:0px;height:0px;line-height:0px;margin:0px;padding:0px;clear:both"></div><div class="" style="margin-bottom:15px;color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px">  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px">About the Author</h3><img alt="" class="" height="80" src="http://0.gravatar.com/avatar/4886d2c34357abb71be92b48fbbb2d99?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" style="margin: 0px 15px 10px 0px; float: left; border: none;" width="80"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">  <a href="https://plus.google.com/116941857468198795770?rel=author" style="text-decoration:none;color:rgb(43,141,192)">Jon Reiter</a> is the Founder and CEO at Epic Web Results - <a href="http://epicwebresults.net/law-firm-website-design/" style="text-decoration:none;color:rgb(43,141,192)">A Law Firm Website Design Company</a> focusing on website design, search engine optimization, law firm blogging, and local geo marketing.</p>  </div><h2 class="" style="margin:45px 30px 0px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:35px;color:rgb(76,76,76)">Related Posts</h2><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Here's some other articles that you will definitely find useful.</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  <a href="http://webdesignledger.com/tips/how-to-use-keywords-for-seo-and-web-sustainability" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to How to use Keywords for SEO and Web Sustainability">How to use Keywords for SEO and Web Sustainability</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/tips/how-to-use-keywords-for-seo-and-web-sustainability" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to How to use Keywords for SEO and Web Sustainability"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/keywords_cover1.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/tips/10-resources-to-help-you-become-more-active-in-the-web-design-community" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 10 Resources To Help You Become More Active in the Web Design Community">10 Resources To Help You Become More Active in the Web Design Community</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/tips/10-resources-to-help-you-become-more-active-in-the-web-design-community" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 10 Resources To Help You Become More Active in the Web Design Community"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/community.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/tips/branding-faux-pas-you-wont-make-twice" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Branding Faux Pas You Won't Make Twice">Branding Faux Pas You Won't Make Twice</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/tips/branding-faux-pas-you-wont-make-twice" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Branding Faux Pas You Won't Make Twice"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/brands_cover1.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/tips/7-best-practices-of-responsive-web-design" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 7 Best Practices of Responsive Web Design">7 Best Practices of Responsive Web Design</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/tips/7-best-practices-of-responsive-web-design" rel="bookmark" style="color:rgb(43,141,192)" title="Permanent Link to 7 Best Practices of Responsive Web Design"><img src="http://webdesignledger.com/wp-content/uploads/2013/11/bp_cover01.jpg" style="margin: 0px; border: none;"></a></p>  <div><br></div></div>

How to Walk On the Road Towards Web Design Excellence

You could be a newbie in web design or you could be a veteran. Either way, it's an exciting time to be in the web design business. As ...

8 Free Fonts Perfect for Clean Web Design

<div dir="ltr"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Clean and minimal web design has certainly grown in popularity, and typography plays a big role in this type of design. If you have been struggling to find the right font for your clean designs, we've rounded up 8 fresh free fonts that you should find very useful.<span id="more-22016"></span></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Grenale #2 – Nor Demi</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/insigne/grenale-2/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts01.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.myfonts.com/fonts/insigne/grenale-2/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts01a.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Exo 2.0</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.behance.net/gallery/Exo-20/10265899" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts02.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.behance.net/gallery/Exo-20/10265899" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts02a.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Canaro Light Demo and Light Italic Demo</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/rene-bieder/canaro/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts03.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.myfonts.com/fonts/rene-bieder/canaro/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts03a.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a><ins style="font-size:13px;text-align:center;background-color:transparent;line-height:normal;display:inline-table;border:none;height:280px;margin:0px;padding:0px;width:336px"><ins id="aswift_1_anchor" style="display:block;border:none;height:280px;margin:0px;padding:0px;width:336px;background-color:transparent"></ins></ins></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Nauman Regular</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/northernblock/nauman/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts04.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Equip Slab Light</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/hoftype/equip-slab/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts05.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Ledger Regular</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.behance.net/gallery/Ledger-Regular/3261095" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts06.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.behance.net/gallery/Ledger-Regular/3261095" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts06a.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Supra Thin Demiserif</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/wiescherdesign/supra-demiserif/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts07.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Geometria Light</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <a href="http://www.myfonts.com/fonts/brownfox/geometria/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Free Fonts to Spice Up your Library" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/freefonts08.jpg" style="margin: 0px; border: none;" title="Free Fonts to Spice Up your Library"></a></p>  <div><br></div><div style="color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:0px;height:0px;line-height:0px;margin:0px;padding:0px;clear:both"></div><div class="" style="margin-bottom:15px;color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px">  </div></div>

8 Free Fonts Perfect for Clean Web Design

Clean and minimal web design has certainly grown in popularity, and typography plays a big role in this type of design. If you have been str...

How to use Keywords for SEO and Web Sustainability

<div dir="ltr"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Keyword optimization is a well-known strategy for helping people find your content, both through search engines and when searching within a website. But did you know that by following SEO best practices you could also be making your website greener? That's because web servers and devices that consumers use to browse the internet both use electricity. A lot of electricity. And most electricity is generated by sources that are not renewable or clean.<span id="more-21956"></span></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">The more findable content is, the less irrelevant content a person needs to go through to find what they are looking for. Fewer pages loaded means fewer server requests are being made, and that fewer photos and videos are being loaded. In some cases, the customer may also end up spending a little less time on their phone, tablet or computer. All of that results in tiny energy savings, and those savings add up.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Now that you understand the connection between findability and sustainability, let's take a detailed look at how to improve the findability of content through page level keyword optimization, a popular SEO technique.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Keyword Optimization: Where to Place Focus Keywords</h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">In order to optimize a page for a focus keyword, you need to place it in a number of different places on a page. With the exception of your homepage or landing pages where you may need to optimize for several keywords related to your products and service offerings, in general, you want to optimize a page for a single keyword or keyword phrase.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">After you've selected a focus keyword for a page, here is where you need to place it:</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  In the Title Tag of Each Page</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">The first place that you want to put your focus keyword or keywords is in the title tag of each page.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Examples of an optimized title for a homepage:</p><ul style="list-style:none;margin:0px 35px 20px 0px;padding:0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Electronics, Cars, Fashion, Collectibles, Coupons and More Online Shopping | eBay</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Shoes, Clothing, and More | Zappos.com</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Shop clothes for women, men, maternity, baby, and kids | Gap</li></ul><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Examples of an optimized title for a subpage:</p>  <ul style="list-style:none;margin:0px 35px 20px 0px;padding:0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Electronics | eBay</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Popular Men's Shoe Styles | Zappos.com</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Womens Clothes: jeans, tops, skirts, dresses, pants | Gap</li></ul><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Optimized title tags have certain characteristics:</p>  <ul style="list-style:none;margin:0px 35px 20px 0px;padding:0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Avoid the use of duplicate title tags: Every page should have a unique title so that your pages are not competing with each<br>other for relevance.</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Optimized titles should be 70 characters or less.</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Put company name at the end of your title tag to help build brand awareness.</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Use consistent punctuation across all page titles in between your keyword and company name.</li><li style="margin:0px 0px 10px;padding:0px 0px 0px 25px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/bullet_blue.png);background-color:transparent;line-height:1.4em;background-repeat:no-repeat no-repeat">  Balance keyword usage with usability, considering what language would be most compelling to the reader.</li></ul><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  In the Description Tag of Each Page</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">The next place that you want to put your focus keyword(s) is in the description tag of each page. This is the brief description that shows up in search results, or when you share a page on Facebook or LinkedIn. While this description should be written for humans and not for search engines, you should include your keyword at least once. Write your descriptions in plain English, using compelling language that would make a customer want to click on a link. Optimized page descriptions should be 150 characters or less. Longer descriptions will be truncated in Google with an ellipses (…).</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">In the Main Body of your Content</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Include your focus keyword 2-3 times, including once in the first paragraph of the page. In general, search engines are going to read things that appear in order first and they may or may not get around to reading things that appear lower on a page. It's recommended that copy on each page be a minimum of 300 words for SEO purposes.<span style="font-family:Georgia,'Nimbus Roman No9 L',serif;font-size:30px;line-height:1.1em">In a Heading within the Article</span></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Headings, which are often labeled "Heading 1, Heading 2, Heading 3″, etc. or "H1, H2, H3″ in a content management system, help summarize a page's contents.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Headings should be written to both include focus keywords, and to summarize what comes next. This helps people, and spiders, scan a page quickly to see what's most relevant to them. It's also an accessibility best practice, because screen readers enable visually impaired people to jump from heading to heading so that they can quickly get to the section that's most relevant to them. When you think about it, the spiders that crawl websites also can't see: they can't see photos, multimedia content, or fancy font styles on a page. So it makes a lot of sense that SEO best practices are also often accessibility best practices.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><img alt="How to use Keywords for SEO and Web Sustainability" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/keywords01.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to use Keywords for SEO and Web Sustainability"></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">This example from the Gap shows headings that help customers navigate to the style of jeans that they're looking for.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Within your Page URL</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Another place that you should put your focus keyword is within the URL of your page. Here's an example from this post:</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  <img alt="How to use Keywords for SEO and Web Sustainability" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/keywords02.png" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to use Keywords for SEO and Web Sustainability"></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">In this example, we've optimized the URL for the terms "SEO," "keywords," and "sustainability."<br>Sometimes it's not practical to include your keyword in the URL of each page. That's okay. Your URLs should be short, descriptive and human-friendly, helping the reader (and spider) accurately predict what's on that page. I recommend using hyphens to separate words instead of underscores. Avoid special characters (such as smart quotes or ampersands), which can break URLs. For that reason, whenever possible, try to configure your content management system so that you can manually edit your URLs instead of having them generated automatically from the headline of the page.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Within Image ALT Tags</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  As I mentioned above, search engines cannot "see" photos or multimedia content, so a number of accessibility best practices are also SEO best practices. When writing an alt tag for an image you should write a short sentence that describes the content of the photo, both for people and for spiders. Whenever it is practical and appropriate to your human readers, you should also include focus keywords in your alt text.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Note that when an image contains text, the alt tag should include a copy of that text so that visually impaired individuals and spiders can read the text. Put your keyword phrase as close to the beginning of your alt tag as possible. Similarly, videos should also be labeled with appropriate meta information such as a clearly written title and description (if not a transcript of the video) in order to be understood by a search engine.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Keyword Optimization: Put it into Practice</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  I hope that this article has given you a practical understanding of how to do page level keyword optimization. By following these best practices you will yield a number of benefits: driving traffic to your site, making your content more findable, improving accessibility and reducing your website's carbon footprint.</p>  <p style="line-height:1.6em;margin:0px 0px 20px 10px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">courtesy: <a href="http://webdesignledger.com/tips/how-to-use-keywords-for-seo-and-web-sustainability" style="font-family:arial;font-size:small;line-height:normal">http://webdesignledger.com/tips/how-to-use-keywords-for-seo-and-web-sustainability</a></p>  </div>

How to use Keywords for SEO and Web Sustainability

Keyword optimization is a well-known strategy for helping people find your content, both through search engines and when searching within a ...

13 Inspiring Service & App Websites

<div dir="ltr"><div class="" style="margin:0px;padding:0px 0px 10px 5px;background-image:url(http://webdesignledger.com/wp-content/themes/wdl_v3/images/post_top_bkg.jpg);color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px;background-repeat:no-repeat no-repeat">  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">I really like when I bump into well designed product/service/app websites. It is a pleasure to check out ideas that present themselves in a nice and well thought out way. This is why today we gathered some stunning examples of services and apps that are represented with a beautiful website. It's certainly important to get your users attention from when they land on your page. This way you will have more chances to convert the visit into business. Check out the examples we have here and get some inspiration for your next project.<span id="more-22057"></span></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://bugcrowd.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Bugcrowd</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Security testing with unparalleled coverage. 5,000 Testers means your app is thoroughly tested. Bugcrowd utilizes the expertise of our testers to provide a better security solution.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="https://bugcrowd.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services01.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://sprout.is/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Sprout</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Faster, smarter, responsive websites in seven days. Grow your website with Sprout, backed by the experts at Oak with the speed and flexibility of Siteleaf. Starting at $2,500.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://sprout.is/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services02.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://marquee.by/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Marquee</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Say goodbye to the quirks, workarounds, and bad blood you have for your CMS. Marquee is a full-stack publishing platform that's designed from the ground up to help everyone, from editors to designers and developers, come together to make great content for the web.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://marquee.by/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services03.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://readymag.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Readymag</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">The simplest & most elegant web publishing tool. Our main goal is to build the printing press of the digital era and enable millions of independent publishers to easily design and publish their stories.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="https://readymag.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services04.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://www.usepeak.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Peak</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Peak automatically reports what everyone's working on. There's nothing to input, upload, or type out. Simply connect the services you already use.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">  <a href="http://www.usepeak.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services05.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://scrapd.nl/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Scrapd</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Scrapd helps you to easily collect and store these creative resources.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://scrapd.nl/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services06.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <div style="float:none;margin:20px 0px;text-align:center"><ins class="" style="display:inline-block;width:336px;height:280px"><ins style="display:inline-table;border:none;height:280px;margin:0px;padding:0px;width:336px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:280px;margin:0px;padding:0px;width:336px;background-color:transparent"></ins></ins></ins></div>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://gibbon.co/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Gibbon</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Playlists for learning. Almost all the knowledge is available on the web, all you need is someone to guide you to it.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">  <a href="https://gibbon.co/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services07.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://www.canva.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Canva</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">A simple new way to design. Canva gives you everything you need to easily turn ideas into stunning designs. Create designs for Web or print; website banners, presentations, Facebook covers, flyers, posters, invitations and so much more.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="https://www.canva.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services08.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://appdock.co/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">AppDock</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">I think we can all agree that app marketplaces suck. The AppDock is here to fix all that. It isn't a marketplace, but a gateway to one. For devs – AppDock not only provides stunning free landing page(for each of their apps), but also gives them more, and equal, chance to be found in the sea of apps + it makes getting user feedback a lot easier.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://appdock.co/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services09.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://getappcase.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Appcase</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Take the first steps in mobile app marketing.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="https://getappcase.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services10.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="https://letshum.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Hum</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">HUM, simply redefining the inbox one chat at a time.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="https://letshum.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services11.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://myclique.is/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">clique</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Introducing a simplified way to share and connect with people. Manage and grow your contacts through this user-friendly platform and up-to-the-minute cloud synced personal and professional contact information.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://myclique.is/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services12.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://fontyou.com/landing/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Fontyou</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">The first collaborative type factory. Discover a new way to create beautiful typefaces inspired by your work and others.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">  <a href="http://fontyou.com/landing/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="13 Inspiring Websites from Services your should Check Out" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/services13.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="13 Inspiring Websites from Services your should Check Out"></a></p>  <div style="font-size:0px;height:0px;line-height:0px;margin:0px;padding:0px;clear:both"></div><div class="" style="margin-bottom:15px"><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px">  About the Author</h3><img alt="" class="" height="80" src="http://1.gravatar.com/avatar/b269f31b359aa6f6959e789581a4e4a1?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" style="margin: 0px 15px 10px 0px; float: left; border: none;" width="80"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">  I love communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr</p></div><h2 class="" style="margin:45px 30px 0px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:35px">  Related Posts</h2><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px">Here's some other articles that you will definitely find useful.</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px">  <a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2013" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Best Web Designs of 2013">Best Web Designs of 2013</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2013" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Best Web Designs of 2013"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/wd2013.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://webdesignledger.com/inspiration/13-minimalist-web-designs-for-your-inspiration" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Minimalist Web Designs for your Inspiration">13 Minimalist Web Designs for your Inspiration</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://webdesignledger.com/inspiration/13-minimalist-web-designs-for-your-inspiration" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Minimalist Web Designs for your Inspiration"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/minimal_cov1.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://webdesignledger.com/inspiration/11-great-examples-of-video-backgrounds-in-web-design" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 11 Great Examples of Video Backgrounds in Web Design">11 Great Examples of Video Backgrounds in Web Design</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://webdesignledger.com/inspiration/11-great-examples-of-video-backgrounds-in-web-design" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 11 Great Examples of Video Backgrounds in Web Design"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/videos_cov1.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://webdesignledger.com/trends-2/web-design-trends-that-will-disappear-in-2014" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Web Design Trends That Will Disappear in 2014">Web Design Trends That Will Disappear in 2014</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://webdesignledger.com/trends-2/web-design-trends-that-will-disappear-in-2014" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Web Design Trends That Will Disappear in 2014"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/trends_2014.jpg" style="margin: 0px; border: none;"></a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px"><a href="http://webdesignledger.com/inspiration/13-colorful-inspiring-websites" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Colorful & Inspiring Websites">13 Colorful & Inspiring Websites</a></h3>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"><a href="http://webdesignledger.com/inspiration/13-colorful-inspiring-websites" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Colorful & Inspiring Websites"><img src="http://webdesignledger.com/wp-content/uploads/2013/12/color_cover.jpg" style="margin: 0px; border: none;"></a></p>  <div id="bsap_1251647" class="" style="width:667px;line-height:9px">courtesy: <a href="http://webdesignledger.com/inspiration/13-inspiring-service-app-websites" style="line-height:normal">http://webdesignledger.com/inspiration/13-inspiring-service-app-websites</a></div>  </div><div id="comments" class="" style="margin:30px 0px;width:660px;padding:0px;color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px"></div></div>

13 Inspiring Service & App Websites

I really like when I bump into well designed product/service/app websites. It is a pleasure to check out ideas that present themselves in ...

How to Walk On the Road Towards Web Design Excellence

<div dir="ltr"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">You could be a newbie in web design or you could be a veteran. Either way, it's an exciting time to be in the web design business.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">As the Internet reach spreads across the world, the wheels of entrepreneurship take traction on the web. The Internet, as a medium, has a lot to offer entrepreneurs who decide to embrace the web. Today, the demands on web designers are not just technical skills as the days of putting together HTML code with CSS tied in are long gone. Designers are stepping into the toes of developers. That super combination of skill has to align with marketing and business.<span id="more-21903"></span></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">It's almost foolish to think that a basic skillset of HTML5, CSS3, PHP, MySQL, JavaScript and jQuery can fill in for the industry's demands that are more aligned towards business results with an equal emphasis on utility, aesthetics, and on design that really works.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/171030-Strive-For-Excellence" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence01.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/Eckstatic" style="text-decoration:none;color:rgb(43,141,192)">Kyle Gallant</a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Here's how to walk on the road that leads to web design excellence:</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">  Measure up</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Are you a good designer or a great one? Rob Bowen asks that question on Myinkblog.com and that's <a href="http://myinkblog.com/measuring-up-are-you-a-good-designer-or-a-great-one/" style="text-decoration:none;color:rgb(43,141,192)">a good starting point for designers</a>. Good designers know basics of web design and can do a job "well enough". If they were to be rated on a typical corporate-style rating on performance, you'd give them a "met expectations" rating. Great web designers might get the "exceptional, and went beyond the call of duty".</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">How does a designer go from good to great? For great web designers, the pursuit of knowledge is never ending. The itch to apply design principles that far exceed business objectives is habitual. Great designers always dig deeper into the complexities of web design. They try new things. They aren't afraid of making mistakes. They put in the hours. They take up challenging work.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/451453-Learn-Never-Quit" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence02.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/seanwes" style="text-decoration:none;color:rgb(43,141,192)">Sean McCabe</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">"Learning" must be on your "to-do" list</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  As the web evolves, so will the technology driving it. With an industry like web design or development, it's a never-ending call for change. With change comes the need to learn, adapt, and apply. It's easy to get stuck in the rut of finding projects, delivering before deadlines, chasing invoices, and collaborating with clients or with teams.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">The deeper you get into the maze of business management, the farther you get away from "keeping up with the changes". It's not even hard to find courses and lessons on skills – from mundane to technical aspects; from business side of web design to inspiration.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Excellence doesn't come with routine work. It comes from the sides. It seeps in from the extra hours you spend learning in a day.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Set trends and lead</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  If you haven't done anything new yet, you haven't done anything at all.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">As long as you stick to basic principles of web design and your designs are in sync with user experience, utility, and practicality, you have the license to try anything.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If you can, then why stick to the norm?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  If success comes to those who dare, when was the last time you deviated from the norm and did something new? Even if it were ridiculous, it'd still work for your publicity, wouldn't it?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Avoid being a slave to what's out there. Instead, try something new. If it works, you've set a new trend.</p><div style="color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px;float:none;margin:20px 0px;text-align:center">  <span style="font-family:Georgia,'Nimbus Roman No9 L',serif;font-size:30px;line-height:1.1em;background-color:transparent">Collaborate and grow</span></div><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  You can't succeed alone. You'd only know so much at any given point of time. Collaborating with others gives you juicy insights. It also helps you leverage your work, share your learning, get more business, network better, and learn faster. With others in your immediate ecosystem, you have to constantly push yourself to do better. If you aren't exhausted or dead yet, you'd emerge successful.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If you have a team, you can collaborate with them to grow faster and leverage your business. If you are networking with fellow designers, you'll learn a lot and gain inspiration. If you are collaborating with designers more experienced and established than you are, you can find mentors.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Collaboration works. There's history to prove its efficacy.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center">  <a href="http://dribbble.com/shots/124473-Collaboration-Nation" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence03.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/TrentWalton" style="text-decoration:none;color:rgb(43,141,192)">Trent Walton</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Challenge yourself, for the fun of it</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  We won't suggest pushing yourself until you break. We'd, however, implore you to challenge yourself nonetheless. Use technology, experiment with grids, explore different palettes, and try to design to tell a story (great brands are great storytellers, right?). If you've never used the good old pen and paper, start your workflow with that. If you have an iPad, use touch apps to begin your workflow. Take multiple approaches to a single idea. Work on different ideas and don't settle for one.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">There's power in having options – whether you are showcasing them to a client for approval or working for yourself. Learn what you don't know yet.</p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Move into more domains, just for the sake of it</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  Everything changes, so will web design. We already have responsive design as a major trend. Mobile is everywhere. New technologies emerge and older technologies will see the grave sooner or later.</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  As for most things in life, you need a diversification strategy inbuilt into your path for web design excellence. Strive to reach out to other domains. If you've only designed websites, embrace responsive design. If you just design for now, get into programming and code. Attempt graphic design, content development, copywriting, and marketing in general. Open that window to learn how to make videos or podcasts.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">If none of this seems exciting enough for you, get into data analytics, application development, mobile apps, and even building new operating systems.<br>  If you are business-inclined, develop new web-based apps. You see where we are going with this?</p><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Diversify, and then diversify some more.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif;text-align:center"><a href="http://dribbble.com/shots/564227-App-Icon-Design-Learn" style="text-decoration:none;color:rgb(43,141,192)"><img alt="How to Walk On the Road Towards Web Design Excellence" class="" src="http://webdesignledger.com/wp-content/uploads/2013/12/excellence04.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;" title="How to Walk On the Road Towards Web Design Excellence"><cite>Image by </cite></a><a href="http://dribbble.com/Creativedash" style="text-decoration:none;color:rgb(43,141,192)">Creativedash</a></p>  <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Gain inspiration, from everywhere</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">  We are boxed into thinking that we can gain inspiration from a running display at sites like <a href="http://dribbble.com/" style="text-decoration:none;color:rgb(43,141,192)">Dribbble</a> and<a href="http://behance.com/" style="text-decoration:none;color:rgb(43,141,192)">Behance</a>.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">They are certainly great places to start but inspiration from design can come from anywhere. Does the coke bottle look inspiring enough to design a car? Ferrari's design seems to match the outline of the bottle, anyway. Did you know that <a href="http://webdesignledger.com/tips/www.autoevolution.com/news-image/2030-electric-mercedes-benz-aria-swanwing-design-study-presented-video-35408-2.html" style="text-decoration:none;color:rgb(43,141,192)">Aria "Swanwing" is inspired by a woman's body?</a></p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Your inspiration could come from everything around you. That includes animals, cars, other objects that most people don't even give much thought.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Well, most people aren't designers, are they? Fill your mind up with so much inspiration that ideas come to you by the dozen.</p>  <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">How inspired are you? What do want to make of your career in web design? What are the steps you are taking to get ahead and make a mark for yourself?</p>  <p style="line-height:1.6em;margin:0px 0px 20px 10px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">courtesy : <a href="http://webdesignledger.com/tips/how-to-walk-on-the-road-towards-web-design-excellence" style="font-family:arial;font-size:small;line-height:normal">http://webdesignledger.com/tips/how-to-walk-on-the-road-towards-web-design-excellence</a></p>  </div>

How to Walk On the Road Towards Web Design Excellence

You could be a newbie in web design or you could be a veteran. Either way, it's an exciting time to be in the web design business. As ...

DO YOU NEED A WEBSITE?(AD)

please visit: http://www.microsola.com/