Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="container">
 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg 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 2137.392 1012.275" style="enable-background:new 0 0 2137.392 1012.275;" xml:space="preserve">
<g id="geologic">
	<g>
		<g>
			<polygon class="st0" points="1891.603,782.635 1889.634,782.011 1862.011,826.433 1864.367,826.433 			"/>
			<polygon class="st0" points="1870.322,775.891 1868.353,775.267 1864.091,782.121 1852.559,800.665 1852.559,800.665 
				1836.536,826.433 1838.892,826.433 			"/>
			<polygon class="st0" points="1842.178,800.665 1839.821,800.665 1823.798,826.433 1826.154,826.433 			"/>
			<polygon class="st0" points="1912.884,789.379 1910.915,788.755 1887.485,826.433 1889.842,826.433 			"/>
			<polygon class="st0" points="1902.243,786.007 1900.275,785.383 1874.748,826.433 1877.104,826.433 			"/>
			<path class="st0" d="M1765.754,800.665h-2.356l-2.903,4.668c0.095,1.094,0.202,2.184,0.322,3.271L1765.754,800.665z"/>
			<path class="st0" d="M1778.491,800.665h-2.356l-13.213,21.249c0.194,0.939,0.398,1.875,0.611,2.807L1778.491,800.665z"/>
			<polygon class="st0" points="1829.44,800.665 1827.084,800.665 1811.061,826.433 1813.417,826.433 			"/>
			<polygon class="st0" points="1791.229,800.665 1788.872,800.665 1772.849,826.433 1775.205,826.433 			"/>
			<polygon class="st0" points="1816.703,800.665 1814.347,800.665 1798.323,826.433 1800.68,826.433 			"/>
			<polygon class="st0" points="1803.966,800.665 1801.609,800.665 1785.586,826.433 1787.942,826.433 			"/>
			<polygon class="st0" points="1880.962,779.263 1878.994,778.639 1849.273,826.433 1851.629,826.433 			"/>
			<polygon class="st0" points="2031.246,783.387 2028.89,783.387 2002.122,826.433 2004.479,826.433 			"/>
			<polygon class="st0" points="2005.771,783.387 2003.415,783.387 1976.648,826.433 1979.004,826.433 			"/>
			<polygon class="st0" points="2043.983,783.387 2041.627,783.387 2014.859,826.433 2017.216,826.433 			"/>
			<polygon class="st0" points="2018.509,783.387 2016.152,783.387 1989.385,826.433 1991.741,826.433 			"/>
			<path class="st0" d="M2045.696,801.116c0.078-1.355,0.14-2.714,0.18-4.078l-18.279,29.395h2.356L2045.696,801.116z"/>
			<path class="st0" d="M2042.874,822.348l-2.54,4.084h1.619C2042.28,825.078,2042.587,823.717,2042.874,822.348z"/>
			<polygon class="st0" points="1937.927,769.555 1935.959,768.931 1900.223,826.433 1902.579,826.433 			"/>
			<polygon class="st0" points="1993.034,783.387 1990.678,783.387 1963.91,826.433 1966.267,826.433 			"/>
			<polygon class="st0" points="1947.674,774.397 1945.825,773.583 1912.96,826.433 1915.316,826.433 			"/>
			<polygon class="st0" points="1957.673,778.801 1955.824,777.986 1925.697,826.433 1928.054,826.433 			"/>
			<polygon class="st0" points="1967.673,783.204 1965.823,782.39 1938.435,826.433 1940.791,826.433 			"/>
			<polygon class="st0" points="1980.297,783.387 1977.94,783.387 1951.172,826.433 1953.529,826.433 			"/>
		</g>
		<g>
			<path class="st1" d="M1813.795,904.626c1.452,1.159,2.929,2.289,4.426,3.392h169.436c1.497-1.103,2.974-2.233,4.426-3.392
				H1813.795z"/>
			<path class="st1" d="M1951.092,927.499c2.907-1.04,5.769-2.173,8.586-3.392H1846.2c2.817,1.219,5.679,2.352,8.586,3.392H1951.092
				z"/>
			<path class="st1" d="M1827.597,914.367c1.887,1.172,3.8,2.306,5.744,3.392h139.195c1.944-1.085,3.857-2.22,5.744-3.392H1827.597z
				"/>
			<path class="st1" d="M1802.799,894.886c1.174,1.152,2.372,2.28,3.585,3.392h193.108c1.213-1.112,2.411-2.24,3.585-3.392H1802.799
				z"/>
			<path class="st1" d="M1793.759,885.145c0.969,1.145,1.951,2.278,2.955,3.392h212.45c1.004-1.114,1.986-2.247,2.955-3.392
				H1793.759z"/>
			<path class="st1" d="M1763.992,826.702c0.276,1.136,0.569,2.266,0.872,3.392h276.149c0.303-1.126,0.596-2.255,0.872-3.392
				H1763.992z"/>
			<path class="st1" d="M1766.736,836.442c0.364,1.137,0.741,2.268,1.132,3.392h270.141c0.391-1.124,0.768-2.255,1.132-3.392
				H1766.736z"/>
			<path class="st1" d="M1786.204,875.404c0.811,1.143,1.638,2.273,2.481,3.392h228.506c0.843-1.118,1.671-2.248,2.481-3.392
				H1786.204z"/>
			<path class="st1" d="M1770.245,846.183c0.458,1.138,0.932,2.268,1.419,3.392h262.551c0.487-1.124,0.96-2.254,1.419-3.392
				H1770.245z"/>
			<path class="st1" d="M1774.603,855.923c0.561,1.139,1.134,2.27,1.724,3.392h253.223c0.59-1.121,1.163-2.253,1.724-3.392H1774.603
				z"/>
			<path class="st1" d="M1779.879,865.664c0.677,1.141,1.37,2.271,2.078,3.392h241.963c0.708-1.12,1.401-2.251,2.078-3.392H1779.879
				z"/>
		</g>
		<polygon class="st2" points="1851.406,755.053 1844.775,731.493 1838.143,755.053 1843.677,755.053 1843.677,759.937 
			1845.739,759.937 1845.739,755.053 		"/>
		<polygon class="st2" points="1860.621,751.372 1853.99,731.861 1847.359,751.372 1852.893,751.372 1852.893,756.256 
			1854.954,756.256 1854.954,751.372 		"/>
		<polygon class="st2" points="1871.086,747.519 1864.455,726.02 1857.824,747.519 1863.358,747.519 1863.358,752.403 
			1865.419,752.403 1865.419,747.519 		"/>
		<polygon class="st2" points="1842.919,758.06 1836.288,740.537 1829.657,758.06 1835.191,758.06 1835.191,762.943 
			1837.252,762.943 1837.252,758.06 		"/>
		<polygon class="st2" points="1834.374,758.06 1827.742,738.181 1821.111,758.06 1826.645,758.06 1826.645,762.943 
			1828.707,762.943 1828.707,758.06 		"/>
		<polygon class="st2" points="1880.962,743.555 1874.331,723.676 1867.699,743.555 1873.234,743.555 1873.234,748.439 
			1875.295,748.439 1875.295,743.555 		"/>
		<path class="st3" d="M1867.85,773.047l52.427,17.752l15.475-24.066l33.382,15.733l76.442-0.207
			c-0.453-6.962-1.355-12.66-2.77-19.315h-49.771l-23.963-22.407l-21.396-2.356l-17.357-11.044l-93.893,35.807h-73.352
			c-2.047,9.634-3.134,19.624-3.134,29.868c0,2.636,0.077,5.253,0.217,7.854l90.615-0.447L1867.85,773.047z"/>
		<circle class="st4" cx="1902.939" cy="792.812" r="143"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-right" cx="1868.104" cy="861.773" r="9.156"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-right" cx="1811.783" cy="861.773" r="9.156"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-right" cx="1841.6" cy="884.302" r="9.156"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-left" cx="1933.701" cy="861.773" r="9.156"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-left" cx="1986.708" cy="861.773" r="9.156"/>
	</g>
	<g>
		<circle class="st5 geo-carbon-left" cx="1960.205" cy="884.302" r="9.156"/>
	</g>
