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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              
<div class="wrapper">

	<svg class="oh-dear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450">
		<title>Oh Dear!</title>
		<path class="shoe" d="M297.55,221.55c-3.16,5.33,1.95,11.66,3.58,13.44s5.37,13,5.9,16.79a1.81,1.81,0,0,0,.63,1.12c.58.51,1.93,1.22,6.92,1.54,2.84.18,6.31,1.93,6.17,4.48-.07,1.26-.1,3,1.2,4.13a4.58,4.58,0,0,0,2.82,1c3.17.2,5.23-2.61,6.65-5.07,2.37-4.1,8.65-9.61,8.72-9.7a1.15,1.15,0,0,0,.12-1.62l-.12-.12L306.65,218.4a5,5,0,0,0-6.53-.05A12.64,12.64,0,0,0,297.55,221.55Zm2,1.2,8.27,7.19c-.75,1-3.61,3.37-5,3.48-1.43-1.59-5.56-6.75-3.27-10.67Zm14.25,4.93,16.42,14.26a22.82,22.82,0,0,0-2.82,3.47L310.74,231a23.42,23.42,0,0,0,3-3.28Zm4.95,11.75,2.5,2.17-9.41,4.6-.89-2.79Zm-8.13,2.87-.93-2.9,5.73-2.84,2.39,2.08Zm3.86-6.58-5.14,2.58-.28-.87a.57.57,0,0,0-.54-.4l-3.73-.09a23,23,0,0,0-1.25-2.53,10.67,10.67,0,0,0,5.17-3.73l5.78,5Zm-9.21,2.34,2.81.07,4.41,13.8a9.49,9.49,0,0,1-3.19-.75A80.88,80.88,0,0,0,305.24,238.07Zm8.48,14-1.49-4.77,10-4.89,11.48,10a32.67,32.67,0,0,0-4.21,5.4c-.24.42-.47.78-.69,1.12a8.21,8.21,0,0,0-4.11-1.75,4.2,4.2,0,0,0-1.6.16c-1-3.93-7.79-5.4-9.34-5.23Zm11.2,9.64a2.53,2.53,0,0,1-1.46-.43c-.45-.39-.45-1.16-.41-2.31v-.46a2.81,2.81,0,0,1,1.45-.21,7,7,0,0,1,3.55,1.49c-1.34,1.75-2.35,2-3.12,1.93Zm9.52-10.15-6.2-5.41a.57.57,0,0,0,.19-.24,23.56,23.56,0,0,1,2.66-3.2l6.58,5.73c-.82.73-2,1.84-3.24,3.14Zm-32.82-31.4a2.69,2.69,0,0,1,3.53,0l7.75,6.72a23.28,23.28,0,0,1-3,3.25h0l-9.7-8.41A9.29,9.29,0,0,1,301.61,220.15Zm27.66,34.58a3.46,3.46,0,1,0-4.88.34,3.46,3.46,0,0,0,4.88-.34Zm-4.35-3.78a2.31,2.31,0,1,1,.22,3.25,2.31,2.31,0,0,1-.22-3.25v0Z" fill="#fff" opacity="0.8" />
		 <g class="oh-dear__text" fill="#fff">
			<path class="oh-dear__bang" d="M390.16,223.75l-37.65-2-.16-108.24,49.29,2.58Zm-45.11,37.68q.54-10.38,7-15.82t18.22-4.82q11.64.61,17.33,6.69t5.14,16.46q-.54,10.27-7.06,15.71T368,284.48q-11.3-.59-17.38-6.69T345.06,261.43Z" />
			<path class="oh-dear__r" d="M298.58,278l2.61,37.32-27.71,1.94-7.17-102.55,33.6-2.35q41.8-2.92,43.92,27.38,1.25,17.82-15.47,28.78l33,42.59-31.42,2.2-24.35-35.79Zm-1.46-20.83,5.19-.36q14.52-1,13.62-13.85-.74-10.59-15-9.6l-5.47.38Z" />
			<path class="oh-dear__a" d="M257.25,332.45l-5.73-19.08-33.38,1.17L213.61,334,183.11,335,213,230.71l37-1.29,37.54,102ZM245,290.81l-5-16.71q-1.74-5.57-4.27-14.41T232.31,247q-.51,3.61-2.08,11.89t-7.13,32.68Z" />
			<polygon class="oh-dear__e" points="203.03 316.58 142.08 319.78 136.7 217.12 197.65 213.93 198.81 236.18 165.6 237.92 166.45 254.07 197.2 252.46 198.37 274.72 167.61 276.33 168.63 295.71 201.84 293.97 203.03 316.58" />
			<path class ="oh-dear__d" d="M141.6,275.4Q139.35,301,124,313.67t-40.89,10.4L50,321.17l9-102.41,35.44,3.1q24.66,2.16,37,15.94T141.6,275.4Zm-28.8-1.53Q114,259.79,109,252.51t-16.32-8.27l-8.06-.7-5,57.37,6.16.54q12.61,1.1,19.13-5.7T112.79,273.87Z" />
			<polygon class ="oh-dear__h" points="293.33 212.77 266.03 218.57 257.31 177.58 225.75 184.29 234.46 225.28 207.15 231.09 185.78 130.54 213.09 124.73 221.01 162.01 252.58 155.3 244.66 118.03 271.96 112.22 293.33 212.77" />
			<path class ="oh-dear__o" d="M203.09,163.3q0,25.95-12.73,39.45t-37.27,13.5q-24.19,0-37.09-13.57t-12.9-39.52q0-25.66,12.83-39.2t37.3-13.54q24.54,0,37.2,13.43T203.09,163.3Zm-70.73,0q0,29.81,20.74,29.81,10.55,0,15.64-7.24t5.1-22.57q0-15.4-5.17-22.75t-15.43-7.35Q132.35,133.21,132.35,163.3Z" />
		</g>
	</svg>
	
	<div class="intro">
		<h1 class="intro__title">We had a little hiccup there people!</h1>
		<p>Looks like that page is missing :-(</p>
	</div>
	
	<svg class="net" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 650">
		<defs>
			<mask id="net__liquid-mask-r">
				<path d="M380,77.37c-.29,2.09-2.2,16.35-2.28,27a125.66,125.66,0,0,0,3,28c1.57,6.82,4,14.43,7.91,20.33,5.13,7.83,6.57,7.83,11.7,0,3.86-5.9,6.34-13.5,7.91-20.33a125.66,125.66,0,0,0,3-28c-.21-12-1.9-23.25-2.21-27Z" fill="white" />
			</mask>
			<mask id="net__liquid-mask-l">
				<path d="M271,77.37c-.29,2.09-2.2,16.35-2.28,27a125.66,125.66,0,0,0,3,28c1.57,6.82,4,14.43,7.91,20.33,5.13,7.83,6.57,7.83,11.7,0,3.86-5.9,6.34-13.5,7.91-20.33a125.66,125.66,0,0,0,3-28c-.21-12-1.9-23.25-2.21-27Z" fill="white" />
			</mask>
		</defs>
		<title>Net Magazine Logo</title>
		<circle class="net__circle" cx="300" cy="357" r="250" opacity="0.4" />
		<g class="net__glass-r">
			<path d="M382.39,156.71c-3.73-5.69-6.81-13.52-8.93-22.73a133.64,133.64,0,0,1-3.18-29.63,142.75,142.75,0,0,1,1-17.15,117,117,0,0,1,3-15.71,1.86,1.86,0,0,1,1.93-1.5h36.5a1.86,1.86,0,0,1,1.93,1.5,117,117,0,0,1,3,15.71,142.75,142.75,0,0,1,1,17.15A133.64,133.64,0,0,1,415.42,134c-2.12,9.21-5.2,17-8.93,22.73-2.55,3.89-5,6.57-7.48,8.05v57.91a20,20,0,0,0,10.53,17.61H421a1.85,1.85,0,0,1,0,3.71H367.85a1.85,1.85,0,1,1,0-3.71h11.48a20,20,0,0,0,10.53-17.61V164.76c-2.47-1.48-4.93-4.16-7.48-8.05Zm12.92,9.36a7.85,7.85,0,0,1-1.73,0v56.6A23.57,23.57,0,0,1,390.09,235a23.82,23.82,0,0,1-4.37,5.25h17.43a23.85,23.85,0,0,1-4.37-5.25,23.58,23.58,0,0,1-3.48-12.36v-56.6Zm-17.8-92.37A114.66,114.66,0,0,0,375,87.64a139.07,139.07,0,0,0-1,16.71,129.94,129.94,0,0,0,3.08,28.8c2,8.78,4.93,16.19,8.42,21.53,3.38,5.15,6.26,7.73,9,7.73s5.58-2.58,9-7.73c3.5-5.34,6.4-12.75,8.42-21.53a129.94,129.94,0,0,0,3.08-28.8,139.07,139.07,0,0,0-1-16.71,114.66,114.66,0,0,0-2.53-13.94Z" fill="#fff" />
			<g mask="url(#net__liquid-mask-r)">
				<rect class="net__liquid-r" x="344" y="96" width="100" height="100" fill="#fff" />
			</g>
		</g>
		<g class="net__glass-l">
			<path d="M273.39,156.71c-3.73-5.69-6.81-13.52-8.93-22.73a133.64,133.64,0,0,1-3.18-29.63,142.75,142.75,0,0,1,1-17.15,117,117,0,0,1,3-15.71,1.86,1.86,0,0,1,1.93-1.5h36.5a1.86,1.86,0,0,1,1.93,1.5,117,117,0,0,1,3,15.71,142.75,142.75,0,0,1,1,17.15A133.64,133.64,0,0,1,306.42,134c-2.12,9.21-5.2,17-8.93,22.73-2.55,3.89-5,6.57-7.48,8.05v57.91a20,20,0,0,0,10.53,17.61H312a1.85,1.85,0,0,1,0,3.71H258.85a1.85,1.85,0,1,1,0-3.71h11.48a20,20,0,0,0,10.53-17.61V164.76c-2.47-1.48-4.93-4.16-7.48-8.05Zm12.92,9.36a7.85,7.85,0,0,1-1.73,0v56.6A23.57,23.57,0,0,1,281.09,235a23.82,23.82,0,0,1-4.37,5.25h17.43a23.85,23.85,0,0,1-4.37-5.25,23.58,23.58,0,0,1-3.48-12.36v-56.6Zm-17.8-92.37A114.66,114.66,0,0,0,266,87.64a139.07,139.07,0,0,0-1,16.71,129.94,129.94,0,0,0,3.08,28.8c2,8.78,4.93,16.19,8.42,21.53,3.38,5.15,6.26,7.73,9,7.73s5.58-2.58,9-7.73c3.5-5.34,6.4-12.75,8.42-21.53a129.94,129.94,0,0,0,3.08-28.8,139.07,139.07,0,0,0-1-16.71,114.66,114.66,0,0,0-2.53-13.94Z" fill="#fff" />
			<g mask="url(#net__liquid-mask-l)">
				<rect class="net__liquid-l" x="235" y="96" width="100" height="100" fill="#fff" />
			</g>
		</g>
		<g class="net__logo">
			<path d="M364.23,330.28c-3.13,0-18,0-18,16.94l35,.06V346c0-14.11-12.12-15.73-17-15.73" fill="#fff"/>

			<path d="M289.45,299.34a2.76,2.76,0,0,0,.8.93,2,2,0,0,0,1.14.37,2.38,2.38,0,0,0,1.19-.24,2,2,0,0,0,.79-.76,3.68,3.68,0,0,0,.44-1.24,9.43,9.43,0,0,0,.14-1.7,8,8,0,0,0-.14-1.56,4.13,4.13,0,0,0-.45-1.26,2.46,2.46,0,0,0-.79-.85,2.12,2.12,0,0,0-1.13-.33,2.53,2.53,0,0,0-1.19.24,2.07,2.07,0,0,0-.81.74,3.47,3.47,0,0,0-.46,1.19,8,8,0,0,0-.14,1.6A7.46,7.46,0,0,0,289,298,4.8,4.8,0,0,0,289.45,299.34Z" fill="#fff"/>
			<path d="M383.21,296.14a1.32,1.32,0,0,0,.48.51,1.45,1.45,0,0,0,.77.19,1.19,1.19,0,0,0,.65-.17,1.31,1.31,0,0,0,.42-.43,1.82,1.82,0,0,0,.23-.6,3.53,3.53,0,0,0,.07-.68,2.37,2.37,0,0,0-.38-1.45,1.33,1.33,0,0,0-1.13-.51,1.67,1.67,0,0,0-.5.08,1.25,1.25,0,0,0-.45.26,1.29,1.29,0,0,0-.33.46,1.75,1.75,0,0,0-.12.7,5.82,5.82,0,0,0,.07.9A2.31,2.31,0,0,0,383.21,296.14Z" fill="#fff"/>
			<path d="M383.18,303.95a2.09,2.09,0,0,0,.74.36,3.43,3.43,0,0,0,.93.12,6.72,6.72,0,0,0,1-.06,2,2,0,0,0,.71-.23,1.09,1.09,0,0,0,.43-.46,1.67,1.67,0,0,0,.15-.76q0-.26,0-.54a1,1,0,0,0-.2-.51,1.25,1.25,0,0,0-.55-.38,3.09,3.09,0,0,0-1.08-.15h-2l-.47,0a2.05,2.05,0,0,0-.18.48,2.91,2.91,0,0,0-.07.69,1.93,1.93,0,0,0,.17.85A1.7,1.7,0,0,0,383.18,303.95Z" fill="#fff"/>
			<path d="M280.12,295a4,4,0,0,0-.1-.81,2.54,2.54,0,0,0-.28-.7,1.5,1.5,0,0,0-.5-.52,1.63,1.63,0,0,0-.49-.21,2.5,2.5,0,0,0-.62-.07,2.39,2.39,0,0,0-.9.17,2.09,2.09,0,0,0-.78.55,3.13,3.13,0,0,0-.57,1,5.16,5.16,0,0,0-.3,1.45h4.52Q280.13,295.46,280.12,295Z" fill="#fff"/>
			<path d="M327.8,295a4.33,4.33,0,0,0,0-.69,2.17,2.17,0,0,0-.14-.62,1,1,0,0,0-.36-.46,1.06,1.06,0,0,0-.35-.16,1.78,1.78,0,0,0-.46-.05,1.32,1.32,0,0,0-.8.24,1.8,1.8,0,0,0-.52.61,3,3,0,0,0-.3.85,7.3,7.3,0,0,0-.13,1h3Q327.78,295.34,327.8,295Z" fill="#fff"/>
			<path d="M362.06,295a4.38,4.38,0,0,0,0-.69,2.19,2.19,0,0,0-.14-.62,1,1,0,0,0-.36-.46,1.06,1.06,0,0,0-.35-.16,1.78,1.78,0,0,0-.46-.05,1.32,1.32,0,0,0-.8.24,1.8,1.8,0,0,0-.52.61,3,3,0,0,0-.3.85,7.38,7.38,0,0,0-.13,1h3Q362,295.34,362.06,295Z" fill="#fff"/>
			<path d="M335.21,300.15a1.55,1.55,0,0,0,.37.17,1.66,1.66,0,0,0,.51.07,1.59,1.59,0,0,0,.69-.16,1.55,1.55,0,0,0,.61-.58,3.79,3.79,0,0,0,.45-1.14,8.8,8.8,0,0,0,.22-1.84,4.78,4.78,0,0,0-.17-1.52,3.17,3.17,0,0,0-.52-1,2.14,2.14,0,0,0-.73-.61,1.8,1.8,0,0,0-.79-.2,3.45,3.45,0,0,0-.6,0,2.92,2.92,0,0,0-.45.11v6.25a1.54,1.54,0,0,0,.15.23A1.07,1.07,0,0,0,335.21,300.15Z" fill="#fff"/>
			<path d="M348.66,298.9a2.76,2.76,0,0,0,.52.8,1.82,1.82,0,0,0,.65.45,1.56,1.56,0,0,0,.58.11,4.2,4.2,0,0,0,.66,0,2.81,2.81,0,0,0,.48-.11v-6.84a1.6,1.6,0,0,0-.63-.24,4.18,4.18,0,0,0-.62,0,1.53,1.53,0,0,0-.33,0,1.69,1.69,0,0,0-.43.17,2.09,2.09,0,0,0-.46.35,2.26,2.26,0,0,0-.42.6,4.09,4.09,0,0,0-.31.89,5.7,5.7,0,0,0-.13,1.24,7.81,7.81,0,0,0,.1,1.5A4.75,4.75,0,0,0,348.66,298.9Z" fill="#fff"/>
			<path d="M236.46,295a4,4,0,0,0-.1-.81,2.54,2.54,0,0,0-.28-.7,1.5,1.5,0,0,0-.5-.52,1.63,1.63,0,0,0-.49-.21,2.5,2.5,0,0,0-.62-.07,2.39,2.39,0,0,0-.9.17,2.09,2.09,0,0,0-.78.55,3.13,3.13,0,0,0-.57,1,5.16,5.16,0,0,0-.3,1.45h4.52Q236.47,295.46,236.46,295Z" fill="#fff"/>
			<path d="M254.93,299.34a2.76,2.76,0,0,0,.8.93,2,2,0,0,0,1.14.37,2.38,2.38,0,0,0,1.19-.24,2,2,0,0,0,.79-.76,3.68,3.68,0,0,0,.44-1.24,9.43,9.43,0,0,0,.14-1.7,8,8,0,0,0-.14-1.56,4.13,4.13,0,0,0-.45-1.26A2.46,2.46,0,0,0,258,293a2.12,2.12,0,0,0-1.13-.33,2.53,2.53,0,0,0-1.19.24,2.07,2.07,0,0,0-.81.74,3.47,3.47,0,0,0-.46,1.19,8,8,0,0,0-.14,1.6,7.46,7.46,0,0,0,.16,1.55A4.79,4.79,0,0,0,254.93,299.34Z" fill="#fff"/>
			<path d="M539.74,341.37l-35.47,35.46a166.39,166.39,0,1,0-133.7,133.7l-35.75,35.75,1.41,1.41L541.16,342.78ZM391.06,292.75l3.07-.91.62.16v1.22a4.42,4.42,0,0,1,.73-.57,5.09,5.09,0,0,1,.86-.43,5.64,5.64,0,0,1,.93-.28,4.69,4.69,0,0,1,1-.1,3,3,0,0,1,1.31.25,2,2,0,0,1,.83.73,3.23,3.23,0,0,1,.44,1.17,8.72,8.72,0,0,1,.13,1.57V300l1.17.21v1.12h-5.27v-1.12L398,300v-4.06a7.8,7.8,0,0,0-.06-1.09,1.53,1.53,0,0,0-.24-.67.9.9,0,0,0-.49-.34,3,3,0,0,0-.84-.1l-.24,0-.36.08-.37.12a1,1,0,0,0-.28.15V300l1,.22v1.12h-5v-1.12l1-.21v-5.44l-1.12-.79Zm-10.63.89a3.2,3.2,0,0,1,1-1,4.61,4.61,0,0,1,1.42-.58,7.74,7.74,0,0,1,1.61-.2,6.78,6.78,0,0,1,1.71.17,3.44,3.44,0,0,1,1.31.61,1.22,1.22,0,0,1,.22-.31,1.2,1.2,0,0,1,.36-.24,2.18,2.18,0,0,1,.53-.16,4.11,4.11,0,0,1,.74-.06h.73v2h-1.71a3.34,3.34,0,0,1,.15,1,3.16,3.16,0,0,1-.32,1.46,2.87,2.87,0,0,1-.88,1A3.92,3.92,0,0,1,386,298a6.92,6.92,0,0,1-1.71.2,7.82,7.82,0,0,1-1.45-.12,1.55,1.55,0,0,0-.13.6.82.82,0,0,0,.31.72,1.51,1.51,0,0,0,.88.21h1.93a9.87,9.87,0,0,1,1.86.15,3.28,3.28,0,0,1,1.24.48,1.86,1.86,0,0,1,.69.84,3.26,3.26,0,0,1,.21,1.24,2.72,2.72,0,0,1-.35,1.34,3.26,3.26,0,0,1-1,1.1,5.63,5.63,0,0,1-1.72.75,9.18,9.18,0,0,1-2.38.28,9.9,9.9,0,0,1-1.75-.14,4.5,4.5,0,0,1-1.33-.44,2.29,2.29,0,0,1-.86-.76,2,2,0,0,1-.3-1.11,2.21,2.21,0,0,1,.13-.77,2.54,2.54,0,0,1,.33-.62,2.84,2.84,0,0,1,.45-.49,3.49,3.49,0,0,1,.49-.35,1.6,1.6,0,0,1-.5-.29,1.16,1.16,0,0,1-.28-.37,1.35,1.35,0,0,1-.12-.43,4.35,4.35,0,0,1,0-.48,1.23,1.23,0,0,1,.1-.44,3,3,0,0,1,.25-.5,4,4,0,0,1,.36-.49,3.73,3.73,0,0,1,.42-.42,2.88,2.88,0,0,1-1.18-1,2.69,2.69,0,0,1-.42-1.54A2.75,2.75,0,0,1,380.43,293.65Zm-5.35-5.53a2,2,0,0,1,.47-.59,2.25,2.25,0,0,1,.65-.39,2,2,0,0,1,.72-.14,2.11,2.11,0,0,1,.76.12,1.44,1.44,0,0,1,.53.34,1.37,1.37,0,0,1,.31.5,1.81,1.81,0,0,1,.1.6,1.68,1.68,0,0,1-.17.76,1.84,1.84,0,0,1-.45.58,2,2,0,0,1-.65.37,2.22,2.22,0,0,1-.74.13,1.92,1.92,0,0,1-.63-.11,1.71,1.71,0,0,1-.55-.31,1.51,1.51,0,0,1-.38-.49,1.44,1.44,0,0,1-.14-.65A1.53,1.53,0,0,1,375.08,288.12Zm-.79,12.12,1.12-.23v-5.14l-1.06-1.19v-.77l3.27-1.06.7.21v8l1.19.21v1.12h-5.22Zm-8.17-6.62a2.26,2.26,0,0,1,.5-.67,3.15,3.15,0,0,1,.71-.5,4.74,4.74,0,0,1,.84-.33,6.79,6.79,0,0,1,1.72-.27q.47,0,1,0t.91.11l.8.16a4.85,4.85,0,0,1,.62.19v2.26h-1.45l-.46-1a2.23,2.23,0,0,0-.53-.45,1.28,1.28,0,0,0-.69-.2,2.44,2.44,0,0,0-.45,0,1.27,1.27,0,0,0-.39.14.82.82,0,0,0-.27.24.58.58,0,0,0-.1.34,1.15,1.15,0,0,0,.11.5,1.64,1.64,0,0,0,.31.43,2.58,2.58,0,0,0,.48.38,5,5,0,0,0,.61.32l.81.36q.41.18.8.39a7.13,7.13,0,0,1,.73.45,3.09,3.09,0,0,1,.6.55,2.48,2.48,0,0,1,.4.68,2.31,2.31,0,0,1,.15.86,2.55,2.55,0,0,1-.36,1.38,2.77,2.77,0,0,1-1,.92,4.42,4.42,0,0,1-1.4.51,8.82,8.82,0,0,1-1.69.16q-.4,0-.84,0a8.11,8.11,0,0,1-.88-.13,7.09,7.09,0,0,1-.86-.23,3.85,3.85,0,0,1-.74-.34v-2.17h1.36l.52.9.24.26a2.26,2.26,0,0,0,.33.29,2.24,2.24,0,0,0,.43.24,1.62,1.62,0,0,0,.55.12,1.69,1.69,0,0,0,1.13-.25.91.91,0,0,0,.38-.79.68.68,0,0,0-.19-.43,2.31,2.31,0,0,0-.48-.4,6.19,6.19,0,0,0-.68-.38l-.81-.38q-.59-.27-1.12-.58a4.68,4.68,0,0,1-.94-.71,3.15,3.15,0,0,1-.64-.9,2.54,2.54,0,0,1-.23-1.14A2.08,2.08,0,0,1,366.11,293.62ZM356.27,295a4.78,4.78,0,0,1,1-1.63,4.72,4.72,0,0,1,1.6-1.1,5.35,5.35,0,0,1,2.13-.41,5.14,5.14,0,0,1,1.72.26,3.15,3.15,0,0,1,1.18.71,2.93,2.93,0,0,1,.69,1.1,4.48,4.48,0,0,1,.26,1.39,7.05,7.05,0,0,1,0,.93q0,.41-.09.75H359a3.78,3.78,0,0,0,.76,2.21,2.32,2.32,0,0,0,1.86.74,7,7,0,0,0,1.29-.13,6.09,6.09,0,0,0,1.35-.43l.44,1a3.81,3.81,0,0,1-.76.49,6.1,6.1,0,0,1-1,.38,8,8,0,0,1-1.12.24,6.89,6.89,0,0,1-1.19.07,6.28,6.28,0,0,1-2-.34,4,4,0,0,1-1.47-.91,3.83,3.83,0,0,1-.91-1.44,6,6,0,0,1,0-3.93Zm-10.68-.12a4.93,4.93,0,0,1,1.16-1.6,5.28,5.28,0,0,1,1.71-1,5.83,5.83,0,0,1,2.09-.37H351a4.65,4.65,0,0,1,.56.06v-2l-1.83-.47v-1.16l4.22-.41.54.22v12.13h1.17v.88a4,4,0,0,1-.91.31,6.77,6.77,0,0,1-1.61.16,2.11,2.11,0,0,1-.87-.15,1.06,1.06,0,0,1-.5-.44,2.53,2.53,0,0,1-.4.22,3.36,3.36,0,0,1-.56.19,5.72,5.72,0,0,1-.74.13,8.18,8.18,0,0,1-1,0,3.63,3.63,0,0,1-.89-.12,3.69,3.69,0,0,1-.9-.36,4,4,0,0,1-.83-.62,3.84,3.84,0,0,1-.69-.9,4.8,4.8,0,0,1-.46-1.19,6.23,6.23,0,0,1-.17-1.52A4.81,4.81,0,0,1,345.6,294.85Zm-14.75-6.56,3.49-.4.47.14v4.33a4.32,4.32,0,0,1,1-.37,4.65,4.65,0,0,1,1.22-.15,4.71,4.71,0,0,1,1.49.24,3.41,3.41,0,0,1,1.29.78,3.87,3.87,0,0,1,.91,1.4,5.67,5.67,0,0,1,.34,2.1,5.35,5.35,0,0,1-.37,2,5.1,5.1,0,0,1-4.85,3.28,11.75,11.75,0,0,1-1.31-.07q-.66-.07-1.21-.18a8.4,8.4,0,0,1-.93-.23,1.35,1.35,0,0,1-.47-.21v-11l-1-.47ZM323,293.35a4.71,4.71,0,0,1,1.6-1.1,5.35,5.35,0,0,1,2.13-.41,5.14,5.14,0,0,1,1.72.26,3.15,3.15,0,0,1,1.18.71,2.93,2.93,0,0,1,.69,1.1,4.48,4.48,0,0,1,.26,1.39,7.05,7.05,0,0,1,0,.93c0,.27-.06.52-.09.75h-5.76a3.78,3.78,0,0,0,.76,2.21,2.32,2.32,0,0,0,1.86.74,7,7,0,0,0,1.29-.13,6.1,6.1,0,0,0,1.35-.43l.44,1a3.83,3.83,0,0,1-.76.49,6.12,6.12,0,0,1-1,.38,8,8,0,0,1-1.12.24,6.9,6.9,0,0,1-1.19.07,6.28,6.28,0,0,1-2-.34,4,4,0,0,1-1.47-.91,3.84,3.84,0,0,1-.91-1.44,6,6,0,0,1,0-3.93A4.78,4.78,0,0,1,323,293.35Zm-16.47-1.24h4.7v1.48l-.81.22.94,3.84.28,1.31.19-1.06,1.57-5.79h2.41l1.48,5.79.26,1.17.24-1.17.9-4.06-1.1-.25v-1.48h4.12v1.47l-1.16.28-2.12,7.54h-2.76l-1.27-4.23-.45-1.78-.31,1.78-1.14,4.23h-2.65l-2.35-7.59-1-.22Zm-10,.49,1.82-.49v-.69a4.24,4.24,0,0,1,.57-2.14,4.12,4.12,0,0,1,1.32-1.39,3.41,3.41,0,0,1,.76-.37,2.35,2.35,0,0,1,.74-.13,4.93,4.93,0,0,1,.83,0,1.83,1.83,0,0,1,.36.09v1.41a2.39,2.39,0,0,0-.52-.16,4.4,4.4,0,0,0-1-.1,2.9,2.9,0,0,0-.61.06.86.86,0,0,0-.46.27,1.41,1.41,0,0,0-.3.62,4.73,4.73,0,0,0-.1,1.11v1.36h2.5v1.12h-2.5v7.27l1.9.17v.7h-5.15v-.7l1.66-.18v-7.25h-1.82Zm-9,2a4.57,4.57,0,0,1,1-1.48,4.19,4.19,0,0,1,1.39-.93,4.43,4.43,0,0,1,1.65-.33,4.11,4.11,0,0,1,1.83.36,3.56,3.56,0,0,1,1.29,1,4.38,4.38,0,0,1,.76,1.53,6.66,6.66,0,0,1,.24,1.88,5.77,5.77,0,0,1-.35,2,4.88,4.88,0,0,1-.93,1.56,4.15,4.15,0,0,1-1.36,1,4,4,0,0,1-1.67.36,4.2,4.2,0,0,1-1.94-.41,3.66,3.66,0,0,1-1.31-1.11,4.6,4.6,0,0,1-.73-1.6,7.21,7.21,0,0,1-.21-1.89A5.25,5.25,0,0,1,287.51,294.57Zm-13.18.24a4.69,4.69,0,0,1,.93-1.55,4.32,4.32,0,0,1,1.44-1,4.81,4.81,0,0,1,1.86-.4,3.4,3.4,0,0,1,1.31.21,2.65,2.65,0,0,1,1,.67,3.2,3.2,0,0,1,.65,1.09,4.82,4.82,0,0,1,.27,1.46,7.09,7.09,0,0,1,0,.9q0,.38-.08.68h-6.13v.1a.57.57,0,0,0,0,.1,4.23,4.23,0,0,0,.34,1.65,3,3,0,0,0,.76,1,2.67,2.67,0,0,0,1,.54,4.05,4.05,0,0,0,1.08.15,6.51,6.51,0,0,0,.68,0,6.79,6.79,0,0,0,.69-.11,6.28,6.28,0,0,0,.62-.16,2.42,2.42,0,0,0,.46-.19l.31.7a2.42,2.42,0,0,1-.62.39,5.35,5.35,0,0,1-.84.29,7.27,7.27,0,0,1-1,.18,7.78,7.78,0,0,1-1,.06,4.33,4.33,0,0,1-1.77-.34,3.59,3.59,0,0,1-1.3-1,4.27,4.27,0,0,1-.81-1.51,6.59,6.59,0,0,1-.28-2A5.51,5.51,0,0,1,274.33,294.81Zm-7.92,0a4.73,4.73,0,0,1,1-1.57,4.32,4.32,0,0,1,1.43-1,4.87,4.87,0,0,1,1.77-.41h.71a6.21,6.21,0,0,1,.68.07,4.45,4.45,0,0,1,.58.14,1.77,1.77,0,0,1,.43.19v2h-.79l-.42-1a1.29,1.29,0,0,0-.31-.18l-.36-.12-.36-.07-.33,0a2.77,2.77,0,0,0-1.06.21,2.51,2.51,0,0,0-.89.62,3.06,3.06,0,0,0-.62,1,4.44,4.44,0,0,0-.24,1.48,5.87,5.87,0,0,0,.26,1.93,3.92,3.92,0,0,0,.71,1.31,2.75,2.75,0,0,0,1,.74,2.62,2.62,0,0,0,1.06.24,5.67,5.67,0,0,0,.67,0l.67-.11a4.64,4.64,0,0,0,.6-.16,2.72,2.72,0,0,0,.45-.19l.28.74a2.4,2.4,0,0,1-.6.38,4.88,4.88,0,0,1-.78.28,6.82,6.82,0,0,1-.89.18,7.1,7.1,0,0,1-.94.06,3.93,3.93,0,0,1-1.69-.35,3.54,3.54,0,0,1-1.24-1,4.3,4.3,0,0,1-.77-1.47,6.31,6.31,0,0,1-.27-1.84A5.66,5.66,0,0,1,266.41,294.85Zm-4-6.36a1.33,1.33,0,0,1,.29-.38,1.31,1.31,0,0,1,.39-.25,1.14,1.14,0,0,1,.44-.09,1,1,0,0,1,.8.3,1.09,1.09,0,0,1,.25.72,1.13,1.13,0,0,1-.11.5,1.17,1.17,0,0,1-.28.38,1.32,1.32,0,0,1-.4.24,1.25,1.25,0,0,1-.45.09,1.11,1.11,0,0,1-.39-.07,1,1,0,0,1-.33-.2.94.94,0,0,1-.23-.32,1,1,0,0,1-.09-.43A1.06,1.06,0,0,1,262.4,288.5Zm-.9,12.16,1.41-.17v-6.77l-1.14-.6v-.51l2.29-.65.37.17v8.37l1.34.17v.7H261.5ZM253,294.57a4.57,4.57,0,0,1,1-1.48,4.19,4.19,0,0,1,1.39-.93,4.43,4.43,0,0,1,1.65-.33,4.11,4.11,0,0,1,1.83.36,3.56,3.56,0,0,1,1.29,1,4.37,4.37,0,0,1,.76,1.53,6.66,6.66,0,0,1,.24,1.88,5.77,5.77,0,0,1-.35,2,4.88,4.88,0,0,1-.93,1.56,4.15,4.15,0,0,1-1.36,1,4,4,0,0,1-1.67.36,4.2,4.2,0,0,1-1.94-.41,3.66,3.66,0,0,1-1.31-1.11,4.6,4.6,0,0,1-.73-1.6,7.21,7.21,0,0,1-.21-1.89A5.25,5.25,0,0,1,253,294.57Zm-10.36-2.46h3.64V293l-1,.17,1.81,4.41.78,2.36.76-2.26,1.58-4.51-1.06-.17v-.88h3.3V293l-.88.18-3.36,8.4h-1.12l-3.63-8.42-.8-.16Zm-12,2.7a4.69,4.69,0,0,1,.93-1.55,4.32,4.32,0,0,1,1.44-1,4.81,4.81,0,0,1,1.86-.4,3.4,3.4,0,0,1,1.31.21,2.65,2.65,0,0,1,1,.67,3.2,3.2,0,0,1,.65,1.09,4.82,4.82,0,0,1,.27,1.46,7.08,7.08,0,0,1,0,.9q0,.38-.08.68h-6.13v.1a.57.57,0,0,0,0,.1,4.23,4.23,0,0,0,.34,1.65,3,3,0,0,0,.76,1,2.67,2.67,0,0,0,1,.54,4.05,4.05,0,0,0,1.08.15,6.51,6.51,0,0,0,.68,0,6.78,6.78,0,0,0,.69-.11,6.28,6.28,0,0,0,.62-.16,2.42,2.42,0,0,0,.46-.19l.31.7a2.42,2.42,0,0,1-.62.39,5.35,5.35,0,0,1-.84.29,7.26,7.26,0,0,1-1,.18,7.78,7.78,0,0,1-1,.06,4.33,4.33,0,0,1-1.77-.34,3.59,3.59,0,0,1-1.3-1,4.28,4.28,0,0,1-.81-1.51,6.59,6.59,0,0,1-.28-2A5.51,5.51,0,0,1,230.66,294.81Zm-10.9-6.54,2.61-.35.39.19,0,3.65,0,1.43a5.05,5.05,0,0,1,.79-.53,6.78,6.78,0,0,1,.86-.39,5.86,5.86,0,0,1,.84-.25,3.59,3.59,0,0,1,.74-.09,3.21,3.21,0,0,1,1.38.26,1.92,1.92,0,0,1,.85.79,3.74,3.74,0,0,1,.43,1.37,14,14,0,0,1,.11,2v4.14l1.24.17v.7h-4.22v-.7l1.39-.17V297q0-1,0-1.69a4,4,0,0,0-.24-1.22,1.5,1.5,0,0,0-.58-.74,2,2,0,0,0-1.07-.25,5.38,5.38,0,0,0-.58,0,4.47,4.47,0,0,0-.62.11,4.26,4.26,0,0,0-.62.21,3.18,3.18,0,0,0-.6.34v6.64l1.21.17v.7h-4v-.7l1.24-.17V289.29l-1.41-.3Zm-10.56.25h9.84l0,2.54-.68.07-.43-1.54-3-.16v11l2.16.25v.7h-5.79v-.7l2-.25v-11l-3,.17-.58,1.41-.75,0Zm113,116.76H277.3V390.65l7.41-2.07a2.23,2.23,0,0,0,1.59-2.38V345.5c0-6.17-2.43-9.9-5.57-12.15-3.88-2.8-8.83-3.29-11.63-3.29-3.16,0-18.19,0-18.19,16.63q0,39.73,0,39.75a2.09,2.09,0,0,0,1.44,2.12l7.48,2.09v14.64H215.11V390.65l7.92-2a2.11,2.11,0,0,0,1.57-2.18l0-32.63V330a2,2,0,0,0-1.34-1.77l-14-2.39V313.51l31.57-3.39,2.1,5.09a54.3,54.3,0,0,1,26.27-6.93c17.09,0,43.21,6.93,43.21,39q0,39.09,0,39.13a2.16,2.16,0,0,0,1.66,2.2l8.18,2Zm86-38.59H346.82v2c0,16.63,15.55,17.82,18.7,17.82A27.74,27.74,0,0,0,383.44,380h24v15.5c-8.66,5.15-20.44,11.82-41.9,11.82-17.72,0-45.28-8.91-45.28-37.23V345.31c0-28.31,27-37,44.69-37,17.13,0,43.31,6.93,43.31,39Zm65,33.62s-12.44,6-23.3,6c-8.1,0-31.79,0-31.79-26.06V329.9h-8.91V310.19h8.91v-19l26.66-2.88v21.91H469.3V329.9H444.81v49.92c0,4,2,5.57,5.92,5.57,6.13,0,8.49-3,8.49-3h14Z" fill="#fff" />
			

<!-- 			<path d="M320.24,370.06V345.31c0-28.31,27-37,44.69-37,17.13,0,43.31,6.93,43.31,39v19.4H346.82v2c0,16.63,15.55,17.82,18.7,17.82A27.74,27.74,0,0,0,383.44,380h24v15.5c-8.66,5.15-20.44,11.82-41.9,11.82-17.72,0-45.28-8.91-45.28-37.23Zm2,35.23H277.3V390.65l7.41-2.07a2.23,2.23,0,0,0,1.59-2.38V345.5c0-6.17-2.43-9.9-5.57-12.15-3.88-2.8-8.83-3.29-11.63-3.29-3.16,0-18.19,0-18.19,16.63q0,39.73,0,39.75a2.09,2.09,0,0,0,1.44,2.12l7.48,2.09v14.64H215.11V390.65l7.92-2a2.11,2.11,0,0,0,1.57-2.18l0-32.63V330a2,2,0,0,0-1.34-1.76l-14-2.39V313.51l31.57-3.39,2.1,5.09a54.3,54.3,0,0,1,26.27-6.93c17.09,0,43.21,6.93,43.21,39q0,39.09,0,39.13a2.16,2.16,0,0,0,1.66,2.21l8.18,2Zm87-95.09h8.91v-19l26.66-2.88v21.91H469.3V329.9H444.81v49.92c0,4,2,5.57,5.92,5.57,6.13,0,8.5-3,8.5-3h14v17.9s-12.44,6-23.3,6c-8.1,0-31.79,0-31.79-26.06V329.9h-8.91Zm130.5,31.18-35.46,35.46a166.39,166.39,0,1,0-133.7,133.7l-35.75,35.75,1.41,1.41L541.16,342.78Z" fill="#fff" />
			<path d="M364.23,330.28c-3.13,0-18,0-18,16.94l35,.06V346c0-14.11-12.12-15.73-17-15.73" fill="#fff" /> -->
		</g>
		<g class="net__splash-lines">
			<line x1="340.89" y1="4" x2="340.89" y2="15" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/>
      		<line x1="319" y1="12.61" x2="326.78" y2="20.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/>
      		<line x1="362.78" y1="12.61" x2="355" y2="20.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4"/>
		</g>
	</svg>
	
	<div class="celeb">
		<h2 class="celeb__title">Celebrating our 300<sup>th</sup> Edition</h2>
		<p class="celeb__sub">Maybe a little too much!</p>
		<a class="celeb__btn" href="https://www.myfavouritemagazines.co.uk/design/net-magazine-subscription/?utm_source=creativebloq.com&utm_medium=magazines&utm_campaign=net&utm_content=tab" target="_blank" class="celeb__btn">Buy it today!</a>
		<p>and see what we have to celebrate about…</p>
	</div>
	
</div>
            
          
!
            
              /*  ==========================================================================
    Fonts
    ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

/*  ==========================================================================
    General
    ========================================================================== */

body {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/net-bg-with-shapes-%402x.png'), linear-gradient(51deg, #E94E1B 13%, #E41B9E 66%, #DE0054 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center top;
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	font-feature-settings: "kern" 1,"liga" 1,"frac" 1, "pnum" 1;
    -webkit-font-smoothing: antialiased;
	color: white;
}

body,
html {
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

#slider{
	// display: none;
	position: fixed;
	right: 50px;
	top: 50px;
	width:300px;
}

#fps {
	position: fixed;
	top: 0;
	left: 0;
	padding: 10px;
	background-color: #fff;
	color: black;
}

.wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 100px;
}

/*  ==========================================================================
    404 Intro
    ========================================================================== */

.intro {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 800px;
	margin: -90px auto 0;
	text-align: center;
	animation: fadein 1s;
}

.intro__title {
	color: white;
	font-weight: 600;
	font-size: 24px;
}

p {
	opacity: 0.7;
}

/*  ==========================================================================
    Celebration Content
    ========================================================================== */

.celeb {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 800px;
	margin: -120px auto 0;
	text-align: center;
	opacity: 0;
	animation: fadein 1s 1s forwards;
	
	p:last-child {
		border-bottom: 1px solid rgba(white, 0.3);
		padding-bottom: 24px;
	}
}

.celeb__title {
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(white, 0.3);
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -3px;
}

.celeb__sub {
	font-size: 24px;
}

.celeb__btn {
	display: block;
	margin: 0 auto;
	width: 234px;
	height: 54px;
	line-height: 54px;
	font-weight: 700;
	text-transform: uppercase;
	color: #E7413D;
	text-decoration: none;
	background-color: white;
	border-radius: 3px;
	box-shadow: 1px 4px 8px 0 rgba(0,0,0,0.07);
	transition: width 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	
	&:hover {
		width: 264px;
	}
}

/*  ==========================================================================
    OH DEAR
    ========================================================================== */

