<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Granify/pen/ZaBNLg" />
<style class="cp-pen-styles">html {
background: #ccedf9;
}
#main-wrapper {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) skewY(-30deg);
-moz-transform: translate(-50%, -50%) skewY(-30deg);
-ms-transform: translate(-50%, -50%) skewY(-30deg);
-o-transform: translate(-50%, -50%) skewY(-30deg);
transform: translate(-50%, -50%) skewY(-30deg);
overflow: visible;
}
@-webkit-keyframes strokeShift {
from, to {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
stroke-width: 6;
}
50% {
stroke-dashoffset: 0;
stroke-width: 9;
}
}
@-moz-keyframes strokeShift {
from, to {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
stroke-width: 6;
}
50% {
stroke-dashoffset: 0;
stroke-width: 9;
}
}
@keyframes strokeShift {
from, to {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
stroke-width: 6;
}
50% {
stroke-dashoffset: 0;
stroke-width: 9;
}
}
svg * {
stroke-linecap: bevel;
stroke-linejoin: round;
}
path {
fill: #fff;
stroke: #00a7e1;
stroke-width: 1;
}
.st1, .st0 {
fill: none;
stroke: #085156;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
-webkit-animation: strokeShift 7.5s infinite;
-moz-animation: strokeShift 7.5s infinite;
animation: strokeShift 7.5s infinite;
}
</style></head><body>
<div id="main-wrapper">
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="458" height="254px" viewBox="-50 0 600 254" style="enable-background:new 0 0 457.7 253.9;" preserveAspectRatio="xMidYmid meet"
xml:space="preserve">
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0"/>
<feOffset dx="-5" dy="-3" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#dropshadow)">
<path class="st0" d="M34.9,164.2V67.7c0-19.5-31.4-19.8-31.4,0.5c0,15,18,14.1,18,3.3"/>
<path class="st0" d="M34.9,74.8c0-27.6,42-29.3,42-1.6s0,68.7,0,86.6c0,17.5,17.1,22.3,17.1,22.3"/>
</g>
<g filter="url(#dropshadow)">
<path class="st0" d="M247.5,146.3c0,27.6-42,29.3-42,1.6s0-43.5,0-61.4c0-21-9.4-31-29.4-31"/>
</g>
<g filter="url(#dropshadow)">
<path class="st0" d="M152.7,95.6c0,11,0,43.3,0,60.3s-22.5,16-22.5-1V95.6"/>
<path class="st0" d="M152.6,154.9c0,17,22.5,18,22.5,1s0-39,0-50c0-15,12-18,12-18"/>
</g>
<g filter="url(#dropshadow)">
<path class="st0" d="M104.1,96.8h-0.4c-6.2,0-11.3,5.1-11.3,11.3v15.7c0,6.2,5.1,11.3,11.3,11.3h0.4c6.2,0,11.3-5.1,11.3-11.3v-15.7
C115.4,101.8,110.4,96.8,104.1,96.8z"/>
<path class="st0" d="M288.7,108.1c0-6.2-5.1-11.3-11.3-11.3h-0.4c-6.2,0-11.3,5.1-11.3,11.3v48.4c0,6.2,5.1,11.3,11.3,11.3h0.4
c6.2,0,11.3-5.1,11.3-11.3c0-4.1,0-9.5,0-9.5"/>
<path class="st0" d="M277.4,96.8h-0.4c-6.2,0-11.3,5.1-11.3,11.3v15.7c0,6.2,5.1,11.3,11.3,11.3h0.4c6.2,0,11.3-5.1,11.3-11.3v-15.7
C288.7,101.8,283.6,96.8,277.4,96.8z"/>
<path class="st1" d="M115.4,108.1c0-6.2-5.1-11.3-11.3-11.3h-0.4c-6.2,0-11.3,5.1-11.3,11.3l0,44.1c0,21.1,37.4,24,37.4-10.7"/>
<path class="st1" d="M325.7,158.2c0,12.8,18,13.5,18,0c0-15,0-67.4,0-67.4s9.7,20.6,21.6,8.7c0,0,0,57.7,0,68.7
c0,18.7,15.9,35.3,37.5,35.3c21.7,0,21-30.3,0-30.3c-26.7,0-40.6,46.3-76.9,46.3c-26,0-22-29.7-0.3-29.7c30.3,0,32.3,30.7,77.3,30.7
s49.7-66.7,0-66.7c-13,0-25.3,11.3-25.3,11.3" />
</g>
<g filter="url(#dropshadow)">
<path d="M29.4,39.9v-0.6c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.3-1-5.6-3.8-6.8V0.9h24.7c11,0,16.7,5.8,16.7,13.2
c0,6.5-5,11.5-12.5,11.5c-0.3,0-0.7,0-1.1-0.1c2.4,1.6,4.6,3,7.1,3c2.1,0,3-1.7,3-1.7c1.6,0.8,3.7,2.5,3.7,5.6
c0,4.4-2.8,8.2-8.9,8.2c-9.2,0-11.4-13.5-17.7-15v6.9c0,3.7,1.2,5.7,3.8,6.8v0.6H29.4z M44.4,9.8v8.9h9.5c3.5,0,5.7-1.5,5.7-4.3
c0-3.1-2.3-4.6-5.7-4.6H44.4z"/>
<path d="M73.7,39.9v-0.6c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9h18.8v0.6c-2.6,1.1-3.8,3.1-3.8,6.8v24.3
c0,3.7,1.2,5.7,3.8,6.8v0.6H73.7z"/>
<path d="M120.3,39.9v-0.6c2.2-0.7,3.8-2.3,3.8-4.6c0-4.8-5.1-10.9-15.5-20.2v17.9c0,3.7,1.2,5.7,3.8,6.8v0.6H93.7v-0.6
c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9l15,0.1l15.5,15.9V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9h18.8v0.6
c-2.6,1.1-3.8,3.1-3.8,6.8v24.3c0,3.7,1.2,5.7,3.8,6.8v0.6H120.3z"/>
<path d="M180.4,39.9c-0.7,0.5-1.8,0.9-4.1,0.9c-2.2,0-3.9-0.8-5.1-2.2c-1.9,1.2-4.8,2.2-8.9,2.2c-14,0-21.6-9-21.6-20.9
c0-12.3,9.4-19.9,22.6-19.9c4.5,0,7.5,1.4,9.3,1.4c1.4,0,2.6-0.6,2.6-0.6l1.6,12.3l-0.7,0.2c-3.4-2.7-7.2-4.5-12.8-4.5
c-6.4,0-11.5,4-11.5,11s4.1,12,10.6,12c4.7,0,7.6-2,7.6-5.3c0-2.4-1.7-4.1-4.2-4.1v-4.1h16.4v4.1c-2.3,0-3.7,2.1-3.7,4.6v5.1
c0,4.5,0.7,6.5,1.8,7.2V39.9z"/>
<path d="M182.9,39.9v-0.6c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9h18.8v0.6c-2.6,1.1-3.8,3.1-3.8,6.8v24.3
c0,3.7,1.2,5.7,3.8,6.8v0.6H182.9z"/>
<path d="M229.5,39.9v-0.6c2.2-0.7,3.8-2.3,3.8-4.6c0-4.8-5.1-10.9-15.5-20.2v17.9c0,3.7,1.2,5.7,3.8,6.8v0.6h-18.8v-0.6
c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9l15,0.1l15.5,15.9V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9h18.8v0.6
c-2.6,1.1-3.8,3.1-3.8,6.8v24.3c0,3.7,1.2,5.7,3.8,6.8v0.6H229.5z"/>
<path d="M289.6,39.9c-0.7,0.5-1.8,0.9-4.1,0.9c-2.2,0-3.9-0.8-5.1-2.2c-1.9,1.2-4.8,2.2-8.9,2.2c-14,0-21.6-9-21.6-20.9
C250,7.6,259.4,0,272.6,0c4.5,0,7.5,1.4,9.3,1.4c1.4,0,2.6-0.6,2.6-0.6l1.6,12.3l-0.7,0.2c-3.4-2.7-7.2-4.5-12.8-4.5
c-6.4,0-11.5,4-11.5,11s4.1,12,10.6,12c4.7,0,7.6-2,7.6-5.3c0-2.4-1.7-4.1-4.2-4.1v-4.1h16.4v4.1c-2.3,0-3.7,2.1-3.7,4.6v5.1
c0,4.5,0.7,6.5,1.8,7.2V39.9z"/>
<path d="M303.2,39.9v-0.6c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9H322v0.6c-2.6,1.1-3.8,3.1-3.8,6.8v24.3
c0,3.7,1.2,5.7,3.8,6.8v0.6H303.2z"/>
<path d="M349.8,39.9v-0.6c2.2-0.7,3.8-2.3,3.8-4.6c0-4.8-5.1-10.9-15.5-20.2v17.9c0,3.7,1.2,5.7,3.8,6.8v0.6h-18.8v-0.6
c2.6-1.1,3.8-3.1,3.8-6.8V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9l15,0.1l15.5,15.9V8.2c0-3.7-1.2-5.7-3.8-6.8V0.9h18.8v0.6
c-2.6,1.1-3.8,3.1-3.8,6.8v24.3c0,3.7,1.2,5.7,3.8,6.8v0.6H349.8z"/>
</g>
<g filter="url(#dropshadow)">
<path d="M116.3,74.2h-8.4V74c1.1-0.5,1.6-1.3,1.6-2.8v-8.7h-1c-1.8,0-2.6,0.1-3.4,0.8l-0.2-0.1l0.9-5.3c0,0,0.9,0.2,2.4,0.2h7.7
c1.5,0,2.4-0.2,2.4-0.2l0.9,5.3l-0.2,0.1c-0.9-0.7-1.6-0.8-3.4-0.8h-0.7v8.7c0,1.5,0.5,2.3,1.6,2.8V74.2z M152.1,80.6l0.9-4.1
h-47.1l0.8,4.1H152.1z M152.7,56l-0.8-4.1h-45l-0.8,4.1H152.7z M138.5,74.2H130V74c1.1-0.5,1.6-1.4,1.6-2.8v-3h-5.2v3
c0,1.4,0.6,2.3,1.6,2.8v0.2h-8.4V74c1-0.5,1.6-1.4,1.6-2.8v-10c0-1.7-0.8-2.5-1.6-2.8v-0.2h8.4v0.2c-0.9,0.3-1.6,1.1-1.6,2.8v2.7
h5.2v-2.7c0-1.6-0.5-2.5-1.6-2.8v-0.2h8.4v0.2c-1.1,0.4-1.6,1.2-1.6,2.8v10c0,1.5,0.4,2.3,1.6,2.8V74.2z M153.2,74.6
c0,0-0.7-0.5-3-0.5H139V74c1-0.3,1.6-1.3,1.6-2.8v-10c0-1.6-0.5-2.5-1.6-2.8v-0.2h11c2.3,0,3-0.3,3-0.3l0.8,5.1l-0.2,0.1
c-0.5-0.4-1.2-0.8-2.9-0.8h-4.8v3.2c0.5-1.1,1.4-1.8,3-1.8c2.1,0,3.2,1.1,3.2,2.8c0,1.4-1.1,2.1-2.3,2.1c0-0.7-0.2-1.3-1.3-1.3
c-1.6,0-2.6,1-2.6,3h5c1.6,0,2.4-0.6,3.1-1.2L153.2,74.6z"/>
</g>
<g filter="url(#dropshadow)">
<path class="st0" d="M303.2,109.8c0-17,22.5-18,22.5-1s0,39,0,50"/>
<path class="st0" d="M313.9,119.8L313.9,119.8c-6.2,0-11.3,5.1-11.3,11.3v25.4c0,6.2,5.1,11.3,11.3,11.3h0c6.2,0,11.3-5.1,11.3-11.3
v-25.4C325.2,124.9,320.2,119.8,313.9,119.8z"/>
<path class="st1" d="M367.1,53.5c0,0-10.5,24.4-60.4,24.4s-59.2-21-59.2-21v174.7c0,26.5-39.9,23-39.9,2c0-33.3,17.2-49.7,57.2-49.7
c75.7,0,68.7,50.7,137.9,50.7c65.7,0,71.4-93.3,0-93.3"/>
</g>
</svg>
</div>
</body></html>