</g>
<g id="pipes">
	<path class="st6" d="M1917.884,869.056V258.19c0-8.254-6.691-14.945-14.945-14.945l0,0c-8.254,0-14.945,6.691-14.945,14.945
		v244.856h-634.11V258.194c0-0.001,0-0.002,0-0.004v0c0-8.254-6.691-14.945-14.945-14.945h0l0,0h-144.846h0H479.098
		c-0.328,0-0.649,0.028-0.971,0.049c-0.323-0.021-0.643-0.049-0.971-0.049h0c-8.254,0-14.945,6.691-14.945,14.945v519.698
		c0,8.254,6.691,14.945,14.945,14.945h0c0.328,0,0.649-0.028,0.971-0.049c0.323,0.021,0.643,0.049,0.971,0.049h614.996h0h144.846
		l0,0c8.254,0,14.945-6.691,14.945-14.945v0V532.935h634.11v336.121 M492.101,273.135h175.756v489.809H492.101V273.135z
		 M697.747,273.135h175.756v489.809H697.747V273.135z M903.393,273.135h175.756v489.809H903.393V273.135z M1109.039,273.135h114.956
		v489.809h-114.956V273.135z"/>
</g>
<g id="green-co2-logo">
	<circle class="st7" cx="1902.939" cy="236.783" r="143"/>
	<g>
		<path id="Path_56_00000067940017515446093510000006699342595165281442_" class="st8" d="M1975.496,209.326
			c-4.766,0.001-8.63-3.862-8.631-8.628s3.862-8.63,8.628-8.631c4.766-0.001,8.63,3.862,8.631,8.628
			C1984.119,205.458,1980.259,209.319,1975.496,209.326 M1975.496,194.648c-3.341-0.001-6.049,2.707-6.05,6.047
			c-0.001,3.341,2.707,6.049,6.047,6.05c3.341,0.001,6.049-2.707,6.05-6.047c0-0.001,0-0.002,0-0.003
			C1981.538,197.357,1978.833,194.653,1975.496,194.648"/>
		<path id="Path_57_00000093856463430900230790000000162860002728914320_" class="st9" d="M1975.496,263.111
			c-11.367,0.001-20.583-9.214-20.584-20.581c-0.001-11.367,9.214-20.583,20.581-20.584c11.367-0.001,20.583,9.214,20.584,20.581
			c0,0.001,0,0.002,0,0.003C1996.061,253.89,1986.856,263.096,1975.496,263.111 M1975.496,229.69
			c-7.092-0.001-12.841,5.747-12.842,12.839c-0.001,7.092,5.747,12.841,12.839,12.842s12.841-5.747,12.842-12.839l0,0
			C1988.327,235.444,1982.584,229.699,1975.496,229.69"/>
		<path id="Path_58_00000034789076255877785220000014698781118817561528_" class="st8" d="M1973.255,220.318
			c-0.713,0.001-1.291-0.576-1.292-1.289c0-0.001,0-0.002,0-0.003v-6.376c0-0.713,0.578-1.292,1.292-1.292
			c0.713,0,1.292,0.578,1.292,1.292v6.376c0.001,0.713-0.576,1.291-1.289,1.292C1973.257,220.318,1973.256,220.318,1973.255,220.318
			"/>
		<path id="Path_59_00000054225530555735609220000001315750662800796835_" class="st9" d="M1977.74,220.318
			c-0.713,0.001-1.291-0.576-1.292-1.289c0-0.001,0-0.002,0-0.003v-6.376c0-0.713,0.578-1.292,1.292-1.292s1.292,0.578,1.292,1.292
			v6.376c0.001,0.713-0.576,1.291-1.289,1.292C1977.742,220.318,1977.741,220.318,1977.74,220.318"/>
		<path id="Path_60_00000054973800346725904660000009334487718818225848_" class="st8" d="M1975.496,292.99
			c-4.767,0.002-8.632-3.861-8.634-8.628s3.861-8.632,8.628-8.634c4.767-0.002,8.632,3.861,8.634,8.628c0,0.001,0,0.002,0,0.003
			C1984.119,289.123,1980.259,292.983,1975.496,292.99 M1975.496,278.309c-3.341-0.002-6.052,2.706-6.053,6.047
			c-0.002,3.341,2.706,6.052,6.047,6.053c3.341,0.002,6.052-2.706,6.053-6.047c0-0.001,0-0.002,0-0.003
			C1981.54,281.02,1978.835,278.314,1975.496,278.309"/>
		<path id="Path_61_00000173153037609987157120000018056445362090596265_" class="st8" d="M1973.255,274.097
			c-0.713,0.001-1.291-0.576-1.292-1.289c0-0.001,0-0.002,0-0.003v-6.378c0-0.713,0.578-1.292,1.292-1.292
			c0.713,0,1.292,0.578,1.292,1.292v6.379c0.001,0.713-0.576,1.291-1.289,1.292c-0.001,0-0.002,0-0.003,0"/>
		<path id="Path_62_00000129914986158287981140000005592298742887852708_" class="st9" d="M1977.74,274.097
			c-0.713,0.001-1.291-0.576-1.292-1.289c0-0.001,0-0.002,0-0.003v-6.378c0-0.713,0.578-1.292,1.292-1.292s1.292,0.578,1.292,1.292
			v6.379c0.001,0.713-0.576,1.291-1.289,1.292c-0.001,0-0.002,0-0.003,0"/>
		<path id="Path_63_00000019674131155678051450000012686244270569660852_" class="st9" d="M2013.532,242.255h-14.026
			c-0.713,0-1.291-0.577-1.291-1.29c0-0.525,0.317-0.998,0.804-1.196l9.635-3.928c2.935-1.178,4.359-4.512,3.18-7.447
			s-4.512-4.359-7.447-3.18c-2.171,0.871-3.593,2.976-3.593,5.315c0,0.713-0.578,1.29-1.29,1.29s-1.29-0.578-1.29-1.29l0,0
			c0-4.587,3.719-8.305,8.305-8.305c4.587,0,8.305,3.719,8.305,8.305c0,3.388-2.059,6.437-5.201,7.703l-3.537,1.443h7.447
			c0.713-0.001,1.291,0.577,1.291,1.289c0.001,0.713-0.577,1.291-1.289,1.291c-0.001,0-0.001,0-0.002,0"/>
		<path id="Path_64_00000134208247860465591790000005244176684362312084_" class="st10" d="M1935.361,263.111
			c-11.367,0.003-20.585-9.209-20.589-20.576c-0.004-11.367,9.209-20.585,20.576-20.589c8.169-0.003,15.566,4.826,18.851,12.305
			c0.862,1.957-0.026,4.243-1.983,5.105s-4.243-0.026-5.105-1.983l0,0c-2.85-6.492-10.422-9.445-16.914-6.595
			c-6.492,2.85-9.444,10.423-6.595,16.914c2.85,6.492,10.422,9.445,16.914,6.595c2.947-1.294,5.301-3.647,6.595-6.595
			c0.86-1.957,3.145-2.847,5.102-1.986s2.847,3.145,1.986,5.102l0,0c-3.285,7.473-10.675,12.3-18.838,12.304"/>
		<path id="Path_65_00000018918382623736907830000005711002377359343015_" class="st9" d="M1818.599,250.548
			c-1.623,1.376-3.444,2.5-5.401,3.333c-2.284,0.957-4.743,1.429-7.219,1.384c-2.205,0.029-4.394-0.375-6.443-1.189
			c-3.745-1.487-6.694-4.477-8.13-8.242c-0.763-1.971-1.145-4.069-1.124-6.183c-0.012-2.072,0.377-4.127,1.147-6.05
			c0.735-1.86,1.829-3.558,3.219-4.997c2.956-3.016,7.016-4.694,11.239-4.643c2.259-0.065,4.51,0.294,6.638,1.057
			c1.82,0.736,3.507,1.768,4.992,3.053l-3.37,4.019c-1.094-0.969-2.325-1.77-3.654-2.378c-1.528-0.624-3.17-0.919-4.82-0.866
			c-1.337-0.008-2.659,0.282-3.87,0.849c-1.184,0.554-2.243,1.342-3.114,2.316c-0.893,1.003-1.595,2.16-2.073,3.414
			c-0.509,1.325-0.765,2.733-0.757,4.152c-0.018,1.479,0.229,2.95,0.727,4.343c0.461,1.277,1.173,2.448,2.096,3.443
			c0.916,0.97,2.02,1.743,3.244,2.273c1.331,0.565,2.766,0.846,4.212,0.826c1.373,0.01,2.739-0.204,4.043-0.635
			c1.173-0.373,2.277-0.939,3.265-1.673v-5.69h-7.731v-4.628h12.882V250.548z"/>
		<path id="Path_66_00000170982451866143886770000014634557510678918028_" class="st9" d="M1828.54,254.74h-5.274v-22.829h5.274
			v5.146c0.644-1.627,1.702-3.059,3.068-4.152c1.441-1.073,3.225-1.581,5.015-1.427v5.537h-0.308
			c-2.099-0.072-4.131,0.743-5.597,2.247c-1.592,1.889-2.376,4.329-2.184,6.792L1828.54,254.74z"/>
		<path id="Path_67_00000157291438307607917300000009084691466475469231_" class="st9" d="M1842.64,245.182
			c0.201,1.661,1,3.191,2.247,4.306c1.212,1.005,2.749,1.535,4.323,1.489c1.162,0.029,2.315-0.206,3.373-0.689
			c1.038-0.525,1.987-1.21,2.811-2.03l3.076,2.719c-1.083,1.289-2.414,2.349-3.912,3.116c-1.69,0.816-3.551,1.216-5.427,1.166
			c-1.576,0.012-3.139-0.282-4.603-0.864c-2.835-1.113-5.082-3.353-6.204-6.184c-0.618-1.538-0.927-3.184-0.907-4.841
			c-0.011-1.587,0.267-3.163,0.823-4.649c0.515-1.406,1.299-2.698,2.307-3.805c0.992-1.078,2.19-1.945,3.523-2.55
			c1.415-0.628,2.948-0.942,4.495-0.923c1.647-0.035,3.28,0.304,4.777,0.992c1.324,0.629,2.492,1.546,3.416,2.684
			c0.927,1.166,1.622,2.5,2.046,3.928c0.464,1.527,0.698,3.115,0.692,4.711c0,0.235-0.011,0.461-0.023,0.695
			c-0.012,0.234-0.035,0.477-0.065,0.734L1842.64,245.182z M1854.313,241.724c-0.119-1.572-0.724-3.068-1.73-4.282
			c-1.019-1.168-2.517-1.805-4.065-1.727c-1.509-0.043-2.965,0.562-3.999,1.663c-1.093,1.203-1.768,2.728-1.924,4.346H1854.313z"/>
		<path id="Path_68_00000035524556603961263560000007412250616812096927_" class="st9" d="M1866.652,245.182
			c0.201,1.661,1,3.191,2.247,4.306c1.212,1.005,2.749,1.535,4.323,1.489c1.162,0.029,2.315-0.206,3.373-0.689
			c1.038-0.525,1.987-1.21,2.811-2.03l3.076,2.719c-1.083,1.289-2.414,2.349-3.912,3.116c-1.69,0.816-3.551,1.216-5.427,1.166
			c-1.576,0.012-3.139-0.282-4.603-0.864c-2.835-1.113-5.082-3.353-6.204-6.184c-0.618-1.538-0.927-3.184-0.907-4.841
			c-0.011-1.587,0.268-3.163,0.823-4.649c0.515-1.406,1.299-2.698,2.307-3.805c0.992-1.078,2.19-1.945,3.523-2.55
			c1.415-0.628,2.948-0.942,4.495-0.923c1.647-0.035,3.28,0.304,4.777,0.992c1.324,0.629,2.492,1.546,3.416,2.684
			c0.931,1.167,1.629,2.503,2.055,3.934c0.464,1.527,0.698,3.115,0.692,4.711c0,0.235-0.011,0.461-0.023,0.695
			c-0.012,0.234-0.035,0.477-0.065,0.734L1866.652,245.182z M1878.325,241.724c-0.119-1.572-0.724-3.068-1.73-4.282
			c-1.019-1.168-2.517-1.805-4.065-1.727c-1.509-0.043-2.965,0.562-3.999,1.663c-1.093,1.203-1.768,2.728-1.924,4.346H1878.325z"/>
		<path id="Path_69_00000112630363138704176980000018414768625854194063_" class="st9" d="M1891.958,254.738h-5.274v-22.828h5.274
			l-0.031,3.582c0.758-1.114,1.712-2.081,2.814-2.854c1.283-0.845,2.799-1.264,4.334-1.2c2.26-0.138,4.465,0.731,6.024,2.373
			c1.484,1.792,2.24,4.076,2.119,6.399v14.527h-5.274v-12.94c0.097-1.481-0.354-2.946-1.269-4.116
			c-0.92-0.996-2.239-1.527-3.593-1.447c-1.391-0.052-2.738,0.49-3.705,1.492c-1.001,1.143-1.511,2.635-1.419,4.152
			L1891.958,254.738z"/>
	</g>