.oh-dear {
	display: block;
	width: 100%;
	max-width: 450px;
	height: 100%;
	max-height: 450px;
	margin: 0 auto;
}

.oh-dear__text {
	opacity: 0
}

/*  ==========================================================================
    Net logo
    ========================================================================== */

.net {
	position: relative;
	display: block;
	opacity: 0;
	width: 100%;
	max-width: 680px;
	height: 100%;
	max-height: 680px;
	margin: 0 auto;
}

.net__splash-lines line {
	visibility: hidden;
}

/*  ==========================================================================
    Animations
    ========================================================================== */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gs-dev-tools {
	z-index: 100;
}
            
          
!
            
              /*  ==========================================================================
    Variables
    ========================================================================== */  

var $body = $('body');

// Oh Dear Variables
var $ohDearText = $('.oh-dear__text'),
	$letter_O = $('.oh-dear__o'),
	$letter_H = $('.oh-dear__h'),
	$letter_D = $('.oh-dear__d'),
	$letter_E = $('.oh-dear__e'),
	$letter_A = $('.oh-dear__a'),
	$letter_R = $('.oh-dear__r'),
	$bang = $('.oh-dear__bang'),
	$shoe = $('.shoe'),
	letterBTime = 2;
			  
// Net cheers variables

var $net = $('.net'),
	$glassL = $('.net__glass-l'),
	$glassR = $('.net__glass-r'),
	$liquidL = $('.net__liquid-l'),
	$liquidR = $('.net__liquid-r'),
	$netLogo = $('.net__logo'),
	$netCircle = $('.net__circle'),
	$splashLines = $('.net__splash-lines').find('line')

