HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs 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 its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- <html dir="rtl"> -->
<div style="position: absolute; width: 0; height: 0;">
<!-- social-nav-icons -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="social-icons" style="position: absolute; width: 0; height: 0;">
<symbol id="website" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.167 7.333h-2.519C17.127 5.314 14.718 4 12 4 9.283 4 6.873 5.314 5.352 7.333H2.833A.834.834 0 0 0 2 8.167V16.5c0 .46.373.833.833.833h2.519c1.52 2.02 3.93 3.334 6.648 3.334 2.718 0 5.127-1.314 6.648-3.334h2.519c.46 0 .833-.372.833-.833V8.167a.833.833 0 0 0-.833-.834zm-4.781 0h-1.053v-.758c.376.22.728.474 1.053.758zm-2.72-1.447v1.447h-3.333V5.886A6.632 6.632 0 0 1 12 5.666c.576 0 1.133.081 1.667.22zm-5 .689v.758H7.615a6.916 6.916 0 0 1 1.053-.758zM7.615 17.333h1.053v.76a6.7 6.7 0 0 1-1.053-.76zm2.72 1.449v-1.449h3.333v1.449A6.627 6.627 0 0 1 12 19c-.576 0-1.133-.08-1.667-.218zm5-.69v-.759h1.052a6.66 6.66 0 0 1-1.053.76zm5-2.425H3.666V9h16.666v6.667zM6.366 14h.851l-.009-.035.411-1.625.407 1.66h.858l-.01-.035.834-3.298h-.857l-.399 1.626-.41-1.626h-.857l-.4 1.626-.41-1.626h-.833L6.36 14h.007zm4.166 0h.851l-.008-.033.41-1.627.407 1.66h.858l-.008-.033.832-3.3h-.857l-.399 1.626-.41-1.626h-.857l-.4 1.626-.41-1.626H9.71L10.527 14h.006zm4.167 0h.851l-.008-.033.41-1.627.407 1.66h.858l-.009-.033.833-3.3h-.857l-.4 1.626-.41-1.626h-.857l-.399 1.626-.41-1.626h-.834L14.693 14h.007z" />
</symbol>
</svg>
</div>
<!-- <div class="o-container">
<div class="c-profile" data-container="profile">
<a class="c-profile-action" href="" data-toggle="menu" data-placement="top" title="Contact Menu">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#contact-menu"></use>
</svg>
</a>
<div class="c-menu-container t-menu-container" data-container="menu">
<ul class="c-menu c-profile-menu t-menu t-profile-menu">
<li class="c-menu-item t-menu-item">
<a class="c-menu-link c-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#pm-user"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Private Message User</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#email"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Email User</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#skype"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Skype User</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Vist User's Website">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#website"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Website</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Vist User's Facebook">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#facebook"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Facebook</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Vist User's Twitter">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#twitter"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Twitter</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Vist User's Google Plus">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#google-plus"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Google Plus</span>
</a>
<a class="c-menu-link c-menu-action" href="#" title="Vist User's Youtube">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#youtube"></use>
</svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Youtube</span>
</a>
</li>
</ul>
</div>
<a class="c-profile-action c-profile-close" href="" data-toggle="tooltip" data-placement="top" title="Post Actions">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#close"></use>
</svg>
</a>
<div class="o-avatar-wrap">
<a class="o-avatar-rate-good" href=""><svg class="o-icon o-avatar-rate-icon">
<use xlink:href="#thumbs-up"></use>
</svg></a>
<a class="" href="./memberlist.php?mode=viewprofile&u=61815">
<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/10946388?v=4&s=460" alt="User Avatar">
</a>
<a class="o-avatar-rate-bad" href=""><svg class="o-icon o-avatar-rate-icon">
<use xlink:href="#thumbs-down"></use>
</svg></a>
<span class="o-avatar-online"></span>
</div>
<h4 class="c-profile-meta">
<a class="c-profile-user" href="post.url" style="color: #00BFA5;">CHiTA</a>
<small class="c-profile-user-title">Development Team Member</small>
<svg class="c-profile-group" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 37">
<g fill="none" fill-rule="evenodd" transform="translate(0 .952)">
<path stroke="#00A690" d="M0.5,6.0042577 L0.5,29.9957423 C0.5,31.9336232 2.06519224,33.5 3.99864819,33.5 L241.061804,33.5 C242.989482,33.5 244.560452,31.9287119 244.560452,29.9957423 L244.560452,6.0042577 C244.560452,4.06637684 242.99526,2.5 241.061804,2.5 L3.99864819,2.5 C2.07097099,2.5 0.5,4.07128814 0.5,6.0042577 Z" />
<text fill="#00A690" font-family="HelveticaNeueLTStd-Md, Helvetica Neue LT Std" font-size="17" font-weight="500" letter-spacing=".044">
<tspan x="8" y="24.048">DEVELOPMENT TEAM</tspan>
</text>
<g transform="translate(223)">
<rect width="48" height="5" y="29" fill="#78909C" fill-rule="nonzero" />
<polygon fill="#546E7A" fill-rule="nonzero" points="2.842 36 45.158 36 48 34 0 34" />
<rect width="12" height="1" x="18" y="31" fill="#546E7A" fill-rule="nonzero" />
<path fill="#546E7A" d="M46,29 L46,0.905472561 C46,0.412275107 45.6327122,0 45.1796398,0 L2.82036024,0 C2.36716666,0 2,0.405393874 2,0.905472561 L2,29 L46,29 L46,29 Z" />
<rect width="38" height="24" x="5" y="3" fill="#ECEFF1" />
<g fill-rule="nonzero" transform="translate(5 3.35)" style="mix-blend-mode:color-burn">
<path fill="#ACB3BA" d="M2.27414327,4.21082501 C1.68276218,4.21082501 1.23643683,4.02228061 0.946325351,3.6451918 C0.656213873,3.268103 0.5,2.76531792 0.5,2.12636188 C0.5,1.49788054 0.645055739,0.984620774 0.946325351,0.607531967 C1.23643683,0.23044316 1.68276218,0.0418987563 2.27414327,0.0418987563 C2.86552436,0.0418987563 3.31184971,0.23044316 3.60196119,0.607531967 C3.89207267,0.984620774 4.04828654,1.48740585 4.04828654,2.12636188 C4.04828654,2.75484323 3.9032308,3.268103 3.60196119,3.6451918 C3.31184971,4.02228061 2.86552436,4.21082501 2.27414327,4.21082501 Z M1.63812964,1.16269049 C1.50423204,1.40360834 1.43728324,1.73879839 1.43728324,2.13683657 C1.43728324,2.54534945 1.50423204,2.87006481 1.63812964,3.11098266 C1.77202725,3.35190051 1.98403179,3.47759678 2.27414327,3.47759678 C2.56425475,3.47759678 2.77625929,3.35190051 2.9101569,3.11098266 C3.0440545,2.87006481 3.1110033,2.53487476 3.1110033,2.13683657 C3.1110033,1.7283237 3.0440545,1.40360834 2.9101569,1.16269049 C2.77625929,0.92177264 2.56425475,0.796076371 2.27414327,0.796076371 C1.98403179,0.785601682 1.77202725,0.911297951 1.63812964,1.16269049 Z" />
<polygon fill="#324A5E" points="4.749 .136 6.489 .136 6.489 4.169 5.563 4.169 5.563 .901 4.749 .901 4.749 .136" />
<path fill="#4CDBC4" d="M8.9641335,4.21082501 C8.37275241,4.21082501 7.92642706,4.02228061 7.63631559,3.6451918 C7.34620411,3.268103 7.18999023,2.76531792 7.18999023,2.12636188 C7.18999023,1.49788054 7.33504597,0.984620774 7.63631559,0.607531967 C7.92642706,0.23044316 8.37275241,0.0418987563 8.9641335,0.0418987563 C9.55551459,0.0418987563 10.0018399,0.23044316 10.2919514,0.607531967 C10.5820629,0.984620774 10.7382768,1.48740585 10.7382768,2.12636188 C10.7382768,2.75484323 10.593221,3.268103 10.2919514,3.6451918 C10.0018399,4.02228061 9.56667273,4.21082501 8.9641335,4.21082501 Z M8.33927801,1.16269049 C8.20538041,1.40360834 8.13843161,1.73879839 8.13843161,2.13683657 C8.13843161,2.54534945 8.20538041,2.87006481 8.33927801,3.11098266 C8.47317562,3.35190051 8.68518016,3.47759678 8.97529164,3.47759678 C9.26540312,3.47759678 9.47740766,3.35190051 9.61130526,3.11098266 C9.74520287,2.87006481 9.81215167,2.53487476 9.81215167,2.13683657 C9.81215167,1.7283237 9.74520287,1.40360834 9.61130526,1.16269049 C9.47740766,0.92177264 9.26540312,0.796076371 8.97529164,0.796076371 C8.68518016,0.785601682 8.47317562,0.911297951 8.33927801,1.16269049 Z" />
<polygon fill="#324A5E" points="11.439 .136 13.179 .136 13.179 4.169 12.253 4.169 12.253 .901 11.439 .901 11.439 .136" />
<path fill="#2C9984" d="M15.6541237,4.21082501 C15.0627426,4.21082501 14.6164173,4.02228061 14.3263058,3.6451918 C14.0361943,3.268103 13.8799805,2.76531792 13.8799805,2.12636188 C13.8799805,1.49788054 14.0250362,0.984620774 14.3263058,0.607531967 C14.6275754,0.23044316 15.0627426,0.0418987563 15.6541237,0.0418987563 C16.2455048,0.0418987563 16.6918302,0.23044316 16.9819417,0.607531967 C17.2720531,0.984620774 17.428267,1.48740585 17.428267,2.12636188 C17.428267,2.75484323 17.2832113,3.268103 16.9819417,3.6451918 C16.6918302,4.02228061 16.2455048,4.21082501 15.6541237,4.21082501 Z M15.0181101,1.16269049 C14.8842125,1.40360834 14.8172637,1.73879839 14.8172637,2.13683657 C14.8172637,2.54534945 14.8842125,2.87006481 15.0181101,3.11098266 C15.1520077,3.35190051 15.3640123,3.47759678 15.6541237,3.47759678 C15.9442352,3.47759678 16.1562398,3.35190051 16.2901374,3.11098266 C16.424035,2.87006481 16.4909838,2.53487476 16.4909838,2.13683657 C16.4909838,1.7283237 16.424035,1.40360834 16.2901374,1.16269049 C16.1562398,0.92177264 15.9442352,0.796076371 15.6541237,0.796076371 C15.3640123,0.785601682 15.1520077,0.911297951 15.0181101,1.16269049 Z" />
<polygon fill="#324A5E" points="18.129 .136 19.869 .136 19.869 4.169 18.943 4.169 18.943 .901 18.129 .901" />
<path fill="#F1543F" d="M22.344114,4.21082501 C21.7527329,4.21082501 21.3064075,4.02228061 21.0162961,3.6451918 C20.7261846,3.268103 20.5699707,2.76531792 20.5699707,2.12636188 C20.5699707,1.49788054 20.7150264,0.984620774 21.0162961,0.607531967 C21.3175657,0.23044316 21.7527329,0.0418987563 22.344114,0.0418987563 C22.9354951,0.0418987563 23.3818204,0.23044316 23.6719319,0.607531967 C23.9620434,0.984620774 24.1182572,1.48740585 24.1182572,2.12636188 C24.1182572,2.75484323 23.9732015,3.268103 23.6719319,3.6451918 C23.3706623,4.02228061 22.9354951,4.21082501 22.344114,4.21082501 Z M21.7081003,1.16269049 C21.5742027,1.40360834 21.5072539,1.73879839 21.5072539,2.13683657 C21.5072539,2.54534945 21.5742027,2.87006481 21.7081003,3.11098266 C21.841998,3.35190051 22.0540025,3.47759678 22.344114,3.47759678 C22.6342255,3.47759678 22.84623,3.35190051 22.9801276,3.11098266 C23.1140252,2.87006481 23.180974,2.53487476 23.180974,2.13683657 C23.180974,1.7283237 23.1140252,1.40360834 22.9801276,1.16269049 C22.84623,0.92177264 22.6342255,0.796076371 22.344114,0.796076371 C22.0540025,0.785601682 21.841998,0.911297951 21.7081003,1.16269049 Z" />
<polygon fill="#324A5E" points="24.819 .136 26.559 .136 26.559 4.169 25.633 4.169 25.633 .901 24.819 .901" />
<path fill="#ACB3BA" d="M29.0341042,4.21082501 C28.4427231,4.21082501 27.9963978,4.02228061 27.7062863,3.6451918 C27.4161748,3.268103 27.2599609,2.76531792 27.2599609,2.12636188 C27.2599609,1.49788054 27.4050167,0.984620774 27.7062863,0.607531967 C27.9963978,0.23044316 28.4427231,0.0418987563 29.0341042,0.0418987563 C29.6254853,0.0418987563 30.0718106,0.23044316 30.3619221,0.607531967 C30.6520336,0.984620774 30.8082475,1.48740585 30.8082475,2.12636188 C30.8082475,2.75484323 30.6631917,3.268103 30.3619221,3.6451918 C30.0718106,4.02228061 29.6254853,4.21082501 29.0341042,4.21082501 Z M28.3980906,1.16269049 C28.264193,1.40360834 28.1972442,1.73879839 28.1972442,2.13683657 C28.1972442,2.54534945 28.264193,2.87006481 28.3980906,3.11098266 C28.5319882,3.35190051 28.7439927,3.47759678 29.0341042,3.47759678 C29.3242157,3.47759678 29.5362202,3.35190051 29.6701178,3.11098266 C29.8040154,2.87006481 29.8709642,2.53487476 29.8709642,2.13683657 C29.8709642,1.7283237 29.8040154,1.40360834 29.6701178,1.16269049 C29.5362202,0.92177264 29.3242157,0.796076371 29.0341042,0.796076371 C28.7439927,0.785601682 28.5319882,0.911297951 28.3980906,1.16269049 Z" />
<polygon fill="#324A5E" points="31.509 .136 33.249 .136 33.249 4.169 32.323 4.169 32.323 .901 31.509 .901 31.509 .136" />
<path fill="#4CDBC4" d="M35.7240944,4.21082501 C35.1327134,4.21082501 34.686388,4.02228061 34.3962765,3.6451918 C34.106165,3.268103 33.9499512,2.76531792 33.9499512,2.12636188 C33.9499512,1.49788054 34.0950069,0.984620774 34.3962765,0.607531967 C34.686388,0.23044316 35.1327134,0.0418987563 35.7240944,0.0418987563 C36.3154755,0.0418987563 36.7618009,0.23044316 37.0519124,0.607531967 C37.3420238,0.984620774 37.4982377,1.48740585 37.4982377,2.12636188 C37.4982377,2.75484323 37.353182,3.268103 37.0519124,3.6451918 C36.7618009,4.02228061 36.3266337,4.21082501 35.7240944,4.21082501 Z M35.099239,1.16269049 C34.9653413,1.40360834 34.8983925,1.73879839 34.8983925,2.13683657 C34.8983925,2.54534945 34.9653413,2.87006481 35.099239,3.11098266 C35.2331366,3.35190051 35.4451411,3.47759678 35.7352526,3.47759678 C36.0253641,3.47759678 36.2373686,3.35190051 36.3712662,3.11098266 C36.5051638,2.87006481 36.5721126,2.53487476 36.5721126,2.13683657 C36.5721126,1.7283237 36.5051638,1.40360834 36.3712662,1.16269049 C36.2373686,0.92177264 36.0253641,0.796076371 35.7352526,0.796076371 C35.4451411,0.785601682 35.2331366,0.911297951 35.099239,1.16269049 Z" />
<g transform="translate(0 6)">
<path fill="#324A5E" d="M2.27414327,4.8315642 C1.68276218,4.8315642 1.23643683,4.64301979 0.946325351,4.26593099 C0.656213873,3.88884218 0.5,3.3860571 0.5,2.74710107 C0.5,2.11861972 0.645055739,1.60535996 0.946325351,1.22827115 C1.23643683,0.851182344 1.68276218,0.66263794 2.27414327,0.66263794 C2.86552436,0.66263794 3.31184971,0.851182344 3.60196119,1.22827115 C3.89207267,1.60535996 4.04828654,2.10814503 4.04828654,2.74710107 C4.04828654,3.37558241 3.9032308,3.88884218 3.60196119,4.26593099 C3.31184971,4.64301979 2.86552436,4.8315642 2.27414327,4.8315642 Z M1.63812964,1.77295498 C1.50423204,2.01387283 1.43728324,2.34906288 1.43728324,2.74710107 C1.43728324,3.15561394 1.50423204,3.4803293 1.63812964,3.72124715 C1.77202725,3.962165 1.98403179,4.08786127 2.27414327,4.08786127 C2.56425475,4.08786127 2.77625929,3.962165 2.9101569,3.72124715 C3.0440545,3.4803293 3.1110033,3.14513925 3.1110033,2.74710107 C3.1110033,2.33858819 3.0440545,2.01387283 2.9101569,1.77295498 C2.77625929,1.53203713 2.56425475,1.40634087 2.27414327,1.40634087 C1.98403179,1.40634087 1.77202725,1.53203713 1.63812964,1.77295498 Z" />
<polygon fill="#324A5E" points="4.749 .757 6.489 .757 6.489 4.79 5.563 4.79 5.563 1.522 4.749 1.522 4.749 .757" />
<path fill="#F1543F" d="M8.9641335,4.8315642 C8.37275241,4.8315642 7.92642706,4.64301979 7.63631559,4.26593099 C7.34620411,3.88884218 7.18999023,3.3860571 7.18999023,2.74710107 C7.18999023,2.11861972 7.33504597,1.60535996 7.63631559,1.22827115 C7.92642706,0.851182344 8.37275241,0.66263794 8.9641335,0.66263794 C9.55551459,0.66263794 10.0018399,0.851182344 10.2919514,1.22827115 C10.5820629,1.60535996 10.7382768,2.10814503 10.7382768,2.74710107 C10.7382768,3.37558241 10.593221,3.88884218 10.2919514,4.26593099 C10.0018399,4.64301979 9.56667273,4.8315642 8.9641335,4.8315642 Z M8.33927801,1.77295498 C8.20538041,2.01387283 8.13843161,2.34906288 8.13843161,2.74710107 C8.13843161,3.15561394 8.20538041,3.4803293 8.33927801,3.72124715 C8.47317562,3.962165 8.68518016,4.08786127 8.97529164,4.08786127 C9.26540312,4.08786127 9.47740766,3.962165 9.61130526,3.72124715 C9.74520287,3.4803293 9.81215167,3.14513925 9.81215167,2.74710107 C9.81215167,2.33858819 9.74520287,2.01387283 9.61130526,1.77295498 C9.47740766,1.53203713 9.26540312,1.40634087 8.97529164,1.40634087 C8.68518016,1.40634087 8.47317562,1.53203713 8.33927801,1.77295498 Z" />
<polygon fill="#54C0EB" points="11.439 .757 13.179 .757 13.179 4.79 12.253 4.79 12.253 1.522 11.439 1.522 11.439 .757" />
<path fill="#324A5E" d="M15.6541237,4.8315642 C15.0627426,4.8315642 14.6164173,4.64301979 14.3263058,4.26593099 C14.0361943,3.88884218 13.8799805,3.3860571 13.8799805,2.74710107 C13.8799805,2.11861972 14.0250362,1.60535996 14.3263058,1.22827115 C14.6275754,0.851182344 15.0627426,0.66263794 15.6541237,0.66263794 C16.2455048,0.66263794 16.6918302,0.851182344 16.9819417,1.22827115 C17.2720531,1.60535996 17.428267,2.10814503 17.428267,2.74710107 C17.428267,3.37558241 17.2832113,3.88884218 16.9819417,4.26593099 C16.6918302,4.64301979 16.2455048,4.8315642 15.6541237,4.8315642 Z M15.0181101,1.77295498 C14.8842125,2.01387283 14.8172637,2.34906288 14.8172637,2.74710107 C14.8172637,3.15561394 14.8842125,3.4803293 15.0181101,3.72124715 C15.1520077,3.962165 15.3640123,4.08786127 15.6541237,4.08786127 C15.9442352,4.08786127 16.1562398,3.962165 16.2901374,3.72124715 C16.424035,3.4803293 16.4909838,3.14513925 16.4909838,2.74710107 C16.4909838,2.33858819 16.424035,2.01387283 16.2901374,1.77295498 C16.1562398,1.53203713 15.9442352,1.40634087 15.6541237,1.40634087 C15.3640123,1.40634087 15.1520077,1.53203713 15.0181101,1.77295498 Z" />
<polygon fill="#4CDBC4" points="18.129 .757 19.869 .757 19.869 4.79 18.943 4.79 18.943 1.522 18.129 1.522" />
<path fill="#324A5E" d="M22.344114,4.8315642 C21.7527329,4.8315642 21.3064075,4.64301979 21.0162961,4.26593099 C20.7261846,3.88884218 20.5699707,3.3860571 20.5699707,2.74710107 C20.5699707,2.11861972 20.7150264,1.60535996 21.0162961,1.22827115 C21.3175657,0.851182344 21.7527329,0.66263794 22.344114,0.66263794 C22.9354951,0.66263794 23.3818204,0.851182344 23.6719319,1.22827115 C23.9620434,1.60535996 24.1182572,2.10814503 24.1182572,2.74710107 C24.1182572,3.37558241 23.9732015,3.88884218 23.6719319,4.26593099 C23.3706623,4.64301979 22.9354951,4.8315642 22.344114,4.8315642 Z M21.7081003,1.77295498 C21.5742027,2.01387283 21.5072539,2.34906288 21.5072539,2.74710107 C21.5072539,3.15561394 21.5742027,3.4803293 21.7081003,3.72124715 C21.841998,3.962165 22.0540025,4.08786127 22.344114,4.08786127 C22.6342255,4.08786127 22.84623,3.962165 22.9801276,3.72124715 C23.1140252,3.4803293 23.180974,3.14513925 23.180974,2.74710107 C23.180974,2.33858819 23.1140252,2.01387283 22.9801276,1.77295498 C22.84623,1.53203713 22.6342255,1.40634087 22.344114,1.40634087 C22.0540025,1.40634087 21.841998,1.53203713 21.7081003,1.77295498 Z" />
<polygon fill="#F9B54C" points="24.819 .757 26.559 .757 26.559 4.79 25.633 4.79 25.633 1.522 24.819 1.522" />
<path fill="#324A5E" d="M29.0341042,5.01338238 C28.4427231,5.01338238 27.9963978,4.82483798 27.7062863,4.44774917 C27.4161748,4.07066036 27.2599609,3.56787528 27.2599609,2.92891925 C27.2599609,2.30043791 27.4050167,1.78717814 27.7062863,1.41008933 C27.9963978,1.03300053 28.4427231,0.844456122 29.0341042,0.844456122 C29.6254853,0.844456122 30.0718106,1.03300053 30.3619221,1.41008933 C30.6520336,1.78717814 30.8082475,2.28996322 30.8082475,2.92891925 C30.8082475,3.5574006 30.6631917,4.07066036 30.3619221,4.44774917 C30.0718106,4.82483798 29.6254853,5.01338238 29.0341042,5.01338238 Z M28.3980906,1.95477317 C28.264193,2.19569101 28.1972442,2.53088106 28.1972442,2.92891925 C28.1972442,3.33743212 28.264193,3.66214749 28.3980906,3.90306534 C28.5319882,4.14398318 28.7439927,4.26967945 29.0341042,4.26967945 C29.3242157,4.26967945 29.5362202,4.14398318 29.6701178,3.90306534 C29.8040154,3.66214749 29.8709642,3.32695744 29.8709642,2.92891925 C29.8709642,2.52040638 29.8040154,2.19569101 29.6701178,1.95477317 C29.5362202,1.71385532 29.3242157,1.58815905 29.0341042,1.58815905 C28.7439927,1.58815905 28.5319882,1.71385532 28.3980906,1.95477317 Z" />
<polygon fill="#324A5E" points="31.509 .939 33.249 .939 33.249 4.971 32.323 4.971 32.323 1.703 31.509 1.703 31.509 .939" />
<path fill="#F1543F" d="M35.7240944,5.01338238 C35.1327134,5.01338238 34.686388,4.82483798 34.3962765,4.44774917 C34.106165,4.07066036 33.9499512,3.56787528 33.9499512,2.92891925 C33.9499512,2.30043791 34.0950069,1.78717814 34.3962765,1.41008933 C34.686388,1.03300053 35.1327134,0.844456122 35.7240944,0.844456122 C36.3154755,0.844456122 36.7618009,1.03300053 37.0519124,1.41008933 C37.3420238,1.78717814 37.4982377,2.28996322 37.4982377,2.92891925 C37.4982377,3.5574006 37.353182,4.07066036 37.0519124,4.44774917 C36.7618009,4.82483798 36.3266337,5.01338238 35.7240944,5.01338238 Z M35.099239,1.95477317 C34.9653413,2.19569101 34.8983925,2.53088106 34.8983925,2.92891925 C34.8983925,3.33743212 34.9653413,3.66214749 35.099239,3.90306534 C35.2331366,4.14398318 35.4451411,4.26967945 35.7352526,4.26967945 C36.0253641,4.26967945 36.2373686,4.14398318 36.3712662,3.90306534 C36.5051638,3.66214749 36.5721126,3.32695744 36.5721126,2.92891925 C36.5721126,2.52040638 36.5051638,2.19569101 36.3712662,1.95477317 C36.2373686,1.71385532 36.0253641,1.58815905 35.7352526,1.58815905 C35.4451411,1.58815905 35.2331366,1.71385532 35.099239,1.95477317 Z" />
</g>
<g transform="translate(0 13)">
<path fill="#2C9984" d="M2.27414327,4.66442459 C1.68276218,4.66442459 1.23643683,4.47588019 0.946325351,4.09879138 C0.656213873,3.72170257 0.5,3.2189175 0.5,2.57996146 C0.5,1.95148012 0.645055739,1.43822035 0.946325351,1.06113155 C1.23643683,0.68404274 1.68276218,0.495498336 2.27414327,0.495498336 C2.86552436,0.495498336 3.31184971,0.68404274 3.60196119,1.06113155 C3.89207267,1.43822035 4.04828654,1.94100543 4.04828654,2.57996146 C4.04828654,3.20844281 3.9032308,3.72170257 3.60196119,4.09879138 C3.31184971,4.4654055 2.86552436,4.66442459 2.27414327,4.66442459 Z M1.63812964,1.60581538 C1.50423204,1.84673323 1.43728324,2.18192328 1.43728324,2.57996146 C1.43728324,2.98847434 1.50423204,3.3131897 1.63812964,3.55410755 C1.77202725,3.7950254 1.98403179,3.92072167 2.27414327,3.92072167 C2.56425475,3.92072167 2.77625929,3.7950254 2.9101569,3.55410755 C3.0440545,3.3131897 3.1110033,2.97799965 3.1110033,2.57996146 C3.1110033,2.17144859 3.0440545,1.84673323 2.9101569,1.60581538 C2.77625929,1.36489753 2.56425475,1.23920126 2.27414327,1.23920126 C1.98403179,1.23920126 1.77202725,1.35442284 1.63812964,1.60581538 Z" />
<polygon fill="#324A5E" points="4.749 .579 6.489 .579 6.489 4.612 5.563 4.612 5.563 1.344 4.749 1.344 4.749 .579" />
<path fill="#ACB3BA" d="M8.9641335,4.66442459 C8.37275241,4.66442459 7.92642706,4.47588019 7.63631559,4.09879138 C7.34620411,3.72170257 7.18999023,3.2189175 7.18999023,2.57996146 C7.18999023,1.95148012 7.33504597,1.43822035 7.63631559,1.06113155 C7.92642706,0.68404274 8.37275241,0.495498336 8.9641335,0.495498336 C9.55551459,0.495498336 10.0018399,0.68404274 10.2919514,1.06113155 C10.5820629,1.43822035 10.7382768,1.94100543 10.7382768,2.57996146 C10.7382768,3.20844281 10.593221,3.72170257 10.2919514,4.09879138 C10.0018399,4.4654055 9.56667273,4.66442459 8.9641335,4.66442459 Z M8.33927801,1.60581538 C8.20538041,1.84673323 8.13843161,2.18192328 8.13843161,2.57996146 C8.13843161,2.98847434 8.20538041,3.3131897 8.33927801,3.55410755 C8.47317562,3.7950254 8.68518016,3.92072167 8.97529164,3.92072167 C9.26540312,3.92072167 9.47740766,3.7950254 9.61130526,3.55410755 C9.74520287,3.3131897 9.81215167,2.97799965 9.81215167,2.57996146 C9.81215167,2.17144859 9.74520287,1.84673323 9.61130526,1.60581538 C9.47740766,1.36489753 9.26540312,1.23920126 8.97529164,1.23920126 C8.68518016,1.23920126 8.47317562,1.35442284 8.33927801,1.60581538 Z" />
<polygon fill="#F9B54C" points="11.439 .579 13.179 .579 13.179 4.612 12.253 4.612 12.253 1.344 11.439 1.344 11.439 .579" />
<path fill="#324A5E" d="M15.6541237,4.66442459 C15.0627426,4.66442459 14.6164173,4.47588019 14.3263058,4.09879138 C14.0361943,3.72170257 13.8799805,3.2189175 13.8799805,2.57996146 C13.8799805,1.95148012 14.0250362,1.43822035 14.3263058,1.06113155 C14.6275754,0.68404274 15.0627426,0.495498336 15.6541237,0.495498336 C16.2455048,0.495498336 16.6918302,0.68404274 16.9819417,1.06113155 C17.2720531,1.43822035 17.428267,1.94100543 17.428267,2.57996146 C17.428267,3.20844281 17.2832113,3.72170257 16.9819417,4.09879138 C16.6918302,4.4654055 16.2455048,4.66442459 15.6541237,4.66442459 Z M15.0181101,1.60581538 C14.8842125,1.84673323 14.8172637,2.18192328 14.8172637,2.57996146 C14.8172637,2.98847434 14.8842125,3.3131897 15.0181101,3.55410755 C15.1520077,3.7950254 15.3640123,3.92072167 15.6541237,3.92072167 C15.9442352,3.92072167 16.1562398,3.7950254 16.2901374,3.55410755 C16.424035,3.3131897 16.4909838,2.97799965 16.4909838,2.57996146 C16.4909838,2.17144859 16.424035,1.84673323 16.2901374,1.60581538 C16.1562398,1.36489753 15.9442352,1.23920126 15.6541237,1.23920126 C15.3640123,1.23920126 15.1520077,1.35442284 15.0181101,1.60581538 Z" />
<polygon fill="#324A5E" points="18.129 .579 19.869 .579 19.869 4.612 18.943 4.612 18.943 1.344 18.129 1.344" />
<path fill="#54C0EB" d="M22.344114,4.66442459 C21.7527329,4.66442459 21.3064075,4.47588019 21.0162961,4.09879138 C20.7261846,3.72170257 20.5699707,3.2189175 20.5699707,2.57996146 C20.5699707,1.95148012 20.7150264,1.43822035 21.0162961,1.06113155 C21.3175657,0.68404274 21.7527329,0.495498336 22.344114,0.495498336 C22.9354951,0.495498336 23.3818204,0.68404274 23.6719319,1.06113155 C23.9620434,1.43822035 24.1182572,1.94100543 24.1182572,2.57996146 C24.1182572,3.20844281 23.9732015,3.72170257 23.6719319,4.09879138 C23.3706623,4.47588019 22.9354951,4.66442459 22.344114,4.66442459 Z M21.7081003,1.60581538 C21.5742027,1.84673323 21.5072539,2.18192328 21.5072539,2.57996146 C21.5072539,2.98847434 21.5742027,3.3131897 21.7081003,3.55410755 C21.841998,3.7950254 22.0540025,3.92072167 22.344114,3.92072167 C22.6342255,3.92072167 22.84623,3.7950254 22.9801276,3.55410755 C23.1140252,3.3131897 23.180974,2.97799965 23.180974,2.57996146 C23.180974,2.17144859 23.1140252,1.84673323 22.9801276,1.60581538 C22.84623,1.36489753 22.6342255,1.23920126 22.344114,1.23920126 C22.0540025,1.23920126 21.841998,1.35442284 21.7081003,1.60581538 Z" />
<polygon fill="#324A5E" points="24.819 .579 26.559 .579 26.559 4.612 25.633 4.612 25.633 1.344 24.819 1.344" />
<path fill="#2C9984" d="M29.0341042,4.75533368 C28.4427231,4.75533368 27.9963978,4.56678928 27.7062863,4.18970047 C27.4161748,3.81261167 27.2599609,3.30982659 27.2599609,2.67087056 C27.2599609,2.04238921 27.4050167,1.52912944 27.7062863,1.15204064 C27.9963978,0.77495183 28.4427231,0.586407427 29.0341042,0.586407427 C29.6254853,0.586407427 30.0718106,0.77495183 30.3619221,1.15204064 C30.6520336,1.52912944 30.8082475,2.03191452 30.8082475,2.67087056 C30.8082475,3.2993519 30.6631917,3.81261167 30.3619221,4.18970047 C30.0718106,4.55631459 29.6254853,4.75533368 29.0341042,4.75533368 Z M28.3980906,1.69672447 C28.264193,1.93764232 28.1972442,2.27283237 28.1972442,2.67087056 C28.1972442,3.07938343 28.264193,3.40409879 28.3980906,3.64501664 C28.5319882,3.88593449 28.7439927,4.01163076 29.0341042,4.01163076 C29.3242157,4.01163076 29.5362202,3.88593449 29.6701178,3.64501664 C29.8040154,3.40409879 29.8709642,3.06890874 29.8709642,2.67087056 C29.8709642,2.26235768 29.8040154,1.93764232 29.6701178,1.69672447 C29.5362202,1.45580662 29.3242157,1.33011035 29.0341042,1.33011035 C28.7439927,1.33011035 28.5319882,1.44533193 28.3980906,1.69672447 Z" />
<polygon fill="#324A5E" points="31.509 .67 33.249 .67 33.249 4.703 32.323 4.703 32.323 1.435 31.509 1.435 31.509 .67" />
<path fill="#ACB3BA" d="M35.7240944,4.75533368 C35.1327134,4.75533368 34.686388,4.56678928 34.3962765,4.18970047 C34.106165,3.81261167 33.9499512,3.30982659 33.9499512,2.67087056 C33.9499512,2.04238921 34.0950069,1.52912944 34.3962765,1.15204064 C34.686388,0.77495183 35.1327134,0.586407427 35.7240944,0.586407427 C36.3154755,0.586407427 36.7618009,0.77495183 37.0519124,1.15204064 C37.3420238,1.52912944 37.4982377,2.03191452 37.4982377,2.67087056 C37.4982377,3.2993519 37.353182,3.81261167 37.0519124,4.18970047 C36.7618009,4.55631459 36.3266337,4.75533368 35.7240944,4.75533368 Z M35.099239,1.69672447 C34.9653413,1.93764232 34.8983925,2.27283237 34.8983925,2.67087056 C34.8983925,3.07938343 34.9653413,3.40409879 35.099239,3.64501664 C35.2331366,3.88593449 35.4451411,4.01163076 35.7352526,4.01163076 C36.0253641,4.01163076 36.2373686,3.88593449 36.3712662,3.64501664 C36.5051638,3.40409879 36.5721126,3.06890874 36.5721126,2.67087056 C36.5721126,2.26235768 36.5051638,1.93764232 36.3712662,1.69672447 C36.2373686,1.45580662 36.0253641,1.33011035 35.7352526,1.33011035 C35.4451411,1.33011035 35.2331366,1.44533193 35.099239,1.69672447 Z" />
</g>
<g transform="translate(0 19)">
<path fill="#ACB3BA" d="M2.27414327,4.21082501 C1.68276218,4.21082501 1.23643683,4.02228061 0.946325351,3.6451918 C0.656213873,3.268103 0.5,2.76531792 0.5,2.12636188 C0.5,1.49788054 0.645055739,0.984620774 0.946325351,0.607531967 C1.23643683,0.23044316 1.68276218,0.0418987563 2.27414327,0.0418987563 C2.86552436,0.0418987563 3.31184971,0.23044316 3.60196119,0.607531967 C3.89207267,0.984620774 4.04828654,1.48740585 4.04828654,2.12636188 C4.04828654,2.75484323 3.9032308,3.268103 3.60196119,3.6451918 C3.31184971,4.02228061 2.86552436,4.21082501 2.27414327,4.21082501 Z M1.63812964,1.16269049 C1.50423204,1.40360834 1.43728324,1.73879839 1.43728324,2.13683657 C1.43728324,2.54534945 1.50423204,2.87006481 1.63812964,3.11098266 C1.77202725,3.35190051 1.98403179,3.47759678 2.27414327,3.47759678 C2.56425475,3.47759678 2.77625929,3.35190051 2.9101569,3.11098266 C3.0440545,2.87006481 3.1110033,2.53487476 3.1110033,2.13683657 C3.1110033,1.7283237 3.0440545,1.40360834 2.9101569,1.16269049 C2.77625929,0.92177264 2.56425475,0.796076371 2.27414327,0.796076371 C1.98403179,0.785601682 1.77202725,0.911297951 1.63812964,1.16269049 Z" />
<polygon fill="#324A5E" points="4.749 .136 6.489 .136 6.489 4.169 5.563 4.169 5.563 .901 4.749 .901 4.749 .136" />
<path fill="#4CDBC4" d="M8.9641335,4.21082501 C8.37275241,4.21082501 7.92642706,4.02228061 7.63631559,3.6451918 C7.34620411,3.268103 7.18999023,2.76531792 7.18999023,2.12636188 C7.18999023,1.49788054 7.33504597,0.984620774 7.63631559,0.607531967 C7.92642706,0.23044316 8.37275241,0.0418987563 8.9641335,0.0418987563 C9.55551459,0.0418987563 10.0018399,0.23044316 10.2919514,0.607531967 C10.5820629,0.984620774 10.7382768,1.48740585 10.7382768,2.12636188 C10.7382768,2.75484323 10.593221,3.268103 10.2919514,3.6451918 C10.0018399,4.02228061 9.56667273,4.21082501 8.9641335,4.21082501 Z M8.33927801,1.16269049 C8.20538041,1.40360834 8.13843161,1.73879839 8.13843161,2.13683657 C8.13843161,2.54534945 8.20538041,2.87006481 8.33927801,3.11098266 C8.47317562,3.35190051 8.68518016,3.47759678 8.97529164,3.47759678 C9.26540312,3.47759678 9.47740766,3.35190051 9.61130526,3.11098266 C9.74520287,2.87006481 9.81215167,2.53487476 9.81215167,2.13683657 C9.81215167,1.7283237 9.74520287,1.40360834 9.61130526,1.16269049 C9.47740766,0.92177264 9.26540312,0.796076371 8.97529164,0.796076371 C8.68518016,0.785601682 8.47317562,0.911297951 8.33927801,1.16269049 Z" />
<polygon fill="#324A5E" points="11.439 .136 13.179 .136 13.179 4.169 12.253 4.169 12.253 .901 11.439 .901 11.439 .136" />
<path fill="#2C9984" d="M15.6541237,4.21082501 C15.0627426,4.21082501 14.6164173,4.02228061 14.3263058,3.6451918 C14.0361943,3.268103 13.8799805,2.76531792 13.8799805,2.12636188 C13.8799805,1.49788054 14.0250362,0.984620774 14.3263058,0.607531967 C14.6275754,0.23044316 15.0627426,0.0418987563 15.6541237,0.0418987563 C16.2455048,0.0418987563 16.6918302,0.23044316 16.9819417,0.607531967 C17.2720531,0.984620774 17.428267,1.48740585 17.428267,2.12636188 C17.428267,2.75484323 17.2832113,3.268103 16.9819417,3.6451918 C16.6918302,4.02228061 16.2455048,4.21082501 15.6541237,4.21082501 Z M15.0181101,1.16269049 C14.8842125,1.40360834 14.8172637,1.73879839 14.8172637,2.13683657 C14.8172637,2.54534945 14.8842125,2.87006481 15.0181101,3.11098266 C15.1520077,3.35190051 15.3640123,3.47759678 15.6541237,3.47759678 C15.9442352,3.47759678 16.1562398,3.35190051 16.2901374,3.11098266 C16.424035,2.87006481 16.4909838,2.53487476 16.4909838,2.13683657 C16.4909838,1.7283237 16.424035,1.40360834 16.2901374,1.16269049 C16.1562398,0.92177264 15.9442352,0.796076371 15.6541237,0.796076371 C15.3640123,0.785601682 15.1520077,0.911297951 15.0181101,1.16269049 Z" />
<polygon fill="#324A5E" points="18.129 .136 19.869 .136 19.869 4.169 18.943 4.169 18.943 .901 18.129 .901" />
<path fill="#F1543F" d="M22.344114,4.21082501 C21.7527329,4.21082501 21.3064075,4.02228061 21.0162961,3.6451918 C20.7261846,3.268103 20.5699707,2.76531792 20.5699707,2.12636188 C20.5699707,1.49788054 20.7150264,0.984620774 21.0162961,0.607531967 C21.3175657,0.23044316 21.7527329,0.0418987563 22.344114,0.0418987563 C22.9354951,0.0418987563 23.3818204,0.23044316 23.6719319,0.607531967 C23.9620434,0.984620774 24.1182572,1.48740585 24.1182572,2.12636188 C24.1182572,2.75484323 23.9732015,3.268103 23.6719319,3.6451918 C23.3706623,4.02228061 22.9354951,4.21082501 22.344114,4.21082501 Z M21.7081003,1.16269049 C21.5742027,1.40360834 21.5072539,1.73879839 21.5072539,2.13683657 C21.5072539,2.54534945 21.5742027,2.87006481 21.7081003,3.11098266 C21.841998,3.35190051 22.0540025,3.47759678 22.344114,3.47759678 C22.6342255,3.47759678 22.84623,3.35190051 22.9801276,3.11098266 C23.1140252,2.87006481 23.180974,2.53487476 23.180974,2.13683657 C23.180974,1.7283237 23.1140252,1.40360834 22.9801276,1.16269049 C22.84623,0.92177264 22.6342255,0.796076371 22.344114,0.796076371 C22.0540025,0.785601682 21.841998,0.911297951 21.7081003,1.16269049 Z" />
<polygon fill="#324A5E" points="24.819 .136 26.559 .136 26.559 4.169 25.633 4.169 25.633 .901 24.819 .901" />
<path fill="#ACB3BA" d="M29.0341042,4.21082501 C28.4427231,4.21082501 27.9963978,4.02228061 27.7062863,3.6451918 C27.4161748,3.268103 27.2599609,2.76531792 27.2599609,2.12636188 C27.2599609,1.49788054 27.4050167,0.984620774 27.7062863,0.607531967 C27.9963978,0.23044316 28.4427231,0.0418987563 29.0341042,0.0418987563 C29.6254853,0.0418987563 30.0718106,0.23044316 30.3619221,0.607531967 C30.6520336,0.984620774 30.8082475,1.48740585 30.8082475,2.12636188 C30.8082475,2.75484323 30.6631917,3.268103 30.3619221,3.6451918 C30.0718106,4.02228061 29.6254853,4.21082501 29.0341042,4.21082501 Z M28.3980906,1.16269049 C28.264193,1.40360834 28.1972442,1.73879839 28.1972442,2.13683657 C28.1972442,2.54534945 28.264193,2.87006481 28.3980906,3.11098266 C28.5319882,3.35190051 28.7439927,3.47759678 29.0341042,3.47759678 C29.3242157,3.47759678 29.5362202,3.35190051 29.6701178,3.11098266 C29.8040154,2.87006481 29.8709642,2.53487476 29.8709642,2.13683657 C29.8709642,1.7283237 29.8040154,1.40360834 29.6701178,1.16269049 C29.5362202,0.92177264 29.3242157,0.796076371 29.0341042,0.796076371 C28.7439927,0.785601682 28.5319882,0.911297951 28.3980906,1.16269049 Z" />
<polygon fill="#324A5E" points="31.509 .136 33.249 .136 33.249 4.169 32.323 4.169 32.323 .901 31.509 .901 31.509 .136" />
<path fill="#4CDBC4" d="M35.7240944,4.16892626 C35.1327134,4.16892626 34.686388,3.98038185 34.3962765,3.60329305 C34.106165,3.22620424 33.9499512,2.72341916 33.9499512,2.08446313 C33.9499512,1.45598178 34.0950069,0.942722018 34.3962765,0.565633211 C34.686388,0.188544404 35.1327134,0 35.7240944,0 C36.3154755,0 36.7618009,0.188544404 37.0519124,0.565633211 C37.3420238,0.942722018 37.4982377,1.44550709 37.4982377,2.08446313 C37.4982377,2.71294447 37.353182,3.22620424 37.0519124,3.60329305 C36.7618009,3.98038185 36.3266337,4.16892626 35.7240944,4.16892626 Z M35.099239,1.12079173 C34.9653413,1.36170958 34.8983925,1.69689963 34.8983925,2.09493782 C34.8983925,2.50345069 34.9653413,2.82816605 35.099239,3.0690839 C35.2331366,3.31000175 35.4451411,3.43569802 35.7352526,3.43569802 C36.0253641,3.43569802 36.2373686,3.31000175 36.3712662,3.0690839 C36.5051638,2.82816605 36.5721126,2.492976 36.5721126,2.09493782 C36.5721126,1.68642494 36.5051638,1.36170958 36.3712662,1.12079173 C36.2373686,0.879873883 36.0253641,0.754177614 35.7352526,0.754177614 C35.4451411,0.743702925 35.2331366,0.869399194 35.099239,1.12079173 Z" />
</g>
</g>
<g fill-rule="nonzero" transform="translate(14 5)">
<path fill="#00A690" d="M4.70920304,4.65200583 C6.1219493,3.22283229 7.88780883,2.50839381 9.65366835,2.50839381 L9.65366835,4.29478659 L15.4809901,1.7045393 C11.5960112,-0.885707983 6.3868209,-0.528488741 2.94334352,2.95502908 C-0.500133868,6.43854689 -0.853247141,11.7084575 1.70722719,15.6384623 L3.47308672,13.8520695 C1.88385711,10.8150387 2.23697039,7.06356935 4.70920304,4.65200583 Z" />
<path fill="#EF5350" d="M15.2161185,15.2810948 C13.8033723,16.7102683 12.0375128,17.4247068 10.2716532,17.4247068 L10.2716532,15.638314 L4.44433144,18.2285613 C8.32931035,20.8188086 13.5385007,20.4615893 16.9819781,16.9780715 C20.4254555,13.4945537 20.7785687,8.2246431 18.2180944,4.2946383 L16.4522349,6.08103108 C18.0414645,9.11791363 17.6883512,12.869383 15.2161185,15.2810948 Z" />
</g>
<path fill="#FFF" fill-opacity=".1" fill-rule="nonzero" d="M24,36 L24,0 L45.1796398,0 C45.6327122,0 46,0.497573405 46,1.09281171 L46,29 L48,29 L48,34 L47,34 L48,34 L45.1580247,36 L24,36 Z" />
</g>
</g>
</svg>
</h4>
<ul class="c-profile-stats">
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon">
<use xlink:href="#replies"></use>
</svg><span class="c-profile-stat-title">Posts</span>
<small class="c-profile-stat-value">57,989</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon">
<use xlink:href="#time"></use>
</svg><span class="c-profile-stat-title">Joined</span>
<small class="c-profile-stat-value">
<time>Mar 2014</time>
</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon">
<use xlink:href="#thumbs-up"></use>
</svg><span class="c-profile-stat-title">Rating</span>
<small class="c-profile-stat-value"><span class="c-profile-rating-bad">- 25643</span></small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon">
<use xlink:href="#place"></use>
</svg><span class="c-profile-stat-title">Location</span>
<small class="c-profile-stat-value">Wanted</small>
</h5>
</li>
</ul>
</div>
</div> -->
<div class="o-container">
<div class="c-profile" data-container="profile">
<a class="c-profile-action" href="" data-toggle="menu" data-placement="top" data-tooltip="true" title="lang.contact_menu">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:comment-processing-outline" data-inline="false" aria-hidden="false"></span>
</a>
<div class="c-menu-container t-menu-container" data-container="menu">
<ul class="c-menu c-profile-menu t-menu t-profile-menu">
<li class="c-menu-item t-menu-item">
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_pm">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:comment-account-outline" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_pm</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_email">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:at" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_email</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_skype">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:skype" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_skype</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_website">
<svg class="o-icon c-profile-menu-icon">
<use xlink:href="#website"></use>
</svg>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_website</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_facebook">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:facebook-box" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_facebook</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_twitter">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:twitter" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_twitter</span>
</a>
<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="lang.contact_youtube">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:youtube" data-inline="false" aria-hidden="false"></span>
<span class="c-menu-text t-topic-text u-sr-only">lang.contact_youtube</span>
</a>
</li>
</ul>
</div>
<a class="c-profile-action c-profile-close" href="" data-tooltip="true" data-close="true" title="lang.profile_close">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:close" data-inline="false" aria-hidden="false"></span>
</a>
<div class="o-avatar-wrap">
<a class="o-avatar-rate-good" href="" data-tooltip="true" title="lang.profile_rating_up">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:thumbs-up-outline" data-inline="false" aria-hidden="false"></span>
</a>
<a class="" href="item.url">
<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/10946388?v=4&s=460" alt="User Avatar">
</a>
<a class="o-avatar-rate-bad" href="" data-tooltip="true" title="lang.profile_rating_down">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:thumbs-down-outline" data-inline="false" aria-hidden="false"></span>
</a>
<span class="o-avatar-online" data-tooltip="true" title="lang.profile_online"></span>
</div>
<h4 class="c-profile-meta">
<a class="c-profile-user" href="item.url" style="color: #00BFA5;">Chita</a>
<small class="c-profile-user-title">Development Team Member</small>
<a class="c-group-link" href="item.group_url">
<svg class="c-profile-group" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 37">
<g fill="none" fill-rule="evenodd" transform="translate(0 .952)">
<path stroke="#00A690" d="M0.5,6.0042577 L0.5,29.9957423 C0.5,31.9336232 2.06519224,33.5 3.99864819,33.5 L241.061804,33.5 C242.989482,33.5 244.560452,31.9287119 244.560452,29.9957423 L244.560452,6.0042577 C244.560452,4.06637684 242.99526,2.5 241.061804,2.5 L3.99864819,2.5 C2.07097099,2.5 0.5,4.07128814 0.5,6.0042577 Z" />
<text fill="#00A690" font-family="HelveticaNeueLTStd-Md, Helvetica Neue LT Std" font-size="17" font-weight="500" letter-spacing=".044">
<tspan x="8" y="24.048">DEVELOPMENT TEAM</tspan>
</text>
<g transform="translate(223)">
<rect width="48" height="5" y="29" fill="#78909C" fill-rule="nonzero" />
<polygon fill="#546E7A" fill-rule="nonzero" points="2.842 36 45.158 36 48 34 0 34" />
<rect width="12" height="1" x="18" y="31" fill="#546E7A" fill-rule="nonzero" />
<path fill="#546E7A" d="M46,29 L46,0.905472561 C46,0.412275107 45.6327122,0 45.1796398,0 L2.82036024,0 C2.36716666,0 2,0.405393874 2,0.905472561 L2,29 L46,29 L46,29 Z" />
<rect width="38" height="24" x="5" y="3" fill="#ECEFF1" />
<g fill-rule="nonzero" transform="translate(5 3.35)" style="mix-blend-mode:color-burn">
<path fill="#ACB3BA" d="M2.27414327,4.21082501 C1.68276218,4.21082501 1.23643683,4.02228061 0.946325351,3.6451918 C0.656213873,3.268103 0.5,2.76531792 0.5,2.12636188 C0.5,1.49788054 0.645055739,0.984620774 0.946325351,0.607531967 C1.23643683,0.23044316 1.68276218,0.0418987563 2.27414327,0.0418987563 C2.86552436,0.0418987563 3.31184971,0.23044316 3.60196119,0.607531967 C3.89207267,0.984620774 4.04828654,1.48740585 4.04828654,2.12636188 C4.04828654,2.75484323 3.9032308,3.268103 3.60196119,3.6451918 C3.31184971,4.02228061 2.86552436,4.21082501 2.27414327,4.21082501 Z M1.63812964,1.16269049 C1.50423204,1.40360834 1.43728324,1.73879839 1.43728324,2.13683657 C1.43728324,2.54534945 1.50423204,2.87006481 1.63812964,3.11098266 C1.77202725,3.35190051 1.98403179,3.47759678 2.27414327,3.47759678 C2.56425475,3.47759678 2.77625929,3.35190051 2.9101569,3.11098266 C3.0440545,2.87006481 3.1110033,2.53487476 3.1110033,2.13683657 C3.1110033,1.7283237 3.0440545,1.40360834 2.9101569,1.16269049 C2.77625929,0.92177264 2.56425475,0.796076371 2.27414327,0.796076371 C1.98403179,0.785601682 1.77202725,0.911297951 1.63812964,1.16269049 Z" />
<polygon fill="#324A5E" points="4.749 .136 6.489 .136 6.489 4.169 5.563 4.169 5.563 .901 4.749 .901 4.749 .136" />
<path fill="#4CDBC4" d="M8.9641335,4.21082501 C8.37275241,4.21082501 7.92642706,4.02228061 7.63631559,3.6451918 C7.34620411,3.268103 7.18999023,2.76531792 7.18999023,2.12636188 C7.18999023,1.49788054 7.33504597,0.984620774 7.63631559,0.607531967 C7.92642706,0.23044316 8.37275241,0.0418987563 8.9641335,0.0418987563 C9.55551459,0.0418987563 10.0018399,0.23044316 10.2919514,0.607531967 C10.5820629,0.984620774 10.7382768,1.48740585 10.7382768,2.12636188 C10.7382768,2.75484323 10.593221,3.268103 10.2919514,3.6451918 C10.0018399,4.02228061 9.56667273,4.21082501 8.9641335,4.21082501 Z M8.33927801,1.16269049 C8.20538041,1.40360834 8.13843161,1.73879839 8.13843161,2.13683657 C8.13843161,2.54534945 8.20538041,2.87006481 8.33927801,3.11098266 C8.47317562,3.35190051 8.68518016,3.47759678 8.97529164,3.47759678 C9.26540312,3.47759678 9.47740766,3.35190051 9.61130526,3.11098266 C9.74520287,2.87006481 9.81215167,2.53487476 9.81215167,2.13683657 C9.81215167,1.7283237 9.74520287,1.40360834 9.61130526,1.16269049 C9.47740766,0.92177264 9.26540312,0.796076371 8.97529164,0.796076371 C8.68518016,0.785601682 8.47317562,0.911297951 8.33927801,1.16269049 Z" />
<polygon fill="#324A5E" points="11.439 .136 13.179 .136 13.179 4.169 12.253 4.169 12.253 .901 11.439 .901 11.439 .136" />
<path fill="#2C9984" d="M15.6541237,4.21082501 C15.0627426,4.21082501 14.6164173,4.02228061 14.3263058,3.6451918 C14.0361943,3.268103 13.8799805,2.76531792 13.8799805,2.12636188 C13.8799805,1.49788054 14.0250362,0.984620774 14.3263058,0.607531967 C14.6275754,0.23044316 15.0627426,0.0418987563 15.6541237,0.0418987563 C16.2455048,0.0418987563 16.6918302,0.23044316 16.9819417,0.607531967 C17.2720531,0.984620774 17.428267,1.48740585 17.428267,2.12636188 C17.428267,2.75484323 17.2832113,3.268103 16.9819417,3.6451918 C16.6918302,4.02228061 16.2455048,4.21082501 15.6541237,4.21082501 Z M15.0181101,1.16269049 C14.8842125,1.40360834 14.8172637,1.73879839 14.8172637,2.13683657 C14.8172637,2.54534945 14.8842125,2.87006481 15.0181101,3.11098266 C15.1520077,3.35190051 15.3640123,3.47759678 15.6541237,3.47759678 C15.9442352,3.47759678 16.1562398,3.35190051 16.2901374,3.11098266 C16.424035,2.87006481 16.4909838,2.53487476 16.4909838,2.13683657 C16.4909838,1.7283237 16.424035,1.40360834 16.2901374,1.16269049 C16.1562398,0.92177264 15.9442352,0.796076371 15.6541237,0.796076371 C15.3640123,0.785601682 15.1520077,0.911297951 15.0181101,1.16269049 Z" />
<polygon fill="#324A5E" points="18.129 .136 19.869 .136 19.869 4.169 18.943 4.169 18.943 .901 18.129 .901" />
<path fill="#F1543F" d="M22.344114,4.21082501 C21.7527329,4.21082501 21.3064075,4.02228061 21.0162961,3.6451918 C20.7261846,3.268103 20.5699707,2.76531792 20.5699707,2.12636188 C20.5699707,1.49788054 20.7150264,0.984620774 21.0162961,0.607531967 C21.3175657,0.23044316 21.7527329,0.0418987563 22.344114,0.0418987563 C22.9354951,0.0418987563 23.3818204,0.23044316 23.6719319,0.607531967 C23.9620434,0.984620774 24.1182572,1.48740585 24.1182572,2.12636188 C24.1182572,2.75484323 23.9732015,3.268103 23.6719319,3.6451918 C23.3706623,4.02228061 22.9354951,4.21082501 22.344114,4.21082501 Z M21.7081003,1.16269049 C21.5742027,1.40360834 21.5072539,1.73879839 21.5072539,2.13683657 C21.5072539,2.54534945 21.5742027,2.87006481 21.7081003,3.11098266 C21.841998,3.35190051 22.0540025,3.47759678 22.344114,3.47759678 C22.6342255,3.47759678 22.84623,3.35190051 22.9801276,3.11098266 C23.1140252,2.87006481 23.180974,2.53487476 23.180974,2.13683657 C23.180974,1.7283237 23.1140252,1.40360834 22.9801276,1.16269049 C22.84623,0.92177264 22.6342255,0.796076371 22.344114,0.796076371 C22.0540025,0.785601682 21.841998,0.911297951 21.7081003,1.16269049 Z" />
<polygon fill="#324A5E" points="24.819 .136 26.559 .136 26.559 4.169 25.633 4.169 25.633 .901 24.819 .901" />
<path fill="#ACB3BA" d="M29.0341042,4.21082501 C28.4427231,4.21082501 27.9963978,4.02228061 27.7062863,3.6451918 C27.4161748,3.268103 27.2599609,2.76531792 27.2599609,2.12636188 C27.2599609,1.49788054 27.4050167,0.984620774 27.7062863,0.607531967 C27.9963978,0.23044316 28.4427231,0.0418987563 29.0341042,0.0418987563 C29.6254853,0.0418987563 30.0718106,0.23044316 30.3619221,0.607531967 C30.6520336,0.984620774 30.8082475,1.48740585 30.8082475,2.12636188 C30.8082475,2.75484323 30.6631917,3.268103 30.3619221,3.6451918 C30.0718106,4.02228061 29.6254853,4.21082501 29.0341042,4.21082501 Z M28.3980906,1.16269049 C28.264193,1.40360834 28.1972442,1.73879839 28.1972442,2.13683657 C28.1972442,2.54534945 28.264193,2.87006481 28.3980906,3.11098266 C28.5319882,3.35190051 28.7439927,3.47759678 29.0341042,3.47759678 C29.3242157,3.47759678 29.5362202,3.35190051 29.6701178,3.11098266 C29.8040154,2.87006481 29.8709642,2.53487476 29.8709642,2.13683657 C29.8709642,1.7283237 29.8040154,1.40360834 29.6701178,1.16269049 C29.5362202,0.92177264 29.3242157,0.796076371 29.0341042,0.796076371 C28.7439927,0.785601682 28.5319882,0.911297951 28.3980906,1.16269049 Z" />
<polygon fill="#324A5E" points="31.509 .136 33.249 .136 33.249 4.169 32.323 4.169 32.323 .901 31.509 .901 31.509 .136" />
<path fill="#4CDBC4" d="M35.7240944,4.21082501 C35.1327134,4.21082501 34.686388,4.02228061 34.3962765,3.6451918 C34.106165,3.268103 33.9499512,2.76531792 33.9499512,2.12636188 C33.9499512,1.49788054 34.0950069,0.984620774 34.3962765,0.607531967 C34.686388,0.23044316 35.1327134,0.0418987563 35.7240944,0.0418987563 C36.3154755,0.0418987563 36.7618009,0.23044316 37.0519124,0.607531967 C37.3420238,0.984620774 37.4982377,1.48740585 37.4982377,2.12636188 C37.4982377,2.75484323 37.353182,3.268103 37.0519124,3.6451918 C36.7618009,4.02228061 36.3266337,4.21082501 35.7240944,4.21082501 Z M35.099239,1.16269049 C34.9653413,1.40360834 34.8983925,1.73879839 34.8983925,2.13683657 C34.8983925,2.54534945 34.9653413,2.87006481 35.099239,3.11098266 C35.2331366,3.35190051 35.4451411,3.47759678 35.7352526,3.47759678 C36.0253641,3.47759678 36.2373686,3.35190051 36.3712662,3.11098266 C36.5051638,2.87006481 36.5721126,2.53487476 36.5721126,2.13683657 C36.5721126,1.7283237 36.5051638,1.40360834 36.3712662,1.16269049 C36.2373686,0.92177264 36.0253641,0.796076371 35.7352526,0.796076371 C35.4451411,0.785601682 35.2331366,0.911297951 35.099239,1.16269049 Z" />
<g transform="translate(0 6)">
<path fill="#324A5E" d="M2.27414327,4.8315642 C1.68276218,4.8315642 1.23643683,4.64301979 0.946325351,4.26593099 C0.656213873,3.88884218 0.5,3.3860571 0.5,2.74710107 C0.5,2.11861972 0.645055739,1.60535996 0.946325351,1.22827115 C1.23643683,0.851182344 1.68276218,0.66263794 2.27414327,0.66263794 C2.86552436,0.66263794 3.31184971,0.851182344 3.60196119,1.22827115 C3.89207267,1.60535996 4.04828654,2.10814503 4.04828654,2.74710107 C4.04828654,3.37558241 3.9032308,3.88884218 3.60196119,4.26593099 C3.31184971,4.64301979 2.86552436,4.8315642 2.27414327,4.8315642 Z M1.63812964,1.77295498 C1.50423204,2.01387283 1.43728324,2.34906288 1.43728324,2.74710107 C1.43728324,3.15561394 1.50423204,3.4803293 1.63812964,3.72124715 C1.77202725,3.962165 1.98403179,4.08786127 2.27414327,4.08786127 C2.56425475,4.08786127 2.77625929,3.962165 2.9101569,3.72124715 C3.0440545,3.4803293 3.1110033,3.14513925 3.1110033,2.74710107 C3.1110033,2.33858819 3.0440545,2.01387283 2.9101569,1.77295498 C2.77625929,1.53203713 2.56425475,1.40634087 2.27414327,1.40634087 C1.98403179,1.40634087 1.77202725,1.53203713 1.63812964,1.77295498 Z" />
<polygon fill="#324A5E" points="4.749 .757 6.489 .757 6.489 4.79 5.563 4.79 5.563 1.522 4.749 1.522 4.749 .757" />
<path fill="#F1543F" d="M8.9641335,4.8315642 C8.37275241,4.8315642 7.92642706,4.64301979 7.63631559,4.26593099 C7.34620411,3.88884218 7.18999023,3.3860571 7.18999023,2.74710107 C7.18999023,2.11861972 7.33504597,1.60535996 7.63631559,1.22827115 C7.92642706,0.851182344 8.37275241,0.66263794 8.9641335,0.66263794 C9.55551459,0.66263794 10.0018399,0.851182344 10.2919514,1.22827115 C10.5820629,1.60535996 10.7382768,2.10814503 10.7382768,2.74710107 C10.7382768,3.37558241 10.593221,3.88884218 10.2919514,4.26593099 C10.0018399,4.64301979 9.56667273,4.8315642 8.9641335,4.8315642 Z M8.33927801,1.77295498 C8.20538041,2.01387283 8.13843161,2.34906288 8.13843161,2.74710107 C8.13843161,3.15561394 8.20538041,3.4803293 8.33927801,3.72124715 C8.47317562,3.962165 8.68518016,4.08786127 8.97529164,4.08786127 C9.26540312,4.08786127 9.47740766,3.962165 9.61130526,3.72124715 C9.74520287,3.4803293 9.81215167,3.14513925 9.81215167,2.74710107 C9.81215167,2.33858819 9.74520287,2.01387283 9.61130526,1.77295498 C9.47740766,1.53203713 9.26540312,1.40634087 8.97529164,1.40634087 C8.68518016,1.40634087 8.47317562,1.53203713 8.33927801,1.77295498 Z" />
<polygon fill="#54C0EB" points="11.439 .757 13.179 .757 13.179 4.79 12.253 4.79 12.253 1.522 11.439 1.522 11.439 .757" />
<path fill="#324A5E" d="M15.6541237,4.8315642 C15.0627426,4.8315642 14.6164173,4.64301979 14.3263058,4.26593099 C14.0361943,3.88884218 13.8799805,3.3860571 13.8799805,2.74710107 C13.8799805,2.11861972 14.0250362,1.60535996 14.3263058,1.22827115 C14.6275754,0.851182344 15.0627426,0.66263794 15.6541237,0.66263794 C16.2455048,0.66263794 16.6918302,0.851182344 16.9819417,1.22827115 C17.2720531,1.60535996 17.428267,2.10814503 17.428267,2.74710107 C17.428267,3.37558241 17.2832113,3.88884218 16.9819417,4.26593099 C16.6918302,4.64301979 16.2455048,4.8315642 15.6541237,4.8315642 Z M15.0181101,1.77295498 C14.8842125,2.01387283 14.8172637,2.34906288 14.8172637,2.74710107 C14.8172637,3.15561394 14.8842125,3.4803293 15.0181101,3.72124715 C15.1520077,3.962165 15.3640123,4.08786127 15.6541237,4.08786127 C15.9442352,4.08786127 16.1562398,3.962165 16.2901374,3.72124715 C16.424035,3.4803293 16.4909838,3.14513925 16.4909838,2.74710107 C16.4909838,2.33858819 16.424035,2.01387283 16.2901374,1.77295498 C16.1562398,1.53203713 15.9442352,1.40634087 15.6541237,1.40634087 C15.3640123,1.40634087 15.1520077,1.53203713 15.0181101,1.77295498 Z" />
<polygon fill="#4CDBC4" points="18.129 .757 19.869 .757 19.869 4.79 18.943 4.79 18.943 1.522 18.129 1.522" />
<path fill="#324A5E" d="M22.344114,4.8315642 C21.7527329,4.8315642 21.3064075,4.64301979 21.0162961,4.26593099 C20.7261846,3.88884218 20.5699707,3.3860571 20.5699707,2.74710107 C20.5699707,2.11861972 20.7150264,1.60535996 21.0162961,1.22827115 C21.3175657,0.851182344 21.7527329,0.66263794 22.344114,0.66263794 C22.9354951,0.66263794 23.3818204,0.851182344 23.6719319,1.22827115 C23.9620434,1.60535996 24.1182572,2.10814503 24.1182572,2.74710107 C24.1182572,3.37558241 23.9732015,3.88884218 23.6719319,4.26593099 C23.3706623,4.64301979 22.9354951,4.8315642 22.344114,4.8315642 Z M21.7081003,1.77295498 C21.5742027,2.01387283 21.5072539,2.34906288 21.5072539,2.74710107 C21.5072539,3.15561394 21.5742027,3.4803293 21.7081003,3.72124715 C21.841998,3.962165 22.0540025,4.08786127 22.344114,4.08786127 C22.6342255,4.08786127 22.84623,3.962165 22.9801276,3.72124715 C23.1140252,3.4803293 23.180974,3.14513925 23.180974,2.74710107 C23.180974,2.33858819 23.1140252,2.01387283 22.9801276,1.77295498 C22.84623,1.53203713 22.6342255,1.40634087 22.344114,1.40634087 C22.0540025,1.40634087 21.841998,1.53203713 21.7081003,1.77295498 Z" />
<polygon fill="#F9B54C" points="24.819 .757 26.559 .757 26.559 4.79 25.633 4.79 25.633 1.522 24.819 1.522" />
<path fill="#324A5E" d="M29.0341042,5.01338238 C28.4427231,5.01338238 27.9963978,4.82483798 27.7062863,4.44774917 C27.4161748,4.07066036 27.2599609,3.56787528 27.2599609,2.92891925 C27.2599609,2.30043791 27.4050167,1.78717814 27.7062863,1.41008933 C27.9963978,1.03300053 28.4427231,0.844456122 29.0341042,0.844456122 C29.6254853,0.844456122 30.0718106,1.03300053 30.3619221,1.41008933 C30.6520336,1.78717814 30.8082475,2.28996322 30.8082475,2.92891925 C30.8082475,3.5574006 30.6631917,4.07066036 30.3619221,4.44774917 C30.0718106,4.82483798 29.6254853,5.01338238 29.0341042,5.01338238 Z M28.3980906,1.95477317 C28.264193,2.19569101 28.1972442,2.53088106 28.1972442,2.92891925 C28.1972442,3.33743212 28.264193,3.66214749 28.3980906,3.90306534 C28.5319882,4.14398318 28.7439927,4.26967945 29.0341042,4.26967945 C29.3242157,4.26967945 29.5362202,4.14398318 29.6701178,3.90306534 C29.8040154,3.66214749 29.8709642,3.32695744 29.8709642,2.92891925 C29.8709642,2.52040638 29.8040154,2.19569101 29.6701178,1.95477317 C29.5362202,1.71385532 29.3242157,1.58815905 29.0341042,1.58815905 C28.7439927,1.58815905 28.5319882,1.71385532 28.3980906,1.95477317 Z" />
<polygon fill="#324A5E" points="31.509 .939 33.249 .939 33.249 4.971 32.323 4.971 32.323 1.703 31.509 1.703 31.509 .939" />
<path fill="#F1543F" d="M35.7240944,5.01338238 C35.1327134,5.01338238 34.686388,4.82483798 34.3962765,4.44774917 C34.106165,4.07066036 33.9499512,3.56787528 33.9499512,2.92891925 C33.9499512,2.30043791 34.0950069,1.78717814 34.3962765,1.41008933 C34.686388,1.03300053 35.1327134,0.844456122 35.7240944,0.844456122 C36.3154755,0.844456122 36.7618009,1.03300053 37.0519124,1.41008933 C37.3420238,1.78717814 37.4982377,2.28996322 37.4982377,2.92891925 C37.4982377,3.5574006 37.353182,4.07066036 37.0519124,4.44774917 C36.7618009,4.82483798 36.3266337,5.01338238 35.7240944,5.01338238 Z M35.099239,1.95477317 C34.9653413,2.19569101 34.8983925,2.53088106 34.8983925,2.92891925 C34.8983925,3.33743212 34.9653413,3.66214749 35.099239,3.90306534 C35.2331366,4.14398318 35.4451411,4.26967945 35.7352526,4.26967945 C36.0253641,4.26967945 36.2373686,4.14398318 36.3712662,3.90306534 C36.5051638,3.66214749 36.5721126,3.32695744 36.5721126,2.92891925 C36.5721126,2.52040638 36.5051638,2.19569101 36.3712662,1.95477317 C36.2373686,1.71385532 36.0253641,1.58815905 35.7352526,1.58815905 C35.4451411,1.58815905 35.2331366,1.71385532 35.099239,1.95477317 Z" />
</g>
<g transform="translate(0 13)">
<path fill="#2C9984" d="M2.27414327,4.66442459 C1.68276218,4.66442459 1.23643683,4.47588019 0.946325351,4.09879138 C0.656213873,3.72170257 0.5,3.2189175 0.5,2.57996146 C0.5,1.95148012 0.645055739,1.43822035 0.946325351,1.06113155 C1.23643683,0.68404274 1.68276218,0.495498336 2.27414327,0.495498336 C2.86552436,0.495498336 3.31184971,0.68404274 3.60196119,1.06113155 C3.89207267,1.43822035 4.04828654,1.94100543 4.04828654,2.57996146 C4.04828654,3.20844281 3.9032308,3.72170257 3.60196119,4.09879138 C3.31184971,4.4654055 2.86552436,4.66442459 2.27414327,4.66442459 Z M1.63812964,1.60581538 C1.50423204,1.84673323 1.43728324,2.18192328 1.43728324,2.57996146 C1.43728324,2.98847434 1.50423204,3.3131897 1.63812964,3.55410755 C1.77202725,3.7950254 1.98403179,3.92072167 2.27414327,3.92072167 C2.56425475,3.92072167 2.77625929,3.7950254 2.9101569,3.55410755 C3.0440545,3.3131897 3.1110033,2.97799965 3.1110033,2.57996146 C3.1110033,2.17144859 3.0440545,1.84673323 2.9101569,1.60581538 C2.77625929,1.36489753 2.56425475,1.23920126 2.27414327,1.23920126 C1.98403179,1.23920126 1.77202725,1.35442284 1.63812964,1.60581538 Z" />
<polygon fill="#324A5E" points="4.749 .579 6.489 .579 6.489 4.612 5.563 4.612 5.563 1.344 4.749 1.344 4.749 .579" />
<path fill="#ACB3BA" d="M8.9641335,4.66442459 C8.37275241,4.66442459 7.92642706,4.47588019 7.63631559,4.09879138 C7.34620411,3.72170257 7.18999023,3.2189175 7.18999023,2.57996146 C7.18999023,1.95148012 7.33504597,1.43822035 7.63631559,1.06113155 C7.92642706,0.68404274 8.37275241,0.495498336 8.9641335,0.495498336 C9.55551459,0.495498336 10.0018399,0.68404274 10.2919514,1.06113155 C10.5820629,1.43822035 10.7382768,1.94100543 10.7382768,2.57996146 C10.7382768,3.20844281 10.593221,3.72170257 10.2919514,4.09879138 C10.0018399,4.4654055 9.56667273,4.66442459 8.9641335,4.66442459 Z M8.33927801,1.60581538 C8.20538041,1.84673323 8.13843161,2.18192328 8.13843161,2.57996146 C8.13843161,2.98847434 8.20538041,3.3131897 8.33927801,3.55410755 C8.47317562,3.7950254 8.68518016,3.92072167 8.97529164,3.92072167 C9.26540312,3.92072167 9.47740766,3.7950254 9.61130526,3.55410755 C9.74520287,3.3131897 9.81215167,2.97799965 9.81215167,2.57996146 C9.81215167,2.17144859 9.74520287,1.84673323 9.61130526,1.60581538 C9.47740766,1.36489753 9.26540312,1.23920126 8.97529164,1.23920126 C8.68518016,1.23920126 8.47317562,1.35442284 8.33927801,1.60581538 Z" />
<polygon fill="#F9B54C" points="11.439 .579 13.179 .579 13.179 4.612 12.253 4.612 12.253 1.344 11.439 1.344 11.439 .579" />
<path fill="#324A5E" d="M15.6541237,4.66442459 C15.0627426,4.66442459 14.6164173,4.47588019 14.3263058,4.09879138 C14.0361943,3.72170257 13.8799805,3.2189175 13.8799805,2.57996146 C13.8799805,1.95148012 14.0250362,1.43822035 14.3263058,1.06113155 C14.6275754,0.68404274 15.0627426,0.495498336 15.6541237,0.495498336 C16.2455048,0.495498336 16.6918302,0.68404274 16.9819417,1.06113155 C17.2720531,1.43822035 17.428267,1.94100543 17.428267,2.57996146 C17.428267,3.20844281 17.2832113,3.72170257 16.9819417,4.09879138 C16.6918302,4.4654055 16.2455048,4.66442459 15.6541237,4.66442459 Z M15.0181101,1.60581538 C14.8842125,1.84673323 14.8172637,2.18192328 14.8172637,2.57996146 C14.8172637,2.98847434 14.8842125,3.3131897 15.0181101,3.55410755 C15.1520077,3.7950254 15.3640123,3.92072167 15.6541237,3.92072167 C15.9442352,3.92072167 16.1562398,3.7950254 16.2901374,3.55410755 C16.424035,3.3131897 16.4909838,2.97799965 16.4909838,2.57996146 C16.4909838,2.17144859 16.424035,1.84673323 16.2901374,1.60581538 C16.1562398,1.36489753 15.9442352,1.23920126 15.6541237,1.23920126 C15.3640123,1.23920126 15.1520077,1.35442284 15.0181101,1.60581538 Z" />
<polygon fill="#324A5E" points="18.129 .579 19.869 .579 19.869 4.612 18.943 4.612 18.943 1.344 18.129 1.344" />
<path fill="#54C0EB" d="M22.344114,4.66442459 C21.7527329,4.66442459 21.3064075,4.47588019 21.0162961,4.09879138 C20.7261846,3.72170257 20.5699707,3.2189175 20.5699707,2.57996146 C20.5699707,1.95148012 20.7150264,1.43822035 21.0162961,1.06113155 C21.3175657,0.68404274 21.7527329,0.495498336 22.344114,0.495498336 C22.9354951,0.495498336 23.3818204,0.68404274 23.6719319,1.06113155 C23.9620434,1.43822035 24.1182572,1.94100543 24.1182572,2.57996146 C24.1182572,3.20844281 23.9732015,3.72170257 23.6719319,4.09879138 C23.3706623,4.47588019 22.9354951,4.66442459 22.344114,4.66442459 Z M21.7081003,1.60581538 C21.5742027,1.84673323 21.5072539,2.18192328 21.5072539,2.57996146 C21.5072539,2.98847434 21.5742027,3.3131897 21.7081003,3.55410755 C21.841998,3.7950254 22.0540025,3.92072167 22.344114,3.92072167 C22.6342255,3.92072167 22.84623,3.7950254 22.9801276,3.55410755 C23.1140252,3.3131897 23.180974,2.97799965 23.180974,2.57996146 C23.180974,2.17144859 23.1140252,1.84673323 22.9801276,1.60581538 C22.84623,1.36489753 22.6342255,1.23920126 22.344114,1.23920126 C22.0540025,1.23920126 21.841998,1.35442284 21.7081003,1.60581538 Z" />
<polygon fill="#324A5E" points="24.819 .579 26.559 .579 26.559 4.612 25.633 4.612 25.633 1.344 24.819 1.344" />
<path fill="#2C9984" d="M29.0341042,4.75533368 C28.4427231,4.75533368 27.9963978,4.56678928 27.7062863,4.18970047 C27.4161748,3.81261167 27.2599609,3.30982659 27.2599609,2.67087056 C27.2599609,2.04238921 27.4050167,1.52912944 27.7062863,1.15204064 C27.9963978,0.77495183 28.4427231,0.586407427 29.0341042,0.586407427 C29.6254853,0.586407427 30.0718106,0.77495183 30.3619221,1.15204064 C30.6520336,1.52912944 30.8082475,2.03191452 30.8082475,2.67087056 C30.8082475,3.2993519 30.6631917,3.81261167 30.3619221,4.18970047 C30.0718106,4.55631459 29.6254853,4.75533368 29.0341042,4.75533368 Z M28.3980906,1.69672447 C28.264193,1.93764232 28.1972442,2.27283237 28.1972442,2.67087056 C28.1972442,3.07938343 28.264193,3.40409879 28.3980906,3.64501664 C28.5319882,3.88593449 28.7439927,4.01163076 29.0341042,4.01163076 C29.3242157,4.01163076 29.5362202,3.88593449 29.6701178,3.64501664 C29.8040154,3.40409879 29.8709642,3.06890874 29.8709642,2.67087056 C29.8709642,2.26235768 29.8040154,1.93764232 29.6701178,1.69672447 C29.5362202,1.45580662 29.3242157,1.33011035 29.0341042,1.33011035 C28.7439927,1.33011035 28.5319882,1.44533193 28.3980906,1.69672447 Z" />
<polygon fill="#324A5E" points="31.509 .67 33.249 .67 33.249 4.703 32.323 4.703 32.323 1.435 31.509 1.435 31.509 .67" />
<path fill="#ACB3BA" d="M35.7240944,4.75533368 C35.1327134,4.75533368 34.686388,4.56678928 34.3962765,4.18970047 C34.106165,3.81261167 33.9499512,3.30982659 33.9499512,2.67087056 C33.9499512,2.04238921 34.0950069,1.52912944 34.3962765,1.15204064 C34.686388,0.77495183 35.1327134,0.586407427 35.7240944,0.586407427 C36.3154755,0.586407427 36.7618009,0.77495183 37.0519124,1.15204064 C37.3420238,1.52912944 37.4982377,2.03191452 37.4982377,2.67087056 C37.4982377,3.2993519 37.353182,3.81261167 37.0519124,4.18970047 C36.7618009,4.55631459 36.3266337,4.75533368 35.7240944,4.75533368 Z M35.099239,1.69672447 C34.9653413,1.93764232 34.8983925,2.27283237 34.8983925,2.67087056 C34.8983925,3.07938343 34.9653413,3.40409879 35.099239,3.64501664 C35.2331366,3.88593449 35.4451411,4.01163076 35.7352526,4.01163076 C36.0253641,4.01163076 36.2373686,3.88593449 36.3712662,3.64501664 C36.5051638,3.40409879 36.5721126,3.06890874 36.5721126,2.67087056 C36.5721126,2.26235768 36.5051638,1.93764232 36.3712662,1.69672447 C36.2373686,1.45580662 36.0253641,1.33011035 35.7352526,1.33011035 C35.4451411,1.33011035 35.2331366,1.44533193 35.099239,1.69672447 Z" />
</g>
<g transform="translate(0 19)">
<path fill="#ACB3BA" d="M2.27414327,4.21082501 C1.68276218,4.21082501 1.23643683,4.02228061 0.946325351,3.6451918 C0.656213873,3.268103 0.5,2.76531792 0.5,2.12636188 C0.5,1.49788054 0.645055739,0.984620774 0.946325351,0.607531967 C1.23643683,0.23044316 1.68276218,0.0418987563 2.27414327,0.0418987563 C2.86552436,0.0418987563 3.31184971,0.23044316 3.60196119,0.607531967 C3.89207267,0.984620774 4.04828654,1.48740585 4.04828654,2.12636188 C4.04828654,2.75484323 3.9032308,3.268103 3.60196119,3.6451918 C3.31184971,4.02228061 2.86552436,4.21082501 2.27414327,4.21082501 Z M1.63812964,1.16269049 C1.50423204,1.40360834 1.43728324,1.73879839 1.43728324,2.13683657 C1.43728324,2.54534945 1.50423204,2.87006481 1.63812964,3.11098266 C1.77202725,3.35190051 1.98403179,3.47759678 2.27414327,3.47759678 C2.56425475,3.47759678 2.77625929,3.35190051 2.9101569,3.11098266 C3.0440545,2.87006481 3.1110033,2.53487476 3.1110033,2.13683657 C3.1110033,1.7283237 3.0440545,1.40360834 2.9101569,1.16269049 C2.77625929,0.92177264 2.56425475,0.796076371 2.27414327,0.796076371 C1.98403179,0.785601682 1.77202725,0.911297951 1.63812964,1.16269049 Z" />
<polygon fill="#324A5E" points="4.749 .136 6.489 .136 6.489 4.169 5.563 4.169 5.563 .901 4.749 .901 4.749 .136" />
<path fill="#4CDBC4" d="M8.9641335,4.21082501 C8.37275241,4.21082501 7.92642706,4.02228061 7.63631559,3.6451918 C7.34620411,3.268103 7.18999023,2.76531792 7.18999023,2.12636188 C7.18999023,1.49788054 7.33504597,0.984620774 7.63631559,0.607531967 C7.92642706,0.23044316 8.37275241,0.0418987563 8.9641335,0.0418987563 C9.55551459,0.0418987563 10.0018399,0.23044316 10.2919514,0.607531967 C10.5820629,0.984620774 10.7382768,1.48740585 10.7382768,2.12636188 C10.7382768,2.75484323 10.593221,3.268103 10.2919514,3.6451918 C10.0018399,4.02228061 9.56667273,4.21082501 8.9641335,4.21082501 Z M8.33927801,1.16269049 C8.20538041,1.40360834 8.13843161,1.73879839 8.13843161,2.13683657 C8.13843161,2.54534945 8.20538041,2.87006481 8.33927801,3.11098266 C8.47317562,3.35190051 8.68518016,3.47759678 8.97529164,3.47759678 C9.26540312,3.47759678 9.47740766,3.35190051 9.61130526,3.11098266 C9.74520287,2.87006481 9.81215167,2.53487476 9.81215167,2.13683657 C9.81215167,1.7283237 9.74520287,1.40360834 9.61130526,1.16269049 C9.47740766,0.92177264 9.26540312,0.796076371 8.97529164,0.796076371 C8.68518016,0.785601682 8.47317562,0.911297951 8.33927801,1.16269049 Z" />
<polygon fill="#324A5E" points="11.439 .136 13.179 .136 13.179 4.169 12.253 4.169 12.253 .901 11.439 .901 11.439 .136" />
<path fill="#2C9984" d="M15.6541237,4.21082501 C15.0627426,4.21082501 14.6164173,4.02228061 14.3263058,3.6451918 C14.0361943,3.268103 13.8799805,2.76531792 13.8799805,2.12636188 C13.8799805,1.49788054 14.0250362,0.984620774 14.3263058,0.607531967 C14.6275754,0.23044316 15.0627426,0.0418987563 15.6541237,0.0418987563 C16.2455048,0.0418987563 16.6918302,0.23044316 16.9819417,0.607531967 C17.2720531,0.984620774 17.428267,1.48740585 17.428267,2.12636188 C17.428267,2.75484323 17.2832113,3.268103 16.9819417,3.6451918 C16.6918302,4.02228061 16.2455048,4.21082501 15.6541237,4.21082501 Z M15.0181101,1.16269049 C14.8842125,1.40360834 14.8172637,1.73879839 14.8172637,2.13683657 C14.8172637,2.54534945 14.8842125,2.87006481 15.0181101,3.11098266 C15.1520077,3.35190051 15.3640123,3.47759678 15.6541237,3.47759678 C15.9442352,3.47759678 16.1562398,3.35190051 16.2901374,3.11098266 C16.424035,2.87006481 16.4909838,2.53487476 16.4909838,2.13683657 C16.4909838,1.7283237 16.424035,1.40360834 16.2901374,1.16269049 C16.1562398,0.92177264 15.9442352,0.796076371 15.6541237,0.796076371 C15.3640123,0.785601682 15.1520077,0.911297951 15.0181101,1.16269049 Z" />
<polygon fill="#324A5E" points="18.129 .136 19.869 .136 19.869 4.169 18.943 4.169 18.943 .901 18.129 .901" />
<path fill="#F1543F" d="M22.344114,4.21082501 C21.7527329,4.21082501 21.3064075,4.02228061 21.0162961,3.6451918 C20.7261846,3.268103 20.5699707,2.76531792 20.5699707,2.12636188 C20.5699707,1.49788054 20.7150264,0.984620774 21.0162961,0.607531967 C21.3175657,0.23044316 21.7527329,0.0418987563 22.344114,0.0418987563 C22.9354951,0.0418987563 23.3818204,0.23044316 23.6719319,0.607531967 C23.9620434,0.984620774 24.1182572,1.48740585 24.1182572,2.12636188 C24.1182572,2.75484323 23.9732015,3.268103 23.6719319,3.6451918 C23.3706623,4.02228061 22.9354951,4.21082501 22.344114,4.21082501 Z M21.7081003,1.16269049 C21.5742027,1.40360834 21.5072539,1.73879839 21.5072539,2.13683657 C21.5072539,2.54534945 21.5742027,2.87006481 21.7081003,3.11098266 C21.841998,3.35190051 22.0540025,3.47759678 22.344114,3.47759678 C22.6342255,3.47759678 22.84623,3.35190051 22.9801276,3.11098266 C23.1140252,2.87006481 23.180974,2.53487476 23.180974,2.13683657 C23.180974,1.7283237 23.1140252,1.40360834 22.9801276,1.16269049 C22.84623,0.92177264 22.6342255,0.796076371 22.344114,0.796076371 C22.0540025,0.785601682 21.841998,0.911297951 21.7081003,1.16269049 Z" />
<polygon fill="#324A5E" points="24.819 .136 26.559 .136 26.559 4.169 25.633 4.169 25.633 .901 24.819 .901" />
<path fill="#ACB3BA" d="M29.0341042,4.21082501 C28.4427231,4.21082501 27.9963978,4.02228061 27.7062863,3.6451918 C27.4161748,3.268103 27.2599609,2.76531792 27.2599609,2.12636188 C27.2599609,1.49788054 27.4050167,0.984620774 27.7062863,0.607531967 C27.9963978,0.23044316 28.4427231,0.0418987563 29.0341042,0.0418987563 C29.6254853,0.0418987563 30.0718106,0.23044316 30.3619221,0.607531967 C30.6520336,0.984620774 30.8082475,1.48740585 30.8082475,2.12636188 C30.8082475,2.75484323 30.6631917,3.268103 30.3619221,3.6451918 C30.0718106,4.02228061 29.6254853,4.21082501 29.0341042,4.21082501 Z M28.3980906,1.16269049 C28.264193,1.40360834 28.1972442,1.73879839 28.1972442,2.13683657 C28.1972442,2.54534945 28.264193,2.87006481 28.3980906,3.11098266 C28.5319882,3.35190051 28.7439927,3.47759678 29.0341042,3.47759678 C29.3242157,3.47759678 29.5362202,3.35190051 29.6701178,3.11098266 C29.8040154,2.87006481 29.8709642,2.53487476 29.8709642,2.13683657 C29.8709642,1.7283237 29.8040154,1.40360834 29.6701178,1.16269049 C29.5362202,0.92177264 29.3242157,0.796076371 29.0341042,0.796076371 C28.7439927,0.785601682 28.5319882,0.911297951 28.3980906,1.16269049 Z" />
<polygon fill="#324A5E" points="31.509 .136 33.249 .136 33.249 4.169 32.323 4.169 32.323 .901 31.509 .901 31.509 .136" />
<path fill="#4CDBC4" d="M35.7240944,4.16892626 C35.1327134,4.16892626 34.686388,3.98038185 34.3962765,3.60329305 C34.106165,3.22620424 33.9499512,2.72341916 33.9499512,2.08446313 C33.9499512,1.45598178 34.0950069,0.942722018 34.3962765,0.565633211 C34.686388,0.188544404 35.1327134,0 35.7240944,0 C36.3154755,0 36.7618009,0.188544404 37.0519124,0.565633211 C37.3420238,0.942722018 37.4982377,1.44550709 37.4982377,2.08446313 C37.4982377,2.71294447 37.353182,3.22620424 37.0519124,3.60329305 C36.7618009,3.98038185 36.3266337,4.16892626 35.7240944,4.16892626 Z M35.099239,1.12079173 C34.9653413,1.36170958 34.8983925,1.69689963 34.8983925,2.09493782 C34.8983925,2.50345069 34.9653413,2.82816605 35.099239,3.0690839 C35.2331366,3.31000175 35.4451411,3.43569802 35.7352526,3.43569802 C36.0253641,3.43569802 36.2373686,3.31000175 36.3712662,3.0690839 C36.5051638,2.82816605 36.5721126,2.492976 36.5721126,2.09493782 C36.5721126,1.68642494 36.5051638,1.36170958 36.3712662,1.12079173 C36.2373686,0.879873883 36.0253641,0.754177614 35.7352526,0.754177614 C35.4451411,0.743702925 35.2331366,0.869399194 35.099239,1.12079173 Z" />
</g>
</g>
<g fill-rule="nonzero" transform="translate(14 5)">
<path fill="#00A690" d="M4.70920304,4.65200583 C6.1219493,3.22283229 7.88780883,2.50839381 9.65366835,2.50839381 L9.65366835,4.29478659 L15.4809901,1.7045393 C11.5960112,-0.885707983 6.3868209,-0.528488741 2.94334352,2.95502908 C-0.500133868,6.43854689 -0.853247141,11.7084575 1.70722719,15.6384623 L3.47308672,13.8520695 C1.88385711,10.8150387 2.23697039,7.06356935 4.70920304,4.65200583 Z" />
<path fill="#EF5350" d="M15.2161185,15.2810948 C13.8033723,16.7102683 12.0375128,17.4247068 10.2716532,17.4247068 L10.2716532,15.638314 L4.44433144,18.2285613 C8.32931035,20.8188086 13.5385007,20.4615893 16.9819781,16.9780715 C20.4254555,13.4945537 20.7785687,8.2246431 18.2180944,4.2946383 L16.4522349,6.08103108 C18.0414645,9.11791363 17.6883512,12.869383 15.2161185,15.2810948 Z" />
</g>
<path fill="#FFF" fill-opacity=".1" fill-rule="nonzero" d="M24,36 L24,0 L45.1796398,0 C45.6327122,0 46,0.497573405 46,1.09281171 L46,29 L48,29 L48,34 L47,34 L48,34 L45.1580247,36 L24,36 Z" />
</g>
</g>
</svg>
</a>
</h4>
<ul class="c-profile-stats">
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
<span class="c-profile-stat-title">Posts</span>
<small class="c-profile-stat-value">57,989</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
<span class="c-profile-stat-title">Joined</span>
<small class="c-profile-stat-value">
<time>5 Years Ago</time>
</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:thumb-up-outline" data-inline="false" aria-hidden="false"></span>
<span class="c-profile-stat-title">Rating</span>
<small class="c-profile-stat-value"><span class="c-profile-rating-good">5821</span></small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<span class="iconify o-icon o-icon-src-ic c-profile-menu-icon" data-icon="mdi:outline-room" data-inline="false" aria-hidden="false"></span>
<span class="c-profile-stat-title">Location</span>
<small class="c-profile-stat-value">Somewhere...</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<span class="iconify o-icon o-icon-src-mdi c-profile-menu-icon" data-icon="mdi:heart-outline" data-inline="false" aria-hidden="false"></span>
<span class="c-profile-stat-title">Likes</span>
<small class="c-profile-stat-value"><span class="c-profile-rating-bad">-985</span></small>
</h5>
</li>
</ul>
</div>
</div>
body {
padding: 48px;
}
.c-profile {
transform: scale(1); // always visible for editing
&-group {
width: 100%;
}
}
const $drawerToggle = '[data-toggle="drawer"]';
const $drawer = '[data-container="drawer"]';
const $drawerMenuToggle = '[data-toggle="drawer-menu"]';
const $drawerMenu = '[data-container="drawer-menu"]';
const $page = '[data-container="page"]';
const $notificationToggle = '[data-toggle="notifications"]';
const $notification = '[data-container="notifications"]';
const $menuToggle = '[data-toggle="menu"]';
const $menu = '[data-container="menu"]';
const $searchToggle = '[data-toggle="search"]';
const $search = '[data-container="search"]';
const $profileToggle = '[data-toggle="profile"]';
const $profile = '[data-container="profile"]';
const $tabs = '[data-toggle="tabs"]';
const $modalToggle = '[data-toggle="modal"]';
const $modal = '[data-container="modal"]';
const $toastToggle = '[data-toggle="toast"]';
const $toast = '[data-container="toast"]';
const $collapseToggle = '[data-toggle="collapse"]';
const $collapseToggleParent = '[data-toggle-parent="collapse"]';
const $collapse = '[data-container="collapse"]';
const $tooltip = '[data-tooltip="true"]';
const $tooltipContainer = '[data-tooltip-container="true"]';
const $toolbarToggle = '[data-toggle="toolbar"]';
const $toolbar = '[data-container="toolbar"]';
const $jumpToggle = '[data-toggle="jump"]';
const $jump = '[data-container="jump"]';
const $emojis = '[data-emoji-preview="emoji" ]';
const $emojiPreview = '[data-emoji-preview="container"]';
const $emojiFilter = '[data-emoji-filter="input"]';
const $closeToggle = '[data-close="true"]';
/**
* Clears the active state of the provided elements
*
* @param {object} event_ Event
* @param {object} $el The element with the state
* @param {object} $toggle The element that controls the state
*/
const clearToggle = function (event_, $element, $toggle) {
const { target } = event_;
if (
!$(target).is($element) &&
!$(target).parents().is($element) &&
!$(target).is($toggle) &&
!$(target).parents().is($toggle)
) {
$($element).each(function () {
$(this).toggleClass('is-active', false);
});
}
};
/**
* Returns clearance object for displaying content to avoid edges
*
* @param {object} $target Element to test
* @param {number} x custom top offset
* @param {number} y custom left offset
* @returns {object} boolean for each edge of window and all dimensions and positions
*/
const edgeDetect = ($target, x, y) => {
const $win = $(window);
const tgt = {};
if (!x) {
x = $target.offset().left;
}
if (!y) {
y = $target.offset().top;
}
tgt.left = x;
tgt.top = y;
tgt.width = $target.innerWidth();
tgt.height = $target.innerHeight();
tgt.bottom = (tgt.top + tgt.height);
tgt.right = (tgt.left + tgt.width);
tgt.currentTop = tgt.top - $win.scrollTop();
tgt.currentLeft = tgt.left - $win.scrollLeft();
tgt.currentRight = (tgt.currentLeft + tgt.width);
tgt.currentBottom = (tgt.currentTop + tgt.height);
tgt.isTop = (tgt.top - tgt.bottom) < 0;
tgt.isLeft = (tgt.left - tgt.right) < 0;
tgt.isRight = ($win.width - tgt.right) > tgt.width;
tgt.isBottom = ($win.height - tgt.bottom) > tgt.height;
return tgt;
};
/**
* Clears the active state of the provided tabs
*
* @todo Look at refactoring into clearToggle
* @param {object} event_ Event
* @param {object} $links The elements with the state
* @constant {object} $this
* @constant {object} $that
*/
const clearTabs = function (event_, $links) {
$($links).children().each(function () {
const $this = $(this);
const $that = $this.attr('href');
$this.toggleClass('is-active', false);
$($that).toggleClass('is-active', false);
});
};
//---------------------------------------------
/**
* Toggles the "is-active" class for the given element
*
* @this {object}
* @param {object} target element to apply toggle class on
*/
// const isActive = function(target) {
// this.click(event_ => {
// event_.preventDefault();
// event_.stopPropagation();
// target.toggleClass('is-active');
// });
// };
/**
* Toggles the state for Modals
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($modalToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($modal).toggleClass('is-active');
});
//---------------------------------------------
/**
* Replaces emoji preview with selected emoji
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $emoji stored emoji html
* @constant {object} $desc stored updated emoji shortname
*/
$($emojis).hover(event_ => {
const $this = event_.target;
const $emoji = $($this).children();
const emojiLastClass = $emoji.attr('class').split(' ').pop();
let $desc = $($this).attr('data-emoji-name');
$desc = $($emojiPreview).children().last().text($desc);
const newClass = $($emojiPreview).children().first().attr('class').split(' ').pop();
$($emojiPreview).children().remove();
$emoji.clone().removeClass(emojiLastClass).addClass(newClass).appendTo($emojiPreview);
$($emojiPreview).append($desc);
});
//---------------------------------------------
/* eslint-disable no-negated-condition */
/**
* Replaces emoji preview with selected emoji
*
* @todo Refactor to toggle function
* @constant {object} query value to filter
*/
$($emojiFilter).on('input', function () {
const query = this.value;
if (query !== '') {
$('[data-emoji-preview="emoji"]:not([data-emoji-name*="' + query + '"])').hide();
} else {
$($emojis).show();
}
});
/* eslint-enable no-negated-condition */
//---------------------------------------------
/**
* Toggles the state for Collapse
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
*/
$($collapseToggle).click(function (event_) {
const $this = $(this);
const $that = $this.parents($collapseToggleParent).next($collapse);
const tip = $this.attr('data-toggle-tooltip');
event_.preventDefault();
event_.stopPropagation();
$that.toggleClass('is-collapsed');
$this.attr('data-toggle-tooltip', $this.attr('title'));
$this.attr('title', tip);
$this.toggleClass('is-collapsed');
$($tooltipContainer).remove();
});
//---------------------------------------------
/**
* Toggles the state for Toasts
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($toastToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($toast).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Editor Toolbar
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($toolbarToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($toolbar).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Jump Menu
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($jumpToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($jump).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Search
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($searchToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($search).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Drawer
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $that
*/
$($drawerToggle).click(event_ => {
const $that = $($drawer);
event_.preventDefault();
event_.stopPropagation();
$that.toggleClass('is-active');
$($page).attr('style', 'position: relative; transition: 0.35s ease-in-out; left: -' + $that.width() + 'px');
});
/**
* Toggles the state for DrawerMenu
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
*/
$($drawerMenuToggle).click(function (event_) {
const $this = $(this);
event_.preventDefault();
event_.stopPropagation();
$this.next($drawerMenu).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles state for Tabs
*
* @constant {object} $this
* @constant {object} $that
* @event Toggle#Tab
* @event Toggle#Content
*/
$($tabs).children().each(function () {
const $this = $(this);
const $that = $($this.attr('href'));
$this.on({
mouseup: event_ => {
event_.preventDefault();
event_.stopPropagation();
clearTabs(event_, $tabs);
$this.toggleClass('is-active');
$that.toggleClass('is-active');
},
});
});
//---------------------------------------------
/**
* Handle state for Notification Menu
*
* @param {object} event_ Event
* @constant {object} $that Container to be displayed
*/
$($notificationToggle).click(event_ => {
const $that = $($notification);
event_.preventDefault();
event_.stopPropagation();
$that.toggleClass('is-active');
});
//---------------------------------------------
/**
* Handle state for Menus
*
* @todo Refactor Menu into this
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
*/
$($menuToggle).click(function (event_) {
const $this = $(this);
const $that = $(this).next();
event_.preventDefault();
event_.stopPropagation();
const link = edgeDetect($this);
const menu = edgeDetect($that);
let vertical = 'top';
let horizontal = 'left';
// not enough space in default location below link set above
if ((link.currentTop + menu.height) > $(window).height()) {
menu.top = (0 - menu.height + link.height);
vertical = 'bottom';
} else {
menu.top = 0;
}
// not enough space in default location right of link set to left
if ((link.currentLeft + menu.width) > $(window).width()) {
menu.left = (0 - menu.width + link.width);
horizontal = 'right';
} else {
menu.left = 0;
}
// $that.attr('style', 'transform-origin: ' + horizontal + ' ' + vertical + ';');
$that.attr('style', 'left: ' + menu.left + 'px; top: ' + menu.top + 'px; transform-origin: ' + horizontal + ' ' + vertical + ';');
$that.each(() => {
$this.toggleClass('is-active', false);
});
$this.next($menu).toggleClass('is-active');
});
//---------------------------------------------
/**
* Handle animation direction for Profiles
*
* @todo Refactor into Profile toggle
* @constant {object} $this
* @constant {object} targetOffset
*/
$($profile).each(function () {
const $this = $(this);
const targetOffset = $this.offset();
const $direction = $this.data('direction');
if ($direction) {
$this.css({ 'transform-origin': $direction, top: 'inherit', bottom: 0 });
} else {
if (targetOffset.left > $(window).width() / 2) {
$this.css({ 'transform-origin': 'right top', right: 0 });
} else {
$this.css('transform-origin', 'left top');
}
}
});
//---------------------------------------------
/**
* Toggles the state for Profile
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
*/
$($profileToggle).click(function (event_) {
const $this = $(this);
const $that = $($profile);
event_.preventDefault();
event_.stopPropagation();
$that.each(() => {
$this.toggleClass('is-active', false);
});
$this.next($profile).toggleClass('is-active');
});
//---------------------------------------------
/**
* Handles state and creation of Tool Tips
*
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
* @constant {string} tip
* @constant {object} link
* @constant {object} tipPos
* @event Toggle#ShowTip
* @event Toggle#HideTip
*/
$($tooltip).each(function () {
const $this = $(this);
let $that = {};
$this.on({
mouseenter: () => {
$('body').append('<span class="c-tooltip" data-tooltip-container="true"></span>');
$that = $($tooltipContainer);
$that.append($this.attr('title'));
const gap = 8; // set equal to default spacing unit size
const link = edgeDetect($this);
const tip = edgeDetect($that);
// set left to center of link
tip.left = ((link.left + (link.width / 2)) - (tip.width / 2));
// not enough space in default location below link set above
if ((link.currentBottom + gap + tip.height) > $(window).height()) {
tip.top = (link.top - tip.height - gap);
} else {
tip.top = (link.bottom + gap);
}
$that.attr('style', 'left: ' + tip.left + 'px; top: ' + tip.top + 'px;');
$that.toggleClass('is-active');
},
mouseleave: () => {
$that.remove();
},
});
});
//----------------------------------------------
/**
* Hide all elements on document load
*
* @event Hide#Search
* @event Hide#Menu
* @event Hide#Profile
* @event Hide#Toolbar
* @event Hide#Jump
* @event Hide#NotificationMenu
*/
$(document).on('touchstart mouseup', event_ => {
clearToggle(event_, $search, $searchToggle);
clearToggle(event_, $menu, $menuToggle);
clearToggle(event_, $profile, $profileToggle);
clearToggle(event_, $toolbar, $toolbarToggle);
clearToggle(event_, $jump, $jumpToggle);
clearToggle(event_, $notification, $notificationToggle);
});
//---------------------------------------------
/**
* Hide drawer properly
*
* @event Hide#Drawer
*/
$($page).on('touchstart mouseup', event_ => {
const $this = $(this);
clearToggle(event_, $drawer, $drawerToggle);
$($page).removeAttr('style');
});
//---------------------------------------------
/**
* Hide social menu properly
*
* @event Hide#Social
*/
$($profile).on('touchstart mouseup', event_ => {
clearToggle(event_, $menu, $menuToggle);
});
//---------------------------------------------
/**
* Handle state for Menus
*
* @todo Refactor Menu into this
* @param {object} event_ Event
* @constant {object} $this
*/
$($closeToggle).click(function (event_) {
const $this = $(this);
event_.preventDefault();
event_.stopPropagation();
$this.parent().toggleClass('is-active', false);
});
//---------------------------------------------
Also see: Tab Triggers