</g>
<g id="container-bg">
	<g>
		<g>
			<line class="st11" x1="291.688" y1="267.135" x2="291.688" y2="267.135"/>
			<line class="st12" x1="291.688" y1="284.232" x2="291.688" y2="754.395"/>
			<line class="st11" x1="291.688" y1="762.943" x2="291.688" y2="762.943"/>
		</g>
	</g>
	<g>
		<g>
			<line class="st11" x1="1358.517" y1="273.135" x2="1358.517" y2="273.135"/>
			<line class="st13" x1="1358.517" y1="290.025" x2="1358.517" y2="754.499"/>
			<line class="st11" x1="1358.517" y1="762.943" x2="1358.517" y2="762.943"/>
		</g>
	</g>
	<path class="st14" d="M1359.447,792.812h53.534v27.683c0,13.607-9.92,24.638-22.157,24.638H256.791
		c-12.237,0-22.157-11.031-22.157-24.638v-27.683h56.407"/>
	<path class="st14" d="M1360.742,236.783h53.534v-27.706c0-13.607-9.92-24.638-22.157-24.638H258.086
		c-12.237,0-22.157,11.031-22.157,24.638v27.706h56.407"/>
</g>
<g id="filters">
	<path class="st15" d="M506.105,732.63h-57.899c-8.254,0-14.945-6.691-14.945-14.945v-399.39c0-8.254,6.691-14.945,14.945-14.945
		h57.899c8.254,0,14.945,6.691,14.945,14.945v399.39C521.05,725.939,514.359,732.63,506.105,732.63z"/>
	<path class="st15" d="M711.751,732.63h-57.899c-8.254,0-14.945-6.691-14.945-14.945v-399.39c0-8.254,6.691-14.945,14.945-14.945
		h57.899c8.254,0,14.945,6.691,14.945,14.945v399.39C726.696,725.939,720.005,732.63,711.751,732.63z"/>
	<path class="st15" d="M917.397,732.63h-57.899c-8.254,0-14.945-6.691-14.945-14.945v-399.39c0-8.254,6.691-14.945,14.945-14.945
		h57.899c8.254,0,14.945,6.691,14.945,14.945v399.39C932.342,725.939,925.651,732.63,917.397,732.63z"/>
	<path class="st15" d="M1123.043,732.63h-57.899c-8.254,0-14.945-6.691-14.945-14.945v-399.39c0-8.254,6.691-14.945,14.945-14.945
		h57.899c8.254,0,14.945,6.691,14.945,14.945v399.39C1137.988,725.939,1131.297,732.63,1123.043,732.63z"/>
