Pen Settings

HTML

CSS

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

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.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

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.

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.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<div id='section-pin'>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1800 5072" style="enable-background:new 0 0 1800 5072;" xml:space="preserve">
<g id="XMLID_79_">
	<defs>
		<rect id="XMLID_78_" width="1800" height="5072"/>
	</defs>
	<clipPath id="XMLID_25_">
		<use xlink:href="#XMLID_78_"  style="overflow:visible;"/>
	</clipPath>
	<g id="XMLID_77_" style="clip-path:url(#XMLID_25_);">
		<linearGradient id="XMLID_93_" gradientUnits="userSpaceOnUse" x1="918" y1="2562" x2="918" y2="1396">
			<stop  offset="0" style="stop-color:#CCE0F4"/>
			<stop  offset="7.401270e-002" style="stop-color:#C3DAF2"/>
			<stop  offset="0.1971" style="stop-color:#A9CCEC"/>
			<stop  offset="0.354" style="stop-color:#7EB8E4"/>
			<stop  offset="0.5371" style="stop-color:#379FD9"/>
			<stop  offset="0.5674" style="stop-color:#1F9CD8"/>
			<stop  offset="0.8652" style="stop-color:#0C75BC"/>
			<stop  offset="0.9944" style="stop-color:#005C97"/>
		</linearGradient>
		<rect id="XMLID_10_" x="-42" y="1396" style="fill:url(#XMLID_93_);" width="1920" height="1166"/>
		<circle style="fill:#9A4928;" cx="1280.7" cy="2314.6" r="46.6"/>
		<circle style="fill:#9A4928;" cx="1338.5" cy="2317.4" r="40.8"/>
		<rect x="-41.8" y="2657.1" style="fill:#9BCDCE;" width="1920" height="1166"/>
		<g>
			<g>
				<path style="fill:#F5F6F6;" d="M396.8,3395.4L501,3052.1c228.9,67.7,13.2,609.9,126.2,609.9l-238.6-5.6L396.8,3395.4"/>
			</g>
			<g>
				<path style="fill:#F5F6F6;" d="M358.7,3313.9l-80.6-261.8c-283.6,37.6-67.6,604.3-146.5,604.3h258.9l6.3-261"/>
			</g>
		</g>
		<path style="fill:#7FADB0;" d="M1266.4,3327.8c-2.7-2.2-6.3-5.2-12.8-5.2c-8,0-13.6,5.1-17.6,10.7c-2.5,3.4-5.3,7.6-7.4,11.3
			c-7.5,13-16.8,30-16.8,30l-131.7,236.1h347.1l-146.5-262.7c0,0-6.5-10.8-9.4-14.7C1269.5,3331.1,1267.6,3328.8,1266.4,3327.8z"/>
		<g>
			<g>
				<rect x="1104.4" y="3569.9" style="fill:#A6705A;" width="3.1" height="17.4"/>
				<rect x="1101.3" y="3569.9" style="fill:#6E412A;" width="3.1" height="17.4"/>
			</g>
			<g>
				<path style="fill:#436E34;" d="M1082.2,3544.4c0,15,5.4,27.8,22.2,27.8v-68.6C1095.2,3503.6,1082.2,3527.5,1082.2,3544.4z"/>
				<path style="fill:#96BD6E;" d="M1104.4,3503.6v68.6l0,0c16.8,0,22.6-12.2,22.6-27.3C1127,3527.5,1113.3,3503.6,1104.4,3503.6z"
					/>
			</g>
		</g>
		<path style="fill:#80B9BB;" d="M1644.8,3347.6c-2.6-2.1-5.9-4.9-12.1-4.9c-7.5,0-12.8,4.8-16.6,10.1c-2.3,3.2-5,7.2-7,10.6
			c-7.1,12.3-15.9,28.4-15.9,28.4l-124.2,222.7h327.3l-138.2-247.7c0,0-6.1-10.2-8.9-13.8
			C1647.6,3350.6,1645.9,3348.5,1644.8,3347.6z"/>
		<path style="fill:#7FADB0;" d="M1537.7,3271.4c-2.6-2.1-5.9-4.9-12-4.9c-7.5,0-12.8,4.8-16.6,10.1c-2.3,3.2-5,7.2-6.9,10.7
			c-7.1,12.3-15.8,28.4-15.8,28.4l-123.7,223.2h326L1551,3290.5c0,0-6.1-10.2-8.8-13.9C1540.6,3274.4,1538.9,3272.3,1537.7,3271.4z"
			/>
		<path style="fill:#7EA2A6;" d="M1385.1,3257.4c-3.4-2.8-7.7-6.5-15.7-6.5c-9.8,0-16.6,6.3-21.6,13.2c-3,4.2-6.5,9.4-9.1,13.9
			c-9.2,16.1-20.6,37-20.6,37L1157,3605.9h424.8l-179.4-323.6c0,0-7.9-13.3-11.5-18.1C1388.8,3261.3,1386.6,3258.6,1385.1,3257.4z"
			/>
		<g>
			<path style="fill:#9F8E8A;" d="M1417.6,3341.9c-19.2,0.4-48.9,39.8-48.9,39.8l-0.1,0.2l-0.7,1.2l-130.9,211.8h202.6v-200
				l5.2-16.6C1448.3,3353.4,1439.2,3341.4,1417.6,3341.9z"/>
			<path style="fill:#C5B5B3;" d="M1433.7,3366.3c-0.4,3,5.8,30.5,5.8,30.5v198.1H1642l-140.7-227.6v-0.1l-0.1,0
				C1501.2,3367.2,1439.3,3317.5,1433.7,3366.3z"/>
			<path style="fill:#F1E9ED;" d="M1418.9,3302.6c-2.9,3.6-6.2,8.1-8.6,11.8c-8.8,13.8-19.6,31.7-19.6,31.7l-22,35.7
				c0,0,11.7-12.7,19.2-9.3c11.9,5.4,14.7,24.9,23.1,17.2c14.6-13.3,19.2-19.6,24.1-4.4c1.2,3.6,2.6,8.1,4.5,11.5v-105.5
				C1430.1,3291.3,1423.6,3296.6,1418.9,3302.6z"/>
			<path style="fill:#FFFFFF;" d="M1471,3318.1c0,0-7.6-11.4-10.9-15.5c-2.1-2.5-4.2-4.8-5.6-5.9c-3.2-2.4-7.3-5.5-15-5.5l0,0v105.5
				c3,5.5,7.1,8.3,13.2,0.9c7.5-9.2,11.7-33.5,31.2-14.8c17.1,16.4,17.5-15.6,17.5-15.6L1471,3318.1z"/>
		</g>
		<g>
			<path style="fill:#9F8E8A;" d="M1548.4,3392.7c-15.6,0.3-39.8,32.4-39.8,32.4l-0.1,0.2l-0.6,1l-106.7,172.6h165.1v-163l4.2-13.5
				C1573.4,3402.1,1566,3392.3,1548.4,3392.7z"/>
			<path style="fill:#C5B5B3;" d="M1561.5,3412.6c-0.3,2.4,4.7,24.8,4.7,24.8v161.4h165.1l-114.7-185.5v0l-0.1,0
				C1616.6,3413.4,1566.1,3372.8,1561.5,3412.6z"/>
			<path style="fill:#F1E9ED;" d="M1549.5,3360.7c-2.3,2.9-5.1,6.6-7,9.7c-7.2,11.2-16,25.8-16,25.8l-18,29.1c0,0,9.5-10.4,15.6-7.6
				c9.7,4.4,11.9,20.3,18.8,14c11.9-10.8,15.6-15.9,19.6-3.6c0.9,3,2.1,6.6,3.7,9.3v-86C1558.6,3351.5,1553.3,3355.8,1549.5,3360.7z
				"/>
			<path style="fill:#FFFFFF;" d="M1591.9,3373.3c0,0-6.1-9.3-8.9-12.6c-1.7-2-3.4-3.9-4.6-4.8c-2.6-1.9-6-4.5-12.2-4.5l0,0v86
				c2.5,4.5,5.8,6.8,10.7,0.8c6.1-7.5,9.5-27.4,25.4-12.1c13.9,13.4,14.3-12.7,14.3-12.7L1591.9,3373.3z"/>
		</g>
		<path style="fill:#FFFFFF;" d="M1408.2,3222.9c-0.3-2.6,1.4-7.2,6.7-8.1c2.8-0.5,5.4,0.4,5.4,0.4c-0.7-1.2-0.7-7.4,5.5-8.8
			c6.1-1.4,9.1,1.3,10.3,3c0,0.1,0.1,0.2,0.1,0.2c0-0.6-0.3-6.3,6.4-8.3c5.2-1.6,9,1,9.1,0.9c1.7-4.1,5.4-8,11.7-8.8
			c18.1-2.3,19.3,13.8,19.3,13.7c2.4-2.7,7.3-3.5,10.8-2.6c8.4,2.3,7.1,9.7,7.1,9.6c3.1-2.3,7.9-2.4,11.6-0.9
			c6.6,2.8,5.9,9.2,5.9,9.7H1408.2z"/>
		<g>
			<g>
				<path style="fill:#FFFFFF;" d="M1742.3,3359c-3.6,0.9-6.7,3.5-8.7,6.9c1.5-4,4.6-7.1,8.5-8.1s7.7,0.4,10.3,3.3
					C1749.6,3358.9,1746,3358,1742.3,3359z"/>
				<path style="fill:#FFFFFF;" d="M1723.6,3363.7c-3.7,0.9-6.7,3.5-8.7,6.9c1.5-4,4.6-7.1,8.5-8.1c3.9-1,7.7,0.4,10.3,3.3
					C1730.9,3363.7,1727.3,3362.8,1723.6,3363.7z"/>
			</g>
			<g>
				<path style="fill:#FFFFFF;" d="M1725.3,3353.1c-3.4,0.6-6.3,2.8-8.3,5.8c1.6-3.6,4.6-6.2,8.2-6.9c3.6-0.6,7,0.9,9.2,3.8
					C1731.9,3353.6,1728.7,3352.5,1725.3,3353.1z"/>
				<path style="fill:#FFFFFF;" d="M1707.8,3356.2c-3.4,0.6-6.4,2.8-8.3,5.8c1.6-3.5,4.6-6.2,8.2-6.9c3.6-0.6,7,0.9,9.2,3.8
					C1714.5,3356.7,1711.2,3355.6,1707.8,3356.2z"/>
			</g>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1540.9,3462.4c-2,3.9-4,8-5.3,10.5c-0.3,0.6-0.3,1.3,0,1.8c0.7,1.3,4.1,0.9,4.1,0.9l-9.7,19.4
				c0,0-1.5,2.7-0.8,3.5c1.4,1.9,6.1,1.1,6.1,1.1l-10.7,21.4c0,0-1.5,3-1.6,3.1c-1.5,3.1,1.6,3.2,1.6,3.2h23.1v-76.6
				C1546,3450.7,1543.9,3456.4,1540.9,3462.4z"/>
			<path style="fill:#96BD6E;" d="M1571.8,3523.3c-0.1-0.5-0.8-1.8-0.8-1.8l-10.9-21.8c0,0,5,0.6,6.1-1.2c0.2-0.3,0.2-0.8,0.1-1.2
				c0-0.1-0.2-0.5-0.3-0.8c0-0.2-0.1-0.3-0.1-0.3l-1.7-3.4l-8.6-17.2c0,0,3,0.3,3.9-0.7c0.4-0.5,0.6-1.2,0.2-2
				c-1.2-2.5-3.3-6.6-5.3-10.5c-3.1-6-5.1-11.7-6.8-11.7l0,0v76.6h21.1c0,0,2,0,2.9-1.1C1572.3,3525.4,1572.1,3524.1,1571.8,3523.3z
				"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1738.7,3533.8c-1.4,2.7-2.7,5.4-3.6,7.1c-0.2,0.4-0.2,0.9,0,1.2c0.6,0.9,2.8,0.6,2.8,0.6
				l-6.6,13.2c0,0-1,1.8-0.6,2.4c0.9,1.3,4.1,0.8,4.1,0.8l-7.2,14.5c0,0-1,2-1.1,2.1c-1,2.1,1.1,2.2,1.1,2.2h15.6v-51.8
				C1742.2,3525.9,1740.8,3529.8,1738.7,3533.8z"/>
			<path style="fill:#96BD6E;" d="M1759.7,3575c-0.1-0.3-0.6-1.2-0.6-1.2l-7.4-14.7c0,0,3.4,0.4,4.2-0.8c0.2-0.2,0.1-0.6,0.1-0.8
				c0-0.1-0.1-0.4-0.2-0.5c-0.1-0.1-0.1-0.2-0.1-0.2l-1.1-2.3l-5.8-11.6c0,0,2.1,0.2,2.6-0.4c0.3-0.3,0.4-0.9,0.1-1.3
				c-0.9-1.7-2.2-4.4-3.6-7.1c-2.1-4-3.4-7.9-4.6-7.9l0,0v51.8h14.3c0,0,1.4,0,2-0.7C1760,3576.4,1759.8,3575.5,1759.7,3575z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1479.6,3471.7c-1.4,2.8-2.9,5.7-3.8,7.5c-0.2,0.4-0.2,1,0,1.3c0.5,0.9,2.9,0.6,2.9,0.6l-6.9,13.9
				c0,0-1.1,1.9-0.6,2.5c1,1.4,4.4,0.8,4.4,0.8l-7.7,15.3c0,0-1.1,2.1-1.2,2.2c-1,2.2,1.2,2.3,1.2,2.3h16.5v-54.8
				C1483.3,3463.4,1481.8,3467.4,1479.6,3471.7z"/>
			<path style="fill:#96BD6E;" d="M1501.8,3515.2c-0.1-0.3-0.6-1.3-0.6-1.3l-7.8-15.6c0,0,3.5,0.4,4.4-0.9c0.2-0.3,0.1-0.6,0.1-0.9
				c0,0-0.2-0.4-0.2-0.6c0-0.1-0.1-0.2-0.1-0.2l-1.2-2.4l-6.1-12.3c0,0,2.2,0.2,2.8-0.5c0.3-0.3,0.4-0.9,0.1-1.4
				c-0.9-1.8-2.3-4.7-3.8-7.5c-2.2-4.3-3.6-8.4-4.8-8.4h0v54.8h15.1c0,0,1.5,0,2.1-0.8C1502.1,3516.7,1501.9,3515.8,1501.8,3515.2z"
				/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1500.8,3461.2c-1.8,3.6-3.6,7.2-4.8,9.5c-0.3,0.5-0.3,1.2,0,1.6c0.7,1.2,3.7,0.8,3.7,0.8
				l-8.8,17.6c0,0-1.3,2.4-0.7,3.2c1.3,1.8,5.5,1,5.5,1l-9.7,19.4c0,0-1.4,2.7-1.5,2.8c-1.3,2.8,1.5,2.9,1.5,2.9h20.9v-69.3
				C1505.5,3450.7,1503.6,3455.9,1500.8,3461.2z"/>
			<path style="fill:#96BD6E;" d="M1528.8,3516.3c-0.1-0.4-0.8-1.6-0.8-1.6l-9.8-19.7c0,0,4.5,0.5,5.6-1.1c0.2-0.3,0.1-0.7,0.1-1.1
				c0-0.1-0.1-0.5-0.2-0.7c-0.1-0.1-0.1-0.2-0.1-0.2l-1.5-3.1l-7.8-15.6c0,0,2.7,0.2,3.5-0.6c0.4-0.4,0.5-1.1,0.2-1.8
				c-1.2-2.3-2.9-5.9-4.8-9.5c-2.8-5.4-4.6-10.6-6.1-10.6h0v69.3h19.1c0,0,1.8,0,2.6-1C1529.3,3518.2,1529,3517,1528.8,3516.3z"/>
		</g>
		<path style="fill:#91AF3D;" d="M1344.2,3641.9c0,6-5.8,10.8-12.8,10.8h-157.8c-7.1,0-12.8-4.9-12.8-10.8l0,0
			c0-5.9,5.8-10.8,12.8-10.8h157.8C1338.5,3631.2,1344.2,3636,1344.2,3641.9L1344.2,3641.9z"/>
		<path style="fill:#B1D235;" d="M1694.2,3641.9c0,6-7.6,10.8-17.1,10.8h-210c-9.4,0-17.1-4.9-17.1-10.8l0,0
			c0-5.9,7.6-10.8,17.1-10.8h210C1686.6,3631.2,1694.2,3636,1694.2,3641.9L1694.2,3641.9z"/>
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1298.0575" y1="3641.9707" x2="1481.493" y2="3641.9707">
			<stop  offset="0.7233" style="stop-color:#91AF3D"/>
			<stop  offset="0.7747" style="stop-color:#B1D235"/>
		</linearGradient>
		<path style="fill:url(#SVGID_1_);" d="M1481.5,3641.9c0,6-5.8,10.8-12.8,10.8h-157.8c-7.1,0-12.8-4.9-12.8-10.8l0,0
			c0-5.9,5.8-10.8,12.8-10.8h157.8C1475.7,3631.2,1481.5,3636,1481.5,3641.9L1481.5,3641.9z"/>
		<path style="fill:#FFFFFF;" d="M1127.6,3298.5c-0.7-4.6,3-10.9,11-11.2c3.9-0.1,6.5,1.2,6.5,1.2c-0.4-2.3,0.4-5.8,3.8-7.3
			c4.2-2,8.1-0.7,9.5,0.3c0.1,0.1,0-6.5,5.2-11.1c9.2-8.2,21.1-5.8,26.3-3.1c10.8,5.8,9.8,15.1,10,14.8c3.3-4.9,7.6-6.2,9.7-6.9
			c4.4-1.3,11.3-0.9,15.9,2.1c8.6,5.6,7.1,13.6,7.2,13.6c3.6-2,7.6-2,11.1-0.3c5.4,2.7,5.4,7.4,5.4,7.9h-112.7H1127.6z"/>
		<path style="fill:#FFFFFF;" d="M1630.3,3292.5c-0.4-2.6,1.7-6.3,6.4-6.4c2.3-0.1,3.8,0.7,3.8,0.7c-0.3-1.3,0.3-3.3,2.2-4.2
			c2.4-1.1,4.7-0.4,5.5,0.2c0,0,0-3.7,3-6.4c5.3-4.7,12.2-3.3,15.2-1.8c6.2,3.3,5.7,8.7,5.8,8.5c1.9-2.8,4.4-3.6,5.6-3.9
			c2.5-0.8,6.5-0.5,9.1,1.2c5,3.2,4.1,7.8,4.1,7.8c2.1-1.1,4.4-1.2,6.4-0.2c3.2,1.5,3.1,4.2,3.2,4.5h-64.9H1630.3z"/>
		<g>
			<path style="fill:#436E34;" d="M1675.7,3502.2c-1.6,3.1-3.2,6.3-4.2,8.3c-0.2,0.5-0.2,1.1,0,1.4c0.6,1,3.3,0.7,3.3,0.7l-7.7,15.3
				c0,0-1.2,2.1-0.7,2.8c1.2,1.5,4.9,0.9,4.9,0.9l-8.5,16.9c0,0-1.2,2.3-1.3,2.4c-1.2,2.4,1.3,2.5,1.3,2.5h18.2V3493
				C1679.7,3493,1678.1,3497.5,1675.7,3502.2z"/>
			<path style="fill:#96BD6E;" d="M1700.2,3550.4c-0.1-0.3-0.6-1.5-0.6-1.5l-8.6-17.3c0,0,4,0.5,4.9-0.9c0.2-0.3,0.1-0.6,0.1-1
				c0-0.1-0.1-0.4-0.2-0.6c-0.1-0.1-0.1-0.3-0.1-0.3l-1.4-2.7l-6.8-13.6c0,0,2.4,0.2,3.1-0.5c0.3-0.4,0.4-1,0.2-1.6
				c-1-2-2.6-5.2-4.2-8.3c-2.5-4.7-4-9.2-5.4-9.2c0,0,0,0,0,0v60.5h16.7c0,0,1.6,0,2.3-0.9C1700.5,3552,1700.4,3551,1700.2,3550.4z"
				/>
		</g>
		<g>
			<rect x="1784.4" y="3585.6" style="fill:#6E412A;" width="1.9" height="17.6"/>
			<rect x="1786.3" y="3585.6" style="fill:#A6705A;" width="1.9" height="17.6"/>
			<path style="fill:#436E34;" d="M1767.5,3568.6c0,10.3,8.4,18.7,18.8,18.7v-37.3C1775.9,3549.9,1767.5,3558.3,1767.5,3568.6z"/>
			<path style="fill:#96BD6E;" d="M1786.3,3549.9L1786.3,3549.9v37.3l0,0c10.3,0,18.7-8.4,18.7-18.7
				C1805,3558.3,1796.6,3549.9,1786.3,3549.9z"/>
		</g>
		<g>
			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1067.9657" y1="3625.2021" x2="1802.7665" y2="3625.2021">
				<stop  offset="0.4941" style="stop-color:#91AF3D"/>
				<stop  offset="0.5059" style="stop-color:#B1D235"/>
			</linearGradient>
			<path style="fill:url(#SVGID_2_);" d="M1802.8,3625.2c0,5.7-5,10.4-11.1,10.4H1079c-6.1,0-11-4.6-11-10.4l0,0
				c0-5.7,4.9-10.3,11-10.3h712.7C1797.8,3614.8,1802.8,3619.5,1802.8,3625.2L1802.8,3625.2z"/>
			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1068.9774" y1="3567.4336" x2="1801.739" y2="3567.4336">
				<stop  offset="0.4941" style="stop-color:#91AF3D"/>
				<stop  offset="0.5059" style="stop-color:#B1D235"/>
			</linearGradient>
			<path style="fill:url(#SVGID_3_);" d="M1435.4,3514c-182.8,0-334.9,46.1-366.4,106.9h732.8
				C1770.3,3560.1,1618.2,3514,1435.4,3514z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1216.5,3523.9c-2.6,5-5.1,10.1-6.7,13.3c-0.4,0.8-0.4,1.7,0,2.3c1,1.7,5.3,1.1,5.3,1.1
				l-12.3,24.7c0,0-1.9,3.4-1.1,4.5c1.8,2.4,7.8,1.4,7.8,1.4l-13.6,27.2c0,0-2,3.7-2,3.9c-1.9,3.9,2.1,4,2.1,4h29.3V3509
				C1223,3509.1,1220.3,3516.3,1216.5,3523.9z"/>
			<path style="fill:#96BD6E;" d="M1255.8,3601.3c-0.2-0.6-1-2.4-1-2.4l-13.9-27.7c0,0,6.4,0.7,7.8-1.5c0.3-0.5,0.2-1.1,0.1-1.5
				c0-0.1-0.2-0.7-0.3-1c-0.1-0.2-0.2-0.4-0.2-0.4l-2.2-4.4l-10.9-21.9c0,0,3.8,0.4,4.9-0.8c0.6-0.6,0.8-1.6,0.3-2.5
				c-1.6-3.2-4.1-8.3-6.7-13.3c-4-7.6-6.4-14.8-8.6-14.8l0,0v97.3h26.9c0,0,2.6,0,3.7-1.4
				C1256.4,3603.9,1256.1,3602.3,1255.8,3601.3z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1151.3,3484.8c-3.9,7.6-7.9,15.5-10.3,20.4c-0.6,1.2-0.6,2.6-0.1,3.5c1.5,2.6,8.1,1.7,8.1,1.7
				l-18.9,37.9c0,0-2.9,5.2-1.6,6.9c2.8,3.8,11.9,2.2,11.9,2.2l-20.9,41.8c0,0-3,5.7-3.1,6c-2.9,6,3.2,6.2,3.2,6.2h45V3462
				C1161.2,3462.1,1157.2,3473.2,1151.3,3484.8z"/>
			<path style="fill:#96BD6E;" d="M1211.7,3603.6c-0.3-0.8-1.6-3.6-1.6-3.6l-21.3-42.5c0,0,9.8,1.1,12-2.4c0.4-0.7,0.3-1.6,0.2-2.3
				c0-0.1-0.3-1.1-0.5-1.5c-0.1-0.3-0.2-0.6-0.2-0.6l-3.3-6.7l-16.8-33.6c0,0,5.8,0.5,7.6-1.3c0.9-0.9,1.2-2.4,0.4-3.9
				c-2.5-5-6.4-12.8-10.4-20.4c-6.1-11.6-9.9-22.8-13.2-22.8c0,0,0,0,0,0v149.3h41.2c0,0,4,0,5.7-2.1
				C1212.6,3607.6,1212.2,3605.1,1211.7,3603.6z"/>
		</g>
		<g>
			<rect x="1264.4" y="3525.6" style="fill:#A6705A;" width="3.7" height="21.2"/>
			<rect x="1260.6" y="3525.6" style="fill:#6E412A;" width="3.8" height="21.2"/>
			<path style="fill:#436E34;" d="M1237.3,3494.5c0,18.4,6.6,34,27.1,34v-83.7C1253.3,3444.8,1237.3,3473.9,1237.3,3494.5z"/>
			<path style="fill:#96BD6E;" d="M1264.4,3444.8v83.7l0,0c20.5,0,27.5-15,27.5-33.3C1292,3473.9,1275.3,3444.8,1264.4,3444.8z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1376.4,3450.1c-2.2,4.2-4.3,8.6-5.7,11.3c-0.3,0.7-0.3,1.5,0,1.9c0.8,1.4,4.5,0.9,4.5,0.9
				l-10.5,21c0,0-1.6,2.9-0.9,3.8c1.5,2.1,6.6,1.2,6.6,1.2l-11.6,23.2c0,0-1.7,3.2-1.7,3.3c-1.6,3.3,1.8,3.4,1.8,3.4h25v-82.9
				C1381.9,3437.5,1379.7,3443.7,1376.4,3450.1z"/>
			<path style="fill:#96BD6E;" d="M1409.9,3516.1c-0.1-0.5-0.9-2-0.9-2l-11.8-23.6c0,0,5.4,0.6,6.7-1.3c0.3-0.4,0.2-0.9,0.1-1.3
				c0-0.1-0.2-0.6-0.3-0.8c-0.1-0.2-0.2-0.3-0.2-0.3l-1.8-3.7l-9.3-18.7c0,0,3.3,0.3,4.2-0.7c0.5-0.5,0.6-1.4,0.2-2.2
				c-1.3-2.7-3.5-7.1-5.8-11.3c-3.3-6.5-5.5-12.7-7.3-12.7l0,0v82.9h22.9c0,0,2.2,0,3.1-1.2
				C1410.4,3518.3,1410.2,3517,1409.9,3516.1z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1401.1,3460c-2.3,4.5-4.6,9.1-6,12c-0.3,0.7-0.3,1.5-0.1,2c0.9,1.5,4.7,1,4.7,1l-11.1,22.1
				c0,0-1.7,3-1,4c1.6,2.2,7,1.3,7,1.3l-12.2,24.4c0,0-1.8,3.4-1.8,3.5c-1.7,3.5,1.9,3.7,1.9,3.7h26.3v-87.1
				C1406.9,3446.8,1404.6,3453.3,1401.1,3460z"/>
			<path style="fill:#96BD6E;" d="M1436.4,3529.3c-0.2-0.5-0.9-2.1-0.9-2.1l-12.4-24.8c0,0,5.7,0.6,7-1.4c0.3-0.4,0.2-0.9,0.1-1.4
				c0-0.1-0.2-0.6-0.3-0.9c-0.1-0.2-0.1-0.3-0.1-0.3l-1.9-3.9l-9.8-19.6c0,0,3.4,0.3,4.4-0.7c0.5-0.6,0.7-1.4,0.2-2.3
				c-1.4-2.9-3.7-7.5-6-11.9c-3.5-6.8-5.8-13.3-7.7-13.3l0,0v87.1h24c0,0,2.3,0,3.3-1.3C1436.9,3531.7,1436.7,3530.2,1436.4,3529.3z
				"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1523.3,3615.5c-8.2,5.2-7.5,13.4-7.6,13.2c-2.5-4.3-5.7-5.6-7.4-6.1c-3.4-1.2-8.6-0.8-12.1,1.8
				c-6.6,5-5.4,12.2-5.5,12.1c-2.7-1.8-5.8-1.8-8.5-0.3c-4.1,2.4-4.1,6.6-4.1,7h46.3v-28.5
				C1524.1,3615.1,1523.7,3615.3,1523.3,3615.5z"/>
			<path style="fill:#96BD6E;" d="M1562.3,3633.4c-3-0.1-4.9,1.1-4.9,1.1c0.3-2.1-0.3-5.2-2.9-6.6c-3.2-1.8-6.1-0.6-7.2,0.3
				c-0.1,0,0-5.8-4-9.9c-6.4-6.7-14.5-5.5-18.8-3.4v28.5h39.4h6.8C1571.2,3639.2,1568.4,3633.6,1562.3,3633.4z"/>
		</g>
		<g>
			<path style="fill:#96BD6E;" d="M1371.1,3622.1c-1.8-0.4-3.7,0.3-3.7,0.3c0.5-0.9,0.5-5.9-3.7-7c-4.1-1.1-6.2,1-7,2.4
				c0,0.1-0.1,0.1-0.1,0.1c0-0.5,0.2-5-4.4-6.6c-3.6-1.3-6.1,0.8-6.2,0.7c-1.1-3.3-3.6-6.3-7.7-7v23.5h37.3
				C1375.9,3626.5,1374.7,3622.8,1371.1,3622.1z"/>
			<path style="fill:#436E34;" d="M1338.1,3605c-12.3-1.8-13.1,11-13.1,10.9c-1.6-2.2-5-2.8-7.3-2.1c-5.7,1.8-4.8,7.7-4.9,7.7
				c-2.1-1.8-5.4-2-7.9-0.7c-4.5,2.2-4,7.3-4,7.7h37.4V3605C1338.3,3605,1338.2,3605,1338.1,3605z"/>
		</g>
		<g>
			<path style="fill:#96BD6E;" d="M1517.2,3589.2c-1.8-0.4-3.7,0.3-3.7,0.3c0.5-0.9,0.5-5.9-3.7-7c-4.2-1.1-6.2,1.1-7,2.4
				c0,0.1-0.1,0.2-0.1,0.2c0-0.5,0.2-5-4.4-6.7c-3.6-1.3-6.1,0.8-6.1,0.8c-1.2-3.3-3.7-6.3-7.8-7v23.5h37.4
				C1522,3593.5,1520.9,3589.9,1517.2,3589.2z"/>
			<path style="fill:#436E34;" d="M1484.3,3572.1c-12.3-1.8-13.1,11-13.1,10.9c-1.6-2.2-5-2.8-7.3-2.1c-5.7,1.8-4.8,7.7-4.9,7.7
				c-2.1-1.8-5.4-2-7.9-0.7c-4.5,2.2-4,7.3-4,7.7h37.4v-23.5C1484.4,3572.1,1484.4,3572.1,1484.3,3572.1z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1659.7,3560c-2,3.8-3.9,7.8-5.2,10.3c-0.3,0.6-0.3,1.3-0.1,1.7c0.8,1.3,4,0.8,4,0.8l-9.5,19
				c0,0-1.5,2.6-0.8,3.4c1.4,1.9,6,1.1,6,1.1l-10.4,20.9c0,0-1.5,2.9-1.6,3c-1.5,3,1.6,3.1,1.6,3.1h22.5v-74.9
				C1664.7,3548.6,1662.7,3554.2,1659.7,3560z"/>
			<path style="fill:#96BD6E;" d="M1690,3619.5c-0.1-0.4-0.8-1.8-0.8-1.8l-10.7-21.4c0,0,4.9,0.6,6-1.2c0.2-0.3,0.1-0.8,0.1-1.2
				c0-0.1-0.2-0.5-0.3-0.8c-0.1-0.2-0.1-0.3-0.1-0.3l-1.7-3.3l-8.4-16.8c0,0,3,0.2,3.8-0.6c0.5-0.5,0.6-1.2,0.2-1.9
				c-1.2-2.5-3.2-6.5-5.2-10.2c-3-5.8-4.9-11.5-6.6-11.5h0v74.9h20.7c0,0,2,0,2.8-1.1C1690.4,3621.6,1690.2,3620.3,1690,3619.5z"/>
		</g>
		<g>
			<g>
				<rect x="1704.8" y="3555" style="fill:#5E341E;" width="3.5" height="17.6"/>
				<rect x="1708.3" y="3555" style="fill:#A6705A;" width="3.5" height="17.6"/>
				<rect x="1708.3" y="3555" style="fill:#6E412A;" width="0" height="17.6"/>
			</g>
			<path style="fill:#436E34;" d="M1708.3,3491.3c-11.4,0-20.6,14.9-20.6,33.3c0,18.4,9.2,33.3,20.6,33.3l0,0V3491.3L1708.3,3491.3z
				"/>
			<path style="fill:#96BD6E;" d="M1728.8,3524.6c0-18.4-9.2-33.3-20.6-33.3v66.7C1719.6,3558,1728.8,3543,1728.8,3524.6z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1686.3,3567.8c-1.8,3.5-3.6,7.1-4.7,9.3c-0.3,0.5-0.3,1.2,0,1.6c0.7,1.2,3.7,0.8,3.7,0.8
				l-8.7,17.3c0,0-1.3,2.4-0.7,3.1c1.3,1.7,5.4,1,5.4,1l-9.5,19.1c0,0-1.3,2.6-1.4,2.7c-1.3,2.8,1.5,2.8,1.5,2.8h20.5v-68.2
				C1690.8,3557.5,1689,3562.6,1686.3,3567.8z"/>
			<path style="fill:#96BD6E;" d="M1713.8,3622.1c-0.1-0.4-0.7-1.6-0.7-1.6l-9.7-19.4c0,0,4.5,0.5,5.5-1.1c0.2-0.3,0.2-0.7,0.1-1.1
				c0-0.1-0.2-0.5-0.2-0.7c-0.1-0.1-0.1-0.2-0.1-0.2l-1.5-3.1l-7.7-15.3c0,0,2.7,0.2,3.5-0.6c0.4-0.4,0.5-1.1,0.2-1.8
				c-1.1-2.2-2.9-5.8-4.7-9.3c-2.8-5.3-4.5-10.4-6-10.4l0,0v68.2h18.8c0,0,1.8,0,2.6-1C1714.3,3623.9,1714,3622.8,1713.8,3622.1z"/>
		</g>
		<g>
			<path style="fill:#436E34;" d="M1754.4,3564.6c-1.6,3.1-3.2,6.3-4.1,8.2c-0.3,0.5-0.3,1.1-0.1,1.4c0.6,1,3.2,0.7,3.2,0.7
				l-7.6,15.2c0,0-1.2,2.1-0.7,2.8c1.1,1.5,4.8,0.9,4.8,0.9l-8.4,16.8c0,0-1.2,2.3-1.3,2.4c-1.2,2.5,1.3,2.5,1.3,2.5h18.1v-60.1
				C1758.4,3555.5,1756.8,3560,1754.4,3564.6z"/>
			<path style="fill:#96BD6E;" d="M1778.7,3612.5c-0.1-0.4-0.6-1.5-0.6-1.5l-8.6-17.1c0,0,3.9,0.5,4.8-0.9c0.2-0.3,0.2-0.7,0.1-1
				c0,0-0.2-0.4-0.2-0.6c0-0.1-0.1-0.3-0.1-0.3l-1.3-2.7l-6.8-13.5c0,0,2.3,0.2,3.1-0.5c0.3-0.4,0.4-1,0.1-1.6c-1-2-2.6-5.2-4.1-8.2
				c-2.5-4.7-4-9.2-5.3-9.2l0,0v60.1h16.6c0,0,1.6,0,2.3-0.9C1779.1,3614.1,1778.9,3613.1,1778.7,3612.5z"/>
		</g>
		<g>
			<rect x="1568" y="3587.6" style="fill:#6E412A;" width="3.1" height="28.4"/>
			<rect x="1571.1" y="3587.6" style="fill:#A6705A;" width="3.1" height="28.4"/>
			<path style="fill:#436E34;" d="M1541,3560.2c0,16.6,13.5,30,30.1,30v-60C1554.5,3530.2,1541,3543.7,1541,3560.2z"/>
			<path style="fill:#96BD6E;" d="M1571.1,3530.2L1571.1,3530.2v60l0,0c16.6,0,30.1-13.4,30.1-30
				C1601.2,3543.7,1587.7,3530.2,1571.1,3530.2z"/>
		</g>
		<rect id="XMLID_8_" x="-50" y="2317" style="fill:#9A4928;" width="1928" height="189"/>
		<rect id="XMLID_7_" x="-42" y="77" style="fill:#7AA548;" width="1920" height="1166"/>
		<rect id="XMLID_6_" x="-70" y="987" style="fill:#606758;" width="1973" height="256"/>
		<path style="fill:#84B050;" d="M1892.6,24.7l-11,249.9c-114.8-27.9-329-77.8-329-77.8l-228.3-28.5l-364.9-28.9L714,143
			l-285.5,21.2L142,203.9l-179,20.8l-19.3,9.2l12.4-282.3L1892.6,24.7z"/>
		<path style="fill:#3A8A41;" d="M-48.7-38l1923-32v182.3c-66-16-185-44.9-185-44.9l-206-12.9L923.1,43.3l-97.9-19.8L657.2,45.8
			L407.3,67.3l-269,41.5l-187,23.9V-38z"/>
		<path style="fill:#5C8FCB;" d="M1906.6,1341.7l-11,249.9c-114.8-27.9-329-77.8-329-77.8l-228.3-28.5l-364.9-28.9L728,1460
			l-285.5,21.2L156,1520.9l-179,20.8l-19.3,9.2l12.4-282.3L1906.6,1341.7z"/>
		<path style="fill:#3E7FA1;" d="M-51.7,1279l1940-32v182.3c-66.6-16-186.6-44.9-186.6-44.9l-207.8-12.9l-565.1-11.1l-98.8-19.8
			l-169.6,22.2l-252.1,21.5l-271.4,41.5l-188.6,23.9V1279z"/>
		<path style="fill:#B5B281;" d="M1892.6,2604.7l-11,249.9c-114.8-27.9-329-77.8-329-77.8l-228.3-28.5l-364.9-28.9L714,2723
			l-285.5,21.2L142,2783.9l-179,20.8l-19.3,9.2l12.4-282.3L1892.6,2604.7z"/>
		<path style="fill:#B39F80;" d="M-48.7,2542l1923-32v182.3c-66-16-185-44.9-185-44.9l-206-12.9l-560.1-11.1l-97.9-19.8l-168.1,22.2
			l-249.9,21.5l-269,41.5l-187,23.9V2542z"/>
		<path style="fill:#A18054;" d="M1872.3,2593.2c-59-5.2-149.4-12.6-152.1-13.3c-3.9-1.1-342.9-10.3-342.9-10.3l-373-11.8
			l-294.4,3.1l-204.1,5.3l-183,2.8l-115.8,5.7l-109.7,9.7l-127.5,10.2l-17.4,3.6l-2.9-0.2v-92h1923V2593.2z"/>
		<linearGradient id="XMLID_94_" gradientUnits="userSpaceOnUse" x1="912" y1="5140" x2="912" y2="3974">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="1" style="stop-color:#D1D1D1"/>
		</linearGradient>
		<rect id="XMLID_5_" x="-48" y="3974" style="fill:url(#XMLID_94_);" width="1920" height="1166"/>
		<text transform="matrix(1 0 0 1 22.3231 428.7236)" style="fill:#F5F6F6; font-family:'DINEngschrift'; font-size:233.0371px;">1861</text>
		<text transform="matrix(1 0 0 1 34.3944 527.2256)"><tspan x="0" y="0" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">French scientist Louis Pasteur </tspan><tspan x="0" y="39.7" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">develops pasteurization, </tspan><tspan x="0" y="79.4" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">a heat-treatment process </tspan><tspan x="0" y="119" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">that destroys </tspan><tspan x="0" y="158.7" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">dangerous microbes </tspan><tspan x="0" y="198.4" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">in food and beverages.</tspan></text>
		<text transform="matrix(1 0 0 1 45.9915 1730.2578)" style="fill:#FFFFFF; font-family:'DINEngschrift'; font-size:233.0371px;">1865</text>
		<text transform="matrix(1 0 0 1 75.3426 1808.2275)"><tspan x="0" y="0" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">Known as the father of modern genetics, </tspan><tspan x="0" y="39.7" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">Austrian monk Gregor Mendel publishes  </tspan><tspan x="0" y="79.4" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">the results of his experiments </tspan><tspan x="0" y="119" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">with pea plants and his theories  </tspan><tspan x="0" y="158.7" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">about the basic principles of heredity.</tspan></text>
		<text transform="matrix(1 0 0 1 732.6312 2953.8867)" style="fill:#F5F6F6; font-family:'DINEngschrift'; font-size:233.0371px;">1869</text>
		<text transform="matrix(1 0 0 1 756.2528 3025.0254)"><tspan x="0" y="0" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">Swiss scientist Friedrich Miescher </tspan><tspan x="0" y="39.7" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">identifies the existence of DNA, </tspan><tspan x="0" y="79.4" style="fill:#FFFFFF; font-family:'KohinoorBangla-Semibold'; font-size:33.0657px;">the molecule of life.</tspan></text>
		<g>
			<path style="fill:#EEF8F7;" d="M1506.7,247c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2c0-1.1,2-3.9,2-3.9S1506.7,245.9,1506.7,247z"/>
			<path style="fill:#32435F;" d="M1506.7,243.7c0,0.3-0.1,0.5-0.2,0.5h-3.1c-0.1,0-0.2-0.2-0.2-0.5l-1.9-8.6c0-0.2,0.2-0.4,0.4-0.4
				h6.5c0.2,0,0.4,0.2,0.4,0.4L1506.7,243.7z"/>
			<path style="fill:#EEF8F7;" d="M1506.7,254.8c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2c0-1.1,2-3.9,2-3.9S1506.7,253.7,1506.7,254.8z"/>
			<path style="fill:#EEF8F7;" d="M1506.7,264.1c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2c0-1.1,2-3.9,2-3.9S1506.7,263,1506.7,264.1z"/>
			<g>
				<g>
					<path style="fill:#85CFC8;" d="M1531.6,346.6c0,0-12.9,2.1-27.1,2.1c-14.2,0-27.1-2.1-27.1-2.1s0-38.9,0-50.9
						c0-13.4,6.5-13,8.4-19.2c0.5-1.8,0.7-4.1,0.3-7.4c0-0.4-0.1-0.7-0.2-1.1c0-0.2,37.8,0,37.8,0c-0.1,0.4-0.2,0.9-0.2,1.3
						c-0.5,3.3-0.4,5.5,0.1,7.3c1.8,5.8,8,5.9,8,19.1C1531.6,306.9,1531.6,346.6,1531.6,346.6z"/>
					<g>
						<path style="fill:#1893A5;" d="M1526.8,267.2c0,1.1-1,2-2.1,2l-39.9-0.2c-1.1,0-2-1-2-2.1l0.1-1.4c0-1.1,1-2.1,2.1-2l39.9,0.2
							c1.1,0,2.1,1,2,2.1L1526.8,267.2z"/>
						<path style="fill:#198494;" d="M1525.9,262.5c0,0.6-0.5,1-1,1h-39.9c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h39.9
							C1525.4,261.4,1525.9,261.9,1525.9,262.5L1525.9,262.5z"/>
					</g>
				</g>
				<path style="fill:#EEF8F7;" d="M1530.4,344.6c0,0-12.6,1.9-25.9,1.9c-13.3,0-26-1.9-26-1.9s0-36.6,0-47.8
					c0-12.5,6.1-12.2,7.9-18.1c4.8,0.6,28.3,1.1,36.5,0.1c1.7,5.4,7.5,5.6,7.5,18C1530.5,307.2,1530.4,344.6,1530.4,344.6z"/>
				<path style="fill:#DAEFEE;" d="M1522.9,278.7c0,0.7-12.8,1.3-18.4,1.3c-5.7,0-18.1-0.6-18.1-1.3c0-0.7,12.4-0.7,18.1-0.7
					C1510.2,278,1522.9,278,1522.9,278.7z"/>
			</g>
			<path style="fill:#EEF8F7;" d="M1506.7,277.6c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2c0-1.1,2-3.9,2-3.9S1506.7,276.5,1506.7,277.6z"/>
			<g>
				<path style="fill:#32435F;" d="M1441,382.1h-51.6c-8.7,0-15.2-3.4-15.2-8v-6.4h3.2v6.4c0,2.2,5.3,4.8,12,4.8h51.6
					c6.6,0,12-5.4,12-12V232.8c0-8.4,6.8-15.2,15.2-15.2h22.8c8.4,0,15.2,4.6,15.2,10.2v8.6h-3.2v-8.6c0-3.8-5.5-7-12-7h-22.8
					c-6.6,0-12,5.4-12,12v134.1C1456.2,375.2,1449.4,382.1,1441,382.1z"/>
			</g>
			<g>
				<rect x="1019.3" y="442.4" style="fill:#79623D;" width="154.3" height="100.1"/>
				<path style="fill:#A98854;" d="M1173.6,445c0,0.9-0.7,1.6-1.6,1.6H1015c-0.9,0-1.6-0.7-1.6-1.6v-2.6c0-0.9,0.7-1.6,1.6-1.6H1172
					c0.9,0,1.6,0.7,1.6,1.6V445z"/>
				<path style="fill:#A98854;" d="M1173.6,495.7c0,0.9-0.7,1.6-1.6,1.6H1015c-0.9,0-1.6-0.7-1.6-1.6v-2.6c0-0.9,0.7-1.6,1.6-1.6
					H1172c0.9,0,1.6,0.7,1.6,1.6V495.7z"/>
				<path style="fill:#A98854;" d="M1173.6,545.1c0,0.9-0.7,1.6-1.6,1.6H1015c-0.9,0-1.6-0.7-1.6-1.6v-2.6c0-0.9,0.7-1.6,1.6-1.6
					H1172c0.9,0,1.6,0.7,1.6,1.6V545.1z"/>
				<path style="fill:#A98854;" d="M1015,566.5c-0.9,0-1.6-0.7-1.6-1.6V442.4c0-0.9,0.7-1.6,1.6-1.6h2.6c0.9,0,1.6,0.7,1.6,1.6
					v122.5c0,0.9-0.7,1.6-1.6,1.6H1015z"/>
				<path style="fill:#A98854;" d="M1172.3,566.5c-0.9,0-1.6-0.7-1.6-1.6V442.4c0-0.9,0.7-1.6,1.6-1.6h2.6c0.9,0,1.6,0.7,1.6,1.6
					v122.5c0,0.9-0.7,1.6-1.6,1.6H1172.3z"/>
				<g>
					<circle style="fill:#DED26A;" cx="1141.4" cy="524.7" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1125.2,526c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1128.6,538.4,1125.2,532.6,1125.2,526z"/>
				</g>
				<g>
					<circle style="fill:#DED26A;" cx="1094.1" cy="524.7" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1077.8,526c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1081.3,538.4,1077.8,532.6,1077.8,526z"/>
				</g>
				<g>
					<circle style="fill:#DED26A;" cx="1047" cy="524.7" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1030.7,526c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1034.2,538.4,1030.7,532.6,1030.7,526z"/>
				</g>
				<g>
					<circle style="fill:#DED26A;" cx="1047" cy="472.9" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1030.7,474.1c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1034.2,486.6,1030.7,480.7,1030.7,474.1z"/>
				</g>
				<g>
					<circle style="fill:#DED26A;" cx="1095.8" cy="472.9" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1079.5,474.1c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1083,486.6,1079.5,480.7,1079.5,474.1z"/>
				</g>
				<g>
					<circle style="fill:#DED26A;" cx="1141.4" cy="472.9" r="18.6"/>
					<path style="fill:#B8AE58;" d="M1125.2,474.1c0-10.3,8.3-18.6,18.6-18.6c2.7,0,5.3,0.6,7.6,1.6c-2.9-1.8-6.3-2.8-9.9-2.8
						c-10.3,0-18.6,8.3-18.6,18.6c0,7.6,4.5,14.1,11,17C1128.6,486.6,1125.2,480.7,1125.2,474.1z"/>
				</g>
			</g>
			<g>
				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1412.3905" y1="891.2953" x2="1560.4755" y2="891.2953">
					<stop  offset="0" style="stop-color:#929091"/>
					<stop  offset="0.335" style="stop-color:#D6D6D6"/>
					<stop  offset="0.555" style="stop-color:#828282"/>
					<stop  offset="0.79" style="stop-color:#828282"/>
					<stop  offset="1" style="stop-color:#404040"/>
				</linearGradient>
				<path style="fill:url(#SVGID_4_);" d="M1540.7,935.3c0,0.3-0.2,0.5-0.5,0.5h-107.6c-0.3,0-0.5-0.2-0.5-0.5l-19.8-88
					c0-0.2,0.3-0.4,0.6-0.4h146.8c0.3,0,0.6,0.2,0.6,0.4L1540.7,935.3z"/>
				<path style="fill:#85CFC8;" d="M1466.4,837.5c-2.1-15.7-15.4-27.5-31-30.3l2.1,3.7l-2.8,2.4c14.4,0.7,25.9,10.8,27.8,24.6
					l-3.9,0.4l6.4,4.5l5.3-5.8L1466.4,837.5z"/>
				<path style="fill:#85CFC8;" d="M1512.1,833c-2.1-15.7-15.4-27.5-31-30.3l2.1,3.7l-2.8,2.4c14.4,0.7,25.9,10.8,27.8,24.6
					l-3.9,0.4l6.4,4.5l5.3-5.8L1512.1,833z"/>
			</g>
			<g>
				<g>
					<path style="fill:#D7DE7B;" d="M1180.5,883.6v28.9c0,4.9-5,7.7-8.9,8.9c-5.5,1.8-20.9,9.3-66.1,9.3c-45.6,0-60.7-7.8-65.2-9.3
						c-3.7-1.2-8.9-4-8.9-8.9v-28.9c0-4,4.2-7.8,11.6-11H1169C1176.3,875.8,1180.5,879.6,1180.5,883.6z"/>
					<path style="fill:#898C4F;" d="M1180.5,883.6c0,4.3-4.8,8.3-13,11.6h0c0,0-0.1,0-0.1-0.1c-4.9-2-10-5-16.9-6.4
						c-4.2-0.8-9.2-0.8-14.4-0.8c-3.5,0-7.1,0-10.6-0.2c-2.3-0.2-4.6-0.7-6.9-1.2c-4.1-1-8.2-2.1-12.6-2.1c-7.4,0-15.7,1.8-21.2,2.7
						c-1.8,0.1-3.5,0.3-5.2,0.5c-4.1-0.1-7.6-1-10.6-0.5c-2.3,0.4-3.9,1.6-5.5,2.8c-1.8,1.4-3.5,3-5.8,3.5
						c-4.7,1.1-9.9,0.4-13.4,1.8c-8.2-3.3-13-7.3-13-11.6c0-4,4.2-7.8,11.6-11c13.2-5.7,36.5-9.6,63-9.6c26.5,0,49.8,3.8,63,9.6
						C1176.3,875.8,1180.5,879.6,1180.5,883.6z"/>
					<path style="fill:#898C4F;" d="M1079.6,887.6c-5.7,0.6-11.1,1.4-16,2.3c1.5-1.2,3.2-2.4,5.5-2.8
						C1072,886.6,1075.5,887.6,1079.6,887.6z"/>
					<path style="fill:#898C4F;" d="M1118.5,886.6c-4.1-0.2-8.3-0.3-12.6-0.3c-7.4,0-14.5,0.3-21.2,0.8c5.5-0.9,13.8-2.7,21.2-2.7
						C1110.3,884.4,1114.5,885.6,1118.5,886.6z"/>
					<path style="fill:#898C4F;" d="M1167.4,895.2c-7.8-3.1-18.6-5.6-31.3-7.2c5.2,0,10.2-0.1,14.4,0.8
						C1157.4,890.2,1162.5,893.2,1167.4,895.2z"/>
					<path style="fill:#FCF9CE;" d="M1167.5,895.3c-13.4,5.4-36,8.9-61.6,8.9c-25.6,0-48.1-3.5-61.6-8.9c3.5-1.4,8.7-0.6,13.4-1.8
						c2.3-0.6,3.9-2.1,5.8-3.5c1.5-1.2,3.2-2.4,5.5-2.8c2.9-0.6,6.4,0.4,10.6,0.5c0.3,0,0.7,0,1,0c1.1,0,2.5-0.2,4.2-0.5
						c5.5-0.9,13.8-2.7,21.2-2.7c4.4,0,8.5,1.2,12.6,2.1c2.3,0.6,4.6,1.1,6.9,1.2c3.5,0.3,7.1,0.2,10.6,0.2c5.2,0,10.2-0.1,14.4,0.8
						c7,1.4,12.1,4.4,16.9,6.4C1167.4,895.2,1167.5,895.2,1167.5,895.3z"/>
				</g>
				<path style="fill:#BFBFBF;" d="M1225.6,778.7c0.1,0,0.2,0.1,0.2,0.2v47.7c0,0.1-0.1,0.2-0.2,0.2l-69.4,8.8
					c-0.1,0-0.2-0.1-0.2-0.3v-65.1c0-0.2,0.1-0.3,0.2-0.3L1225.6,778.7z"/>
				<path style="fill:#FCF9CE;" d="M1161.2,896.2c0,0-7.8-26.6-9.4-34.1c-5.1-23.5,3.6-29.4,4.3-26.8v-11.1c0,0-7,2.1-9.7,10.7
					c-2.8,8.5-1,20.5,1.3,28.6c4.9,16.9-5.4,33.1-5.4,33.1L1161.2,896.2z"/>
			</g>
			<g>
				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1632.0769" y1="583.047" x2="1734.7284" y2="583.047">
					<stop  offset="0" style="stop-color:#929091"/>
					<stop  offset="0.335" style="stop-color:#D6D6D6"/>
					<stop  offset="0.555" style="stop-color:#8282
              
            
