cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              
<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();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console