</g>
<g id="particles-seven">
	<g>
		<circle class="st16" cx="1432.923" cy="642.225" r="8.767"/>
		<circle class="st16" cx="1424.133" cy="401.083" r="8.767"/>
		<g>
			<line class="st17" x1="1523.883" y1="605.374" x2="1586.558" y2="605.717"/>
			<g>
				<path class="st15" d="M1572.165,621.214l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.53-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C1573.499,621.788,1572.661,621.753,1572.165,621.214z"/>
			</g>
		</g>
		<g>
			<line class="st17" x1="1395.334" y1="466.984" x2="1458.01" y2="467.327"/>
			<g>
				<path class="st15" d="M1443.616,482.825l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.53-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C1444.951,483.398,1444.112,483.363,1443.616,482.825z"/>
			</g>
		</g>
		<g>
			<line class="st17" x1="1479.878" y1="400.811" x2="1542.554" y2="401.154"/>
			<g>
				<path class="st15" d="M1528.161,416.652l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.531-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C1529.495,417.225,1528.656,417.19,1528.161,416.652z"/>
			</g>
		</g>
		<line class="st16" x1="1504.214" y1="589.649" x2="1476.111" y2="589.649"/>
		<g>
			<line class="st16" x1="1548.503" y1="551.701" x2="1501.106" y2="551.701"/>
			<circle class="st16" cx="1574.774" cy="551.701" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="1530.984" y1="445.831" x2="1483.587" y2="445.831"/>
			<circle class="st16" cx="1557.255" cy="445.831" r="8.767"/>
		</g>
		<circle class="st16" cx="1452.458" cy="589.649" r="8.767"/>
	</g>
