SIMPLE ICON HOVER EFFECTS

<div dir="ltr"><p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"><a href="http://tympanus.net/Development/IconHoverEffects/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none"><img alt="IconHoverEffects" class="" height="315" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2013/05/IconHoverEffects1.png" style="margin: 10px auto; padding: 0px; max-width: 100%; height: auto; border: none; display: block; text-align: center;" width="580"></a></p> <p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"><a class="" href="http://tympanus.net/Development/IconHoverEffects/" style="padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">VIEW DEMO</a> <a class="" href="http://tympanus.net/Development/IconHoverEffects/IconHoverEffects.zip" style="margin:0px 0px 25px 5px;padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">DOWNLOAD SOURCE</a></p> <p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px">Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (<a href="http://dribbble.com/shots/665585-Eco-Ico" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">Eco Ico by Matthew Skiles</a>, created with the <a href="http://icomoon.io/app/" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">IcoMoon app</a>) which we add using the :before pseudo-class.</p> <div class="" style="margin:25px 0px;padding:15px 20px 15px 210px;background-image:url(http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/images/browser_compatability.png);background-color:rgb(255,224,165);color:rgb(162,91,28);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px;background-repeat:no-repeat no-repeat"> <span style="margin:0px;padding:0px;font-weight:600">Please note: this only works as intended in browsers that support the respective CSS properties.</span></div><p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"> The markup only uses an anchor for the icon and we wrap a set into a container so that we can create a variety of effects:</p><div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"> <div id="highlighter_184871" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)"><table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;min-height:inherit"> <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"> <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)"> <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 7</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:788px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit"> <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">div</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon hi-icon-mobile"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Mobile</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon hi-icon-screen"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Desktop</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon hi-icon-earth"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Partners</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon hi-icon-support"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Support</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">href</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"#"</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(68,68,68);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">class</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">=</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(213,80,97);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">"hi-icon hi-icon-locked"</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">>Security</</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">a</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"></</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">div</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">></code></div> </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px">An example for a hover effect is the simple rotation of the pseudo-element for the icon:</p> <div style="margin:0px;padding:0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"><div id="highlighter_202382" class="" style="margin:1em 0px;padding:10px 0px;width:814px;font-size:1em;background-color:rgb(248,248,248);border:1px solid rgb(240,240,240)"> <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:814px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;font-size:13px;min-height:inherit"> <tbody style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"><tr style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"> <td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit;color:rgb(221,221,221)"> <div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 1</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 2</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 3</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 4</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 5</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 6</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 7</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 8</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 9</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 10</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 11</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 12</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 13</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 14</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 15</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 16</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 17</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 18</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 19</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 20</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 21</div><div class="" style="margin:0px;padding:0px 10px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;text-align:right;vertical-align:baseline;width:auto;font-family:'Open Sans',Arial,sans-serif;font-weight:600;font-style:italic;font-size:11px;min-height:inherit;white-space:pre"> 22</div></td><td class="" style="padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:782px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;min-height:inherit"> <div class="" style="margin:0px;padding:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit"> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.hi-icon-effect</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-6</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.hi-</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">icon</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">{</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">box-shadow</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">4px</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">rgba(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transition</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: background </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s, color </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0.2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s;    </code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.no-touch .hi-icon-effect</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-6</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.hi-icon:hover {</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">background</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: rgba(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">255</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">,</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">1</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">);</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">color</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">#64bb5d</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">;</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.no-touch .hi-icon-effect</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">-6</code> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">.hi-icon:hover:before {</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">animation</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: spinAround </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">2</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">s linear infinite;</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre">  </div><div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">@keyframes spinAround {</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">from {</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">rotate</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">0</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">deg)</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">to {</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">        </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(4,82,127);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">transform</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">: </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">rotate</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">(</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(150,39,53);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">360</code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">deg);</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:rgb(101,117,128);border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">    </code><code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> <div class="" style="margin:0px;padding:0px 1em;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit;white-space:pre"> <code class="" style="margin:0px;padding:0px;font-family:'Lucida Sans Typewriter','Lucida Console',Monaco,'Bitstream Vera Sans Mono',monospace;color:black;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-image:none;border:0px;float:none;height:auto;outline:0px;overflow:visible;vertical-align:baseline;width:auto;min-height:inherit">}</code></div> </div></td></tr></tbody></table></div></div><p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"><em style="margin:0px;padding:0px">Note that a dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 (effect 4)</em></p> <p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px">I hope you enjoy the effects and find them inspiring!</p><div class="" style="margin:20px 0px;padding:30px 20px 30px 100px;background-image:url(http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/themes/codropstheme02/images/Github_Icon.png);border-top-width:1px;border-top-style:solid;border-top-color:rgb(247,247,247);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(247,247,247);font-size:15px;font-weight:bold;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;line-height:24px;background-repeat:no-repeat no-repeat"> <a href="https://github.com/codrops/IconHoverEffects" style="margin:0px;padding:0px;color:rgb(35,125,172);text-decoration:none;outline:none">Find this project on Github</a></div><p style="margin:0px;padding:10px 0px;color:rgb(51,51,51);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:24px"> <a class="" href="http://tympanus.net/Development/IconHoverEffects/" style="padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">VIEW DEMO</a> <a class="" href="http://tympanus.net/Development/IconHoverEffects/IconHoverEffects.zip" style="margin:0px 0px 25px 5px;padding:12px 10px;color:rgb(255,255,255);text-decoration:none;outline:none;font-family:'League Gothic','Bebas Neue','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-size:23px;white-space:nowrap;text-align:center;width:180px;line-height:20px;display:inline-block;background-color:rgb(96,183,225);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px">DOWNLOAD SOURCE</a></p> </div>

SIMPLE ICON HOVER EFFECTS

VIEW DEMO   DOWNLOAD SOURCE Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish e...

Read more »