var tl = new TimelineMax(); // global timeline

/*  ==========================================================================
    Oh Dear Animation
    ========================================================================== */  

function ohDear() {

	var ohDearTL = new TimelineMax();

	ohDearTL.set($ohDearText, { opacity: 1 })
			.from($letter_D, letterBTime, { y: -345, ease: Elastic.easeOut.config(1, 0.4) })
			.from($letter_D, 5.5, { rotation: -15, scale: 1.1, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0)

			.from($letter_E, letterBTime, { y: -320, ease: Elastic.easeOut.config(1, 0.4) }, 0.04)
			.from($letter_E, 5.5, { rotation: 10, scale: 0.9, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.04)

			.from($letter_A, letterBTime, { y: -350, ease: Elastic.easeOut.config(1, 0.4) }, 0.02)
			.from($letter_A, 5.5, { rotation: -5, scale: 1.1, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.02)

			.from($letter_R, letterBTime, { y: -330, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.01)
			.from($letter_R, 5.5, { rotation: 8, scale: 0.9, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.01)

			.fromTo($letter_O, letterBTime, { y: -230 }, { y:5, ease: Elastic.easeOut.config(1, 0.4) }, 0.2)
			.from($letter_O, 5.5, { rotation: -12, scale: 1.1, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.2)

			.from($letter_H, letterBTime, { y: -240, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.21)
			.from($letter_H, 5.5, { rotation:15, scale: 0.9, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.21)

			.from($bang, letterBTime, { y: -300, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.15)
			.from($bang, 5.5, { rotation:20, scale: 1.1, ease: Elastic.easeOut, transformOrigin: 'center top' }, 0.15)
	
			// .set($shoe, { x: 100, y: 200 })
			.to($shoe, 2, { scale: 1.4, y: -140, x: -10, ease: Elastic.easeOut.config(0.5, 0.4), transformOrigin: "center, center" }, 0.15)
			.to($shoe, 3, { rotation: 720, ease: Elastic.easeOut.config(0.4, 0.4), transformOrigin: "center, center" }, 0.15)

			// .to($letter_H, 0.03, { y: -50, ease: Sine.easeOut }, "+=0.21")
			// .to($letter_H, 0.9, { y: 0, ease: Elastic.easeOut.config(1, 0.4) });
	
	return ohDearTL;

};

/*  ==========================================================================
    Net Cheers Animation
    ========================================================================== */  

function netCheers() {

	var netTL = new TimelineMax();
	
	netTL.set($net, { opacity: 1 })
		.from($netLogo, 2, { scale: 0, ease: Elastic.easeOut.config(1, 0.4), transformOrigin: "center center" })
		.from($netCircle, 1.5, { scale: 0, ease: Elastic.easeOut.config(0.5, 0.4), transformOrigin: "center center" }, 0.1)
		.from($glassL, 2, { y: 80, opacity: 0, ease: Elastic.easeOut.config(1, 0.4) }, 0.8)
		.from($glassR, 2, { y: 80, opacity: 0, ease: Elastic.easeOut.config(1, 0.4) }, 0.9)
		.from($liquidL, 2, { scaleY: 0, ease: Expo.easeInOut, transformOrigin: "center bottom" }, 0.9)
		.from($liquidR, 2, { scaleY: 0, ease: Expo.easeInOut, transformOrigin: "center bottom" }, 1.0)
		.to($glassL, 0.3, { rotation: 15, x: 13, y: -30, transformOrigin: "right 80px", ease: Sine.easeIn })
		.to($glassR, 0.3, { rotation: -15, x: -13, y: -30, transformOrigin: "left 80px", ease: Sine.easeIn }, "-=0.3")
		.set($splashLines, { autoAlpha: 1, immediateRender: false })
		.to($splashLines, 1, { drawSVG: 0, ease:Power2.easeOut})
		.to($splashLines, 1, { autoAlpha: 0 }, '-=0.65')
		.to($glassL, 0.5, { rotation: 10, x: 10, y: -20, ease: Back.easeOut }, "-=1.35")
		.to($glassR, 0.5, { rotation: -10, x: -10, y: -20, ease: Back.easeOut }, "-=1.35")
		.to($liquidL, 0.6, { rotation: -25, transformOrigin: "center center", ease: Back.easeInOut }, "-=1.7")
		.to($liquidR, 0.6, { rotation: 25, transformOrigin: "center center", ease: Back.easeInOut }, "-=1.7")
		.to($liquidL, 6, { rotation: -10, ease: Elastic.easeOut.config(1.6, 0.12) }, "-=1.1")
		.to($liquidR, 6, { rotation: 10, ease: Elastic.easeOut.config(1.6, 0.12) }, "-=6")
	
	TweenMax.to( 
		$netCircle, 
		10, { 
			repeat: -1,
			ease: Linear.easeNone,
			bezier:{
				type:"thru",
				curviness:1, 
				values:[
					{x:-10, y:20}, 
					{x:-4, y:12}, 
					{x:25, y:-15},
					{x:1, y:10},
					{x:-8, y:-2},
					{x:-15, y:-15},
					{x:5, y:10},
					{x:0, y:0}
				]
			}
		}, 0   
	  );
	
	return netTL;
	
};

/*  ==========================================================================
    Main Timeline
    ========================================================================== */  

window.onload = function() {
	tl.add(ohDear(), 0.5);
	tl.add(netCheers(), "-=5.5");
};



/*  ==========================================================================
    Dev tools
    ========================================================================== */  

// GSDevTools.create();

/*  ==========================================================================
    Fin
    ========================================================================== */  

console.clear();

















            
          
!
999px
Loading ..................

Console