</g>
<g id="particles-six">
	<g>
		<path class="st16" d="M1203.48,462.521c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374S1198.65,462.173,1203.48,462.521z"/>
		<path class="st16" d="M1203.48,374.559c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374S1198.65,374.211,1203.48,374.559z"/>
		<path class="st16" d="M1276.228,474.508c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374S1271.399,474.16,1276.228,474.508z"/>
		<path class="st16" d="M1276.228,594.464c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.115
			c-4.829-0.348-8.462-4.545-8.115-9.374C1267.202,597.749,1271.399,594.116,1276.228,594.464z"/>
		<path class="st16" d="M1276.228,418.54c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374S1271.399,418.192,1276.228,418.54z"/>
		<path class="st16" d="M1203.48,550.483c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C1194.453,553.768,1198.65,550.135,1203.48,550.483z"/>
		<path class="st16" d="M1203.48,638.445c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.115
			c-4.829-0.348-8.462-4.545-8.115-9.374C1194.453,641.73,1198.65,638.097,1203.48,638.445z"/>
	</g>
</g>
<g id="particles-five">
	<g>
		<circle class="st5" cx="1114.17" cy="472.231" r="8.767"/>
		<path class="st5" d="M1074.647,428.902c4.829,0.348,8.462,4.545,8.115,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374S1069.818,428.554,1074.647,428.902z"/>
		<path class="st5" d="M1114.8,528c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C1105.774,531.285,1109.97,527.652,1114.8,528z"/>
		<path class="st5" d="M1074.647,562.584c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C1065.621,565.869,1069.818,562.236,1074.647,562.584z"/>
		<path class="st16" d="M1007.597,458.831c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374S1002.768,458.483,1007.597,458.831z"/>
		<g>
			<line class="st16" x1="950.438" y1="536.744" x2="943.528" y2="536.744"/>
			<path class="st16" d="M962.247,537.374c-0.348-4.829,3.285-9.026,8.114-9.374c4.829-0.348,9.026,3.285,9.374,8.115
				c0.348,4.829-3.285,9.026-8.115,9.374C966.791,545.836,962.595,542.203,962.247,537.374z"/>
		</g>
		<g>
			<path class="st16" d="M1076.166,371.463c4.829,0.348,8.462,4.545,8.115,9.374s-4.545,8.462-9.374,8.114
				c-4.829-0.348-8.462-4.545-8.114-9.374S1071.337,371.115,1076.166,371.463z"/>
			<line class="st16" x1="1000.057" y1="380.207" x2="1006.968" y2="380.207"/>
			<path class="st16" d="M988.248,379.577c0.348,4.829-3.285,9.026-8.114,9.374c-4.829,0.348-9.026-3.285-9.374-8.114
				s3.285-9.026,8.114-9.374C983.704,371.115,987.901,374.748,988.248,379.577z"/>
			<circle class="st5" cx="1027.521" cy="380.207" r="8.767"/>
		</g>
		<g>
			<path class="st16" d="M1076.166,643.551c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
				c-4.829-0.348-8.462-4.545-8.114-9.374C1067.14,646.836,1071.337,643.203,1076.166,643.551z"/>
			<line class="st16" x1="1000.057" y1="652.295" x2="1006.968" y2="652.295"/>
			<path class="st16" d="M988.248,651.665c0.348,4.829-3.285,9.026-8.114,9.374c-4.829,0.348-9.026-3.285-9.374-8.114
				c-0.348-4.829,3.285-9.026,8.114-9.374C983.704,643.203,987.901,646.836,988.248,651.665z"/>
			<path class="st5" d="M1028.15,643.551c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
				c-4.829-0.348-8.462-4.545-8.114-9.374C1019.124,646.836,1023.321,643.203,1028.15,643.551z"/>
		</g>
	</g>
