JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class='bg-color'></div>
<div class="content">
<div class="card">
<div class="card__surface card__front">
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1499 709" enable-background="new 0 0 1499 709" xml:space="preserve">
<g id="griddots">
<g>
<path fill="#DBDBDB" d="M10.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,4,10.3,4 M10.3,0
C4.6,0,0,4.6,0,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S16,0,10.3,0L10.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,102.3,10.3,102.3
M10.3,98.3C4.6,98.3,0,103,0,108.7S4.6,119,10.3,119c5.7,0,10.3-4.6,10.3-10.3S16,98.3,10.3,98.3L10.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S105.2,4,108.7,4 M108.7,0
C103,0,98.3,4.6,98.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S114.4,0,108.7,0L108.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,4,207,4 M207,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S212.7,0,207,0L207,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S105.2,102.3,108.7,102.3
M108.7,98.3c-5.7,0-10.3,4.6-10.3,10.3S103,119,108.7,119c5.7,0,10.3-4.6,10.3-10.3S114.4,98.3,108.7,98.3L108.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C4,203.5,6.8,200.7,10.3,200.7 M10.3,196.7C4.6,196.7,0,201.3,0,207c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C20.7,201.3,16,196.7,10.3,196.7L10.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3C4,301.8,6.8,299,10.3,299
M10.3,295C4.6,295,0,299.6,0,305.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C20.7,299.6,16,295,10.3,295L10.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C102.3,203.5,105.2,200.7,108.7,200.7 M108.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,201.3,114.4,196.7,108.7,196.7L108.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,102.3,207,102.3 M207,98.3
c-5.7,0-10.3,4.6-10.3,10.3S201.3,119,207,119s10.3-4.6,10.3-10.3S212.7,98.3,207,98.3L207,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S301.8,4,305.3,4 M305.3,0
C299.6,0,295,4.6,295,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S311,0,305.3,0L305.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S400.2,4,403.7,4 M403.7,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S409.4,0,403.7,0L403.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S301.8,102.3,305.3,102.3
M305.3,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S311,98.3,305.3,98.3L305.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C200.7,203.5,203.5,200.7,207,200.7 M207,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C217.3,201.3,212.7,196.7,207,196.7L207,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C102.3,301.8,105.2,299,108.7,299 M108.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,299.6,114.4,295,108.7,295L108.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C4,400.2,6.8,397.3,10.3,397.3 M10.3,393.3C4.6,393.3,0,398,0,403.7c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C20.7,398,16,393.3,10.3,393.3L10.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,495.7,10.3,495.7
M10.3,491.7C4.6,491.7,0,496.3,0,502c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C20.7,496.3,16,491.7,10.3,491.7
L10.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C102.3,400.2,105.2,397.3,108.7,397.3 M108.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,398,114.4,393.3,108.7,393.3L108.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C200.7,301.8,203.5,299,207,299
M207,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C217.3,299.6,212.7,295,207,295L207,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C299,203.5,301.8,200.7,305.3,200.7 M305.3,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C315.7,201.3,311,196.7,305.3,196.7L305.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S400.2,102.3,403.7,102.3
M403.7,98.3c-5.7,0-10.3,4.6-10.3,10.3S398,119,403.7,119c5.7,0,10.3-4.6,10.3-10.3S409.4,98.3,403.7,98.3L403.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S498.5,4,502,4 M502,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S507.7,0,502,0L502,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S596.9,4,600.3,4 M600.3,0
C594.6,0,590,4.6,590,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S606,0,600.3,0L600.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S498.5,102.3,502,102.3 M502,98.3
c-5.7,0-10.3,4.6-10.3,10.3S496.3,119,502,119c5.7,0,10.3-4.6,10.3-10.3S507.7,98.3,502,98.3L502,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C397.3,203.5,400.2,200.7,403.7,200.7 M403.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C414,201.3,409.4,196.7,403.7,196.7L403.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C299,301.8,301.8,299,305.3,299
M305.3,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C315.7,299.6,311,295,305.3,295L305.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C200.7,400.2,203.5,397.3,207,397.3 M207,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C217.3,398,212.7,393.3,207,393.3L207,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S105.2,495.7,108.7,495.7
M108.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C119,496.3,114.4,491.7,108.7,491.7
L108.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,594,10.3,594 M10.3,590
C4.6,590,0,594.6,0,600.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S16,590,10.3,590L10.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,692.3,10.3,692.3
M10.3,688.3C4.6,688.3,0,693,0,698.7c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C20.7,693,16,688.3,10.3,688.3
L10.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S105.2,594,108.7,594 M108.7,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S114.4,590,108.7,590L108.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,495.7,207,495.7 M207,491.7
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C217.3,496.3,212.7,491.7,207,491.7L207,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C299,400.2,301.8,397.3,305.3,397.3 M305.3,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C315.7,398,311,393.3,305.3,393.3L305.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C397.3,301.8,400.2,299,403.7,299 M403.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C414,299.6,409.4,295,403.7,295L403.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C495.7,203.5,498.5,200.7,502,200.7 M502,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C512.3,201.3,507.7,196.7,502,196.7L502,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S596.9,102.3,600.3,102.3
M600.3,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S606,98.3,600.3,98.3L600.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S695.2,4,698.7,4 M698.7,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S704.4,0,698.7,0L698.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S796.8,4,800.3,4 M800.3,0
C794.6,0,790,4.6,790,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S806,0,800.3,0L800.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S695.2,102.3,698.7,102.3
M698.7,98.3c-5.7,0-10.3,4.6-10.3,10.3S693,119,698.7,119c5.7,0,10.3-4.6,10.3-10.3S704.4,98.3,698.7,98.3L698.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C594,203.5,596.9,200.7,600.3,200.7 M600.3,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C610.7,201.3,606,196.7,600.3,196.7L600.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C495.7,301.8,498.5,299,502,299
M502,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C512.3,299.6,507.7,295,502,295L502,295z"
/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C397.3,400.2,400.2,397.3,403.7,397.3 M403.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C414,398,409.4,393.3,403.7,393.3L403.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S301.8,495.7,305.3,495.7
M305.3,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C315.7,496.3,311,491.7,305.3,491.7
L305.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,594,207,594 M207,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S212.7,590,207,590L207,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S105.2,692.3,108.7,692.3
M108.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C119,693,114.4,688.3,108.7,688.3
L108.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,692.3,207,692.3 M207,688.3
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C217.3,693,212.7,688.3,207,688.3L207,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S301.8,594,305.3,594 M305.3,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S311,590,305.3,590L305.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S400.2,495.7,403.7,495.7
M403.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C414,496.3,409.4,491.7,403.7,491.7
L403.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C495.7,400.2,498.5,397.3,502,397.3 M502,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C512.3,398,507.7,393.3,502,393.3L502,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C594,301.8,596.9,299,600.3,299
M600.3,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C610.7,299.6,606,295,600.3,295L600.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C692.3,203.5,695.2,200.7,698.7,200.7 M698.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C709,201.3,704.4,196.7,698.7,196.7L698.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S796.8,102.3,800.3,102.3
M800.3,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S806,98.3,800.3,98.3L800.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S895.2,4,898.7,4 M898.7,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S904.4,0,898.7,0L898.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S993.5,4,997,4 M997,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1002.7,0,997,0L997,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S895.2,102.3,898.7,102.3
M898.7,98.3c-5.7,0-10.3,4.6-10.3,10.3S893,119,898.7,119c5.7,0,10.3-4.6,10.3-10.3S904.4,98.3,898.7,98.3L898.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C794,203.5,796.8,200.7,800.3,200.7 M800.3,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C810.7,201.3,806,196.7,800.3,196.7L800.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C692.3,301.8,695.2,299,698.7,299 M698.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C709,299.6,704.4,295,698.7,295L698.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C594,400.2,596.9,397.3,600.3,397.3 M600.3,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C610.7,398,606,393.3,600.3,393.3L600.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S498.5,495.7,502,495.7 M502,491.7
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C512.3,496.3,507.7,491.7,502,491.7L502,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S400.2,594,403.7,594
M403.7,590c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S409.4,590,403.7,590L403.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M305.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S301.8,692.3,305.3,692.3
M305.3,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C315.7,693,311,688.3,305.3,688.3
L305.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M403.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S400.2,692.3,403.7,692.3
M403.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C414,693,409.4,688.3,403.7,688.3
L403.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S498.5,594,502,594 M502,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S507.7,590,502,590L502,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S596.9,495.7,600.3,495.7
M600.3,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C610.7,496.3,606,491.7,600.3,491.7
L600.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C692.3,400.2,695.2,397.3,698.7,397.3 M698.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C709,398,704.4,393.3,698.7,393.3L698.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C794,301.8,796.8,299,800.3,299
M800.3,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C810.7,299.6,806,295,800.3,295L800.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C892.3,203.5,895.2,200.7,898.7,200.7 M898.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C909,201.3,904.4,196.7,898.7,196.7L898.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S993.5,102.3,997,102.3 M997,98.3
c-5.7,0-10.3,4.6-10.3,10.3S991.3,119,997,119c5.7,0,10.3-4.6,10.3-10.3S1002.7,98.3,997,98.3L997,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1091.8,4,1095.3,4 M1095.3,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1101,0,1095.3,0L1095.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1190.2,4,1193.7,4 M1193.7,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1199.4,0,1193.7,0L1193.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1091.8,102.3,1095.3,102.3
M1095.3,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1101,98.3,1095.3,98.3L1095.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C990.7,203.5,993.5,200.7,997,200.7 M997,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1007.3,201.3,1002.7,196.7,997,196.7L997,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C892.3,301.8,895.2,299,898.7,299 M898.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C909,299.6,904.4,295,898.7,295L898.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C794,400.2,796.8,397.3,800.3,397.3 M800.3,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C810.7,398,806,393.3,800.3,393.3L800.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S695.2,495.7,698.7,495.7
M698.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C709,496.3,704.4,491.7,698.7,491.7
L698.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S596.9,594,600.3,594 M600.3,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S606,590,600.3,590L600.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M502,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S498.5,692.3,502,692.3 M502,688.3
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C512.3,693,507.7,688.3,502,688.3L502,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M600.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S596.9,692.3,600.3,692.3
M600.3,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C610.7,693,606,688.3,600.3,688.3
L600.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S695.2,594,698.7,594
M698.7,590c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S704.4,590,698.7,590L698.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S796.8,495.7,800.3,495.7
M800.3,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C810.7,496.3,806,491.7,800.3,491.7
L800.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C892.3,400.2,895.2,397.3,898.7,397.3 M898.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C909,398,904.4,393.3,898.7,393.3L898.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C990.7,301.8,993.5,299,997,299
M997,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1007.3,299.6,1002.7,295,997,295L997,295
z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1089,203.5,1091.8,200.7,1095.3,200.7 M1095.3,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1105.7,201.3,1101,196.7,1095.3,196.7L1095.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1190.2,102.3,1193.7,102.3
M1193.7,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1199.4,98.3,1193.7,98.3L1193.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1288.5,4,1292,4 M1292,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1297.7,0,1292,0L1292,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1386.9,4,1390.3,4 M1390.3,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1396,0,1390.3,0L1390.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1288.5,102.3,1292,102.3 M1292,98.3
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1297.7,98.3,1292,98.3L1292,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1187.3,203.5,1190.2,200.7,1193.7,200.7 M1193.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1204,201.3,1199.4,196.7,1193.7,196.7L1193.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1089,301.8,1091.8,299,1095.3,299 M1095.3,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1105.7,299.6,1101,295,1095.3,295L1095.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C990.7,400.2,993.5,397.3,997,397.3 M997,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1007.3,398,1002.7,393.3,997,393.3L997,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S895.2,495.7,898.7,495.7
M898.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C909,496.3,904.4,491.7,898.7,491.7
L898.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S796.8,594,800.3,594 M800.3,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S806,590,800.3,590L800.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M698.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S695.2,692.3,698.7,692.3
M698.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C709,693,704.4,688.3,698.7,688.3
L698.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M800.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S796.8,692.3,800.3,692.3
M800.3,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C810.7,693,806,688.3,800.3,688.3
L800.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S895.2,594,898.7,594 M898.7,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S904.4,590,898.7,590L898.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S993.5,495.7,997,495.7 M997,491.7
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1007.3,496.3,1002.7,491.7,997,491.7L997,491.7z"
/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1089,400.2,1091.8,397.3,1095.3,397.3 M1095.3,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1105.7,398,1101,393.3,1095.3,393.3L1095.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1187.3,301.8,1190.2,299,1193.7,299 M1193.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1204,299.6,1199.4,295,1193.7,295L1193.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1285.7,203.5,1288.5,200.7,1292,200.7 M1292,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1302.3,201.3,1297.7,196.7,1292,196.7L1292,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1386.9,102.3,1390.3,102.3
M1390.3,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1396,98.3,1390.3,98.3L1390.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1485.2,4,1488.7,4 M1488.7,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1494.4,0,1488.7,0L1488.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,102.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1485.2,102.3,1488.7,102.3
M1488.7,98.3c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1494.4,98.3,1488.7,98.3L1488.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1384,203.5,1386.9,200.7,1390.3,200.7 M1390.3,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1400.7,201.3,1396,196.7,1390.3,196.7L1390.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1285.7,301.8,1288.5,299,1292,299 M1292,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1302.3,299.6,1297.7,295,1292,295L1292,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1187.3,400.2,1190.2,397.3,1193.7,397.3 M1193.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1204,398,1199.4,393.3,1193.7,393.3L1193.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1091.8,495.7,1095.3,495.7
M1095.3,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C1105.7,496.3,1101,491.7,1095.3,491.7
L1095.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S993.5,594,997,594 M997,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1002.7,590,997,590L997,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M898.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S895.2,692.3,898.7,692.3
M898.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C909,693,904.4,688.3,898.7,688.3
L898.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M997,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S993.5,692.3,997,692.3 M997,688.3
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1007.3,693,1002.7,688.3,997,688.3L997,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1091.8,594,1095.3,594 M1095.3,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1101,590,1095.3,590L1095.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1190.2,495.7,1193.7,495.7
M1193.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1204,496.3,1199.4,491.7,1193.7,491.7L1193.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C1285.7,400.2,1288.5,397.3,1292,397.3 M1292,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C1302.3,398,1297.7,393.3,1292,393.3L1292,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1384,301.8,1386.9,299,1390.3,299 M1390.3,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1400.7,299.6,1396,295,1390.3,295L1390.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1482.3,203.5,1485.2,200.7,1488.7,200.7 M1488.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1499,201.3,1494.4,196.7,1488.7,196.7L1488.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1482.3,301.8,1485.2,299,1488.7,299 M1488.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1499,299.6,1494.4,295,1488.7,295L1488.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1384,400.2,1386.9,397.3,1390.3,397.3 M1390.3,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1400.7,398,1396,393.3,1390.3,393.3L1390.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1288.5,495.7,1292,495.7
M1292,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C1302.3,496.3,1297.7,491.7,1292,491.7
L1292,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1190.2,594,1193.7,594 M1193.7,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1199.4,590,1193.7,590L1193.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1095.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1091.8,692.3,1095.3,692.3
M1095.3,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C1105.7,693,1101,688.3,1095.3,688.3
L1095.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1193.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1190.2,692.3,1193.7,692.3
M1193.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1204,693,1199.4,688.3,1193.7,688.3
L1193.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1288.5,594,1292,594 M1292,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S1297.7,590,1292,590L1292,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1386.9,495.7,1390.3,495.7
M1390.3,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1400.7,496.3,1396,491.7,1390.3,491.7L1390.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C1482.3,400.2,1485.2,397.3,1488.7,397.3 M1488.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3
c5.7,0,10.3-4.6,10.3-10.3C1499,398,1494.4,393.3,1488.7,393.3L1488.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1485.2,495.7,1488.7,495.7
M1488.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C1499,496.3,1494.4,491.7,1488.7,491.7L1488.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1386.9,594,1390.3,594
M1390.3,590c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1396,590,1390.3,590L1390.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1292,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S1288.5,692.3,1292,692.3
M1292,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C1302.3,693,1297.7,688.3,1292,688.3
L1292,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1390.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1386.9,692.3,1390.3,692.3
M1390.3,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1400.7,693,1396,688.3,1390.3,688.3
L1390.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1485.2,594,1488.7,594
M1488.7,590c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S1494.4,590,1488.7,590L1488.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M1488.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S1485.2,692.3,1488.7,692.3
M1488.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C1499,693,1494.4,688.3,1488.7,688.3
L1488.7,688.3z"/>
</g>
</g>
<g id="logo">
<path id="letterr" opacity="0.7" fill="#06F96D" d="M403.6,513h-98.2c-5.7,0-10.4-4.7-10.4-10.4V207.4c0-5.7,4.7-10.4,10.4-10.4
h98.2c5.7,0,10.4,4.7,10.4,10.4v295.2C414,508.3,409.3,513,403.6,513z"/>
<path id="letterb" opacity="0.7" fill="#06F96D" d="M797.6,513h-98.2c-5.7,0-10.4-4.7-10.4-10.4V207.4c0-5.7,4.7-10.4,10.4-10.4
h98.2c5.7,0,10.4,4.7,10.4,10.4v295.2C808,508.3,803.3,513,797.6,513z"/>
<path id="letteri" opacity="0.7" fill="#06F96D" d="M997.6,513h-98.2c-5.7,0-10.4-4.7-10.4-10.4V305.4c0-5.7,4.7-10.4,10.4-10.4
h98.2c5.7,0,10.4,4.7,10.4,10.4v197.2C1008,508.3,1003.3,513,997.6,513z"/>
<circle id="letterrcircle" opacity="0.7" fill="#06F96D" cx="404" cy="306" r="109"/>
<line id="letterrdeco" opacity="0.7" fill="none" stroke="#06F96D" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="402.5" y1="401.5" x2="208" y2="207"/>
<circle id="lettero" opacity="0.7" fill="#06F96D" cx="601" cy="404" r="109"/>
<line id="letteridot" opacity="0.7" fill="none" stroke="#06F96D" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="899" y1="207" x2="998" y2="207"/>
<path id="letterbbelly" opacity="0.7" fill="#06F96D" d="M801,295c-4.7,0-9.4,0.3-14,0.9v216.2c4.6,0.6,9.3,0.9,14,0.9
c60.2,0,109-48.8,109-109S861.2,295,801,295z"/>
<path id="lettere" fill-opacity="0.7" d="M1141,512.5h-78.5L1088,393h75.8l-0.7,3.3h-72.4l-11.2,52.2h67.6l-0.7,3.3h-67.8
l-12.2,57.2h75.5L1141,512.5z"/>
<path id="letterd" fill-opacity="0.7" d="M1211.3,393c3.8,0,7.8,0.1,12,0.3c4.2,0.2,8.4,0.7,12.5,1.6c4.1,0.9,8.1,2.3,11.8,4.2
c3.7,1.9,7.1,4.6,10,8c2.9,3.5,5.2,7.9,6.9,13.2c1.7,5.4,2.5,11.9,2.5,19.6c0,4.6-0.4,9.3-1.2,14.1c-0.8,4.9-2,9.6-3.5,14.3
c-1.6,4.7-3.5,9.2-5.8,13.5c-2.3,4.3-4.9,8.1-7.9,11.5c-3.8,4.2-7.7,7.6-11.6,10.2c-4,2.6-8.1,4.5-12.3,5.9
c-4.2,1.3-8.6,2.2-13.2,2.6c-4.6,0.4-9.4,0.6-14.6,0.6h-36.8l26.1-119.5H1211.3z M1196.9,509.1c5.4,0,10.2-0.2,14.6-0.6
c4.4-0.4,8.4-1.2,12.3-2.4c3.8-1.2,7.5-3,11-5.4c3.5-2.3,7.1-5.5,10.8-9.4c2.5-2.7,4.8-5.9,6.9-9.6c2.2-3.7,4.1-7.8,5.8-12.3
c1.7-4.5,3-9.2,3.9-14.2c0.9-5,1.4-10.1,1.4-15.4c0-6.7-0.7-12.4-2-17.2c-1.3-4.8-3.2-8.8-5.5-12c-2.3-3.2-5.1-5.7-8.4-7.6
c-3.2-1.9-6.8-3.3-10.7-4.4c-3.9-1-8-1.6-12.4-1.9c-4.4-0.3-8.8-0.4-13.4-0.4h-22.4l-24.8,112.8H1196.9z"/>
<path id="letterrleg" opacity="0.7" fill="#06F96D" d="M537.7,483.2l-27,27c-4.1,4.1-10.6,4.1-14.7,0L298.2,312.5
c-4.1-4.1-4.1-10.6,0-14.7l27-27c4.1-4.1,10.6-4.1,14.7,0l197.8,197.8C541.8,472.6,541.8,479.2,537.7,483.2z"/>
</g>
</svg>
<div class="button">
About Robi Education
</div>
</div>
<div class="card__surface card__back">
<div class="back-content">
<div class="laptop">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 398 492.2" style="enable-background:new 0 0 398 492.2;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.7;fill:#06F96D;}
.st1{fill:#DBDBDB;}
.st2{fill:#707173;}
.st3{fill:none;stroke:#DBDBDB;stroke-width:4;stroke-miterlimit:10;}
</style>
<rect x="24" y="264" class="st0" width="193" height="22"/>
<g>
<rect x="24" y="320" class="st1" width="258" height="13"/>
</g>
<g>
<rect x="24" y="340" class="st1" width="244" height="13"/>
</g>
<g>
<rect x="24" y="300" class="st1" width="237" height="13"/>
</g>
<g>
<rect x="185" y="47.3" class="st1" width="46" height="5.7"/>
</g>
<g>
<rect x="24" y="360" class="st1" width="258" height="13"/>
</g>
<g>
<rect x="24" y="380" class="st1" width="160" height="13"/>
</g>
<path class="st0" d="M274.2,89h-28.4c-4.3,0-7.8-3.5-7.8-7.8V52.8c0-4.3,3.5-7.8,7.8-7.8h28.4c4.3,0,7.8,3.5,7.8,7.8v28.4
C282,85.5,278.5,89,274.2,89z"/>
<g>
<rect x="199" y="57.3" class="st1" width="32" height="5.7"/>
</g>
<path class="st0" d="M165.8,210h-17.5c-2.2,0-3.9-1.7-3.9-3.9v-45.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v45.2
C169.7,208.3,168,210,165.8,210z"/>
<path class="st0" d="M195.9,210h-17.5c-2.2,0-3.9-1.7-3.9-3.9v-34.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v34.2
C199.8,208.3,198.1,210,195.9,210z"/>
<path class="st0" d="M226,210h-17.5c-2.2,0-3.9-1.7-3.9-3.9v-48.2c0-2.2,1.7-3.9,3.9-3.9H226c2.2,0,3.9,1.7,3.9,3.9v48.2
C229.9,208.3,228.2,210,226,210z"/>
<path class="st0" d="M256.1,210h-17.5c-2.2,0-3.9-1.7-3.9-3.9v-62.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v62.2
C260,208.3,258.3,210,256.1,210z"/>
<path class="st0" d="M45.4,210H27.9c-2.2,0-3.9-1.7-3.9-3.9v-20.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v20.2
C49.3,208.3,47.5,210,45.4,210z"/>
<path class="st0" d="M75.5,210H58c-2.2,0-3.9-1.7-3.9-3.9v-34.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v34.2
C79.4,208.3,77.6,210,75.5,210z"/>
<path class="st0" d="M105.6,210H88.1c-2.2,0-3.9-1.7-3.9-3.9v-27.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v27.2
C109.5,208.3,107.8,210,105.6,210z"/>
<path class="st0" d="M135.7,210h-17.5c-2.2,0-3.9-1.7-3.9-3.9v-29.2c0-2.2,1.7-3.9,3.9-3.9h17.5c2.2,0,3.9,1.7,3.9,3.9v29.2
C139.6,208.3,137.9,210,135.7,210z"/>
<path class="st0" d="M332,461V53c0-20.1-10.2-28.8-32.1-28.8H0V0h313.6c23.6,0,42.7,17.5,42.7,39.1v422.5L332,461z"/>
<path class="st2" d="M105.1,448.4c-1.8,3.8-5.5,6.5-9.8,6.5H0v37.4h352c25.4,0,46.1-13.4,46.1-30v-13.8
C363,448.4,244.1,448.4,105.1,448.4z"/>
<path class="st3" d="M0,235h273.5c4.7,0,8.5-3.8,8.5-8.5v-106c0-4.7-3.8-8.5-8.5-8.5H0"/>
</svg>
</div>
<div class="about">
<mark><b>Robi</b> <i>Education</i></mark> is a <mark>tool</mark> for schools and universities. Its aim is to <mark>guide and support</mark> students through their <mark>individual education</mark> process. Detecting deficits and documenting improvements.
</div>
<div class="back-dots">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 217.3 709" enable-background="new 0 0 217.3 709" xml:space="preserve">
<g>
<path fill="#DBDBDB" d="M10.3,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,4,10.3,4 M10.3,0
C4.6,0,0,4.6,0,10.3s4.6,10.3,10.3,10.3S20.7,16,20.7,10.3S16,0,10.3,0L10.3,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S105.2,4,108.7,4 M108.7,0
C103,0,98.3,4.6,98.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S114.4,0,108.7,0L108.7,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,4c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,4,207,4 M207,0
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S212.7,0,207,0L207,0z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,102.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C4,105.2,6.8,102.3,10.3,102.3 M10.3,98.3C4.6,98.3,0,103,0,108.7c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C20.7,103,16,98.3,10.3,98.3L10.3,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,102.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C102.3,105.2,105.2,102.3,108.7,102.3 M108.7,98.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,103,114.4,98.3,108.7,98.3L108.7,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,102.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C200.7,105.2,203.5,102.3,207,102.3 M207,98.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C217.3,103,212.7,98.3,207,98.3L207,98.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C4,203.5,6.8,200.7,10.3,200.7 M10.3,196.7C4.6,196.7,0,201.3,0,207c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C20.7,201.3,16,196.7,10.3,196.7L10.3,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C102.3,203.5,105.2,200.7,108.7,200.7 M108.7,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,201.3,114.4,196.7,108.7,196.7L108.7,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,200.7c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C200.7,203.5,203.5,200.7,207,200.7 M207,196.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C217.3,201.3,212.7,196.7,207,196.7L207,196.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3C4,301.8,6.8,299,10.3,299
M10.3,295C4.6,295,0,299.6,0,305.3c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C20.7,299.6,16,295,10.3,295L10.3,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C102.3,301.8,105.2,299,108.7,299 M108.7,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,299.6,114.4,295,108.7,295L108.7,295z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,299c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3C200.7,301.8,203.5,299,207,299
M207,295c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C217.3,299.6,212.7,295,207,295L207,295z"
/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C4,400.2,6.8,397.3,10.3,397.3 M10.3,393.3C4.6,393.3,0,398,0,403.7c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3
C20.7,398,16,393.3,10.3,393.3L10.3,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3
C102.3,400.2,105.2,397.3,108.7,397.3 M108.7,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C119,398,114.4,393.3,108.7,393.3L108.7,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,397.3c3.5,0,6.3,2.8,6.3,6.3c0,3.5-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3
C200.7,400.2,203.5,397.3,207,397.3 M207,393.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3
C217.3,398,212.7,393.3,207,393.3L207,393.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,495.7,10.3,495.7
M10.3,491.7C4.6,491.7,0,496.3,0,502c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C20.7,496.3,16,491.7,10.3,491.7L10.3,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S105.2,495.7,108.7,495.7
M108.7,491.7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C119,496.3,114.4,491.7,108.7,491.7
L108.7,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,495.7c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,495.7,207,495.7 M207,491.7
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C217.3,496.3,212.7,491.7,207,491.7L207,491.7z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,594,10.3,594 M10.3,590
C4.6,590,0,594.6,0,600.3s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S16,590,10.3,590L10.3,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S105.2,594,108.7,594 M108.7,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S114.4,590,108.7,590L108.7,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,594c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,594,207,594 M207,590
c-5.7,0-10.3,4.6-10.3,10.3s4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3S212.7,590,207,590L207,590z"/>
</g>
<g>
<path fill="#DBDBDB" d="M10.3,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S6.8,692.3,10.3,692.3
M10.3,688.3C4.6,688.3,0,693,0,698.7c0,5.7,4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3C20.7,693,16,688.3,10.3,688.3L10.3,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M108.7,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3S105.2,692.3,108.7,692.3
M108.7,688.3c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C119,693,114.4,688.3,108.7,688.3
L108.7,688.3z"/>
</g>
<g>
<path fill="#DBDBDB" d="M207,692.3c3.5,0,6.3,2.8,6.3,6.3s-2.8,6.3-6.3,6.3s-6.3-2.8-6.3-6.3S203.5,692.3,207,692.3 M207,688.3
c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c5.7,0,10.3-4.6,10.3-10.3C217.3,693,212.7,688.3,207,688.3L207,688.3z"/>
</g>
</svg>
</div>
</div>
<div class="button">
Back
</div>
</div>
</div>
</div>
body {
background-color: #ededed;
font-family: 'Helvetica', sans-serif;
letter-spacing: 1px;
padding-top: 20px;
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
.bg-color {
position: fixed;
top : -30vw;
left: -30vw;
right: -30vw;
bottom: -30vw;
transform-origin: center center;
transform: rotate(-20deg) translateY(-50%);
background-color: #52fb99;
}
mark {
background-color: #fff;
transition: background-color 3s;
}
.logo {
margin: 30px 15px;
}
.content {
position: relative;
perspective: 1200;
}
.button {
cursor: pointer;
width: 100%;
background-color: #52fb99;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: white;
// text-decoration: underline;
}
.back-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin: 5.8% 2.9%;
margin-left: 0;
transform: rotateX(0deg);
.laptop {
width: 30%;
transform: translateX(-20%);
opacity: 0;
transition: transform 1s, opacity 0.3s;
}
.about {
color: #4F4F4F;
width: 62.4%;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: lighter;
line-height: 1.4;
padding: 5%;
font-size: 12px;
@media (min-width: 500px) {
line-height: 1.5;
}
@media (min-width: 600px) {
font-size: 16px;
line-height: 1.6;
}
}
.back-dots {
width: 17.6%;
}
}
.card {
box-shadow: 0px 30px 33px -24px rgba(0,0,0,0.3);
display: block;
border-radius: 20px;
transform: translate(0,0,0);
transform-style: preserve-3d;
position: relative;
min-width: 250px;
min-height: 200px;
margin: 0 auto;
width: 90%;
max-width: 550px;
transition: all 1s cubic-bezier(0.175, 0.886, 0.33, 1.275);
&:hover {
transform: rotateY(5deg);
box-shadow: 20px 30px 33px -24px rgba(0,0,0,0.3);
}
&__surface {
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: white;
border-radius: 20px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-backface-visibility: visible;
backface-visibility: visible;
transform: translate3d(0,0,0);
transform-style: preserve-3d;
}
&__back {
position: absolute;
-webkit-backface-visibility: visible;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotateY(180deg) translateX(0);
}
&.flip {
transform: rotateY(180deg);
//animation: wiggleCard 2s infinite;
.laptop {
transform: translate3d(0,0,0);
opacity: 1;
}
mark {
background-color: #52fb99;
}
&:hover {
transform: rotateY(175deg);
}
}
}
//#### LOGO ANIMATION
#i {
opacity: 0;
}
@keyframes wiggleCard {
from {opacity: 0.9999999}
to {opacity: 1}
}
var card = document.querySelector('.card');
var cardBack = document.querySelector('.card__back');
var cardFront = document.querySelector('.card__front');
card.addEventListener('click', function(){
if(card.classList.contains('flip')) {
card.classList.remove('flip');
setTimeout(function(){
cardBack.style.backfaceVisibility = "hidden";
cardFront.style.opacity = 1;
masterTl.play(0);
}, 100);
} else {
card.classList.add('flip');
setTimeout(function(){
cardFront.style.opacity = 0;
cardBack.style.backfaceVisibility = "visible";
}, 100);
}
});
//#### LOGO ANIMATION
var dots = document.querySelectorAll('#griddots path');
var grid = new TimelineMax({repeat: -1, repeatDelay: 3});
grid.staggerTo(dots, 0.2, {opacity: 0.7, scale: 0.8, ease: Back.easeOut }, 0.005)
.staggerTo(dots, 0.2, {opacity: 1, scale: 1, ease: Back.easeOut }, 0.005, '+=0.5');
var letterr = document.querySelectorAll('#letterr');
var letterrTl = new TimelineMax();
letterrTl.from(letterr, 1, {opacity: 0, transform: "translateY(100px) scaleY(1.3)", transformOrigin: "50% 100%", ease: Back.easeOut });
var letterrdeco = document.querySelectorAll('#letterrdeco');
var letterrdecoTl = new TimelineMax();
letterrdecoTl.from(letterrdeco, 1, {opacity: 0, y: -200, x: -200, ease: Back.easeOut });
var letterrleg = document.querySelectorAll('#letterrleg');
var letterrlegTl = new TimelineMax();
letterrlegTl.from(letterrleg, 1, {opacity: 0, y: -50, x: -50, scale: 0.2, ease: Back.easeOut });
var letterrcircle = document.querySelectorAll('#letterrcircle');
var letterrcircleTl = new TimelineMax();
letterrcircleTl.from(letterrcircle, 1, {opacity: 0, scale: 0.2, ease: Back.easeOut });
var lettero = document.querySelectorAll('#lettero');
var letteroTl = new TimelineMax();
letteroTl.from(lettero, 1, {opacity: 0, scale: 0.2, transformOrigin: '50% 50%', ease: Back.easeOut });
var letterb = document.querySelectorAll('#letterb');
var letterbTl = new TimelineMax();
letterbTl.from(letterb, 1, {opacity: 0, y: -100, ease: Back.easeOut });
var letterbbelly = document.querySelectorAll('#letterbbelly');
var letterbbellyTl = new TimelineMax();
letterbbellyTl.from(letterbbelly, 1, {opacity: 0, scale: 0.2, y: -50, transformOrigin: '0% 50%', ease: Back.easeOut });
var letteri = document.querySelectorAll('#letteri');
var letteriTl = new TimelineMax();
letteriTl.from(letteri, 1, {opacity: 0, transform: "translateY(50px) scaleY(1.3)", transformOrigin: "50% 100%", ease: Back.easeOut });
var letteridot = document.querySelectorAll('#letteridot');
var letteridotTl = new TimelineMax();
letteridotTl.from(letteridot, 1, {opacity: 0, transform: "translateX(100px) scaleX(1)", transformOrigin: "50% 100%", ease: Back.easeOut });
var lettere = document.querySelectorAll('#lettere');
var lettereTl = new TimelineMax();
lettereTl.from(lettere, 1, {opacity: 0, x: -20, ease: Back.easeOut });
var letterd = document.querySelectorAll('#letterd');
var letterdTl = new TimelineMax();
letterdTl.from(letterd, 1, {opacity: 0, x: -20, ease: Back.easeOut });
var button = document.querySelector('.button');
var buttonTl = new TimelineMax({repeat: -1, repeatDelay: 5});
buttonTl.to(button, 0.3, { y: 5, ease: Power1.easeInOut })
.to(button, 0.3, { y: 0, ease: Power1.easeInOut });
var buttonShowTl = new TimelineMax();
buttonShowTl.from(button, 0.8, { opacity: 0, ease: Power1.easeInOut });
var masterTl = new TimelineMax(/*{repeat: -1, repeatDelay: 20}*/{delay: 1});
masterTl.add(letterrTl, 0)
.add(letterrlegTl, 0.2)
.add(letterrcircleTl, 0)
.add(letterrdecoTl, 0)
.add(letteroTl, 0.2)
.add(letterbTl, 0.4)
.add(letterbbellyTl, 0.5)
.add(letteriTl, 0.6)
.add(letteridotTl, 0.8)
.add(lettereTl, 0.9)
.add(letterdTl, 1)
.add(buttonShowTl, 1.2);
masterTl.timeScale(1.3);
masterTl.play();
Also see: Tab Triggers