!

CSS

              
                body {
  font-family:sans-serif;
}

h1 {
  margin: 5px 0;
}
h3 {
  margin:0;
  font-size:16px;
}
.demo {
  width:600px;
  height:120px;
  background-color:black;
  position:relative;
}

.box {
  width:50px;
  height:50px;
  position:relative;
  margin-bottom:2px;
}

.red {
  background-color:red;
}

.blue {
  background-color:blue;
}

.green {
  top:60px;
  left:25px;
  background-color:green;
}

.nav {
  width:600px;
  background-color:#ccc;
  text-align:right;
}

button {
  padding:10px;
  font-size:20px;
}

              
            
!

JS

              
                /*!
 * ScrollMagic v2.0.5 (2015-04-29)
 * The javascript library for magical scroll interactions.
 * (c) 2015 Jan Paepke (@janpaepke)
 * Project Website: http://scrollmagic.io
 * 
 * @version 2.0.5
 * @license Dual licensed under MIT license and GPL.
 * @author Jan Paepke - e-mail@janpaepke.de
 *
 * @file ScrollMagic main library.
 */
/**
 * @namespace ScrollMagic
 */
(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define(factory);
	} else if (typeof exports === 'object') {
		// CommonJS
		module.exports = factory();
	} else {
		// Browser global
		root.ScrollMagic = factory();
	}
}(this, function () {
	"use strict";

	var ScrollMagic = function () {
		_util.log(2, '(COMPATIBILITY NOTICE) -> As of ScrollMagic 2.0.0 you need to use \'new ScrollMagic.Controller()\' to create a new controller instance. Use \'new ScrollMagic.Scene()\' to instance a scene.');
	};

	ScrollMagic.version = "2.0.5";

	// TODO: temporary workaround for chrome's scroll jitter bug
	window.addEventListener("mousewheel", function () {});

	// global const
	var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";

	/**
	 * The main class that is needed once per scroll container.
	 *
	 * @class
	 *
	 * @example
	 * // basic initialization
	 * var controller = new ScrollMagic.Controller();
	 *
	 * // passing options
	 * var controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});
	 *
	 * @param {object} [options] - An object containing one or more options for the controller.
	 * @param {(string|object)} [options.container=window] - A selector, DOM object that references the main container for scrolling.
	 * @param {boolean} [options.vertical=true] - Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.
	 * @param {object} [options.globalSceneOptions={}] - These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see {@link ScrollMagic.Scene}.
	 * @param {number} [options.loglevel=2] Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
	 ** `0` => silent
	 ** `1` => errors
	 ** `2` => errors, warnings
	 ** `3` => errors, warnings, debuginfo
	 * @param {boolean} [options.refreshInterval=100] - Some changes don't call events by default, like changing the container size or moving a scene trigger element.  
	 This interval polls these parameters to fire the necessary events.  
	 If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change, you can set this to 0 disable interval checking and improve performance.
	 *
	 */
	ScrollMagic.Controller = function (options) {
/*
	 * ----------------------------------------------------------------
	 * settings
	 * ----------------------------------------------------------------
	 */
		var
		NAMESPACE = 'ScrollMagic.Controller',
			SCROLL_DIRECTION_FORWARD = 'FORWARD',
			SCROLL_DIRECTION_REVERSE = 'REVERSE',
			SCROLL_DIRECTION_PAUSED = 'PAUSED',
			DEFAULT_OPTIONS = CONTROLLER_OPTIONS.defaults;

/*
	 * ----------------------------------------------------------------
	 * private vars
	 * ----------------------------------------------------------------
	 */
		var
		Controller = this,
			_options = _util.extend({}, DEFAULT_OPTIONS, options),
			_sceneObjects = [],
			_updateScenesOnNextCycle = false,
			// can be boolean (true => all scenes) or an array of scenes to be updated
			_scrollPos = 0,
			_scrollDirection = SCROLL_DIRECTION_PAUSED,
			_isDocument = true,
			_viewPortSize = 0,
			_enabled = true,
			_updateTimeout, _refreshTimeout;

/*
	 * ----------------------------------------------------------------
	 * private functions
	 * ----------------------------------------------------------------
	 */

		/**
		 * Internal constructor function of the ScrollMagic Controller
		 * @private
		 */
		var construct = function () {
			for (var key in _options) {
				if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
					log(2, "WARNING: Unknown option \"" + key + "\"");
					delete _options[key];
				}
			}
			_options.container = _util.get.elements(_options.container)[0];
			// check ScrollContainer
			if (!_options.container) {
				log(1, "ERROR creating object " + NAMESPACE + ": No valid scroll container supplied");
				throw NAMESPACE + " init failed."; // cancel
			}
			_isDocument = _options.container === window || _options.container === document.body || !document.body.contains(_options.container);
			// normalize to window
			if (_isDocument) {
				_options.container = window;
			}
			// update container size immediately
			_viewPortSize = getViewportSize();
			// set event handlers
			_options.container.addEventListener("resize", onChange);
			_options.container.addEventListener("scroll", onChange);

			_options.refreshInterval = parseInt(_options.refreshInterval) || DEFAULT_OPTIONS.refreshInterval;
			scheduleRefresh();

			log(3, "added new " + NAMESPACE + " controller (v" + ScrollMagic.version + ")");
		};

		/**
		 * Schedule the next execution of the refresh function
		 * @private
		 */
		var scheduleRefresh = function () {
			if (_options.refreshInterval > 0) {
				_refreshTimeout = window.setTimeout(refresh, _options.refreshInterval);
			}
		};

		/**
		 * Default function to get scroll pos - overwriteable using `Controller.scrollPos(newFunction)`
		 * @private
		 */
		var getScrollPos = function () {
			return _options.vertical ? _util.get.scrollTop(_options.container) : _util.get.scrollLeft(_options.container);
		};

		/**
		 * Returns the current viewport Size (width vor horizontal, height for vertical)
		 * @private
		 */
		var getViewportSize = function () {
			return _options.vertical ? _util.get.height(_options.container) : _util.get.width(_options.container);
		};

		/**
		 * Default function to set scroll pos - overwriteable using `Controller.scrollTo(newFunction)`
		 * Make available publicly for pinned mousewheel workaround.
		 * @private
		 */
		var setScrollPos = this._setScrollPos = function (pos) {
			if (_options.vertical) {
				if (_isDocument) {
					window.scrollTo(_util.get.scrollLeft(), pos);
				} else {
					_options.container.scrollTop = pos;
				}
			} else {
				if (_isDocument) {
					window.scrollTo(pos, _util.get.scrollTop());
				} else {
					_options.container.scrollLeft = pos;
				}
			}
		};

		/**
		 * Handle updates in cycles instead of on scroll (performance)
		 * @private
		 */
		var updateScenes = function () {
			if (_enabled && _updateScenesOnNextCycle) {
				// determine scenes to update
				var scenesToUpdate = _util.type.Array(_updateScenesOnNextCycle) ? _updateScenesOnNextCycle : _sceneObjects.slice(0);
				// reset scenes
				_updateScenesOnNextCycle = false;
				var oldScrollPos = _scrollPos;
				// update scroll pos now instead of onChange, as it might have changed since scheduling (i.e. in-browser smooth scroll)
				_scrollPos = Controller.scrollPos();
				var deltaScroll = _scrollPos - oldScrollPos;
				if (deltaScroll !== 0) { // scroll position changed?
					_scrollDirection = (deltaScroll > 0) ? SCROLL_DIRECTION_FORWARD : SCROLL_DIRECTION_REVERSE;
				}
				// reverse order of scenes if scrolling reverse
				if (_scrollDirection === SCROLL_DIRECTION_REVERSE) {
					scenesToUpdate.reverse();
				}
				// update scenes
				scenesToUpdate.forEach(function (scene, index) {
					log(3, "updating Scene " + (index + 1) + "/" + scenesToUpdate.length + " (" + _sceneObjects.length + " total)");
					scene.update(true);
				});
				if (scenesToUpdate.length === 0 && _options.loglevel >= 3) {
					log(3, "updating 0 Scenes (nothing added to controller)");
				}
			}
		};

		/**
		 * Initializes rAF callback
		 * @private
		 */
		var debounceUpdate = function () {
			_updateTimeout = _util.rAF(updateScenes);
		};

		/**
		 * Handles Container changes
		 * @private
		 */
		var onChange = function (e) {
			log(3, "event fired causing an update:", e.type);
			if (e.type == "resize") {
				// resize
				_viewPortSize = getViewportSize();
				_scrollDirection = SCROLL_DIRECTION_PAUSED;
			}
			// schedule update
			if (_updateScenesOnNextCycle !== true) {
				_updateScenesOnNextCycle = true;
				debounceUpdate();
			}
		};

		var refresh = function () {
			if (!_isDocument) {
				// simulate resize event. Only works for viewport relevant param (performance)
				if (_viewPortSize != getViewportSize()) {
					var resizeEvent;
					try {
						resizeEvent = new Event('resize', {
							bubbles: false,
							cancelable: false
						});
					} catch (e) { // stupid IE
						resizeEvent = document.createEvent("Event");
						resizeEvent.initEvent("resize", false, false);
					}
					_options.container.dispatchEvent(resizeEvent);
				}
			}
			_sceneObjects.forEach(function (scene, index) { // refresh all scenes
				scene.refresh();
			});
			scheduleRefresh();
		};

		/**
		 * Send a debug message to the console.
		 * provided publicly with _log for plugins
		 * @private
		 *
		 * @param {number} loglevel - The loglevel required to initiate output for the message.
		 * @param {...mixed} output - One or more variables that should be passed to the console.
		 */
		var log = this._log = function (loglevel, output) {
			if (_options.loglevel >= loglevel) {
				Array.prototype.splice.call(arguments, 1, 0, "(" + NAMESPACE + ") ->");
				_util.log.apply(window, arguments);
			}
		};
		// for scenes we have getters for each option, but for the controller we don't, so we need to make it available externally for plugins
		this._options = _options;

		/**
		 * Sort scenes in ascending order of their start offset.
		 * @private
		 *
		 * @param {array} ScenesArray - an array of ScrollMagic Scenes that should be sorted
		 * @return {array} The sorted array of Scenes.
		 */
		var sortScenes = function (ScenesArray) {
			if (ScenesArray.length <= 1) {
				return ScenesArray;
			} else {
				var scenes = ScenesArray.slice(0);
				scenes.sort(function (a, b) {
					return a.scrollOffset() > b.scrollOffset() ? 1 : -1;
				});
				return scenes;
			}
		};

		/**
		 * ----------------------------------------------------------------
		 * public functions
		 * ----------------------------------------------------------------
		 */

		/**
		 * Add one ore more scene(s) to the controller.  
		 * This is the equivalent to `Scene.addTo(controller)`.
		 * @public
		 * @example
		 * // with a previously defined scene
		 * controller.addScene(scene);
		 *
		 * // with a newly created scene.
		 * controller.addScene(new ScrollMagic.Scene({duration : 0}));
		 *
		 * // adding multiple scenes
		 * controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);
		 *
		 * @param {(ScrollMagic.Scene|array)} newScene - ScrollMagic Scene or Array of Scenes to be added to the controller.
		 * @return {Controller} Parent object for chaining.
		 */
		this.addScene = function (newScene) {
			if (_util.type.Array(newScene)) {
				newScene.forEach(function (scene, index) {
					Controller.addScene(scene);
				});
			} else if (newScene instanceof ScrollMagic.Scene) {
				if (newScene.controller() !== Controller) {
					newScene.addTo(Controller);
				} else if (_sceneObjects.indexOf(newScene) < 0) {
					// new scene
					_sceneObjects.push(newScene); // add to array
					_sceneObjects = sortScenes(_sceneObjects); // sort
					newScene.on("shift.controller_sort", function () { // resort whenever scene moves
						_sceneObjects = sortScenes(_sceneObjects);
					});
					// insert Global defaults.
					for (var key in _options.globalSceneOptions) {
						if (newScene[key]) {
							newScene[key].call(newScene, _options.globalSceneOptions[key]);
						}
					}
					log(3, "adding Scene (now " + _sceneObjects.length + " total)");
				}
			} else {
				log(1, "ERROR: invalid argument supplied for '.addScene()'");
			}
			return Controller;
		};

		/**
		 * Remove one ore more scene(s) from the controller.  
		 * This is the equivalent to `Scene.remove()`.
		 * @public
		 * @example
		 * // remove a scene from the controller
		 * controller.removeScene(scene);
		 *
		 * // remove multiple scenes from the controller
		 * controller.removeScene([scene, scene2, scene3]);
		 *
		 * @param {(ScrollMagic.Scene|array)} Scene - ScrollMagic Scene or Array of Scenes to be removed from the controller.
		 * @returns {Controller} Parent object for chaining.
		 */
		this.removeScene = function (Scene) {
			if (_util.type.Array(Scene)) {
				Scene.forEach(function (scene, index) {
					Controller.removeScene(scene);
				});
			} else {
				var index = _sceneObjects.indexOf(Scene);
				if (index > -1) {
					Scene.off("shift.controller_sort");
					_sceneObjects.splice(index, 1);
					log(3, "removing Scene (now " + _sceneObjects.length + " left)");
					Scene.remove();
				}
			}
			return Controller;
		};

		/**
		 * Update one ore more scene(s) according to the scroll position of the container.  
		 * This is the equivalent to `Scene.update()`.  
		 * The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.  
		 * It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.  
		 * _**Note:** This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters._
		 * @public
		 * @example
		 * // update a specific scene on next cycle
		 * controller.updateScene(scene);
		 *
		 * // update a specific scene immediately
		 * controller.updateScene(scene, true);
		 *
		 * // update multiple scenes scene on next cycle
		 * controller.updateScene([scene1, scene2, scene3]);
		 *
		 * @param {ScrollMagic.Scene} Scene - ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.
		 * @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle.  
		 This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).
		 * @return {Controller} Parent object for chaining.
		 */
		this.updateScene = function (Scene, immediately) {
			if (_util.type.Array(Scene)) {
				Scene.forEach(function (scene, index) {
					Controller.updateScene(scene, immediately);
				});
			} else {
				if (immediately) {
					Scene.update(true);
				} else if (_updateScenesOnNextCycle !== true && Scene instanceof ScrollMagic.Scene) { // if _updateScenesOnNextCycle is true, all connected scenes are already scheduled for update
					// prep array for next update cycle
					_updateScenesOnNextCycle = _updateScenesOnNextCycle || [];
					if (_updateScenesOnNextCycle.indexOf(Scene) == -1) {
						_updateScenesOnNextCycle.push(Scene);
					}
					_updateScenesOnNextCycle = sortScenes(_updateScenesOnNextCycle); // sort
					debounceUpdate();
				}
			}
			return Controller;
		};

		/**
		 * Updates the controller params and calls updateScene on every scene, that is attached to the controller.  
		 * See `Controller.updateScene()` for more information about what this means.  
		 * In most cases you will not need this function, as it is called constantly, whenever ScrollMagic detects a state change event, like resize or scroll.  
		 * The only application for this method is when ScrollMagic fails to detect these events.  
		 * One application is with some external scroll libraries (like iScroll) that move an internal container to a negative offset instead of actually scrolling. In this case the update on the controller needs to be called whenever the child container's position changes.
		 * For this case there will also be the need to provide a custom function to calculate the correct scroll position. See `Controller.scrollPos()` for details.
		 * @public
		 * @example
		 * // update the controller on next cycle (saves performance due to elimination of redundant updates)
		 * controller.update();
		 *
		 * // update the controller immediately
		 * controller.update(true);
		 *
		 * @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle (better performance)
		 * @return {Controller} Parent object for chaining.
		 */
		this.update = function (immediately) {
			onChange({
				type: "resize"
			}); // will update size and set _updateScenesOnNextCycle to true
			if (immediately) {
				updateScenes();
			}
			return Controller;
		};

		/**
		 * Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for scrolling.  
		 * For vertical controllers it will change the top scroll offset and for horizontal applications it will change the left offset.
		 * @public
		 *
		 * @since 1.1.0
		 * @example
		 * // scroll to an offset of 100
		 * controller.scrollTo(100);
		 *
		 * // scroll to a DOM element
		 * controller.scrollTo("#anchor");
		 *
		 * // scroll to the beginning of a scene
		 * var scene = new ScrollMagic.Scene({offset: 200});
		 * controller.scrollTo(scene);
		 *
		 * // define a new scroll position modification function (jQuery animate instead of jump)
		 * controller.scrollTo(function (newScrollPos) {
		 *	$("html, body").animate({scrollTop: newScrollPos});
		 * });
		 * controller.scrollTo(100); // call as usual, but the new function will be used instead
		 *
		 * // define a new scroll function with an additional parameter
		 * controller.scrollTo(function (newScrollPos, message) {
		 *  console.log(message);
		 *	$(this).animate({scrollTop: newScrollPos});
		 * });
		 * // call as usual, but supply an extra parameter to the defined custom function
		 * controller.scrollTo(100, "my message");
		 *
		 * // define a new scroll function with an additional parameter containing multiple variables
		 * controller.scrollTo(function (newScrollPos, options) {
		 *  someGlobalVar = options.a + options.b;
		 *	$(this).animate({scrollTop: newScrollPos});
		 * });
		 * // call as usual, but supply an extra parameter containing multiple options
		 * controller.scrollTo(100, {a: 1, b: 2});
		 *
		 * // define a new scroll function with a callback supplied as an additional parameter
		 * controller.scrollTo(function (newScrollPos, callback) {
		 *	$(this).animate({scrollTop: newScrollPos}, 400, "swing", callback);
		 * });
		 * // call as usual, but supply an extra parameter, which is used as a callback in the previously defined custom scroll function
		 * controller.scrollTo(100, function() {
		 *	console.log("scroll has finished.");
		 * });
		 *
		 * @param {mixed} scrollTarget - The supplied argument can be one of these types:
		 * 1. `number` -> The container will scroll to this new scroll offset.
		 * 2. `string` or `object` -> Can be a selector or a DOM object.  
		 *  The container will scroll to the position of this element.
		 * 3. `ScrollMagic Scene` -> The container will scroll to the start of this scene.
		 * 4. `function` -> This function will be used for future scroll position modifications.  
		 *  This provides a way for you to change the behaviour of scrolling and adding new behaviour like animation. The function receives the new scroll position as a parameter and a reference to the container element using `this`.  
		 *  It may also optionally receive an optional additional parameter (see below)  
		 *  _**NOTE:**  
		 *  All other options will still work as expected, using the new function to scroll._
		 * @param {mixed} [additionalParameter] - If a custom scroll function was defined (see above 4.), you may want to supply additional parameters to it, when calling it. You can do this using this parameter – see examples for details. Please note, that this parameter will have no effect, if you use the default scrolling function.
		 * @returns {Controller} Parent object for chaining.
		 */
		this.scrollTo = function (scrollTarget, additionalParameter) {
			if (_util.type.Number(scrollTarget)) { // excecute
				setScrollPos.call(_options.container, scrollTarget, additionalParameter);
			} else if (scrollTarget instanceof ScrollMagic.Scene) { // scroll to scene
				if (scrollTarget.controller() === Controller) { // check if the controller is associated with this scene
					Controller.scrollTo(scrollTarget.scrollOffset(), additionalParameter);
				} else {
					log(2, "scrollTo(): The supplied scene does not belong to this controller. Scroll cancelled.", scrollTarget);
				}
			} else if (_util.type.Function(scrollTarget)) { // assign new scroll function
				setScrollPos = scrollTarget;
			} else { // scroll to element
				var elem = _util.get.elements(scrollTarget)[0];
				if (elem) {
					// if parent is pin spacer, use spacer position instead so correct start position is returned for pinned elements.
					while (elem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {
						elem = elem.parentNode;
					}

					var
					param = _options.vertical ? "top" : "left",
						// which param is of interest ?
						containerOffset = _util.get.offset(_options.container),
						// container position is needed because element offset is returned in relation to document, not in relation to container.
						elementOffset = _util.get.offset(elem);

					if (!_isDocument) { // container is not the document root, so substract scroll Position to get correct trigger element position relative to scrollcontent
						containerOffset[param] -= Controller.scrollPos();
					}

					Controller.scrollTo(elementOffset[param] - containerOffset[param], additionalParameter);
				} else {
					log(2, "scrollTo(): The supplied argument is invalid. Scroll cancelled.", scrollTarget);
				}
			}
			return Controller;
		};

		/**
		 * **Get** the current scrollPosition or **Set** a new method to calculate it.  
		 * -> **GET**:
		 * When used as a getter this function will return the current scroll position.  
		 * To get a cached value use Controller.info("scrollPos"), which will be updated in the update cycle.  
		 * For vertical controllers it will return the top scroll offset and for horizontal applications it will return the left offset.
		 *
		 * -> **SET**:
		 * When used as a setter this method prodes a way to permanently overwrite the controller's scroll position calculation.  
		 * A typical usecase is when the scroll position is not reflected by the containers scrollTop or scrollLeft values, but for example by the inner offset of a child container.  
		 * Moving a child container inside a parent is a commonly used method for several scrolling frameworks, including iScroll.  
		 * By providing an alternate calculation function you can make sure ScrollMagic receives the correct scroll position.  
		 * Please also bear in mind that your function should return y values for vertical scrolls an x for horizontals.
		 *
		 * To change the current scroll position please use `Controller.scrollTo()`.
		 * @public
		 *
		 * @example
		 * // get the current scroll Position
		 * var scrollPos = controller.scrollPos();
		 *
		 * // set a new scroll position calculation method
		 * controller.scrollPos(function () {
		 *	return this.info("vertical") ? -mychildcontainer.y : -mychildcontainer.x
		 * });
		 *
		 * @param {function} [scrollPosMethod] - The function to be used for the scroll position calculation of the container.
		 * @returns {(number|Controller)} Current scroll position or parent object for chaining.
		 */
		this.scrollPos = function (scrollPosMethod) {
			if (!arguments.length) { // get
				return getScrollPos.call(Controller);
			} else { // set
				if (_util.type.Function(scrollPosMethod)) {
					getScrollPos = scrollPosMethod;
				} else {
					log(2, "Provided value for method 'scrollPos' is not a function. To change the current scroll position use 'scrollTo()'.");
				}
			}
			return Controller;
		};

		/**
		 * **Get** all infos or one in particular about the controller.
		 * @public
		 * @example
		 * // returns the current scroll position (number)
		 * var scrollPos = controller.info("scrollPos");
		 *
		 * // returns all infos as an object
		 * var infos = controller.info();
		 *
		 * @param {string} [about] - If passed only this info will be returned instead of an object containing all.  
		 Valid options are:
		 ** `"size"` => the current viewport size of the container
		 ** `"vertical"` => true if vertical scrolling, otherwise false
		 ** `"scrollPos"` => the current scroll position
		 ** `"scrollDirection"` => the last known direction of the scroll
		 ** `"container"` => the container element
		 ** `"isDocument"` => true if container element is the document.
		 * @returns {(mixed|object)} The requested info(s).
		 */
		this.info = function (about) {
			var values = {
				size: _viewPortSize,
				// contains height or width (in regard to orientation);
				vertical: _options.vertical,
				scrollPos: _scrollPos,
				scrollDirection: _scrollDirection,
				container: _options.container,
				isDocument: _isDocument
			};
			if (!arguments.length) { // get all as an object
				return values;
			} else if (values[about] !== undefined) {
				return values[about];
			} else {
				log(1, "ERROR: option \"" + about + "\" is not available");
				return;
			}
		};

		/**
		 * **Get** or **Set** the current loglevel option value.
		 * @public
		 *
		 * @example
		 * // get the current value
		 * var loglevel = controller.loglevel();
		 *
		 * // set a new value
		 * controller.loglevel(3);
		 *
		 * @param {number} [newLoglevel] - The new loglevel setting of the Controller. `[0-3]`
		 * @returns {(number|Controller)} Current loglevel or parent object for chaining.
		 */
		this.loglevel = function (newLoglevel) {
			if (!arguments.length) { // get
				return _options.loglevel;
			} else if (_options.loglevel != newLoglevel) { // set
				_options.loglevel = newLoglevel;
			}
			return Controller;
		};

		/**
		 * **Get** or **Set** the current enabled state of the controller.  
		 * This can be used to disable all Scenes connected to the controller without destroying or removing them.
		 * @public
		 *
		 * @example
		 * // get the current value
		 * var enabled = controller.enabled();
		 *
		 * // disable the controller
		 * controller.enabled(false);
		 *
		 * @param {boolean} [newState] - The new enabled state of the controller `true` or `false`.
		 * @returns {(boolean|Controller)} Current enabled state or parent object for chaining.
		 */
		this.enabled = function (newState) {
			if (!arguments.length) { // get
				return _enabled;
			} else if (_enabled != newState) { // set
				_enabled = !! newState;
				Controller.updateScene(_sceneObjects, true);
			}
			return Controller;
		};

		/**
		 * Destroy the Controller, all Scenes and everything.
		 * @public
		 *
		 * @example
		 * // without resetting the scenes
		 * controller = controller.destroy();
		 *
		 * // with scene reset
		 * controller = controller.destroy(true);
		 *
		 * @param {boolean} [resetScenes=false] - If `true` the pins and tweens (if existent) of all scenes will be reset.
		 * @returns {null} Null to unset handler variables.
		 */
		this.destroy = function (resetScenes) {
			window.clearTimeout(_refreshTimeout);
			var i = _sceneObjects.length;
			while (i--) {
				_sceneObjects[i].destroy(resetScenes);
			}
			_options.container.removeEventListener("resize", onChange);
			_options.container.removeEventListener("scroll", onChange);
			_util.cAF(_updateTimeout);
			log(3, "destroyed " + NAMESPACE + " (reset: " + (resetScenes ? "true" : "false") + ")");
			return null;
		};

		// INIT
		construct();
		return Controller;
	};

	// store pagewide controller options
	var CONTROLLER_OPTIONS = {
		defaults: {
			container: window,
			vertical: true,
			globalSceneOptions: {},
			loglevel: 2,
			refreshInterval: 100
		}
	};
/*
 * method used to add an option to ScrollMagic Scenes.
 */
	ScrollMagic.Controller.addOption = function (name, defaultValue) {
		CONTROLLER_OPTIONS.defaults[name] = defaultValue;
	};
	// instance extension function for plugins
	ScrollMagic.Controller.extend = function (extension) {
		var oldClass = this;
		ScrollMagic.Controller = function () {
			oldClass.apply(this, arguments);
			this.$super = _util.extend({}, this); // copy parent state
			return extension.apply(this, arguments) || this;
		};
		_util.extend(ScrollMagic.Controller, oldClass); // copy properties
		ScrollMagic.Controller.prototype = oldClass.prototype; // copy prototype
		ScrollMagic.Controller.prototype.constructor = ScrollMagic.Controller; // restore constructor
	};


	/**
	 * A Scene defines where the controller should react and how.
	 *
	 * @class
	 *
	 * @example
	 * // create a standard scene and add it to a controller
	 * new ScrollMagic.Scene()
	 *		.addTo(controller);
	 *
	 * // create a scene with custom options and assign a handler to it.
	 * var scene = new ScrollMagic.Scene({
	 * 		duration: 100,
	 *		offset: 200,
	 *		triggerHook: "onEnter",
	 *		reverse: false
	 * });
	 *
	 * @param {object} [options] - Options for the Scene. The options can be updated at any time.  
	 Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers `globalSceneOptions` option. The object accepts the same properties as the ones below.  
	 When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in `globalSceneOptions`.
	 * @param {(number|function)} [options.duration=0] - The duration of the scene. 
	 If `0` tweens will auto-play when reaching the scene start point, pins will be pinned indefinetly starting at the start position.  
	 A function retuning the duration value is also supported. Please see `Scene.duration()` for details.
	 * @param {number} [options.offset=0] - Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.
	 * @param {(string|object)} [options.triggerElement=null] - Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).
	 * @param {(number|string)} [options.triggerHook="onCenter"] - Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport.  
	 Can also be defined using a string:
	 ** `"onEnter"` => `1`
	 ** `"onCenter"` => `0.5`
	 ** `"onLeave"` => `0`
	 * @param {boolean} [options.reverse=true] - Should the scene reverse, when scrolling up?
	 * @param {number} [options.loglevel=2] - Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
	 ** `0` => silent
	 ** `1` => errors
	 ** `2` => errors, warnings
	 ** `3` => errors, warnings, debuginfo
	 * 
	 */
	ScrollMagic.Scene = function (options) {

/*
	 * ----------------------------------------------------------------
	 * settings
	 * ----------------------------------------------------------------
	 */

		var
		NAMESPACE = 'ScrollMagic.Scene',
			SCENE_STATE_BEFORE = 'BEFORE',
			SCENE_STATE_DURING = 'DURING',
			SCENE_STATE_AFTER = 'AFTER',
			DEFAULT_OPTIONS = SCENE_OPTIONS.defaults;

/*
	 * ----------------------------------------------------------------
	 * private vars
	 * ----------------------------------------------------------------
	 */

		var
		Scene = this,
			_options = _util.extend({}, DEFAULT_OPTIONS, options),
			_state = SCENE_STATE_BEFORE,
			_progress = 0,
			_scrollOffset = {
				start: 0,
				end: 0
			},
			// reflects the controllers's scroll position for the start and end of the scene respectively
			_triggerPos = 0,
			_enabled = true,
			_durationUpdateMethod, _controller;

		/**
		 * Internal constructor function of the ScrollMagic Scene
		 * @private
		 */
		var construct = function () {
			for (var key in _options) { // check supplied options
				if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
					log(2, "WARNING: Unknown option \"" + key + "\"");
					delete _options[key];
				}
			}
			// add getters/setters for all possible options
			for (var optionName in DEFAULT_OPTIONS) {
				addSceneOption(optionName);
			}
			// validate all options
			validateOption();
		};

/*
 * ----------------------------------------------------------------
 * Event Management
 * ----------------------------------------------------------------
 */

		var _listeners = {};
		/
              
            
!
999px
The Pen is mightier than the sword.

Console