</g>
<g id="particles-four">
	<g>
		<circle class="st5" cx="908.524" cy="432.205" r="8.767"/>
		<circle class="st5" cx="908.524" cy="501.373" r="8.767"/>
		<circle class="st5" cx="868.372" cy="466.789" r="8.767"/>
		<circle class="st5" cx="908.524" cy="565.887" r="8.767"/>
		<circle class="st5" cx="908.524" cy="635.055" r="8.767"/>
		<circle class="st5" cx="868.372" cy="600.471" r="8.767"/>
		<path class="st16" d="M819.925,436.224c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374S815.096,435.876,819.925,436.224z"/>
		<path class="st16" d="M766.819,388.702c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374C757.793,391.987,761.99,388.354,766.819,388.702z"/>
		<path class="st16" d="M799.372,483.746c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C790.346,487.031,794.543,483.398,799.372,483.746z"/>
		<path class="st16" d="M799.372,578.789c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C790.346,582.075,794.543,578.442,799.372,578.789z"/>
		<path class="st16" d="M771.909,626.311c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374C762.883,629.597,767.079,625.964,771.909,626.311z"/>
		<g>
			<circle class="st16" cx="867.311" cy="540.012" r="8.767"/>
			<line class="st16" x1="791.832" y1="540.012" x2="798.742" y2="540.012"/>
			<circle class="st16" cx="771.279" cy="540.012" r="8.767"/>
			<circle class="st5" cx="819.295" cy="540.012" r="8.767"/>
		</g>
	</g>
</g>
<g id="particles-three">
	<g>
		<path class="st5" d="M662.656,396.501c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374S657.826,396.153,662.656,396.501z"/>
		<path class="st5" d="M704.207,431.085c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C695.181,434.37,699.378,430.737,704.207,431.085z"/>
		<path class="st5" d="M704.207,500.254c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C695.181,503.539,699.378,499.906,704.207,500.254z"/>
		<path class="st5" d="M664.055,465.669c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374S659.226,465.322,664.055,465.669z"/>
		<path class="st5" d="M704.207,569.422c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.115-9.374C695.181,572.707,699.378,569.074,704.207,569.422z"/>
		<path class="st5" d="M664.055,534.838c4.829,0.348,8.462,4.545,8.115,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			c-4.829-0.348-8.462-4.545-8.114-9.374C655.029,538.123,659.226,534.49,664.055,534.838z"/>
		<circle class="st16" cx="613.042" cy="422.894" r="8.767"/>
		<g>
			<line class="st16" x1="536.991" y1="485.132" x2="530.08" y2="485.132"/>
			<circle class="st16" cx="557.544" cy="485.132" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="592.489" y1="547.37" x2="585.579" y2="547.37"/>
			<circle class="st16" cx="613.042" cy="547.37" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="536.991" y1="671.847" x2="530.08" y2="671.847"/>
			<circle class="st16" cx="557.544" cy="671.847" r="8.767"/>
		</g>
		<g>
			<circle class="st16" cx="661.058" cy="360.655" r="8.767"/>
			<line class="st16" x1="585.579" y1="360.655" x2="592.489" y2="360.655"/>
			<circle class="st16" cx="565.026" cy="360.655" r="8.767"/>
			<path class="st5" d="M613.672,351.911c4.829,0.348,8.462,4.545,8.114,9.374s-4.545,8.462-9.374,8.114
				c-4.829-0.348-8.462-4.545-8.114-9.374S608.843,351.563,613.672,351.911z"/>
		</g>
		<g>
			<circle class="st16" cx="661.058" cy="609.608" r="8.767"/>
			<line class="st16" x1="585.579" y1="609.608" x2="592.489" y2="609.608"/>
			<circle class="st16" cx="565.026" cy="609.608" r="8.767"/>
			<circle class="st5" cx="613.042" cy="609.608" r="8.767"/>
		</g>
	</g>
