3D GRID EFFECT

<div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <a href="http://tympanus.net/Development/3DGridEffect/" style="color: #237dac; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;"><img alt="3dgrideffect" class="alignnone size-full wp-image-18753" height="315" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/03/3dgrideffect1.jpg" style="border: none; display: block; height: auto; margin: 10px auto; max-width: 100%; padding: 0px; position: relative; text-align: center;" width="580" /></a></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <a class="demo" href="http://tympanus.net/Development/3DGridEffect/" style="background-color: #60b7e1; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; cursor: pointer; display: inline-block; font-family: 'League Gothic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 23px; left: 407px; line-height: 20px; margin: 0px 0px 25px -207px; outline: none; padding: 12px 10px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; text-transform: uppercase; white-space: nowrap; width: 180px;">VIEW DEMO</a> <a class="download" href="http://tympanus.net/Development/3DGridEffect/3DGridEffect.zip" style="background-color: #60b7e1; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; cursor: pointer; display: inline-block; font-family: 'League Gothic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 23px; left: 407px; line-height: 20px; margin: 0px 0px 25px 5px; outline: none; padding: 12px 10px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; text-transform: uppercase; white-space: nowrap; width: 180px;">DOWNLOAD SOURCE</a></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Today we’d like to share a little animation concept with you. It’s the recreation of an effect we spotted in<a href="https://www.youtube.com/watch?v=sjGF6Mw6X_Y" style="color: #237dac; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">this fantastic prototype app by Marcus Eckert</a>. The idea is to rotate a grid item in 3D, expand it into fullscreen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one we rotate the grid item vertically and in the second one horizontally.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <span style="font-weight: 600; margin: 0px; padding: 0px;">Please note that this is just a proof-of-concept and that we are using several CSS properties that might not work in every browser (pointer-events, 3D Transforms, CSS Transitions). It is highly experimental and for browsers not supporting either one of those properties, we provide a simple fallback that just shows and hides the content.</span></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <span style="font-weight: 600; margin: 0px; padding: 0px;">The amazing illustrations featured in the demos are by <a href="https://www.behance.net/AdamQuest" style="color: #237dac; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Adam Quest</a>. View all images from the<a href="https://www.behance.net/gallery/Selected-editorials-2014-Vol1/13618329" style="color: #237dac; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Selected editorials 2014 Vol.1 on Behance</a> and visit <a href="https://www.facebook.com/AQuest82" style="color: #237dac; margin: 0px; outline: none; padding: 0px; text-decoration: none;">his Facebook page</a>.</span></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The way we simulate the effect seen in the prototype app video, is by creating a placeholder element that will have a front and a back face. The front will contain a copy of the grid item content and the back will be white. When clicking on a grid item, we add the absolutely positioned placeholder and position it in the clicked item’s position. Then we animate its width and height to the window’s width and height and set the top and left to negative values, making it move outside of the grid into the top left corner of the page. While we are doing that, we’ll also rotate the element in 3D, revealing the white back side of the placeholder. Once it fills the screen, we’ll fade in the content which we stored in a different division.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The illusion, that it’s actually the grid item that flies out and rotates, is completed by fading out the clicked grid item so that we can only see the placeholder being moved out of the grid.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> In addition to the placeholder moving towards the viewer, we also move the grid away by translating it on the Z-axis.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <em style="margin: 0px; padding: 0px;">Please note, that this is just a proof-of-concept. You might want to load your content dynamically (see the dummy loading effect) or show something else as the main content, i.e. a fullscreen image. The fallback is also very simple and general.</em></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Let’s take a look at the markup and some important styles to understand the concept of how the effect is done.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> We have a main <code style="background-color: rgba(0, 0, 0, 0.0470588); background-position: initial initial; background-repeat: initial initial; color: #657580; display: inline-block; font-family: 'Courier New', Courier, monospace; font-weight: bold; margin: 0px; padding: 0px 10px;">section</code> element which contains a division for the grid and one for the content:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter html" id="highlighter_23194" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 7</div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 8</div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 9</div> <div class="line number10 index9 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 10</div> <div class="line number11 index10 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 11</div> <div class="line number12 index11 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 12</div> <div class="line number13 index12 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 13</div> <div class="line number14 index13 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 14</div> <div class="line number15 index14 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 15</div> <div class="line number16 index15 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 16</div> <div class="line number17 index16 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 17</div> <div class="line number18 index17 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 18</div> <div class="line number19 index18 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 19</div> <div class="line number20 index19 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 20</div> <div class="line number21 index20 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 21</div> <div class="line number22 index21 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 22</div> <div class="line number23 index22 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 23</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 782px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">section</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"grid3d vertical"</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">id</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"grid3d"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"grid-wrap"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"grid"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">img</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">src</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img/1.jpg"</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">alt</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img01"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">/></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">img</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">src</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img/2.jpg"</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">alt</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img02"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">/></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">img</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">src</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img/3.jpg"</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">alt</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"img03"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">/></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">figure</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><!-- ... --></code></div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code><code class="html comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><!-- /grid-wrap --></code></div> <div class="line number10 index9 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"content"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number11 index10 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number12 index11 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"dummy-img"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number13 index12 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">p</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"dummy-text"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">>Some text</</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">p</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number14 index13 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">p</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"dummy-text"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">>Some more text</</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">p</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number15 index14 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number16 index15 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number17 index16 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">            </code><code class="html comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><!-- ... --></code></div> <div class="line number18 index17 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number19 index18 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><!-- ... --></code></div> <div class="line number20 index19 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">span</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"loading"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">span</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number21 index20 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">        </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">span</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"icon close-content"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">span</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number22 index21 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number23 index22 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">section</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> When we click on a grid item, we’ll go by order to choose the matching content division. The content division also contains two spans, one for the activity indicator to simulate some loading, and one for the closing cross.</div> <div class="ct-ad-article-wrapper ct-ad-article-wrapper-in" style="background-color: #f4f6f8; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 20px -50px; overflow: hidden; padding: 3px 51px 3px 50px; width: 814px;"> <div class="ct-ad-article" style="background-color: rgba(255, 255, 255, 0.6); clear: both; height: auto; margin: 0px -50px; max-width: 100%; padding: 10px 50px; position: relative; width: 814px;"> <img class="ct-ad-img" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/images/advertisement.jpg" style="display: block; height: auto; left: 0px; margin: 0px; max-height: 100%; max-width: 100%; padding: 0px; position: absolute; text-align: center; top: 0px;" /><br /> <div class="bsap_1279993 bsap" id="bsap_1279993" style="margin: 0px; padding: 0px;"> <a class="ad1 odd" href="http://stats.buysellads.com/click.go?z=1279993&b=4413143&g=&s=&sw=1440&sh=900&br=chrome,33,win&r=0.48687786562368274&link=http://www.streamlineicons.com/" id="bsa_4413143" style="color: #237dac; float: none; font-weight: bold; margin: 0px auto; max-width: 100%; outline: none; padding: 0px; text-decoration: none;" target="_blank" title="1600 Vector icons"><img alt="1600 Vector icons" height="90" src="http://s3.buysellads.com/1258100/210132-1393205004.png" style="border: none; display: block; height: auto; margin: 0px auto; max-width: 100%; padding: 0px; position: relative; text-align: center;" width="728" /></a></div> <div style="clear: both; margin: 0px; padding: 0px;"> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The placeholder for our rotation and expansion effect will be added dynamically to the grid and the structure is the following:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter html" id="highlighter_988364" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"placeholder"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"front"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code><code class="html comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><!-- content of clicked grid item --></code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code> <code class="html color1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #444444; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">class</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">=</code><code class="html string" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #d55061; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"back"</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"></</code><code class="html keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">div</code><code class="html plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">></code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Let’s have a look at some crucial styles.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The <span style="font-weight: 600; margin: 0px; padding: 0px;">grid-wrap</span> division will be the element with perspective:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_263863" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 7</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.grid-wrap {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">margin</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">10px</code> <code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">auto</code> <code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">max-width</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1090px</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">width</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">100%</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">padding</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">perspective</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1500px</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> In addition to the perspective value, we also set the perspective origin. But that we do dynamically depending on the view. If you, for example, view this grid on a smaller device where the grid height becomes very large, we don’t want the default perspective origin of 50% 50% because then an item that is far from the center of the whole grid will rotate away from the viewport (down or up). We’ll set the origin to be central to the viewer instead.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The <span style="font-weight: 600; margin: 0px; padding: 0px;">grid</span> will have a transition and we need to assign a <em style="margin: 0px; padding: 0px;">preserve-3d</em> transform-style to it because we want to be able to rotate its children in 3D:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_697644" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.grid {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">position</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">relative</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transition</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">all</code> <code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.5</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">s cubic-bezier(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.25</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">);</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform-style</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">preserve-3d</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> When we click on a grid item, we add the class <span style="font-weight: 600; margin: 0px; padding: 0px;">view-full</span> to the grid which will make the grid move away from us:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_900103" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.view-full .grid {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">translateZ</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">-1500px</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">);</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> When we click on a grid item, we’ll make it fade out (our placeholder will be put in place):</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_734749" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.grid figure.active {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">opacity</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The placeholder will have its pointer-events set to <em style="margin: 0px; padding: 0px;">none</em> and it will be positioned absolutely, unlike the other figures in the grid. It also needs the <em style="margin: 0px; padding: 0px;">preserve-3d</em> transform-style because we want to flip its backside:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_177116" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.grid .placeholder {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">pointer-events</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">none</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">position</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">absolute</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform-style</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">preserve-3d</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transition</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">all</code> <code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.5</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">s ease-out;</code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The front and back side of the placeholder follow the classic 3D “card” style:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_513329" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 7</div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 8</div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 9</div> <div class="line number10 index9 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 10</div> <div class="line number11 index10 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 11</div> <div class="line number12 index11 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 12</div> <div class="line number13 index12 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 13</div> <div class="line number14 index13 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 14</div> <div class="line number15 index14 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 15</div> <div class="line number16 index15 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 16</div> <div class="line number17 index16 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 17</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 782px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.placeholder > div {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">display</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">block</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">position</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">absolute</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">width</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">100%</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">height</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">100%</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">backface-visibility</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">hidden</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> </div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.placeholder .front img {</code></div> <div class="line number10 index9 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">width</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">100%</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number11 index10 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">height</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">100%</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number12 index11 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> <div class="line number13 index12 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> </div> <div class="line number14 index13 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.placeholder .back {</code></div> <div class="line number15 index14 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">background</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">white</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number16 index15 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">rotateY</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">180</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">deg);</code></div> <div class="line number17 index16 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The cloned image that we add to the front face of the placeholder is stretched to the full width and height to fill all the element.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Once we open a grid item we want the transition to have a bit of a delay and a custom timing-function:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_962605" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.view-full .placeholder {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transition</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">all</code> <code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.5</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">s </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.1</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">s cubic-bezier(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.25</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">,</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">);</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Depending on which kind of rotation we want, we set the according class to the main wrapper and set the following transform:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_745852" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 7</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.vertical .view-full .placeholder {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">translateZ</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1500px</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">) </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">rotateX</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">-179.9</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">deg);</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> </div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.horizontal .view-full .placeholder {</code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transform</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">translateZ</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1500px</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">) </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">rotateY</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">-179.9</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">deg);</code></div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> This should of course be -180 degrees! But because browsers seem to have <a href="http://tympanus.net/codrops/2014/03/27/3d-grid-effect/" style="color: #237dac; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">the liberty to choose</a> which direction they rotate in this case, we need to set it to this awkward number (Firefox and Chrome choose opposing directions with -180 degrees).</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> The <span style="font-weight: 600; margin: 0px; padding: 0px;">content</span> division has fixed positioning and it will be fullscreen. We also want its inner content divisions to be scrollable, so we set the overflow-y to <em style="margin: 0px; padding: 0px;">scroll</em> and add <code style="background-color: rgba(0, 0, 0, 0.0470588); background-position: initial initial; background-repeat: initial initial; color: #657580; display: inline-block; font-family: 'Courier New', Courier, monospace; font-weight: bold; margin: 0px; padding: 0px 10px;">-webkit-overflow-scrolling: touch</code> for better mobile scrolling behavior:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_178306" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 6</div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 7</div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 8</div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 9</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.content {</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css comments" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #009e73; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-style: italic; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">/* ... */</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">overflow-y: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">scroll</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">height</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">background</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">#fff</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number6 index5 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">visibility</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">hidden</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number7 index6 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">z-index</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">400</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number8 index7 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">-webkit-overflow-scrolling: touch;</code></div> <div class="line number9 index8 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> When we want to open a specific content division, we first show the main content container:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_264689" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.content.</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">show</code> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">height</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">auto</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">pointer-events</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">auto</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">visibility</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">visible</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Each content division is placed absolutely and we set the initial opacity value to 0. We also need to set the height to 0 so that other invisible divisions don’t define the height of the whole thing.<br /> To show a specific division, we need to set the following style:</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; margin: 0px; padding: 0px;"> <div class="syntaxhighlighter css" id="highlighter_528266" style="background-color: #f8f8f8; border: 1px solid rgb(240, 240, 240); font-size: 1em; margin: 1em 0px; overflow-x: auto; overflow-y: hidden; padding: 10px 0px; position: relative; width: 814px;"> <table border="0" cellpadding="0" cellspacing="0" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-spacing: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; font-size: 13px; height: auto; left: auto; line-height: 24px; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 814px;"><tbody style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> <tr style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #dddddd; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 1</div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 2</div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 3</div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 4</div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-style: italic; font-weight: 600; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 10px; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> 5</div> </td><td class="code" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 788px;"><div class="container" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"> <div class="line number1 index0 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">.content > div.</code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">show</code> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div> <div class="line number2 index1 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">height</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">auto</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">;</code></div> <div class="line number3 index2 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">opacity</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">1</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">; </code></div> <div class="line number4 index3 alt1" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css spaces" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #657580; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">    </code><code class="css keyword" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #04527f; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">transition</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: opacity </code><code class="css value" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: #962735; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">0.6</code><code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">s;</code></div> <div class="line number5 index4 alt2" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"> <code class="css plain" style="background-image: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace; height: auto; left: auto; margin: 0px; min-height: inherit; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div> </div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> For the dummy content we define some transitions for the opacity and the transform. Depending on which rotation we choose, we set the initial translation of the dummy items to translate on the Y or the X-axis. Then, when we add the class “show” to their parent, we animate the translation to 0.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> Take a look at the commented JavaScript to see how the functionality is implemented. As mentioned before, the fallback for browsers that don’t support some of the CSS properties in use, we provide a very basic fallback.</div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <span style="font-weight: 600; margin: 0px; padding: 0px;">We hope you enjoy this little effect and find it inspiring!</span></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <a class="demo" href="http://tympanus.net/Development/3DGridEffect/" style="background-color: #60b7e1; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; cursor: pointer; display: inline-block; font-family: 'League Gothic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 23px; left: 407px; line-height: 20px; margin: 0px 0px 25px -207px; outline: none; padding: 12px 10px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; text-transform: uppercase; white-space: nowrap; width: 180px;">VIEW DEMO</a> <a class="download" href="http://tympanus.net/Development/3DGridEffect/3DGridEffect.zip" style="background-color: #60b7e1; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; cursor: pointer; display: inline-block; font-family: 'League Gothic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 23px; left: 407px; line-height: 20px; margin: 0px 0px 25px 5px; outline: none; padding: 12px 10px; position: relative; text-align: center; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; text-transform: uppercase; white-space: nowrap; width: 180px;">DOWNLOAD SOURCE</a></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> courtesy And Author:</div> <h4 style="background-color: white; border-bottom-color: rgb(246, 246, 246); border-bottom-style: solid; border-bottom-width: 1px; color: #333333; font-family: 'League Gothic', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 20px; font-weight: normal; margin: 5px 5px 10px; padding: 5px 5px 15px 0px; text-shadow: rgba(0, 0, 0, 0.00784314) 0px 0px 1px; text-transform: uppercase;"> <a href="http://tympanus.net/codrops/author/crnacura/" rel="author" style="color: #333333; display: inline; font-size: 26px; margin: 0px 0px 15px; outline: none; padding: 0px; text-decoration: none;" title="Posts by Mary Lou">MARY LOU</a></h4> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 23.939998626708984px; padding: 10px;"> Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.</div> <div class="ct-author-page-url" style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 23.939998626708984px; padding: 10px;"> <span style="font-weight: 600; margin: 0px 5px 0px 0px; padding: 0px;">View all contributions by <a href="http://tympanus.net/codrops/author/crnacura/" rel="author" style="color: #237dac; margin: 0px; outline: none; padding: 0px; text-decoration: none;" title="Posts by Mary Lou">Mary Lou</a></span></div> <div class="ct-author-page-url" style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 23.939998626708984px; padding: 10px;"> <span style="font-weight: 600; margin: 0px 5px 0px 0px; padding: 0px;">Website: </span><a href="http://tympanus.net/" style="color: #237dac; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">http://tympanus.net/</a></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 23.939998626708984px; margin: 0px; padding: 0px;"> <ul class="ct-social-profiles" style="clear: none; float: none; height: 33px; line-height: 30px; list-style: none; margin: 0px; padding: 5px 0px 0px 10px;"></ul> </div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 26.8799991607666px; padding: 0.75em 0px;"> <br /></div>

3D GRID EFFECT

VIEW DEMO   DOWNLOAD SOURCE Today we’d like to share a little animation concept with you. It’s the recreation of an effect we spotted i...

Read more »