Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
  <span id="icon"></span>

  <p>Image sprite courtesy of <a href="https://toddmotto.com/labs/svg-icons/img/icons.svg">Todd Motto</a></p>

  <p>Data URI translation by <a href="http://dopiaza.org/tools/datauri/index.php">Dopiaza.org</a></p>

  <p><small>Scroll to bottom of CSS and play with the <b>background-position, background-size, and height/width.</b></small></p>
  
  <p>
    (Original sprite)<br>
    <img id="orig_sprite" src="https://toddmotto.com/labs/svg-icons/img/icons.svg" alt="" />
  </p>
</div>
              
            
!

CSS

              
                body { background-color: #444; }

#container {
  background-color: #333;
  box-shadow: 0 0 3px black;
  color: #ccc;
  margin: 1em auto 0;
  padding: 1em;
  text-align: center;
  width: 50%;
}
a { color: white; }
p:last-child {
  border-top: 1px dashed #aaa;
  padding-top: 1em;
}
#orig_sprite {
  margin-top: 0.5em;
  outline: 1px solid #222;
}

#icon {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJGYWNlYm9va18zXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTQ1Ljg5Niw0Mi40MTFjMCwwLjQzMiwwLDIuMzU5LDAsMi4zNTloLTEuNzI5djIuODg3aDEuNzI5djguNTc0aDMuNTU2di04LjU3NGgyLjM4NA0KCWMwLDAsMC4yMjMtMS4zODUsMC4zMzEtMi44OThjLTAuMzEyLDAtMi43MDEsMC0yLjcwMSwwczAtMS42NzgsMC0xLjk3M3MwLjM4OC0wLjY5MSwwLjc3MS0wLjY5MWMwLjM4MywwLDEuMTg4LDAsMS45MzYsMA0KCWMwLTAuMzkzLDAtMS43NSwwLTMuMDA0Yy0wLjk5NywwLTIuMTMxLDAtMi42MzEsMEM0NS44MSwzOS4wOTEsNDUuODk2LDQxLjk3Nyw0NS44OTYsNDIuNDExeiIvPg0KPHBhdGggaWQ9IkRyaWJiYmxlXzNfIiBmaWxsPSIjRkZGRkZGIiBkPSJNNDguNTg2LDguMjY2Yy00LjM2NiwwLTcuOTAzLDMuNTM3LTcuOTAzLDcuOWMwLDQuMzYzLDMuNTM3LDcuODk4LDcuOTAzLDcuODk4DQoJYzQuMzYzLDAsNy44OTgtMy41MzYsNy45LTcuODk4QzU2LjQ4NCwxMS44MDQsNTIuOTQ5LDguMjY3LDQ4LjU4Niw4LjI2NnogTTUzLjQyNywxMi4zNjRjMC43NzEsMC45NzgsMS4yNTMsMi4xOSwxLjMxMywzLjUxNA0KCWMtMC44OTMtMC4xOS0xLjczNC0wLjI4Mi0yLjUyMS0wLjI4MmwwLDBoLTAuMDAzYy0wLjYzNCwwLTEuMjI4LDAuMDU4LTEuNzg2LDAuMTU3Yy0wLjEzNi0wLjMzMy0wLjI3My0wLjY1My0wLjQxMi0wLjk2DQoJQzUxLjI2MiwxNC4yNDUsNTIuNDU5LDEzLjQ2OCw1My40MjcsMTIuMzY0eiBNNDguNTg2LDEwLjAwNGMxLjQ1NSwwLDIuNzg4LDAuNTA4LDMuODQ0LDEuMzU0Yy0wLjgwOCwwLjk2Ny0xLjg3NSwxLjY2OC0zLjAyNSwyLjE2Mw0KCWMtMC44MTEtMS41NjUtMS41OTUtMi42ODUtMi4xMjktMy4zNjlDNDcuNjk4LDEwLjA1Nyw0OC4xMzYsMTAuMDA0LDQ4LjU4NiwxMC4wMDR6IE00NS44NjMsMTAuNjQ1DQoJYzAuNDI3LDAuNTA2LDEuMjgzLDEuNjE3LDIuMTk4LDMuMzUzYy0xLjg1OSwwLjU1NC0zLjczNCwwLjY4NC00Ljg2OCwwLjY4NGMtMC4wMzEsMC0wLjA2NCwwLTAuMDk4LTAuMDAxaC0wLjAwMg0KCWMtMC4xODksMC0wLjM1NC0wLjAwMi0wLjQ5LTAuMDA2QzQzLjA0NywxMi45MDUsNDQuMjU5LDExLjQzOCw0NS44NjMsMTAuNjQ1eiBNNDIuNDE5LDE2LjE2NmMwLTAuMDI5LDAuMDAzLTAuMDU5LDAuMDA0LTAuMDg4DQoJYzAuMTc3LDAuMDA2LDAuNDAxLDAuMDExLDAuNjczLDAuMDExaDAuMDAyYzEuMjM4LTAuMDA4LDMuNDA0LTAuMTExLDUuNTk4LTAuODAzYzAuMTE5LDAuMjYxLDAuMjM4LDAuNTMzLDAuMzU0LDAuODE2DQoJYy0xLjQ2NCwwLjQ4OS0yLjYxNywxLjI2OS0zLjQ3MiwyLjA0NmMtMC44MTksMC43NDctMS4zNzUsMS40ODgtMS42OTksMS45ODJDNDIuOTcyLDE5LjA1OCw0Mi40MjEsMTcuNjc5LDQyLjQxOSwxNi4xNjZ6DQoJIE00OC41ODYsMjIuMzI5Yy0xLjM3MywwLTIuNjM2LTAuNDU0LTMuNjY0LTEuMjE0YzAuMjIxLTAuMzU5LDAuNjg4LTEuMDQ4LDEuNDMyLTEuNzZjMC43NjgtMC43MzQsMS44MjItMS40ODksMy4yMDMtMS45MzgNCgljMC40NzEsMS4zMTQsMC44OTYsMi44MTgsMS4yMTcsNC41MUM1MC4wOTMsMjIuMTg1LDQ5LjM1NywyMi4zMjksNDguNTg2LDIyLjMyOXogTTUyLjA3NCwyMS4yMzcNCgljLTAuMzEyLTEuNTMtMC43MDYtMi45MS0xLjEzNy00LjE0MmMwLjM5OS0wLjA1OCwwLjgxOC0wLjA5LDEuMjY0LTAuMDloMC4wMTZoMC4wMDFoMC4wMDFjMC43MzUsMCwxLjU0MywwLjA5MiwyLjQxOCwwLjI5MQ0KCUM1NC4zMzUsMTguOTI1LDUzLjM5LDIwLjMyOCw1Mi4wNzQsMjEuMjM3eiIvPg0KPHBvbHlnb24gaWQ9IkZvcnJzdF8zXyIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI5LjI4Miw1NS41NTIgMTUuMDgsNTUuNTUyIDE1LjA4LDU1LjAwNyAxNS4wOCw1MS44OTMgMTMuMzM4LDUwLjYwNSAxMy43NjQsNDkuOTI3IA0KCTE1LjA4LDUwLjg5MyAxNS4wOCw0OC4wNTkgMTYuODgxLDQ4LjA1OSAxNi44ODEsNDkuODYyIDE4LjE4Miw0OS4xMjIgMTguNTU3LDQ5Ljg2NCAxNi44ODEsNTAuODE5IDE2Ljg4MSw1MS44NDEgMTkuNDA0LDUwLjQ3OSANCgkxOS43MzksNTEuMjEyIDE2Ljg4MSw1Mi43NTUgMTYuODgxLDU1LjU1MiAyMC40NjksNTUuNTUyIDIwLjQ2OSw1NS41ODMgMjMuMDQsNTUuNTgzIDE2LjE1NSwzNy44MDggIi8+DQo8cGF0aCBpZD0iTGlua2VkSW5fM18iIGZpbGw9IiNGRkZGRkYiIGQ9Ik01NS43MTIsODEuNzMxdjUuNjA5SDUyLjQ2di01LjIzNGMwLTEuMzEzLTAuNDcyLTIuMjExLTEuNjQ3LTIuMjExDQoJYy0wLjg5OSwwLTEuNDM1LDAuNjA0LTEuNjcsMS4xODhjLTAuMDg2LDAuMjA5LTAuMTA3LDAuNS0wLjEwNywwLjc5M3Y1LjQ2NEg0NS43OGMwLDAsMC4wNDUtOC44NjUsMC05Ljc4M2gzLjI1NnYxLjM4OA0KCWMtMC4wMDgsMC4wMTItMC4wMTYsMC4wMjEtMC4wMjEsMC4wM2gwLjAyMXYtMC4wM2MwLjQzMi0wLjY2NiwxLjIwMy0xLjYxNywyLjkzMS0xLjYxN0M1NC4xMDcsNzcuMzI2LDU1LjcxMiw3OC43MjYsNTUuNzEyLDgxLjczMXoNCgkgTTQyLjM3NSw3Mi44NDFjLTEuMTEzLDAtMS44NDMsMC43MjktMS44NDMsMS42ODhjMCwwLjk0MSwwLjcwOCwxLjY5MywxLjc5OSwxLjY5M2gwLjAyMmMxLjEzNSwwLDEuODQxLTAuNzUyLDEuODQxLTEuNjkzDQoJQzQ0LjE3Myw3My41NzIsNDMuNDg4LDcyLjg0MSw0Mi4zNzUsNzIuODQxeiBNNDAuNzI1LDg3LjM0MWgzLjI1NHYtOS43ODNoLTMuMjU0Vjg3LjM0MXoiLz4NCjxwYXRoIGlkPSJHaXRodWJfM18iIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMC4wOTIsMTAzLjI0M2MtMS42NDksMS4wMjktMy4zNDksMC4xNi00LjU3NCwwYy01LjQxLTAuNzEzLTcuMTMsNS41OTktMy4xODgsOC4xMjkNCgljLTEuMDE1LDAuNTI1LTAuOTQ4LDMuMjAxLDAuMTM5LDMuNTgyYy0yLjU2MiwwLjI5My0zLjAzNiwzLjkwMi0xLjY2Myw1LjM3NWMxLjY3LDEuNzg5LDYuODA5LDEuNjcyLDguMzE2LDANCgljMS4wNTItMS4xNjgsMS4xOTgtMy41NzMsMC4yNzYtNC42ODZjLTAuODQtMS4wMTQtNS4wNTUtMS4xNjYtNC45ODktMi43NTZjMC4wNDUtMS4xMDksMS41NjktMC45MzYsMi40OTUtMS4zNzcNCgljMS43NDEtMC44MzIsMi43NjItMy4zMjIsMi4wNzktNS4yMzZjMC4zODktMC4wNzIsMC43MjEtMC4yMDMsMS4xMDktMC4yNzVWMTAzLjI0M3ogTTEzLjQ0LDEwOS4wMw0KCWMtMi4wMjktNC40MTgsNC42NjMtNC4xMDIsMi42MzMsMEMxNS40MDcsMTA5LjUyNCwxNC4wOTcsMTA5LjU3MywxMy40NCwxMDkuMDN6IE0xNy4xODIsMTE3LjcxYzAuMTgsMS45ODEtMy44MzMsMi4wNy00LjI5NywwLjY5MQ0KCWMtMC4zOS0xLjE2NCwwLjA5Ni0xLjQ5NCwxLjI0Ny0xLjc5NEMxNS40MzgsMTE2LjI2OSwxNy4wNjEsMTE2LjM4NiwxNy4xODIsMTE3LjcxeiIvPg0KPHBhdGggaWQ9IkdpdGh1Yl9feDI4X2FsdF94MjlfXzNfIiBmaWxsPSIjRkZGRkZGIiBkPSJNNTMuNjEyLDEwMy40NjZjMC4zMTEsMC43MDMsMC41MTIsMS44NzMsMC4yMTIsMi43MjkNCgljMS4yMjUsMS4wNDcsMS42NDYsMy41OTIsMS4wNTUsNS42N2MxLjc0NywwLjEzMywzLjgyNy0wLjA2Myw1LjE3MSwwLjQ3MWMtMS4yNTYtMC4xNTktMi45NzEtMC40NzctNC41OS0wLjM2Ng0KCWMtMC4zMDgsMC4wMjEtMC43NjItMC4wMTEtMC43MzksMC40MmMxLjg3NCwwLjE0NiwzLjczNywwLjMxLDUuMjc2LDAuNzg5Yy0xLjUyNi0wLjI1LTMuMzc5LTAuNjI5LTUuMjc2LTAuNjg1DQoJYy0wLjc4NCwxLjU0Ny0yLjM2MSwyLjMwOC00LjUzNywyLjQ2OGMwLjIzMywwLjUxLDAuNjgyLDAuNzAyLDAuNzkyLDEuNTIxYzAuMTYyLDEuMjI1LTAuMjU2LDMuMDE2LDAuMTU2LDMuODMyDQoJYzAuMTk5LDAuMzkxLDAuNTIyLDAuNCwwLjc0LDAuNzM2Yy0wLjUzNCwwLjYzMS0xLjg1NS0wLjA3Mi0yLjAwNy0wLjczNmMtMC4yNTctMS4xMzksMC4zOTMtMi45MDItMC4zMTUtMy42NzQNCgljMC4wNSwxLjI0Mi0wLjI5MywyLjk4NCwwLjA1Myw0LjA5NGMwLjEzNywwLjQzNywwLjUzLDAuNjA1LDAuNDIzLDAuOTk4Yy0yLjQ3OSwwLjI1Mi0xLjQ0My0zLjIwNy0xLjg1LTUuMjUNCgljLTAuMzczLDAuMDI3LTAuMjEsMC41NjEtMC4yMTEsMC43ODljLTAuMDEsMS45OTQsMC40MDgsNC43MjktMS43NDEsNC40NjFjLTAuMDYzLTAuNDE4LDAuMjg4LTAuNTYyLDAuNDIxLTAuOTQzDQoJYzAuMzk1LTEuMTIzLTAuMDcyLTIuNzk1LDAuMTA3LTQuMTQ3Yy0wLjgyLDAuNjE5LDAuMDg2LDIuNzc2LTAuNDIyLDMuODg2Yy0wLjI5MywwLjYzNy0xLjIzOCwwLjkxMy0xLjk1NCwwLjYyOQ0KCWMwLjA5My0wLjQ3NiwwLjU4NS0wLjM5NiwwLjc5Mi0wLjg0MWMwLjI5MS0wLjYxNCwwLjAwMi0xLjUwNCwwLjEwNS0yLjQxM2MtMS41MTksMC4zMDMtMi42OTctMC4wNDQtMy4yNzMtMC45OTgNCgljLTAuMjU4LTAuNDI5LTAuMzIyLTAuOTMzLTAuNjMzLTEuMzEyYy0wLjMxMS0wLjM4MS0wLjgwNy0wLjQzMy0wLjk1LTAuOTQ1YzEuODgtMC40NTIsMS45NTMsMS45MzcsMy42NDMsMS45OTQNCgljMC41MTgsMC4wMjEsMC43ODYtMC4xNDcsMS4yNjctMC4yNjJjMC4xMzUtMC42MDQsMC40MjItMS4wNTIsMC44NDQtMS4zNjVjLTIuMTAyLTAuMjg3LTMuODM4LTAuOTQtNC42NDUtMi41MjENCgljLTEuOTEyLDAuMDk1LTMuNjYsMC4zNTEtNS4yNzksMC43MzZjMS40NjktMC41MzUsMy4yODMtMC43MjcsNS4yMjctMC43ODljLTAuMTE1LTAuNjg4LTEuMTE5LTAuNDk4LTEuNzQyLTAuNDczDQoJYy0xLjE1OCwwLjA1MS0yLjYxNywwLjE5NS0zLjUzNywwLjM2N2MxLjMzNi0wLjQ3NSwzLjIwNy0wLjQxNiw1LjAxNi0wLjQxOGMtMC41NTQtMS43MzQtMC4zNjEtNC40ODYsMC44NDUtNS41MTINCgljLTAuMzQzLTAuODYxLTAuMjM1LTIuMjcxLDAuMjExLTIuOTM5YzEuMzQ3LDAuMDYxLDIuMTYzLDAuNjQ2LDMuMDA5LDEuMjA3YzEuMDQ5LTAuMjk5LDIuMTUyLTAuNDQ3LDMuNTktMC4zNjcNCgljMC42MDUsMC4wMzMsMS4yMzMsMC4zMDUsMS42ODgsMC4yNjJjMC40NDYtMC4wNDMsMC45MzgtMC41NDMsMS4zNzItMC43MzRDNTIuNDg5LDEwMy41ODMsNTIuOTY3LDEwMy40ODksNTMuNjEyLDEwMy40NjZ6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjQuNzEsMTAuOTIxYy0wLjYyMiwwLjI3Ni0xLjI5MSwwLjQ2Mi0xLjk5MiwwLjU0NmMwLjcxNi0wLjQzLDEuMjY2LTEuMTA5LDEuNTI1LTEuOTINCgljLTAuNjcsMC4zOTgtMS40MTMsMC42ODctMi4yMDMsMC44NDJjLTAuNjMyLTAuNjc0LTEuNTM1LTEuMDk2LTIuNTMyLTEuMDk2Yy0xLjkxNiwwLTMuNDY5LDEuNTUzLTMuNDY5LDMuNDY5DQoJYzAsMC4yNzIsMC4wMzEsMC41MzcsMC4wOSwwLjc5MWMtMi44ODQtMC4xNDUtNS40MzktMS41MjYtNy4xNTEtMy42MjVjLTAuMjk5LDAuNTEyLTAuNDcsMS4xMDgtMC40NywxLjc0NQ0KCWMwLDEuMjA0LDAuNjEyLDIuMjY1LDEuNTQzLDIuODg3Yy0wLjU2OS0wLjAxOS0xLjEwNC0wLjE3NC0xLjU3Mi0wLjQzNGMwLDAuMDE0LDAsMC4wMjksMCwwLjA0M2MwLDEuNjgxLDEuMTk2LDMuMDgzLDIuNzgzLDMuNDAyDQoJYy0wLjI5MSwwLjA4LTAuNTk3LDAuMTIyLTAuOTE0LDAuMTIyYy0wLjIyNCwwLTAuNDQxLTAuMDIyLTAuNjUzLTAuMDYyYzAuNDQxLDEuMzc4LDEuNzIzLDIuMzgxLDMuMjQxLDIuNDA5DQoJYy0xLjE4NywwLjkzMS0yLjY4MywxLjQ4NS00LjMwOSwxLjQ4NWMtMC4yOCwwLTAuNTU2LTAuMDE2LTAuODI4LTAuMDQ4YzEuNTM1LDAuOTg0LDMuMzU5LDEuNTU4LDUuMzE4LDEuNTU4DQoJYzYuMzgxLDAsOS44NzEtNS4yODYsOS44NzEtOS44NzFjMC0wLjE1LTAuMDAzLTAuMy0wLjAxLTAuNDQ4QzIzLjY1NywxMi4yMjgsMjQuMjQ0LDExLjYxNywyNC43MSwxMC45MjF6Ii8+DQo8cGF0aCBpZD0iVHVtYmxyXzJfIiBmaWxsPSIjRkZGRkZGIiBkPSJNODEuNDI5LDg1LjIxMmMtMC4yNzgtMC4xNjQtMC41MzYtMC40NDUtMC42MzgtMC43MmMtMC4xMDQtMC4yNzItMC4wOTItMC44MjgtMC4wOTItMS43OTMNCgl2LTQuMjY0aDMuODc3di0yLjk2N2gtMy44Nzd2LTMuODQ2aC0yLjM4M2MtMC4xMDcsMC44NTUtMC4zMDQsMS41NjMtMC41ODksMi4xMTljLTAuMjg0LDAuNTU1LTAuNjU5LDEuMDI5LTEuMTMxLDEuNDI4DQoJYy0wLjQ2OSwwLjM5Ni0xLjIzMSwwLjcwMS0xLjg5MiwwLjkxdjIuMzU0aDIuMjc3djUuODNjMCwwLjc2MywwLjA4LDEuMzQyLDAuMjQsMS43NDJjMC4xNjIsMC4zOTcsMC40NDksMC43NzYsMC44NjYsMS4xMzUNCgljMC40MTUsMC4zNTMsMC45MTgsMC42MjcsMS41MDcsMC44MmMwLjU4OSwwLjE4OCwxLjA0MSwwLjI4NCwxLjgwOSwwLjI4NGMwLjY3NiwwLDEuMzAzLTAuMDY3LDEuODg1LTAuMTk4DQoJYzAuNTgtMC4xMzgsMS4yMjktMC4zNzMsMS45NDUtMC43MDVWODQuNzJjLTAuODQsMC41NDctMS42ODUsMC44MTktMi41MzMsMC44MTlDODIuMjI0LDg1LjU0MSw4MS44MDEsODUuNDMzLDgxLjQyOSw4NS4yMTJ6Ii8+DQo8cGF0aCBpZD0iWW91VHViZV8yXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTg1Ljk0MywyMC4xNTVoLTEuMTAxbDAuMDA2LTAuNjM5YzAtMC4yODQsMC4yMzEtMC41MTYsMC41MTktMC41MTZoMC4wNw0KCWMwLjI4NCwwLDAuNTIsMC4yMzIsMC41MiwwLjUxNkw4NS45NDMsMjAuMTU1eiBNODEuODIsMTguNzg2Yy0wLjI3OCwwLTAuNTA4LDAuMTg3LTAuNTA4LDAuNDE3djMuMTA2DQoJYzAsMC4yMjksMC4yMjksMC40MTYsMC41MDgsMC40MTZjMC4yNzksMCwwLjUwOC0wLjE4OCwwLjUwOC0wLjQxNnYtMy4xMDZDODIuMzI2LDE4Ljk3Myw4Mi4xLDE4Ljc4Niw4MS44MiwxOC43ODZ6IE04OC41MTYsMTcuMDQ5DQoJdjUuOTA3YzAsMS40MTgtMS4yMjksMi41NzctMi43MywyLjU3N0g3NC41NTNjLTEuNTAzLDAtMi43My0xLjE1OS0yLjczLTIuNTc3di01LjkwN2MwLTEuNDE3LDEuMjI5LTIuNTc4LDIuNzMtMi41NzhoMTEuMjMyDQoJQzg3LjI4NywxNC40NzEsODguNTE2LDE1LjYzMSw4OC41MTYsMTcuMDQ5eiBNNzUuMzAyLDIzLjU5OHYtNi4yMjRsMS4zOTQsMC4wMDF2LTAuOTIybC0zLjcxMy0wLjAwNXYwLjkwNmwxLjE1OSwwLjAwM3Y2LjI0MQ0KCUg3NS4zMDJ6IE03OS40NzcsMTguMzAyaC0xLjE2djMuMzI0YzAsMC40OCwwLjAyNywwLjcyMS0wLjAwMiwwLjgwNmMtMC4wOTYsMC4yNTgtMC41MiwwLjUzMS0wLjY4NSwwLjAyOA0KCWMtMC4wMjgtMC4wODktMC4wMDQtMC4zNTQtMC4wMDUtMC44MTJsLTAuMDA0LTMuMzQ2aC0xLjE1NGwwLjAwMywzLjI5M2MwLjAwMSwwLjUwNS0wLjAxMywwLjg4MiwwLjAwNCwxLjA1Mw0KCWMwLjAyOCwwLjMwMiwwLjAxOSwwLjY1NSwwLjMsMC44NTVjMC41MjEsMC4zNzYsMS41MjItMC4wNTcsMS43NzItMC41OTRsLTAuMDAxLDAuNjg3bDAuOTMyLDAuMDAxVjE4LjMwMnogTTgzLjE5MSwyMi4xMDYNCglsLTAuMDA0LTIuNzY2Yy0wLjAwMS0xLjA1NS0wLjc4OS0xLjY4Ni0xLjg2MS0wLjgzM2wwLjAwNi0yLjA1N2wtMS4xNTksMC4wMDFsLTAuMDA3LDcuMWwwLjk1MS0wLjAxNWwwLjA4OC0wLjQ0MQ0KCUM4Mi40MjUsMjQuMjE0LDgzLjE5MywyMy40NDgsODMuMTkxLDIyLjEwNnogTTg2LjgyMiwyMS43NGwtMC44NjksMC4wMDRjLTAuMDAyLDAuMDM1LTAuMDAyLDAuMDc1LTAuMDA0LDAuMTE5djAuNDg1DQoJYzAsMC4yNTktMC4yMTUsMC40NzEtMC40NzUsMC40NzFoLTAuMTcxYy0wLjI2MiwwLTAuNDc2LTAuMjEyLTAuNDc2LTAuNDcxdi0wLjA1NHYtMC41MzV2LTAuNjg4aDEuOTkyVjIwLjMyDQoJYzAtMC41NDgtMC4wMTUtMS4wOTYtMC4wNi0xLjQxYy0wLjE0Mi0wLjk5MS0xLjUzNC0xLjE0OS0yLjIzNy0wLjY0MWMtMC4yMjEsMC4xNTgtMC4zODksMC4zNy0wLjQ4NiwwLjY1Ng0KCWMtMC4xLDAuMjg0LTAuMTQ3LDAuNjc1LTAuMTQ3LDEuMTY5djEuNjQ5QzgzLjg5LDI0LjQ4Nyw4Ny4yMiwyNC4wOTgsODYuODIyLDIxLjc0eiBNODIuMzU3LDEyLjc4Ng0KCWMwLjA2MiwwLjE0NiwwLjE1MywwLjI2NCwwLjI4LDAuMzUyYzAuMTIzLDAuMDg4LDAuMjgzLDAuMTMyLDAuNDc2LDAuMTMyYzAuMTY2LDAsMC4zMTMtMC4wNDUsMC40NDMtMC4xMzkNCgljMC4xMjktMC4wOTIsMC4yMzctMC4yMzEsMC4zMjYtMC40MTZsLTAuMDIxLDAuNDU1aDEuMjkzVjcuNjY3aC0xLjAxOXY0LjI4M2MwLDAuMjMyLTAuMTkyLDAuNDIyLTAuNDI1LDAuNDIyDQoJYy0wLjIzMywwLTAuNDI0LTAuMTktMC40MjQtMC40MjJWNy42NjdoLTEuMDYzdjMuNzExYzAsMC40NzMsMC4wMDksMC43ODgsMC4wMjIsMC45NDhDODIuMjYyLDEyLjQ4Niw4Mi4yOTgsMTIuNjM5LDgyLjM1NywxMi43ODZ6DQoJIE03OC40MzgsOS42NzhjMC0wLjUyOCwwLjA0NS0wLjk0LDAuMTMxLTEuMjM3YzAuMDg4LTAuMjk3LDAuMjQ2LTAuNTM1LDAuNDc3LTAuNzE1YzAuMjI5LTAuMTgsMC41MjEtMC4yNzEsMC44NzctMC4yNzENCgljMC4yOTksMCwwLjU1NiwwLjA1OSwwLjc3MSwwLjE3NGMwLjIxNSwwLjExNiwwLjM4MSwwLjI2NiwwLjQ5NiwwLjQ1MmMwLjExNiwwLjE4NiwwLjE5NiwwLjM3NywwLjIzOCwwLjU3Mw0KCWMwLjA0NCwwLjE5OCwwLjA2NCwwLjQ5NywwLjA2NCwwLjkwMXYxLjM5MmMwLDAuNTEtMC4wMjEsMC44ODYtMC4wNiwxLjEyNGMtMC4wNCwwLjIzOS0wLjEyNSwwLjQ2LTAuMjU2LDAuNjY5DQoJYy0wLjEyOSwwLjIwNi0wLjI5NiwwLjM1OS0wLjQ5OCwwLjQ1N2MtMC4yMDQsMC4xLTAuNDM4LDAuMTQ4LTAuNzAyLDAuMTQ4Yy0wLjI5NCwwLTAuNTQzLTAuMDQxLTAuNzQ3LTAuMTI2DQoJYy0wLjIwNi0wLjA4NC0wLjM2NC0wLjIxMi0wLjQ3OC0wLjM4MWMtMC4xMTQtMC4xNjktMC4xOTQtMC4zNzYtMC4yNDMtMC42MTdzLTAuMDcxLTAuNjAzLTAuMDcxLTEuMDg1VjkuNjc4TDc4LjQzOCw5LjY3OHoNCgkgTTc5LjQ0OSwxMS44NjRjMCwwLjMxMiwwLjIzMiwwLjU2NiwwLjUxNSwwLjU2NnMwLjUxNC0wLjI1NCwwLjUxNC0wLjU2NlY4LjkzNWMwLTAuMzEyLTAuMjI5LTAuNTY1LTAuNTE0LTAuNTY1DQoJYy0wLjI4MSwwLTAuNTE1LDAuMjU0LTAuNTE1LDAuNTY1VjExLjg2NHogTTc1Ljg2OSwxMy4zNDRoMS4yMjFsMC4wMDEtNC4yMjFsMS40NDItMy42MTVoLTEuMzM2bC0wLjc2NywyLjY4NmwtMC43NzgtMi42OTJoLTEuMzINCglsMS41MzUsMy42MjRMNzUuODY5LDEzLjM0NHoiLz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MC4xNywxMDQuNjg4Yy00LjQ2OSwwLTguMDk0LDMuNjI0LTguMDk0LDguMDkzYzAsMy4zMTMsMS45OTQsNi4xNjIsNC44NDUsNy40MTQNCgkJYy0wLjAyMi0wLjU2NC0wLjAwNS0xLjI0NCwwLjE0MS0xLjg1OWMwLjE1Ni0wLjY1NiwxLjA0MS00LjQwOCwxLjA0MS00LjQwOHMtMC4yNTgtMC41MTgtMC4yNTgtMS4yODENCgkJYzAtMS4xOTksMC42OTQtMi4wOTYsMS41NjItMi4wOTZjMC43MzYsMCwxLjA5MiwwLjU1MywxLjA5MiwxLjIxNWMwLDAuNzQxLTAuNDczLDEuODQ4LTAuNzE1LDIuODczDQoJCWMtMC4yMDMsMC44NTcsMC40MzEsMS41NTksMS4yNzcsMS41NTljMS41MzMsMCwyLjU2Ni0xLjk3LDIuNTY2LTQuMzAzYzAtMS43NzMtMS4xOTUtMy4xMDItMy4zNjgtMy4xMDINCgkJYy0yLjQ1NiwwLTMuOTgzLDEuODMtMy45ODMsMy44NzVjMCwwLjcwNSwwLjIwNywxLjIwMywwLjUzMiwxLjU4N2MwLjE0OSwwLjE3OCwwLjE3MSwwLjI0OSwwLjExNiwwLjQ1Mg0KCQljLTAuMDM5LDAuMTQ4LTAuMTI4LDAuNTA4LTAuMTY1LDAuNjQ5Yy0wLjA1NCwwLjIwNC0wLjIyLDAuMjc3LTAuNDAzLDAuMjAyYy0xLjEzMi0wLjQ2MS0xLjY1OC0xLjctMS42NTgtMy4wOTMNCgkJYzAtMi4zLDEuOTM5LTUuMDU2LDUuNzg1LTUuMDU2YzMuMDg4LDAsNS4xMjMsMi4yMzUsNS4xMjMsNC42MzdjMCwzLjE3NS0xLjc2Niw1LjU0Ny00LjM2Nyw1LjU0N2MtMC44NzMsMC0xLjY5NS0wLjQ3My0xLjk3OS0xLjAxDQoJCWMwLDAtMC40NzEsMS44NjMtMC41NjgsMi4yMjZjLTAuMTcyLDAuNjIzLTAuNTA4LDEuMjQ4LTAuODE0LDEuNzMzYzAuNzI5LDAuMjE1LDEuNDk2LDAuMzMyLDIuMjk0LDAuMzMyDQoJCWM0LjQ3LDAsOC4wOTMtMy42MjUsOC4wOTMtOC4wOTRDODguMjYzLDEwOC4zMTIsODQuNjQsMTA0LjY4OCw4MC4xNywxMDQuNjg4eiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTg4LjE2NCw0NC45NThjLTAuMDc0LDEuNjU2LTEuMjMxLDMuOTIzLTMuNDY5LDYuODAxYy0yLjMxMiwzLjAwNi00LjI2Nyw0LjUwOS01Ljg2Nyw0LjUwOQ0KCWMtMC45ODksMC0xLjgzLTAuOTE1LTIuNTE2LTIuNzQ2Yy0wLjQ1Ny0xLjY3OC0wLjkxNC0zLjM1Ni0xLjM3MS01LjAzNWMtMC41MS0xLjgzLTEuMDU2LTIuNzQ2LTEuNjM5LTIuNzQ2DQoJYy0wLjEyOCwwLTAuNTczLDAuMjY4LTEuMzM1LDAuODAxbC0wLjgwMS0xLjAzMWMwLjg0LTAuNzM4LDEuNjY4LTEuNDc1LDIuNDgxLTIuMjE0YzEuMTItMC45NjcsMS45NjEtMS40NzYsMi41MjEtMS41MjgNCgljMS4zMjMtMC4xMjcsMi4xMzgsMC43NzgsMi40NDIsMi43MTVjMC4zMzIsMi4wOSwwLjU2MSwzLjM5LDAuNjg4LDMuODk5YzAuMzgyLDEuNzM0LDAuODAxLDIuNiwxLjI2LDIuNg0KCWMwLjM1NiwwLDAuODkyLTAuNTYyLDEuNjA0LTEuNjg3YzAuNzEyLTEuMTI1LDEuMDk1LTEuOTgxLDEuMTQ1LTIuNTY5YzAuMTA0LTAuOTcxLTAuMjc5LTEuNDU3LTEuMTQ1LTEuNDU3DQoJYy0wLjQwNywwLTAuODI3LDAuMDkzLTEuMjYsMC4yNzljMC44MzYtMi43MzgsMi40MzUtNC4wNjksNC43OTEtMy45OTJDODcuNDQxLDQxLjYwNyw4OC4yNjYsNDIuNzQyLDg4LjE2NCw0NC45NTh6Ii8+DQo8Y2lyY2xlIGZpbGw9IiMxQzZDRDYiIGN4PSIxMDcuMTM0IiBjeT0iMTYuMTY2IiByPSIzLjg1NCIvPg0KPGNpcmNsZSBmaWxsPSIjRjgyMzg2IiBjeD0iMTE2LjQyMSIgY3k9IjE2LjE2NiIgcj0iMy44NTQiLz4NCjxnPg0KCTxnPg0KCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI1LjM1MSw3OS4xNDIgMjIuODksNzkuMTQyIDIyLjg5LDc2LjY4IDIxLjY1OCw3Ni42OCAyMS42NTgsNzkuMTQyIDE5LjE5Nyw3OS4xNDIgMTkuMTk3LDgwLjM3MSANCgkJCTIxLjY1OCw4MC4zNzEgMjEuNjU4LDgyLjgzMiAyMi44OSw4Mi44MzIgMjIuODksODAuMzcxIDI1LjM1MSw4MC4zNzEgCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE2LjY2MSw4Mi4wMjljLTAuNDk1LTAuMzcxLTEuNTcxLTEuMTMyLTEuNTcxLTEuNjQ0YzAtMC41OTksMC4xNzItMC44OTQsMS4wNzItMS41OTcNCgkJCQljMC45MjMtMC43MjMsMS41NzYtMS42NzIsMS41NzYtMi44NTNjMC0xLjI4Ni0wLjUyNS0yLjQ1LTEuNTE1LTMuMDE5aDEuNDAxbDEuMTkyLTEuMjVjMCwwLTMuOTQsMC01LjMzNiwwDQoJCQkJYy0yLjcwOSwwLTQuOTY0LDEuOTk2LTQuOTY0LDQuMTkzYzAsMi4yNDMsMS40ODIsNC4wMzEsNC4wMjgsNC4wMzFjMC4xNzgsMCwwLjM0OS0wLjAwOSwwLjUxOC0wLjAyMQ0KCQkJCWMtMC4xNjUsMC4zMTYtMC4yODMsMC42Ny0wLjI4MywxLjAzOWMwLDAuNjI1LDAuMzQ0LDAuOTc5LDAuNzY4LDEuMzk0Yy0wLjMyMSwwLTAuNjMxLDAuMDA4LTAuOTY3LDAuMDA4DQoJCQkJYy0zLjEwMiwwLTUuMjcxLDIuMTM0LTUuMjcxLDQuMTgzYzAsMi4wMTYsMi42MTYsMy4yNzYsNS43MTYsMy4yNzZjMy41MzUsMCw1LjcwOC0yLjAwNiw1LjcwOC00LjAyMQ0KCQkJCUMxOC43MzQsODQuMTM0LDE4LjM4NCw4My4zMiwxNi42NjEsODIuMDI5eiBNMTMuNTc4LDc5LjA3OGMtMS40MzgtMC4wNDMtMi44MDYtMS4zNjItMy4wNTUtMy4yNQ0KCQkJCWMtMC4yNDctMS44OSwwLjcxNy0zLjMzNCwyLjE1NC0zLjI5M2MxLjQzOCwwLjA0NSwyLjY2OSwxLjU5NSwyLjkxNywzLjQ4MUMxNS44NDMsNzcuOTA2LDE1LjAxNSw3OS4xMjEsMTMuNTc4LDc5LjA3OHoNCgkJCQkgTTEzLjAxNSw4OC44ODFjLTIuMTQ0LDAtMy42OS0xLjM1Ni0zLjY5LTIuOTg1YzAtMS41OTcsMS44MTUtMi45NzUsMy45NTgtMi45NWMwLjUsMC4wMDQsMC45NjYsMC4wODYsMS4zODksMC4yMjMNCgkJCQljMS4xNjQsMC44MDksMi4xMDIsMS4zMTMsMi4zMzgsMi4yMzZjMC4wNDQsMC4xODYsMC4wNjcsMC4zNzksMC4wNjcsMC41NzRDMTcuMDc2LDg3LjYwOSwxNi4wMjcsODguODgxLDEzLjAxNSw4OC44ODF6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8cGF0aCBpZD0iUlNTXzJfIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTA4LjQ2Miw1Mi4wNTVjMC4zNTksMC4zNiwwLjU4LDAuODQ5LDAuNTgxLDEuMzkzYy0wLjAwMSwwLjU0My0wLjIyMiwxLjAzMS0wLjU4LDEuMzkxDQoJbC0wLjAwMSwwLjAwMWMtMC4zNiwwLjM1OC0wLjg1MiwwLjU3OC0xLjM5OCwwLjU3OGMtMC41NDYsMC0xLjAzNS0wLjIyLTEuMzk2LTAuNTc5Yy0wLjM1OS0wLjM1OS0wLjU4LTAuODQ3LTAuNTgtMS4zOTENCglzMC4yMjEtMS4wMzQsMC41OC0xLjM5NGwwLDBjMC4zNi0wLjM1OSwwLjg1LTAuNTgsMS4zOTYtMC41OEMxMDcuNjEsNTEuNDc0LDEwOC4xMDIsNTEuNjk3LDEwOC40NjIsNTIuMDU1eiBNMTA4LjQ2Miw1Mi4wNTUNCglMMTA4LjQ2Miw1Mi4wNTVMMTA4LjQ2Miw1Mi4wNTVMMTA4LjQ2Miw1Mi4wNTV6IE0xMDUuNjY3LDU0Ljg0TDEwNS42NjcsNTQuODRDMTA1LjY2NSw1NC44MzksMTA1LjY2NSw1NC44MzksMTA1LjY2Nyw1NC44NA0KCUwxMDUuNjY3LDU0Ljg0eiBNMTA1LjA4OCw0NS42MDd2Mi44NDNjMS44NTYsMC4wMDEsMy42MTIsMC43Myw0LjkyNiwyLjA0N2MxLjMxMywxLjMxMiwyLjA0LDMuMDY5LDIuMDQyLDQuOTMyaDAuMDAzdjAuMDA1aDIuODU0DQoJYy0wLjAwMi0yLjcwOC0xLjEwNC01LjE2Mi0yLjg4My02Ljk0M0MxMTAuMjQ5LDQ2LjcxMiwxMDcuNzk3LDQ1LjYxLDEwNS4wODgsNDUuNjA3eiBNMTA1LjA5Myw0MC41NDV2Mi44NDENCgljNi42MzYsMC4wMDUsMTIuMDI5LDUuNDA4LDEyLjAzNCwxMi4wNDloMi44NTFjLTAuMDAzLTQuMTA0LTEuNjcxLTcuODI0LTQuMzY3LTEwLjUyMg0KCUMxMTIuOTEzLDQyLjIxNywxMDkuMTk2LDQwLjU0NywxMDUuMDkzLDQwLjU0NXoiLz4NCjxwYXRoIGlkPSJTa3lwZV8yXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTExOS45NDgsODEuNTQ3YzAuMDY1LTAuNDIyLDAuMTAyLTAuODUyLDAuMTAyLTEuMjljMC00LjU2NS0zLjctOC4yNjctOC4yNjYtOC4yNjcNCgljLTAuNDM4LDAtMC44NjksMC4wMzUtMS4yOTEsMC4xMDNjLTAuNzYyLTAuNDcyLTEuNjU5LTAuNzQ0LTIuNjIxLTAuNzQ0Yy0yLjc2LDAtNC45OTUsMi4yMzUtNC45OTUsNC45OTYNCgljMCwwLjk2MSwwLjI3MiwxLjg1OCwwLjc0MywyLjYyMmMtMC4wNjQsMC40MjItMC4xMDIsMC44NTItMC4xMDIsMS4yOWMwLDQuNTYzLDMuNzAxLDguMjY0LDguMjY2LDguMjY0DQoJYzAuNDM4LDAsMC44NjktMC4wMzIsMS4yODktMC4xYzAuNzY0LDAuNDcxLDEuNjYsMC43NDMsMi42MjMsMC43NDNjMi43NiwwLDQuOTk2LTIuMjM2LDQuOTk2LTQuOTk2DQoJQzEyMC42OTIsODMuMjA1LDEyMC40MTksODIuMzA5LDExOS45NDgsODEuNTQ3eiBNMTE1LjcwOCw4NC4wMTZjLTAuMzUsMC41MDQtMC44NjQsMC44OTYtMS41MzUsMS4xOA0KCWMtMC42NzIsMC4yODMtMS40NjcsMC40MjQtMi4zODUsMC40MjRjLTEuMTAyLDAtMi4wMTItMC4xOS0yLjczLTAuNThjLTAuNTEtMC4yNzgtMC45MjQtMC42NTEtMS4yNDItMS4xMTcNCgljLTAuMzItMC40NjctMC40ODEtMC45MjQtMC40ODEtMS4zNjdjMC0wLjI2NCwwLjEwMS0wLjQ5MSwwLjI5Ni0wLjY3OGMwLjE5NS0wLjE4OCwwLjQ0OS0wLjI4LDAuNzUtMC4yOA0KCWMwLjI0NCwwLDAuNDU2LDAuMDczLDAuNjI3LDAuMjJjMC4xNzEsMC4xNDcsMC4zMTIsMC4zNTksMC40MywwLjY0MWMwLjE0MSwwLjMyNCwwLjI5MiwwLjU5NywwLjQ1NCwwLjgxMg0KCWMwLjE2MSwwLjIxNSwwLjM4OCwwLjM5NSwwLjY4MSwwLjUzM2MwLjI4OSwwLjE0MSwwLjY3NiwwLjIxMSwxLjE1NywwLjIxMWMwLjY2LDAsMS4xOTMtMC4xNDUsMS42MDMtMC40MjUNCgljMC40MS0wLjI4NCwwLjYwOS0wLjYzLDAuNjA5LTEuMDVjMC0wLjMzMi0wLjEwNy0wLjU5OC0wLjMyNi0wLjgwNWMtMC4yMi0wLjIwOS0wLjUwNC0wLjM2Ny0wLjg1NS0wLjQ3OQ0KCWMtMC4zNTQtMC4xMTItMC44MjktMC4yMy0xLjQyNi0wLjM1N2MtMC43OTktMC4xNzQtMS40NjktMC4zNzctMi4wMS0wLjYwOWMtMC41NDEtMC4yMzQtMC45NzUtMC41NTUtMS4yOTUtMC45NTkNCgljLTAuMzItMC40MDgtMC40OC0wLjkxNi0wLjQ4LTEuNTE4YzAtMC41NzIsMC4xNy0xLjA4NiwwLjUwOC0xLjUzMWMwLjMzOC0wLjQ0NywwLjgyNy0wLjc5MSwxLjQ2NC0xLjAyOQ0KCWMwLjYzNi0wLjIzNywxLjM4NC0wLjM1NiwyLjI0LTAuMzU2YzAuNjg1LDAsMS4yNzYsMC4wNzksMS43NzgsMC4yMzZjMC41LDAuMTU5LDAuOTE4LDAuMzY4LDEuMjUsMC42MzMNCgljMC4zMzIsMC4yNjMsMC41NzYsMC41MzksMC43MywwLjgyOWMwLjE1MywwLjI5MiwwLjIzLDAuNTc2LDAuMjMsMC44NTRjMCwwLjI2LTAuMSwwLjQ5My0wLjI5NSwwLjY5OA0KCWMtMC4xOTQsMC4yMDUtMC40NDMsMC4zMTItMC43MzQsMC4zMWMtMC4yNjQsMC0wLjQ2OS0wLjA2MS0wLjYxMS0wLjE4OGMtMC4xNC0wLjEyNS0wLjI4NS0wLjMyMi0wLjQ0My0wLjU5OA0KCWMtMC4xOTktMC4zODUtMC40MzktMC42ODQtMC43MTktMC44OTdjLTAuMjcxLTAuMjEtMC43MTctMC4zMTktMS4zNC0wLjMxN2MtMC41NzQsMC0xLjAzNSwwLjExNy0xLjM4NCwwLjM0OA0KCWMtMC4zNTEsMC4yMzItMC41MTksMC41MDUtMC41MTksMC44MjJjMCwwLjE5OSwwLjA1OSwwLjM2NywwLjE3NCwwLjUxMWMwLjExNywwLjE0NiwwLjI3OSwwLjI3MSwwLjQ4OCwwLjM3N3MwLjQyMiwwLjE5LDAuNjM3LDAuMjUNCgljMC4yMTcsMC4wNjIsMC41NzQsMC4xNDksMS4wNzQsMC4yNjljMC42MjUsMC4xMzUsMS4xOTMsMC4yODQsMS43MDMsMC40NDlzMC45NDMsMC4zNjQsMS4zMDMsMC42MDINCgljMC4zNjMsMC4yMzYsMC42NDYsMC41MzcsMC44NDgsMC45MDJjMC4yMDMsMC4zNjQsMC4zMDUsMC44MTEsMC4zMDUsMS4zMzRDMTE2LjIzNSw4Mi45NDUsMTE2LjA1OSw4My41MTMsMTE1LjcwOCw4NC4wMTZ6Ii8+DQo8cGF0aCBpZD0iRmVlZGJ1cm5lcl8zXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTExNy43NTcsMTE0LjgyNWMwLjA0OC0wLjI1OSwwLjA4Mi0wLjUyLDAuMDg0LTAuNzc5DQoJYzAuMDEzLTMuMjY2LTEuNzYyLTQuNTM3LTMuNjQzLTUuNjI1YzAuNTQ1LDIuODU3LTEuMjE1LDQuNjI0LTMuNDAxLDQuMDA2YzMuMTk2LTUuMjI5LTEuNDU1LTUuMjQtMC4wMzQtOS4wMTgNCgljLTIuMTg2LDEuNTU1LTQuMzc4LDUuODk4LTQuMzcxLDkuMDcxYzAuMDAyLDAuODM3LDAuMDg1LDEuNjE1LDAuMjQyLDIuMzI5Yy0xLjU3NCwwLjYzLTIuNTYyLDEuNTIzLTIuNTYyLDIuNTE0DQoJYzAsMS45MDMsMy42NDMsMy40NTcsOC4xMDYsMy40NTdjNC40NjYsMCw4LjEwNC0xLjU1NCw4LjEwNC0zLjQ1N0MxMjAuMjg0LDExNi4zNDEsMTE5LjMxLDExNS40NTQsMTE3Ljc1NywxMTQuODI1eg0KCSBNMTA5LjA3NSwxMTAuNjc1Yy0wLjYwNCwyLjcyNywxLjAxNyw0Ljc1NywyLjU3OCw0Ljc3NWMxLjc2MiwwLjAxNSwyLjgwNS0xLjYzMSwzLjMwMS0zLjc4N2MwLjkzOCwwLjcxMywxLjQyLDEuNzA5LDEuNDgxLDIuNzI1DQoJYy0wLjAwMy0wLjAwMS0wLjAwNS0wLjAwMS0wLjAwNy0wLjAwMWMwLjA3LDEuMTQ5LTAuMzk4LDIuMzIzLTEuMzc1LDMuMTQ2Yy0wLjAwNSwwLjAwNC0wLjAxMSwwLjAwOC0wLjAxNiwwLjAxNA0KCWMtMC4yMTEsMC4xNzUtMC40NDMsMC4zMzMtMC42OTksMC40NzJjLTAuMDIzLDAuMDEzLTAuMDQ3LDAuMDIyLTAuMDY5LDAuMDM2Yy0wLjEwNCwwLjA1My0wLjIwOSwwLjEwNC0wLjMxNywwLjE0OA0KCWMtMC4wMzIsMC4wMTUtMC4wNjMsMC4wMjctMC4wOTYsMC4wNDFjLTAuMjcsMC4xMDctMC41NTgsMC4xOTQtMC44NjUsMC4yNjFjLTAuMDQ1LDAuMDA4LTAuMDg4LDAuMDE2LTAuMTMzLDAuMDI0DQoJYy0wLjExNSwwLjAyMS0wLjIzNCwwLjAzOS0wLjM1NiwwLjA1M2MtMC4wNDgsMC4wMDctMC4wOTcsMC4wMTQtMC4xNDYsMC4wMThjLTAuMTY0LDAuMDE4LTAuMzM0LDAuMDI5LTAuNTExLDAuMDMyDQoJYy0wLjEyMiwwLjAwMy0wLjI0My0wLjAwMi0wLjM2Mi0wLjAxMWMtMC4wMzMtMC4wMDItMC4wNjMtMC4wMDYtMC4wOTYtMC4wMDhjLTAuMTA0LTAuMDEtMC4yMDMtMC4wMjEtMC4zMDMtMC4wMzkNCgljLTAuMDItMC4wMDItMC4wMzgtMC4wMDQtMC4wNTktMC4wMDhjLTAuMTE5LTAuMDIxLTAuMjM4LTAuMDQ5LTAuMzU0LTAuMDgyYy0wLjAxNS0wLjAwMy0wLjAyOS0wLjAwOC0wLjA0My0wLjAxMw0KCWMtMC4xMDktMC4wMzEtMC4yMTgtMC4wNjUtMC4zMjMtMC4xMDZjLTAuMDExLTAuMDA0LTAuMDIxLTAuMDA4LTAuMDMxLTAuMDEzYy0xLjQ0OS0wLjU2OS0yLjUwMi0xLjk3OS0yLjQ0NS0zLjkzOA0KCWMtMC4wMDQsMC0wLjAwNiwwLTAuMDA4LDAuMDAyQzEwNy44NTQsMTEzLjMyMywxMDguMjI5LDExMi4wNiwxMDkuMDc1LDExMC42NzV6Ii8+DQo8L3N2Zz4NCg==');
    
  background-position: 35% 35%;
  background-color: transparent;
  background-size: 600px 600px;
    
  display: inline-block;
  height: 100px;
  outline: 1px dashed #111;
  width: 100px;
}
              
            
!

JS

              
                /*
-=-=- Additional Notes -=-=-
As my friend pointed out, having a separate CSS sheet with specific classes describing the individual icons (instead of a sprite) would be better for responsive designs.
That way, you wouldn't have to calculate the "viewport's" (element's) height/width against the background-image's height/width.
Individual SVG Data URI classes would be easier to work with, as long as they were named intelligibly.
** I'm going to work on a Sass version that uses maps to output the CSS class markup **
*/
              
            
!
999px

Console