</g>
<g id="particles-two">
	<g>
		<g>
			<line class="st17" x1="329.254" y1="531.731" x2="391.929" y2="532.074"/>
			<g>
				<path class="st15" d="M377.536,547.572l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.53-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C378.871,548.145,378.032,548.11,377.536,547.572z"/>
			</g>
		</g>
		<g>
			<line class="st16" x1="363.176" y1="387.39" x2="315.778" y2="387.39"/>
			<circle class="st16" cx="389.446" cy="387.39" r="8.767"/>
		</g>
		<circle class="st5" cx="456.298" cy="332.924" r="8.767"/>
		<circle class="st5" cx="497.849" cy="367.509" r="8.767"/>
		<circle class="st5" cx="497.849" cy="436.677" r="8.767"/>
		<circle class="st5" cx="457.697" cy="402.093" r="8.767"/>
		<circle class="st5" cx="497.849" cy="505.846" r="8.767"/>
		<circle class="st5" cx="457.697" cy="471.261" r="8.767"/>
		<circle class="st5" cx="457.697" cy="546.053" r="8.767"/>
		<path class="st5" d="M493.479,690.833c4.829,0.348,8.462,4.545,8.114,9.374c-0.348,4.829-4.545,8.462-9.374,8.114
			s-8.462-4.545-8.114-9.374C484.453,694.119,488.65,690.486,493.479,690.833z"/>
		<circle class="st5" cx="459.907" cy="659.277" r="8.767"/>
		<g>
			<circle class="st16" cx="458.507" cy="599.727" r="8.767"/>
			<line class="st16" x1="383.028" y1="599.727" x2="389.938" y2="599.727"/>
			<circle class="st16" cx="362.475" cy="599.727" r="8.767"/>
			<circle class="st5" cx="410.491" cy="599.727" r="8.767"/>
		</g>
	</g>
</g>
<g id="particles-one">
	<g>
		<g>
			<line class="st17" x1="180.989" y1="600.398" x2="243.665" y2="600.741"/>
			<g>
				<path class="st15" d="M229.272,616.239l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.53-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C230.606,616.812,229.768,616.777,229.272,616.239z"/>
			</g>
		</g>
		<g>
			<line class="st17" x1="81.24" y1="516.406" x2="143.916" y2="516.749"/>
			<g>
				<path class="st15" d="M129.522,532.247l-0.946-1.027c-0.497-0.539-0.462-1.379,0.078-1.875l12.658-11.635
					c0.567-0.521,0.572-1.415,0.011-1.943l-12.53-11.776c-0.534-0.502-0.56-1.342-0.057-1.875l0.957-1.017
					c0.502-0.533,1.341-0.558,1.874-0.057l15.697,14.758c0.561,0.528,0.556,1.421-0.011,1.942l-15.858,14.582
					C130.857,532.82,130.018,532.785,129.522,532.247z"/>
			</g>
		</g>
		<line class="st16" x1="100.516" y1="457.45" x2="79.543" y2="457.45"/>
		<line class="st16" x1="161.321" y1="584.674" x2="133.218" y2="584.674"/>
		<g>
			<line class="st16" x1="205.61" y1="546.725" x2="158.213" y2="546.725"/>
			<circle class="st16" cx="231.881" cy="546.725" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="188.091" y1="440.855" x2="140.694" y2="440.855"/>
			<circle class="st16" cx="214.362" cy="440.855" r="8.767"/>
		</g>
		<circle class="st16" cx="109.564" cy="584.674" r="8.767"/>
		<g>
			<line class="st16" x1="158.213" y1="633.346" x2="151.302" y2="633.346"/>
			<circle class="st16" cx="178.766" cy="633.346" r="8.767"/>
			<line class="st16" x1="103.286" y1="633.346" x2="110.197" y2="633.346"/>
			<circle class="st16" cx="82.733" cy="633.346" r="8.767"/>
			<circle class="st5" cx="130.749" cy="633.346" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="190.641" y1="491.915" x2="197.551" y2="491.915"/>
			<circle class="st16" cx="170.088" cy="491.915" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="343.242" y1="491.265" x2="336.331" y2="491.265"/>
			<circle class="st16" cx="363.795" cy="491.265" r="8.767"/>
			<circle class="st16" cx="267.762" cy="491.265" r="8.767"/>
			<circle class="st5" cx="315.778" cy="491.265" r="8.767"/>
		</g>
		<g>
			<line class="st16" x1="149.446" y1="399.156" x2="142.535" y2="399.156"/>
			<circle class="st16" cx="169.998" cy="399.156" r="8.767"/>
			<line class="st16" x1="94.519" y1="399.156" x2="101.429" y2="399.156"/>
			<circle class="st16" cx="73.966" cy="399.156" r="8.767"/>
			<circle class="st5" cx="121.982" cy="399.156" r="8.767"/>
		</g>
	</g>
</g>
<g id="pipe-particles-x">
<!-- 	<circle class="st5" cx="497.849" cy="778.639" r="9.156"/> -->
	<circle class="st5" cx="576.423" cy="778.639" r="9.156"/>
	<circle class="st5" cx="754.095" cy="778.639" r="9.156"/>
	<circle class="st5" cx="682.802" cy="778.639" r="9.156"/>
	<circle class="st5" cx="882.659" cy="778.639" r="9.156"/>
	<circle class="st5" cx="961.232" cy="778.639" r="9.156"/>
	<circle class="st5" cx="1138.905" cy="778.639" r="9.156"/>
	<circle class="st5" cx="1067.611" cy="778.639" r="9.156"/>
	<circle class="st5" cx="1583.93" cy="518.039" r="9.156"/>
	<circle class="st5" cx="1761.602" cy="518.039" r="9.156"/>
	<circle class="st5" cx="1690.309" cy="518.039" r="9.156"/>
	<circle class="st5" cx="579.133" cy="257.979" r="9.156"/>
	<circle class="st5" cx="657.706" cy="257.979" r="9.156"/>
	<circle class="st5" cx="835.379" cy="257.979" r="9.156"/>
	<circle class="st5" cx="764.086" cy="257.979" r="9.156"/>
	<circle class="st5" cx="963.943" cy="257.979" r="9.156"/>
	<circle class="st5" cx="1042.516" cy="257.979" r="9.156"/>
	<circle class="st5" cx="1148.895" cy="257.979" r="9.156"/>
</g>
<g id="pipe-particles-y-down">
	<g>
<!-- 		<circle class="st5" cx="1239.283" cy="360.655" r="9.156"/> -->
		<circle class="st5" cx="1239.283" cy="471.261" r="9.156"/>
	</g>
	<g>
		<circle class="st5" cx="1903.69" cy="572.521" r="9.156"/>
		<circle class="st5" cx="1903.69" cy="677.595" r="9.156"/>
		<circle class="st5" cx="1903.69" cy="782.67" r="9.156"/>
		<circle class="st5" cx="1903.69" cy="887.744" r="9.156"/>
	</g>
</g>
<g id="pipe-particles-y-up">
	<g>
		<circle class="st5" cx="1239.283" cy="572.521" r="9.156"/>
		<circle class="st5" cx="1239.283" cy="683.127" r="9.156"/>
	</g>
	<g>
		<circle class="st5" cx="1903.282" cy="421.851" r="9.156"/>
<!-- 		<circle class="st5" cx="1903.282" cy="517.126" r="9.156"/> -->
	</g>
</g>
</svg>

</div>
              
            
!

CSS

              
                .container{
  max-width: 1400px;
  margin: 0 auto;
}

svg{
  margin-top: 10px;
}

/* SVG Wonk */
	.st0{fill:#9C9B9B;}
	.st1{fill:#D9D9D9;}
	.st2{fill:#7BB262;}
	.st3{fill:#C5C5C5;stroke:#C5C5C5;stroke-miterlimit:10;}
	.st4{fill:none;stroke:#C5C5C5;stroke-width:8;stroke-miterlimit:10;}
	.st5{fill:#BDBDBD;stroke:#BDBDBD;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st6{fill:#FFFFFF;stroke:#C5C5C5;stroke-width:3;stroke-miterlimit:10;}
	.st7{fill:#FFFFFF;stroke:#C5C5C5;stroke-width:8;stroke-miterlimit:10;}
	.st8{fill:#727272;}
	.st9{fill:#2F9C89;}
	.st10{fill:#717171;}
	.st11{fill:none;stroke:#2A9C88;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}
	.st12{fill:none;stroke:#2A9C88;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0,17.0968;}
	.st13{fill:none;stroke:#2A9C88;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0,16.89;}
	.st14{fill:none;stroke:#2A9C88;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st15{fill:#2A9C88;}
	.st16{fill:none;stroke:#2A9C88;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st17{fill:none;stroke:#2A9C88;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}

/* Animation */
#particles-one, 
#particles-two, 
#particles-three,
#particles-four,
#particles-five,
#particles-six,
#particles-seven,
#pipe-particles-x{
  opacity: 1;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Delay particles sequence*/

#particles-two{
  animation-delay: 0.4s;
}

#particles-three{
  animation-delay: 0.6s;
}

#particles-four{
  animation-delay: 0.8s;
}

#particles-five{
  animation-delay: 1s;
}

#particles-six{
  animation-delay: 1.2s;
}
#particles-six{
  animation-delay: 1.4s;
}

#particles-seven{
  animation-delay: 1.6s;
}

#pipe-particles-y-down{
  opacity: 1;
  animation-name: drop;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#pipe-particles-y-up{
  opacity: 1;
  animation-name: rise;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.geo-carbon-left{
  opacity: 1;
  animation-name: bury-left;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.geo-carbon-right{
  opacity: 1;
  animation-name: bury-right;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes drop{
  0% {transform: translatey(-100px); opacity: 0;}
  50% {transform: translatey(0px); opacity: 1;}
  100% {opacity: 0;}
}

@keyframes slide{
  0% {transform: translatex(-100px); opacity: 0;}
  80% {transform: translatexy(0px); opacity: 1;}
  100% {opacity: 0;}
}

@keyframes rise{
  0% {transform: translatey(100px); opacity: 0;}
  80% {transform: translatey(0px); opacity: 1;}
  100% {opacity: 0;}
}

@keyframes bury-left{
  0% {transform: translatex(-10px); opacity: 0;}
  100% {transform: translatey(0px); opacity: 1;}
}

@keyframes bury-right{
  0% {transform: translatex(10px); opacity: 0;}
  100% {transform: translatey(0px); opacity: 1;}
}
              
            
!

JS

              
                
              
            
!
999px

Console