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.

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.

HTML

              
                <header id="intro"> <!-- id for link -->
	<div class="wrapper wrapper-wide">
		<div class="row">
<svg id="diagram-myradon-dt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 671" width="800">
	<defs>
		<clipPath id="mask-circle-test">
			<rect x="962" y="309.5" width="40" height="172"/>
			<rect x="1103" y="309.5" width="40" height="172"/>
		</clipPath>
	</defs>
	<style type="text/css">
		<![CDATA[
			svg path,
			svg rect,
			svg polygon,
			svg circle {
				fill: #05386b;
				stroke: none;
			}

			.arrow path,
			.dashed-line {
				fill:none;
				stroke: #05386b;
				stroke-width: 1;
			}
			.dashed-line {
				stroke-dasharray:10,10;
				stroke-dashoffset: 0;
			}

			#uxer,
			#participants,
			#balloon-1,
			#balloon-2,
			#balloon-3,
			#balloon-4,
			#note,
			.pen,
			#paper g,
			#bulb-and-erlenmeijer,
			#closed-bulb,
			#open-bulb,
			#open-bulb-lit,
			#happy-bulb,
			#energy-bulb-lit {
				opacity: 0;
			}
		]]>
	</style>
<g id="arrow-wireframe-test" class="arrow">
	<path d="M809.53,506.5c239.76,34.98-51.53-202,177.72-202"/>
	<path d="M961.91,319.6c3.51,3.14,22.85-12.81,25.29-14.51c-8.93-2.06-21.59-7.54-30.28-11.32
		c7.18,2.69-0.4,21.65,3.06,21.37c5.27-0.42,10.41-4.87,13.86-8.45c-4.48-0.35-8.79,0.34-12.94,2.08
		c22.55-17.92,2.92,0.23,5.28-10.54"/>
</g>
<g id="arrow-wireframe-loop" class="arrow">
	<path d="M611.27,491.09c-2.93-2.43-6.04-4.71-9.32-6.8c-35.6-23.04-81.66-13.96-105.59,20.89
		c-23.42,34.99-22.69,82.47,14.75,106.87c37.18,25.72,95.3,13.45,119.66-24.41c2.07-3.07,3.87-6.18,5.39-9.33"/>
	<path d="M634.84,608.21c-3.33-11.57-12.77-9.78-15.43-15.62c1.96-2.97,13.93-17.16,16.61-17.02
		c3.82,0.19,0.71,23.68-0.95,26.58c-1.99-1.88-7.12-6.52-9.41-8c22.93-0.23-9.89-0.9,10.04-16.98"/>
</g>
<g id="arrow-wireframe-empathize" class="arrow">
	<path d="M792.57,397.26c59.18-111.31-90.15-261.85-12.96-259.61c44.37,1.29,10.16,56.32-13.59,27.9
		C587.04-48.68,354.9,17.78,211.76,131.12"/>
	<path d="M237.47,120.97c-5.69-1.31-20.42-12.54-21.78-14.56c-1.79,7.31-0.53,19.5-4.56,25.73
		c2.29-5.86,19.84-1.95,19.65-4.79c-0.29-4.33-10.07-12.17-12.97-15.03c-0.34,3.67,0.31,11.39,1.69,14.81"/>
</g>
<g id="arrow-wireframe-ideate" class="arrow">
	<path d="M724.75,425.55c14.05-45.27,84.77-66.85-75.75-253.03"/>
	<path d="M654.12,196.67c3.84,2.74,21.32-15.24,23.56-17.19c-9.1-1.07-22.29-5.14-31.34-7.95
		c7.43,1.89,1.97,21.56,5.38,20.91c5.19-1,9.82-5.98,12.85-9.92c-4.49,0.14-8.7,1.3-12.63,3.49c20.46-20.28,2.93-0.09,4.1-11.05"/>
</g>
<g id="arrow-ideate-wireframe" class="arrow">
	<path d="M617.89,218.38c6.31,22.11,4.6,41.18,0.46,94.13c-2.9,37.12,33.53,76,54.54,95.17"/>
	<path d="M666.33,383.15c-1.98,5.38-15.96,17.81-18.36,18.77c8.11,3.18,22.03,4.27,28.73,9.45
		c-6.44-3.4-0.49-20.02-3.73-20.38c-4.93-0.55-14.64,7.63-18.13,9.96c4.12,1.04,12.91,1.88,16.91,1.17"/>
</g>
<g id="arrow-define-ideate" class="arrow">
	<path d="M391.9,350.74c92.28,23.69,148.77-36.34,174.12-96.24"/>
	<path d="M546.82,268.02c5.2-0.44,20.89,3.68,22.62,4.72c-0.55-5.31-5.09-13.19-3.45-18.3
		c-0.28,4.46-16.28,5.89-15.31,7.76c1.47,2.84,12,5.82,15.28,7.07c-0.75-2.54-3.5-7.56-5.64-9.54"/>
</g>
<g id="arrow-emphatize-define" class="arrow">
	<path d="M249.29,173.38c45.53-9.8,71.29,47.84,90.19,76.73"/>
	<path d="M314.31,240.4c-2.42-4.26,18.05-20.43,20.31-22.54c0.14,9.53,2.94,23.62,4.87,33.28c-1.16-7.89-22.1-4.34-21.06-7.8c1.59-5.27,7.24-9.52,11.64-12.24c-0.62,4.63-2.28,8.86-4.96,12.7c23.18-19,0.41-3.02,11.88-3.06"/>
</g>

<g id="test-group">
	<path id="stats-icon" d="M1253.49,358.25l-20.79,4.23l5.95,5.92l-18.54,18.57l-10.4-10.4l-25.42,25.1l4.89,4.91l20.52-20.22l10.37,10.37
		l23.5-23.43l5.78,5.75L1253.49,358.25z M1195.65,380.7l-11.37-11.22l4.89-4.91l11.43,11.26L1195.65,380.7z M1249.33,392.09
		l4.16,20.8l-20.79-4.23l5.95-5.92l-7.38-7.39l4.89-4.88l7.4,7.38L1249.33,392.09z M1253.49,420.44v6.93h-83.17v-76.24h6.93v69.31
		H1253.49z"/>
	<circle id="circle-test" clip-path="url(#mask-circle-test)" class="dashed-line" cx="1051.89" cy="397.26" r="84.68"/>
	<path id="hourglass-icon" d="M1156.46,275.06c1.96-2.34,3.04-5.27,3.04-8.26v-6.31h-32.73v6.31c0,2.98,1.08,5.92,3.04,8.25l6.31,7.53
		c1.16,1.39,1.17,3.32,0.02,4.72l-6.4,7.76c-1.91,2.32-2.97,5.23-2.97,8.17v6.36h32.73v-6.36c0-2.94-1.06-5.84-2.97-8.17l-6.4-7.76
		c-1.15-1.39-1.14-3.33,0.02-4.72L1156.46,275.06z M1146.97,289.9l6.4,7.76c1.33,1.62,2.04,3.53,2.04,5.79h-24.54
		c0-2.26,0.7-4.17,2.04-5.79l6.4-7.76c2.39-2.89,2.37-7.08-0.04-9.95l-6.31-7.53c-1.35-1.61-2.09-3.55-2.09-5.8h24.54
		c0,2.25-0.74,4.19-2.08,5.8l-6.32,7.53C1144.6,282.83,1144.58,287.02,1146.97,289.9z"/>
	<g id="imac-and-smartphone-b">
		<g class="imac">
			<path d="M1053,470.5h-38v-39h66v11h5v-11.09c0-3.56-2.3-6.91-5.85-6.91h-64.49c-3.56,0-7.66,3.35-7.66,6.91v48.37
				c0,3.56,4.1,6.72,7.66,6.72H1053V470.5z"/>
			<path d="M1053,498.17v-4.67h-16.06c0,5-5.36,7.14-8.38,9h25.38C1053.45,500.64,1053,499.65,1053,498.17z"/>
		</g>
		<path class="smartphone" d="M1090.27,454.75c0.6,0,1.08,0.48,1.08,1.08v41.11c0,0.6-0.49,1.08-1.08,1.08h-23.8
			c-0.6,0-1.08-0.48-1.08-1.08v-41.11c0-0.6,0.48-1.08,1.08-1.08H1090.27z M1095.68,454.75c0-2.39-1.94-4.33-4.33-4.33h-25.96
			c-2.39,0-4.33,1.94-4.33,4.33v43.27c0,2.39,1.94,4.33,4.33,4.33h25.96c2.39,0,4.33-1.94,4.33-4.33V454.75z M1075.13,456.91h6.49
			c0.59,0,1.08,0.49,1.08,1.08c0,0.59-0.49,1.08-1.08,1.08h-6.49c-0.59,0-1.08-0.49-1.08-1.08
			C1074.05,457.4,1074.53,456.91,1075.13,456.91z M1078.37,495.86c-1.2,0-2.16-0.97-2.16-2.16c0-1.2,0.97-2.16,2.16-2.16
			c1.19,0,2.16,0.97,2.16,2.16C1080.53,494.89,1079.57,495.86,1078.37,495.86z M1089.19,489.36h-21.64v-28.13h21.64V489.36z"/>
		<path id="letter-b" d="M1035.28,438.56h8.52c0.99,0,1.99,0.07,2.99,0.21c1,0.14,1.9,0.42,2.7,0.84s1.44,1.01,1.94,1.76
			c0.5,0.75,0.74,1.75,0.74,3c0,1.29-0.36,2.36-1.08,3.21c-0.72,0.85-1.67,1.46-2.86,1.82v0.06c0.75,0.11,1.44,0.32,2.05,0.63
			c0.61,0.31,1.14,0.71,1.58,1.19s0.78,1.05,1.02,1.7c0.24,0.65,0.35,1.33,0.35,2.07c0,1.21-0.26,2.21-0.77,3.02
			c-0.52,0.81-1.18,1.46-2,1.95c-0.82,0.5-1.74,0.85-2.76,1.07c-1.02,0.22-2.04,0.32-3.05,0.32h-9.36V438.56z M1040.31,447.7h3.65
			c0.39,0,0.77-0.04,1.15-0.13c0.38-0.09,0.72-0.23,1.02-0.42c0.3-0.19,0.54-0.45,0.73-0.77c0.18-0.32,0.27-0.71,0.27-1.16
			c0-0.47-0.1-0.87-0.31-1.18c-0.2-0.31-0.47-0.55-0.79-0.73c-0.32-0.17-0.69-0.3-1.1-0.37c-0.41-0.08-0.81-0.11-1.19-0.11h-3.42
			V447.7z M1040.31,457.16h4.52c0.39,0,0.78-0.04,1.18-0.13s0.76-0.24,1.08-0.45c0.32-0.21,0.59-0.5,0.79-0.84s0.31-0.76,0.31-1.26
			c0-0.54-0.13-0.97-0.4-1.31c-0.27-0.33-0.61-0.59-1.02-0.76c-0.41-0.17-0.85-0.29-1.32-0.36c-0.47-0.06-0.92-0.1-1.32-0.1h-3.81
			V457.16z"/>
	</g>
	<g id="imac-and-smartphone-a">
		<g class="imac">
			<path d="M1053,325.5h-38v-39h66v11h5v-11.09c0-3.56-2.3-6.91-5.85-6.91h-64.49c-3.56,0-7.66,3.35-7.66,6.91v48.37
				c0,3.56,4.1,6.72,7.66,6.72H1053V325.5z"/>
			<path d="M1053,353.17v-4.67h-16.06c0,5-5.36,7.14-8.38,9h25.38C1053.45,355.64,1053,354.65,1053,353.17z"/>
		</g>
		<path class="smartphone" d="M1090.27,309.75c0.6,0,1.08,0.48,1.08,1.08v41.11c0,0.6-0.49,1.08-1.08,1.08h-23.8
			c-0.6,0-1.08-0.48-1.08-1.08v-41.11c0-0.6,0.48-1.08,1.08-1.08H1090.27z M1095.68,309.75c0-2.39-1.94-4.33-4.33-4.33h-25.96
			c-2.39,0-4.33,1.94-4.33,4.33v43.27c0,2.39,1.94,4.33,4.33,4.33h25.96c2.39,0,4.33-1.94,4.33-4.33V309.75z M1075.13,311.91h6.49
			c0.59,0,1.08,0.49,1.08,1.08c0,0.59-0.49,1.08-1.08,1.08h-6.49c-0.59,0-1.08-0.49-1.08-1.08
			C1074.05,312.4,1074.53,311.91,1075.13,311.91z M1078.37,350.86c-1.2,0-2.16-0.97-2.16-2.16c0-1.2,0.97-2.16,2.16-2.16
			c1.19,0,2.16,0.97,2.16,2.16C1080.53,349.89,1079.57,350.86,1078.37,350.86z M1089.19,344.36h-21.64v-28.13h21.64V344.36z"/>
		<path id="letter-a" d="M1039.12,293.56h4.17l9.94,22.86h-5.68l-1.97-4.84h-8.88l-1.9,4.84h-5.55L1039.12,293.56z M1041.06,300.22
			l-2.78,7.1h5.59L1041.06,300.22z"/>
	</g>
</g>
<g id="wireframe-group">
	<g id="Responsive-design">
		<path class="paper" d="M636.16,438.46l121.58-3.02l-0.24-9.88c-0.24-9.53,7.43-17.48,17.1-17.72c9.59-0.24,17.59,7.33,17.83,16.86
			l2.2,89.85l-0.08,0c-0.42,9.13-7.96,16.57-17.23,16.8l-138.77,3.58L636.16,438.46z M777.16,524.52
			c5.79-0.14,10.56-5.05,10.42-10.71c-0.14-5.78-4.73-10.21-10.44-10.06c-5.78,0.14-10.2,4.79-10.06,10.57l0.02,1l-1,0.04l-6,0.15
			l-0.02-1l-2.17-72.07l-114.59,2.85l2.05,82.48L777.16,524.52z M774.78,414.83c-5.81,0.14-10.42,4.88-10.28,10.55l1.81,75.11
			c2.97-2.33,6.6-3.64,10.44-3.74c3.8-0.09,7.47,1.03,10.52,3.21l-1.83-74.92C785.3,419.26,780.52,414.68,774.78,414.83z"/>
		<g id="wireframe-mobile">
			<path class="outline" d="M648.56,454.15l0.02,1l0.42,16.99l0.07,3l0.42,17l0.75,29.99l40.99-1.02l-0.75-29.99l-0.5-19.99
				l-0.45-17.99L648.56,454.15z M674.07,474.53l12-0.3l0.35,14l-12,0.3L674.07,474.53z M685.99,471.23l-15,0.37l-3,0.07l-15,0.37
				l-0.35-14l32.99-0.82L685.99,471.23z M665.07,474.75l0.35,14l-12,0.3l-0.35-14L665.07,474.75z M687.14,517.21l-32.99,0.82
				l-0.65-25.99l15-0.37l-0.42-16.99l3-0.07l0.42,16.99l15-0.37L687.14,517.21z"/>
			<rect x="655.97" y="509.65" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1351.4271 1004.4979)" width="27" height="2"/>
			<rect x="656.07" y="513.75" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1343.7358 1012.7831)" width="19" height="2"/>
			<rect x="655.87" y="505.69" transform="matrix(0.9997 -0.0249 0.0249 0.9997 -12.3907 16.7609)" width="24" height="2"/>
			<rect x="655.77" y="501.64" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1351.83 988.4723)" width="28" height="2"/>
			<rect x="655.58" y="493.69" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1347.2712 973.6367)" width="24" height="3"/>
		</g>
		<g id="wireframe-tablet">
			<path class="outline" d="M698.54,452.91l0.02,1l0.42,16.99l0.07,3l0.42,16.99l0.75,29.99l58.98-1.47l-0.75-29.99l-0.5-19.99
				l-0.45-17.99L698.54,452.91z M702.99,470.81l-0.35-14l49.98-1.24l0.35,14l-21.99,0.55l-5,0.12L702.99,470.81z M723.06,473.31
				l0.35,14l-19.99,0.5l-0.35-14L723.06,473.31z M734.05,473.03l19.99-0.5l0.35,14l-19.99,0.5L734.05,473.03z M755.12,515.52
				l-50.98,1.27l-0.65-25.99l22.99-0.57l-0.42-16.99l5-0.12l0.42,17l22.99-0.57L755.12,515.52z"/>
			<rect x="708.05" y="512.34" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1456.6443 1008.5757)" width="28" height="2"/>
			<rect x="707.95" y="508.2" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1468.3359 1000.135)" width="40" height="2"/>
			<rect x="707.85" y="504.26" transform="matrix(0.9997 -0.0249 0.0249 0.9997 -12.3436 18.199)" width="35" height="2"/>
			<rect x="707.75" y="500.19" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1468.7385 984.1095)" width="41" height="2"/>
			<rect x="707.57" y="492.26" transform="matrix(-0.9997 0.0249 -0.0249 -0.9997 1462.1881 969.3395)" width="35" height="3"/>
		</g>
	</g>
	<path id="ruler" d="M618.5,558.05c0.31,0.93-0.19,1.94-1.12,2.26c-0.93,0.31-1.94-0.19-2.26-1.12c-0.31-0.93,0.19-1.94,1.12-2.26
		S618.19,557.12,618.5,558.05z M648.34,540.47l4.56,13.52l-40.57,13.67l-13.67-40.57l13.52-4.56l9.11,27.04L648.34,540.47z
		 M611.15,553l6.76-2.28l-1.14-3.38l-3.38,1.14l-0.57-1.69l3.38-1.14l-1.14-3.38l-3.38,1.14l-0.57-1.69l3.38-1.14l-1.14-3.38
		l-3.38,1.14l-0.57-1.69l3.38-1.14l-1.14-3.38l-3.38,1.14l-0.57-1.69l3.38-1.14l-1.14-3.38l-6.76,2.28L611.15,553z M646.1,544.99
		l-3.38,1.14l1.71,5.07l-1.69,0.57l-1.71-5.07l-3.38,1.14l1.14,3.38l-1.69,0.57l-1.14-3.38l-3.38,1.14l1.71,5.07l-1.69,0.57
		l-1.71-5.07l-3.38,1.14l1.14,3.38l-1.69,0.57l-1.14-3.38l-3.38,1.14l1.71,5.07l-1.69,0.57l-1.71-5.07l-8.45,2.85l2.28,6.76
		l33.81-11.39L646.1,544.99z"/>
	<path id="triangle" d="M678.49,553.98l-9.39,4.43l2.48-6.91L678.49,553.98z M683.84,553.72l-13.49-4.84l-4.84,13.49L683.84,553.72z
		 M664.16,535.79l-16.58,46.26l62.84-29.67L664.16,535.79z M666.64,541.03l1.93,0.69l-1.38,3.85l1.93,0.69l1.38-3.85l3.85,1.38
		l-1.38,3.85l1.93,0.69l1.38-3.85l3.85,1.38l-1.38,3.85l1.93,0.69l1.38-3.85l3.85,1.38l-1.38,3.85l1.93,0.69l1.38-3.85l3.85,1.38
		l-1.38,3.85l1.93,0.69l1.38-3.85l6.11,2.19l-44.96,21.23L666.64,541.03z"/>
	<path class="pen" d="M801.62,451.69c-1.36-0.38-2.13-1.77-1.75-3.14l3.81-13.86c0.19-0.68,0.62-1.22,1.17-1.54
		c0.56-0.33,1.25-0.44,1.93-0.25L801.62,451.69z M799.96,482.27c-0.08,0.28-0.03,0.58,0.11,0.81c0.29,0.5,0.94,0.67,1.44,0.37
		c0.23-0.13,0.41-0.35,0.48-0.63l0.64-2.33l-2.03-0.56L799.96,482.27z M802.67,458.05l-2.19,7.96c-1.18,4.28-1.06,7.68-0.23,12.05
		l3.63,1c2.94-3.32,4.78-6.19,5.96-10.47l2.19-7.96L802.67,458.05z M808.58,434l-5.64,20.52l10.66,2.94l5.64-20.51
		c0.41-1.5,0.16-3.03-0.57-4.28C816.22,428.51,809.88,429.27,808.58,434z"/>
	<path id="pencil" d="M730.28,542.48l-19.97,19.97l-2.27,11.26l11.26-2.27l19.97-19.97L730.28,542.48z M713.9,566.01l-1.34-1.34
		l17.6-17.58l1.34,1.34L713.9,566.01z M717.07,569.18l-1.34-1.34l17.6-17.58l1.34,1.34L717.07,569.18z M745.96,544.78l-4.45,4.45
		l-8.99-8.99l4.45-4.45L745.96,544.78z"/>
</g>
<g id="ideate-group">
	<g id="energy-bulb-lit">
		<path id="light-bulb-3-icon" d="M468.58,136.32c-0.61-1.3-0.08-2.84,1.2-3.46c11.08-5.34,11.6-5.09,12.21-7.64
			c0.33-1.39,1.72-2.24,3.09-1.89c2.82,0.71,2.65,6.57-2.24,9.01c-1.6,0.8-10.85,5.22-10.85,5.22
			C470.73,138.18,469.2,137.62,468.58,136.32z M473.98,146.27l25.44-12.24c1.28-0.61,1.81-2.16,1.2-3.46
			c-0.61-1.3-2.14-1.85-3.42-1.24l-25.44,12.24c-1.27,0.61-1.81,2.16-1.2,3.46C471.18,146.33,472.71,146.89,473.98,146.27z
			 M502.61,139.29c-0.61-1.3-2.14-1.85-3.42-1.24l-25.44,12.25c-1.27,0.61-1.81,2.16-1.2,3.46c1.3,2.75,9.91,3.1,11.19,8.73
			l0.47,2.06l-6.39,1.46c0,0,0.74,3.27,1.5,6.58c1.23,5.41,6.85,6.32,9.64,12.11c0,0,12.03-2.74,13.82-3.15
			c0-6.31,4.73-9.69,3.5-15.1l-1.5-6.59l-6.58,1.5l-0.76-3.32c-0.46-2.02,0.52-4.09,2.36-4.99l3.28-1.59
			c1.27-0.61,1.81-2.16,1.2-3.46c-0.61-1.3-2.14-1.85-3.42-1.24l-3.77,1.85c-3.65,1.8-5.58,5.92-4.67,9.95l0.89,3.91l-4.23,0.96
			l-0.59-2.58c-1.02-4.48-4.16-5.69-8.07-8l20.97-10.1C502.69,142.14,503.22,140.59,502.61,139.29z M496.04,190.11l2.63-0.6
			c1.33-0.3,1.53-0.98,4.38-5.05l-13.03,2.97C494.18,189.86,494.68,190.42,496.04,190.11z"/>

			<rect x="478.22" y="109.41" transform="matrix(0.9751 -0.2218 0.2218 0.9751 -13.2263 109.3939)" width="4.57" height="8.37"/>
		<polygon points="498.1,109.86 493.68,108.61 491.45,116.93 495.87,118.18 		"/>
		<polygon points="512.06,118.49 508.62,115.39 502.67,122.21 506.11,125.31 		"/>
		<polygon points="519.35,146.9 510.57,145.42 509.86,150 518.64,151.48 		"/>

			<rect x="509.68" y="131.25" transform="matrix(0.9751 -0.222 0.222 0.9751 -16.8175 117.5082)" width="9.33" height="4.65"/>
		<polygon points="471.84,121.4 466.23,114.86 462.78,117.9 468.4,124.44 		"/>
		<polygon points="464.01,131.01 455.7,127.44 453.94,131.72 462.26,135.29 		"/>
		<polygon points="469.55,158.76 466.78,155.04 459.59,160.53 462.36,164.25 		"/>

			<rect x="453.74" y="143.98" transform="matrix(0.9751 -0.2219 0.2219 0.9751 -21.0379 105.3846)" width="9.33" height="4.65"/>
	</g>
	<path id="happy-bulb" d="M642.69,130.04c-2.08,13.37-15.52,20.53-17.17,31.08l-6.39-1c1.04-6.67,5.11-11.78,9.07-16.71
		c3.72-4.63,7.23-9.01,8.07-14.37c1.55-9.97-5.72-16.45-13.69-17.69c-7.97-1.24-16.85,2.72-18.4,12.7
		c-0.83,5.36,1.18,10.6,3.32,16.14c2.27,5.9,4.6,12,3.56,18.68l-6.39-1c1.64-10.55-8.99-21.46-6.91-34.82
		c2.17-13.94,14.59-19.86,25.82-18.12C634.81,106.68,644.86,116.12,642.69,130.04z M623.97,165.81c-0.14,0.88-0.97,1.49-1.85,1.36
		l-16.05-2.5c-0.89-0.14-1.49-0.97-1.35-1.86s0.97-1.49,1.85-1.35l16.05,2.5C623.5,164.09,624.11,164.93,623.97,165.81z
		 M622.97,172.23c-0.14,0.88-0.97,1.49-1.85,1.35l-16.05-2.5c-0.89-0.14-1.49-0.97-1.35-1.85c0.14-0.88,0.97-1.49,1.85-1.35
		l16.05,2.5C622.5,170.51,623.11,171.35,622.97,172.23z M615.93,181.52c-0.72,0.6-1.66,0.86-2.59,0.72l-3.51-0.55
		c-0.92-0.14-1.74-0.68-2.24-1.47l-3.83-6.05l17.65,2.75L615.93,181.52z M614.98,119.98c-1.79-0.28-3.48,0.95-3.76,2.75
		c-0.28,1.8,0.95,3.48,2.75,3.76c1.8,0.28,3.48-0.95,3.76-2.75C618,121.95,616.77,120.26,614.98,119.98z M627.21,121.89
		c-1.8-0.28-3.48,0.95-3.76,2.75c-0.28,1.8,0.95,3.48,2.75,3.76s3.48-0.95,3.76-2.75C630.24,123.85,629.01,122.17,627.21,121.89z
		 M629.73,133.33c-3.18,1.8-6.51,2.69-10.88,2.01c-4.37-0.68-7.27-2.55-9.75-5.22l-1.06,0.77c1.61,3.55,4.95,7.61,10.19,8.43
		s9.66-2.04,12.27-4.93L629.73,133.33z"/>
	<path id="open-bulb-lit" d="M598.42,195.26v3.67h-6.78c0.05-0.59,0.1-1.2,0.1-1.82c0-0.63-0.05-1.24-0.09-1.84L598.42,195.26
		L598.42,195.26z M569.96,177.75v-5.23h3.66v5.25c-0.65-0.06-1.29-0.09-1.94-0.09C571.11,177.68,570.53,177.7,569.96,177.75z
		 M584.71,181.88l4.2-4.66l2.72,2.45l-4.28,4.75C586.68,183.63,585.76,182.62,584.71,181.88z M556.02,184.42l-4.28-4.75l2.72-2.45
		l4.2,4.66C557.61,182.62,556.69,183.63,556.02,184.42z M551.75,198.93h-6.78v-3.67h6.77c-0.05,0.6-0.09,1.21-0.09,1.85
		C551.65,197.73,551.7,198.33,551.75,198.93z M577.04,223.29h-10.69c-0.74,0-1.34,0.6-1.34,1.34s0.6,1.34,1.34,1.34h10.69
		c0.74,0,1.34-0.6,1.34-1.34S577.77,223.29,577.04,223.29z M577.04,228.64h-10.69c-0.74,0-1.34,0.6-1.34,1.34s0.6,1.34,1.34,1.34
		h10.69c0.74,0,1.34-0.6,1.34-1.34S577.77,228.64,577.04,228.64z M577.71,233.98h-12.03l3.17,2.09c0.41,0.37,1.02,0.58,1.64,0.58
		h2.39c0.62,0,1.23-0.21,1.64-0.58L577.71,233.98z M587.73,197.11c0,9.54-8.59,15.99-8.59,23.51h-5.32
		c-0.01-4.96,2.33-9.06,4.6-13.01c2.04-3.54,3.96-6.89,3.96-10.51c0-6.93-5.55-10.08-10.7-10.08c-5.15,0-10.68,3.15-10.68,10.08
		c0,3.62,1.93,6.97,3.96,10.51c2.27,3.95,4.61,8.04,4.6,13.01h-5.31c0-7.53-8.59-13.98-8.59-23.51c0-9.95,8.01-15.42,16.03-15.42
		C579.7,181.69,587.73,187.17,587.73,197.11z"/>
	<path id="closed-bulb" d="M577.81,115.39c0.17,8.32-7.21,14.11-7.08,20.68l-12.99,0.27c-0.13-6.57-7.75-12.05-7.92-20.37
		c-0.18-8.68,6.72-13.6,13.71-13.75C570.53,102.07,577.63,106.72,577.81,115.39z M569.27,138.1l-10,0.2
		c-0.55,0.01-0.99,0.47-0.98,1.02s0.47,0.99,1.02,0.98l10-0.2c0.55-0.01,0.99-0.47,0.98-1.02
		C570.28,138.53,569.82,138.09,569.27,138.1z M569.35,142.1l-10,0.2c-0.55,0.01-0.99,0.47-0.98,1.02c0.01,0.55,0.47,0.99,1.02,0.98
		l10-0.2c0.55-0.01,0.99-0.47,0.98-1.02C570.36,142.52,569.9,142.08,569.35,142.1z M569.94,146.08l-11,0.22l2.97,3.26
		c0.39,0.42,0.94,0.66,1.52,0.65l2.18-0.05c0.58-0.01,1.12-0.27,1.49-0.71L569.94,146.08z"/>
	<g id="bulb-and-erlenmeijer">
		<g id="erlenmeijer">
			<circle cx="519.7" cy="161.27" r="2.99"/>
			<path d="M527.94,153.46c0.29,1.34-0.53,2.8-2,3.12c-1.34,0.29-2.8-0.53-3.12-2c-0.29-1.34,0.53-2.8,2-3.12
				C526.16,151.17,527.65,152.12,527.94,153.46z"/>
			<circle cx="516.81" cy="148.12" r="3.24"/>
			<path d="M521.59,135.58l-3.17-15.01c-0.21-0.97-0.77-1.75-1.54-2.34c-0.77-0.6-1.82-0.75-2.8-0.53l-7.7,1.56
				c-1.95,0.43-3.19,2.36-2.76,4.31l0.27,1.22c1.07,0.79,1.94,1.87,2.48,3.16c0.97,2.09,1.08,4.36,0.39,6.43
				c0.65,0.62,1.2,1.4,1.54,2.34c1,2.21,0.99,4.51,0.29,6.57c0.68-0.4,1.35-0.81,2.06-1.09c1.04-0.48,1.56-1.62,1.32-2.71
				l-3.33-15.74l5.24-1.15l3.33,15.74c0.24,1.1,1.19,1.91,2.33,1.91c8.98,0.2,16.38,5.98,18.3,14.75c0.59,2.68,0.41,4.76-0.03,7.41
				l-11.69,2.57c-0.24,0.05-0.79,2.21-1.89,2.46c-1.22,0.27-2.5-1.49-2.74-1.44l-9.62,2.11c-0.2,2.6-1.11,5.99-1.95,7.96
				c0.03,0.12-1.62,3.68-1.62,3.68l-0.07,1.42c4.74,2.41,10.43,3.33,16.03,2.1c13.03-2.86,21.3-15.78,18.44-28.81
				C540.46,144.2,531.91,136.63,521.59,135.58z"/>
		</g>
		<path id="energy-bulb" d="M468.48,136.13c-0.66-1.26,0.02-2.81,1.28-3.47c11.35-5.3,11.79-5.02,12.5-7.6
			c0.34-1.35,1.82-2.19,3.17-1.84c2.85,0.78,2.59,6.58-2.38,8.95c-1.62,0.74-11.1,5.25-11.1,5.25
			C470.66,137.95,469.14,137.39,468.48,136.13z M473.85,146.06l25.94-12.08c1.26-0.66,1.82-2.19,1.28-3.47
			c-0.66-1.26-2.19-1.82-3.47-1.28l-25.94,12.08c-1.26,0.66-1.82,2.19-1.28,3.47C471.06,146.16,472.59,146.72,473.85,146.06z
			 M503,139.28c-0.66-1.26-2.19-1.82-3.47-1.28l-25.94,12.08c-1.26,0.66-1.82,2.19-1.28,3.47c1.25,2.79,10.01,3.16,11.24,8.77
			l0.46,2.07l-6.46,1.42c0,0,0.72,3.29,1.44,6.58c1.18,5.36,6.9,6.4,9.69,12.17c0,0,12.3-2.7,14.01-3.08
			c0.03-6.26,4.91-9.63,3.7-15.11l-1.44-6.58l-6.7,1.47l-0.72-3.29c-0.45-2.07,0.63-4.1,2.47-5.01l3.34-1.63
			c1.26-0.66,1.82-2.19,1.28-3.47c-0.66-1.26-2.19-1.82-3.47-1.28l-3.81,1.86c-3.68,1.83-5.74,5.86-4.85,9.87l0.86,3.9l-4.26,0.94
			l-0.56-2.56c-0.99-4.51-4.19-5.72-8.15-8.04l21.41-10.06C503.1,142.06,503.66,140.54,503,139.28z M495.76,190.02l2.68-0.59
			c1.34-0.29,1.57-0.98,4.5-5.07l-13.27,2.91C493.92,189.78,494.42,190.31,495.76,190.02z"/>
	</g>
</g>
<g id="define-group">
	<g id="note">
		<polygon points="358.68,281.65 358.02,287.61 366.97,288.59 357.17,378.06 286.59,370.33 296.39,280.86 305.34,281.84
			305.99,275.88 291.08,274.25 279.98,375.64 362.48,384.68 373.59,283.28 		"/>
		<path d="M341.5,276.75c-0.77-0.08-1.01-1.78-0.92-2.64c0.45-4.07-2.46-7.99-6.53-8.44c-4.07-0.45-7.77,2.89-8.22,6.95
			c-0.09,0.86-0.7,2.33-1.45,2.25l-14.09-1.54l-1.31,11.93l44.73,4.9l1.31-11.93L341.5,276.75z M332.92,276
			c-1.78-0.19-3.07-1.8-2.87-3.58c0.19-1.78,1.8-3.06,3.58-2.87c1.78,0.19,3.06,1.8,2.87,3.58C336.3,274.91,334.7,276.19,332.92,276
			z"/>
		<g id="paper">
			<path d="M359.3,367.01l-66.98-1.74l2.13-81.97l66.98,1.74L359.3,367.01z M296.42,361.38l58.98,1.53l1.92-73.97
				l-58.98-1.53L296.42,361.38z"/>
			<g>

					<rect x="315.89" y="294.67" transform="matrix(0.9997 0.026 -0.026 0.9997 7.8153 -8.482)" width="29.56" height="4.33"/>

					<rect x="304.59" y="294.05" transform="matrix(0.9997 0.026 -0.026 0.9997 7.7972 -7.871)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="315.67" y="302.8" transform="matrix(0.9997 0.0259 -0.0259 0.9997 8.0229 -8.5246)" width="33.81" height="4.33"/>

					<rect x="304.38" y="302.13" transform="matrix(0.9997 0.026 -0.026 0.9997 8.008 -7.8637)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="315.47" y="310.8" transform="matrix(0.9997 0.026 -0.026 0.9997 8.2342 -8.4308)" width="26.81" height="4.33"/>

					<rect x="304.17" y="310.22" transform="matrix(0.9997 0.026 -0.026 0.9997 8.2179 -7.8555)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="315.25" y="318.98" transform="matrix(0.9997 0.026 -0.026 0.9997 8.4478 -8.5255)" width="34.75" height="4.33"/>

					<rect x="303.96" y="318.3" transform="matrix(0.9997 0.026 -0.026 0.9997 8.4278 -7.8473)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="315.05" y="327.02" transform="matrix(0.9997 0.026 -0.026 0.9997 8.6549 -8.4719)" width="31.31" height="4.33"/>

					<rect x="303.75" y="326.38" transform="matrix(0.9997 0.0259 -0.0259 0.9997 8.601 -7.8067)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="314.84" y="335.13" transform="matrix(0.9997 0.026 -0.026 0.9997 8.8651 -8.4912)" width="33.47" height="4.33"/>

					<rect x="303.54" y="334.47" transform="matrix(0.9997 0.0261 -0.0261 0.9997 8.8852 -7.8633)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="314.62" y="343.23" transform="matrix(0.9997 0.0259 -0.0259 0.9997 9.0722 -8.4965)" width="34.75" height="4.33"/>

					<rect x="303.33" y="342.55" transform="matrix(0.9997 0.026 -0.026 0.9997 9.0575 -7.8228)" width="4.59" height="4.33"/>
			</g>
			<g>

					<rect x="314.42" y="351.32" transform="matrix(0.9997 0.026 -0.026 0.9997 9.2869 -8.4929)" width="34.75" height="4.33"/>

					<rect x="303.12" y="350.63" transform="matrix(0.9997 0.026 -0.026 0.9997 9.2684 -7.8154)" width="4.59" height="4.33"/>
			</g>
		</g>
	</g>
	<path class="pen" d="M377.92,378.15c-1.22,0.71-2.76,0.27-3.46-0.95l-7.22-12.43c-0.35-0.61-0.43-1.29-0.28-1.92
		c0.16-0.63,0.56-1.2,1.17-1.56L377.92,378.15z M398.56,400.76c0.15,0.26,0.39,0.43,0.66,0.49c0.56,0.14,1.14-0.2,1.28-0.77
		c0.06-0.26,0.03-0.54-0.11-0.78l-1.22-2.09l-1.82,1.06L398.56,400.76z M383.18,381.85l4.15,7.14c2.23,3.84,4.74,6.14,8.43,8.61
		l3.26-1.89c-0.31-4.43-1.06-7.75-3.29-11.59l-4.15-7.14L383.18,381.85z M370.18,360.79l10.68,18.4l9.57-5.55l-10.68-18.4
		c-0.78-1.35-2.05-2.24-3.45-2.59C371.61,351.48,367.71,356.54,370.18,360.79z"/>
</g>
<g id="emphatize-group">
	<g id="participants">
		<path d="M49.54,235.5H43c0-4-0.47-9.11,5.58-10.5c5.92-1.36,11.76-2.73,8.95-7.9c-8.32-15.32-2.37-24.01,6.56-24.01
			c0.28,0,0.56,0.02,0.83,0.03c-3.86,11.07,1.58,24.04,5.49,31.24c0.26,0.48,0.38,0.83,0.44,1.03c-1.46,1.27-7.19,2.63-10.34,3.36
			l-0.58,0.19C56.66,229.71,52.18,232.5,49.54,235.5z"/>
		<path d="M117.94,250.5h-65.5c0-10-0.72-14.18,8.66-16.34c9.19-2.12,18.26-4.14,13.9-12.17
			c-12.92-23.79-3.68-37.34,10.19-37.34c13.61,0,23.07,12.96,10.19,37.25c-4.23,7.98,4.51,10.11,13.9,12.28
			C118.66,236.34,117.94,240.5,117.94,250.5z"/>
	</g>

	<path id="uxer" d="M193.66,250.5h-65.5c0-10-0.72-14.18,8.66-16.34c9.19-2.12,18.26-4.14,13.9-12.17
			c-12.92-23.79-3.68-37.34,10.19-37.34c13.61,0,23.07,12.96,10.19,37.25c-4.23,7.98,4.51,10.11,13.9,12.28
			C194.38,236.34,193.66,240.5,193.66,250.5z"/>
	<path id="balloon-1" d="M54.62,164.62c0-12.49-10.96-21.62-23.24-21.62c-12.2,0-23.24,9.06-23.24,21.62
		c0,13.08,13.04,25.29,30.93,20.43c3.25,2.22,10.41,4.46,15.45,5.48c-1.88-4.13-3.97-9.81-3.86-13.76
		C53.19,173.4,54.62,169.05,54.62,164.62z M30.19,163.74c0,5.43-3.1,9.11-7.61,10.1l-0.86-2.05c2.09-0.87,3.42-2.96,3.42-5.06h-3.53
		v-9.06h8.58C30.19,157.67,30.19,160.56,30.19,163.74z M42.23,163.74c0,5.43-3.1,9.11-7.61,10.1l-0.85-2.05
		c2.09-0.87,3.42-2.96,3.42-5.06h-3.53v-9.06h8.58C42.23,157.67,42.23,160.56,42.23,163.74z"/>
	<g id="balloon-2">
		<path d="M86.4,123.03c-15.34,0.7-27.34,10.75-26.81,22.46c0.46,10.17,10.23,18.23,22.84,19.72
		c3.07,4.42,5.45,9.75,6.7,15.81c3.28-4.85,5.82-10.58,7.31-16.9c11.23-3.18,19.12-11.62,18.69-21.15
		C114.6,131.25,101.74,122.33,86.4,123.03z M94.66,157.78l-3.73,1.05l-0.89,3.77c-0.13,0.54-0.26,1.08-0.41,1.61
		c-0.56-0.94-1.16-1.86-1.78-2.77l-1.69-2.44l-2.95-0.35c-9.57-1.13-16.73-6.8-17.04-13.48c-0.36-7.92,9.04-15.06,20.53-15.58
		c11.49-0.52,21.5,5.73,21.86,13.65C108.84,149.41,103.12,155.38,94.66,157.78z"/>
		<path d="M86.56,152.04c0-0.6,0.22-1.12,0.66-1.55c0.44-0.43,0.97-0.65,1.6-0.65c0.6,0,1.13,0.21,1.58,0.62
			c0.45,0.42,0.68,0.92,0.68,1.53c0,0.6-0.22,1.12-0.66,1.55c-0.44,0.43-0.97,0.65-1.6,0.65c-0.3,0-0.59-0.06-0.86-0.17
			s-0.51-0.26-0.72-0.45c-0.21-0.19-0.37-0.41-0.49-0.68C86.62,152.62,86.56,152.34,86.56,152.04z M90.52,147.74h-3.39v-13.73h3.39
			V147.74z"/>
	</g>
	<path id="balloon-3" d="M151.44,129.81c-11.36-1.89-23.04,4.83-24.99,16.52c-2.03,12.17,8.21,25.57,25.62,23.82c2.45,3.48,7.04,7.66,11.95,9.54
		c-1.11-4.14-1.47-11.55,0.12-15.45c2.88-2.75,4.89-6.58,5.58-10.7C171.66,141.92,162.87,131.72,151.44,129.81z M149.33,160.68
		c-0.48,0.39-1.02,0.56-1.63,0.5c-0.3-0.03-0.58-0.11-0.84-0.24c-0.26-0.13-0.49-0.3-0.67-0.51c-0.19-0.2-0.33-0.44-0.43-0.71
		c-0.1-0.27-0.13-0.56-0.11-0.85c0.05-0.6,0.32-1.09,0.79-1.48c0.47-0.39,1.02-0.56,1.63-0.5c0.6,0.05,1.1,0.3,1.51,0.75
		c0.41,0.45,0.59,0.97,0.54,1.57C150.07,159.79,149.81,160.29,149.33,160.68z M155.2,146.72c-0.05,0.62-0.18,1.15-0.39,1.6
		c-0.21,0.45-0.47,0.86-0.78,1.23c-0.31,0.37-0.67,0.71-1.06,1.03c-0.39,0.32-0.81,0.66-1.26,1.02c-0.28,0.22-0.52,0.42-0.73,0.58
		c-0.2,0.17-0.37,0.35-0.51,0.53c-0.14,0.18-0.25,0.4-0.32,0.65c-0.08,0.25-0.13,0.55-0.16,0.9l-0.09,1.06l-3.35-0.29l0.13-1.54
		c0.04-0.41,0.09-0.76,0.16-1.04c0.07-0.28,0.18-0.54,0.32-0.76c0.14-0.22,0.32-0.43,0.53-0.63c0.21-0.2,0.47-0.43,0.78-0.71
		l2.34-1.99c0.51-0.43,0.79-1.01,0.86-1.76c0.06-0.73-0.12-1.34-0.56-1.83c-0.44-0.5-1.02-0.78-1.74-0.84
		c-0.78-0.07-1.45,0.14-2,0.63c-0.55,0.49-0.89,1.11-1.04,1.87l-3.55-0.59c0.19-0.88,0.49-1.66,0.9-2.33
		c0.41-0.67,0.93-1.22,1.54-1.65c0.61-0.44,1.3-0.74,2.06-0.93c0.77-0.19,1.6-0.24,2.49-0.16c0.84,0.07,1.6,0.26,2.3,0.56
		c0.69,0.3,1.29,0.71,1.78,1.21c0.49,0.5,0.86,1.11,1.09,1.81C155.19,145.05,155.28,145.85,155.2,146.72z"/>
	<g id="balloon-4">
		<path d="M205.87,155.83c-12.97,0-23.48,9.45-23.48,21.1c0,5.22,2.11,10,5.61,13.68c-1.46,5.26-3.94,9.65-7.12,12.96
			c7.06-0.57,13.78-2.73,19.52-6.12c1.76,0.38,3.59,0.58,5.48,0.58c12.97,0,23.48-9.45,23.48-21.1
			C229.35,165.28,218.84,155.83,205.87,155.83z M205.87,193.45c-1.51,0-3.03-0.16-4.52-0.48l-1.75-0.38l-1.54,0.91
			c-2.33,1.38-4.84,2.53-7.44,3.41c0.7-1.62,1.31-3.32,1.8-5.08l0.7-2.5l-1.79-1.88c-2.81-2.96-4.35-6.7-4.35-10.53
			c0-9.11,8.48-16.52,18.9-16.52s18.9,7.41,18.9,16.52S216.29,193.45,205.87,193.45z"/>
		<polygon points="198.7,179.83 203.75,185.39 197.07,187.06"/>
		<polygon points="216.44,171.6 205.33,183.83 200.13,178.1 211.24,165.87"/>
	</g>
</g>
</svg>
<button id="anim-trigger-play" type="button" name="button">Play animation</button>
<button id="anim-trigger-reset" type="button" name="button">Reset</button>
</header> <!-- // End of header -->
              
            
!

CSS

              
                .visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}

mark {
  color: #000000;
  background: #ff0;
}

code,
kbd,
pre,
samp {
  font-family: monospace,serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid silver;
}

legend {
  padding: 0;
  border: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  box-sizing: border-box;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Typography =================================================== */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 2, 2013 */

@font-face {
  font-family: 'AvenirLT35Light';
  font-style: italic;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light_oblique-Avenir.svg#AvenirLT35LightItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT35Light';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_35_light-Avenir.svg#AvenirLT35LightRegular') format('svg');
}

@font-face {
  font-family: 'AvenirLT45Book';
  font-style: italic;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book_oblique-Avenir.svg#AvenirLT45BookItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT45Book';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_45_book-Avenir.svg#AvenirLT45BookRegular') format('svg');
}

@font-face {
  font-family: 'AvenirLT55Roman';
  font-style: italic;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_oblique-Avenir.svg#AvenirLT55RomanItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT55Roman';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_roman-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_roman-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_roman-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_roman-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_55_roman-Avenir.svg#AvenirLT55RomanRegular') format('svg');
}

@font-face {
  font-family: 'AvenirLT65Medium';
  font-style: italic;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium_oblique-Avenir.svg#AvenirLT65MediumItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT65Medium';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_65_medium-Avenir.svg#AvenirLT65MediumRegular') format('svg');
}

@font-face {
  font-family: 'AvenirLT55Roman';
  font-style: normal;
  font-weight: bold;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_85_heavy-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_85_heavy-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_85_heavy-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_85_heavy-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_85_heavy-Avenir.svg#AvenirLT55RomanBold') format('svg');
}

@font-face {
  font-family: 'AvenirLT55Roman';
  font-style: italic;
  font-weight: bold;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_86_heavy_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_86_heavy_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_86_heavy_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_86_heavy_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_86_heavy_oblique-Avenir.svg#AvenirLT55RomanBoldItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT65MediumBoldItalic';
  font-style: italic;
  font-weight: bold;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black_oblique-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black_oblique-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black_oblique-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black_oblique-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black_oblique-Avenir.svg#AvenirLT65MediumBoldItalic') format('svg');
}

@font-face {
  font-family: 'AvenirLT65Medium';
  font-style: normal;
  font-weight: bold;
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black-Avenir.eot');
  src: url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black-Avenir.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black-Avenir.woff') format('woff'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black-Avenir.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Avenir/avenir_lt_95_black-Avenir.svg#AvenirLT65MediumBold') format('svg');
}

@font-face {
  font-family: 'merriweather_sansitalic';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-italic-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-italic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-italic-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-italic-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-italic-webfont.svg#merriweather_sansitalic') format('svg');
}

@font-face {
  font-family: 'merriweather_sansbookitalic';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-lightitalic-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-lightitalic-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-lightitalic-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-lightitalic-webfont.svg#merriweather_sansbookitalic') format('svg');
}

@font-face {
  font-family: 'merriweather_sansbold_italic';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bolditalic-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bolditalic-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bolditalic-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bolditalic-webfont.svg#merriweather_sansbold_italic') format('svg');
}

@font-face {
  font-family: 'merriweather_sansbook';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-light-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-light-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-light-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-light-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-light-webfont.svg#merriweather_sansbook') format('svg');
}

@font-face {
  font-family: 'merriweather_sansregular';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-regular-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-regular-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-regular-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-regular-webfont.svg#merriweather_sansregular') format('svg');
}

@font-face {
  font-family: 'merriweather_sansbold';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bold-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bold-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bold-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-bold-webfont.svg#merriweather_sansbold') format('svg');
}

@font-face {
  font-family: 'merriweather_sansextrabold';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabold-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabold-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabold-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabold-webfont.svg#merriweather_sansextrabold') format('svg');
}

@font-face {
  font-family: 'merriweather_sansextrabolditalic';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabolditalic-webfont.eot');
  src: url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabolditalic-webfont.woff') format('woff'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabolditalic-webfont.ttf') format('truetype'), url('http://www.myradon.net/webfonts/Merriweather-Sans/merriweathersans-extrabolditalic-webfont.svg#merriweather_sansXBdIt') format('svg');
}

/* Modular Scale
	------------------------------------------------------------
	18px @ 1:1.618 primary
	------------------------------------------------------------

    Pixels 	    Ems 	Ems @ 16 	% of 13
    845.479 	46.971 	52.842 	    6,503.685
    522.546 	29.03 	32.659 	    4,019.585
    322.958 	17.942 	20.185 	    2,484.292
    199.603 	11.089 	12.475 	    1,535.408
    123.364 	6.854 	7.71 	    948.954
    76.245 	    4.236 	4.765 	    586.500
    47.123 	    2.618 	2.945 	    362.485
    29.124 	    1.618 	1.82 	    224.031
    18 	        1 	    1.125 	    138.462
    11.125 	    0.618 	0.695 	    85.577
    6.876 	    0.382 	0.43 	    52.892
    4.25 	    0.236 	0.266 	    32.692
    2.627 	    0.146 	0.164 	    20.208
    1.624 	    0.09 	0.102 	    12.492
    1.004 	    0.056 	0.063 	    7.723

    ------------------------------------------------------------
    21px @ 1:1.618 secondary aka important numbers
	------------------------------------------------------------

    Pixels 	    Ems 	Ems @ 16 	% of 13
    986.378 	46.97 	61.649 	    7,587.523
    609.628 	29.03 	38.102 	    4,689.446
    376.779 	17.942 	23.549 	    2,898.300
    232.867 	11.089 	14.554 	    1,791.285
    143.923 	6.853 	8.995 	    1,107.100
    88.951 	    4.236 	5.559 	    684.238
    54.976 	    2.618 	3.436 	    422.892
    33.978 	    1.618 	2.124 	    261.369
    21 	        1    	1.313 	    161.538
    12.979 	    0.618 	0.811 	    99.838
    8.022 	    0.382 	0.501 	    61.708
    4.958 	    0.236 	0.31 	    38.138
    3.064 	    0.146 	0.192 	    23.569
    1.894 	    0.09 	0.118 	    14.569
    1.171 	    0.056 	0.073 	    9.008

Superhandy, as I say myself, font-size LESS-mixins. they work with LESS v1.3.x
Only @TODO is a smart formula for margin-bottom
.font-size(@size: 16, @scale: 1, @pow: 1) {
	@multi          : `Math.pow(@{scale}, @{pow})`;
	font-size       : 1px * round(@size * @multi);
	font-size       : 1rem * round(@size * @multi) / 10;
	line-height     : ceil((@size * @multi) / @baseline) * @baseline;
	margin-bottom   : 2px * @baseline;
}

.font-size-inherit(@scale: 1.618, @pow: -1) {
	@size           : ~`Math.pow(@{scale}, @{pow}).toFixed(3) + 'em'`;
	font-size       : @size;    //font-size is measured in ems
}
*/

body {
  margin-bottom: 28px;
  font-family: 'merriweather_sansbook', arial, sans-serif;
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 28px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-style: normal;
  font-weight: normal;
  color: #436386;
  text-align: center;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-setting: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}

h1,
.h1 {
  margin-bottom: 28px;
  font-family: 'AvenirLT55Roman';
  font-size: 72px;
  font-size: 7.2rem;
  font-weight: bold;
  line-height: 84px;
  letter-spacing: -0.05em;
}

h2,
.h2 {
  margin-bottom: 28px;
  font-family: 'AvenirLT35Light';
  font-size: 45px;
  font-size: 4.5rem;
  line-height: 56px;
  letter-spacing: -0.04em;
}

h3,
.h3 {
  margin-bottom: 28px;
  font-family: 'AvenirLT35Light';
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 28px;
  letter-spacing: -0.03em;
}

h4,
.h4 {
  margin-bottom: 28px;
  font-family: 'AvenirLT35Light';
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 28px;
}

h5,
.h5 {
  margin-bottom: 28px;
  font-family: 'AvenirLT35Light';
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 28px;
}

h6,
.h6 {
  margin-bottom: 28px;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 14px;
}

h1,
h2 {
  margin-bottom: 42px;
}

h3 {
  margin-bottom: 14px;
}

p,
ol,
ul,
li,
dl,
address,
blockquote,
text {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 28px;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-setting: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}

p {
  margin-bottom: 42px;
}

.lead {
  margin-bottom: 28px;
  font-family: 'AvenirLT35Light';
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 28px;
}

small,
.small {
  font-size: 0.618em;
}

p .small {
  font-family: 'merriweather_sansbookitalic';
}

ul,
ol,
li ul,
li ol {
  padding: 0;
  margin: 0;
}

a {
  font-family: 'merriweather_sansitalic';
}

blockquote {
  padding: 14px;
  margin: 14px auto 42px;
  font-family: 'merriweather_sansitalic';
  font-style: normal;
  text-align: center;
  border-left: 1px solid rgba(161, 176, 191, 0.91);
}

i {
  font-family: 'merriweather_sansitalic';
}

q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

cite {
  font-style: normal;
}

abbr[title] {
  cursor: help;
  border-bottom: 1px dotted rgba(161, 176, 191, 0.91);
}

abbr.no-border {
  border-bottom: 0 none;
}

b,
strong {
  font-family: 'merriweather_sansbold';
}

dfn {
  font-style: italic;
}

ins {
  color: rgba(80, 100, 119, 0.91);
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.91);
}

mark {
  font-style: italic;
  font-weight: bold;
  color: rgba(80, 100, 119, 0.91);
  background-color: rgba(255, 255, 255, 0.91);
}

pre,
code,
kbd,
samp {
  font-family: Monaco, Courier New, monospace;
  line-height: 28px;
}

pre {
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
}

sub,
sup {
  position: relative;
  font-size: 0.618em;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Colour =================================================== */

html {
  background: #ffffff;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.91);
}

body {
  color: rgba(80, 100, 119, 0.91);
  background-color: transparent;
}

svg path {
  fill: rgba(78, 97, 116, 0.91);
  stroke: none;
}

a {
  color: rgba(78, 97, 116, 0.91);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  outline: 0 none !important;
  -webkit-transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     -moz-transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
      -ms-transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
       -o-transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

a:visited {
  color: rgba(78, 97, 116, 0.91);
  border-bottom-color: rgba(78, 97, 116, 0.91);
}

a:hover {
  color: #ffdd00;
  text-decoration: none;
  border-bottom-color: #ffdd00;
}

a:focus {
  color: #ffdd00;
  border-bottom-color: #ffdd00;
  outline: 0 none;
}

a:hover,
a:active {
  outline: 0 none;
}

.no-border,
.no-border:hover,
.no-border:active,
.no-border:visited {
  border-bottom: 0 none;
}

.link-disabled {
  cursor: not-allowed;
}

::-moz-selection {
  color: #436386;
  text-shadow: none;
  background-color: #ffdd00;
}

::selection {
  color: #436386;
  text-shadow: none;
  background-color: #ffdd00;
}

.dark-bg {
  background-color: #0f1424;
}

.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg a,
.dark-bg figcaption,
.dark-bg li,
.dark-bg td,
.dark-bg td:hover,
.dark-bg th,
.dark-bg th:hover,
.dark-bg .small,
.dark-bg button {
  color: #ffffff;
}

.dark-bg svg path {
  fill: #ffffff;
  stroke: none;
}

#fixed-side-menu nav {
  position: relative;
}

#fixed-side-menu .circle-outer {
  stroke: #ffdd00;
  stroke-width: 2;
  fill: none;
}

#fixed-side-menu .circle-inner {
  stroke: none;
  fill: #ffdd00;
}

#letters path {
  fill: #ffffff;
  stroke: none;
}

#intro {
  background-color: #5cdb95;
}

#intro h1,
#intro h2,
#intro h3 {
  color: #0088ff;
}

#intro p {
  color: #ffffff;
}

/* #iconized-my-logo SVG */

#svg-header-icons path,
#svg-header-text path {
  fill: #05386b;
  stroke: none;
}

#svg-header-icons polygon,
#svg-header-text polygon {
  fill: #05386b;
  stroke: none;
}

#svg-header-dashed-lines path {
  stroke: #05386b;
  stroke-width: 2;
  stroke-dasharray: 5px 5px;
  stroke-linecap: butt;
  fill: none;
}

#svg-header-dashed-lines line {
  stroke: #05386b;
  stroke-width: 2;
  stroke-dasharray: 5px 5px;
  stroke-linecap: butt;
  fill: none;
}

header .arrow-icon circle {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: none;
  stroke-linecap: butt;
  fill: #0088ff;
}

header .arrow-icon circle {
  stroke-opacity: 0;
}

header .arrow-icon polyline {
  stroke: #0088ff;
  stroke-width: 5;
  stroke-dasharray: none;
  stroke-linecap: butt;
  fill: none;
}

#services-diagram p {
  color: rgba(101, 126, 149, 0.91);
}

.target-icon path {
  fill: #fe400a;
  stroke: none;
}

.target-icon polygon {
  fill: #fe400a;
  stroke: none;
}

.lamp-flask-icon path {
  fill: #ffde1d;
  stroke: none;
}

.lamp-flask-icon circle {
  fill: #ffde1d;
  stroke: none;
}

.design-icon path {
  fill: #e528af;
  stroke: none;
}

.design-icon rect {
  fill: #e528af;
  stroke: none;
}

.ux-icon path {
  fill: #ff9124;
  stroke: none;
}

.js-code-icon path {
  fill: #b6e50e;
  stroke: none;
}

.rocket-icon path {
  fill: #00a1f7;
  stroke: none;
}

.rocket-icon rect {
  fill: #00a1f7;
  stroke: none;
}

.arrows-primary path {
  fill: none;
  stroke: rgba(80, 100, 119, 0.91);
}

.arrows-secondary path {
  fill: none;
  stroke: rgba(206, 214, 222, 0.91);
}

#thumbs-work-container figure,
#thumbs-work-container figcaption {
  background-color: transparent;
}

#thumbs-work-container li:first-child {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:first-child ellipse {
  fill: #0195b7;
}

#thumbs-work-container li:first-child line {
  stroke: #0195b7;
}

#thumbs-work-container li:nth-child(2) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(2) ellipse {
  fill: #460146;
}

#thumbs-work-container li:nth-child(2) line {
  stroke: #460146;
}

#thumbs-work-container li:nth-child(3) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(3) ellipse {
  fill: #15383e;
}

#thumbs-work-container li:nth-child(3) line {
  stroke: #15383e;
}

#thumbs-work-container li:nth-child(4) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(4) ellipse {
  fill: #000100;
}

#thumbs-work-container li:nth-child(4) line {
  stroke: #000100;
}

#thumbs-work-container li:nth-child(5) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(5) ellipse {
  fill: #1595b2;
}

#thumbs-work-container li:nth-child(5) line {
  stroke: #1595b2;
}

#thumbs-work-container li:nth-child(6) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(6) ellipse {
  fill: #a30b00;
}

#thumbs-work-container li:nth-child(6) line {
  stroke: #a30b00;
}

#thumbs-work-container li:nth-child(7) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(7) ellipse {
  fill: #0085cc;
}

#thumbs-work-container li:nth-child(7) line {
  stroke: #0085cc;
}

#thumbs-work-container li:nth-child(8) {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:nth-child(8) ellipse {
  fill: #ed3026;
}

#thumbs-work-container li:nth-child(8) line {
  stroke: #ed3026;
}

#thumbs-work-container li:last-child {
  /*.round-bg-svg*/

  /*.btn-open*/

}

#thumbs-work-container li:last-child ellipse {
  fill: #4d937e;
}

#thumbs-work-container li:last-child line {
  stroke: #4d937e;
}

.btn-close circle,
.btn-open circle {
  fill: #ffffff;
  stroke: none;
}

.btn-close line,
.btn-open line {
  stroke: #000000;
  stroke-width: 3;
  stroke-dasharray: none;
  stroke-linecap: butt;
  fill: none;
}

.link-to-project {
  border-bottom: 1px solid transparent;
}

.link-to-project:hover {
  border-bottom: 1px solid #ffffff;
}

article#item1 {
  background-color: #0195b7;
}

article#item1 line {
  stroke: #0195b7;
}

article#item2 {
  background-color: #460146;
}

article#item2 line {
  stroke: #460146;
}

article#item3 {
  background-color: #15383e;
}

article#item3 line {
  stroke: #15383e;
}

article#item4 {
  background-color: #000100;
}

article#item4 line {
  stroke: #000100;
}

article#item5 {
  background-color: #1595b2;
}

article#item5 line {
  stroke: #1595b2;
}

article#item6 {
  background-color: #a30b00;
}

article#item6 line {
  stroke: #a30b00;
}

article#item7 {
  background-color: #0085cc;
}

article#item7 line {
  stroke: #0085cc;
}

article#item8 {
  background-color: #ed3026;
}

article#item8 line {
  stroke: #ed3026;
}

article#item9 {
  background-color: #4d937e;
}

article#item9 line {
  stroke: #4d937e;
}

.social-icon .icon-bg {
  fill: #436386;
  stoke: none;
}

.social-icon path,
.social-icon ellipse,
.social-icon rect {
  fill: #ffdd00;
  stroke: none;
}

footer {
  border-top: 1px dotted rgba(191, 202, 212, 0.91);
}

footer a {
  border-bottom: 1px dotted rgba(80, 100, 119, 0.91);
}

footer a:hover {
  border-bottom-color: #ffdd00;
}

footer #copyright {
  color: rgba(59, 74, 89, 0.91);
}

/* Elements =================================================== */

a {
  display: inline-block;
}

hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid rgba(161, 176, 191, 0.91);
  border-bottom: 1px solid #ffffff;
}

img {
  max-width: 100%;
  margin-bottom: 28px;
  vertical-align: middle;
  border-width: 0;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin-bottom: 28px;
}

figure figcaption {
  display: block;
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

ul li,
ol li {
  margin-bottom: 14px;
}

.inline-list {
  list-style-type: none;
}

.inline-list li {
  display: inline-block;
  padding: 0 28px;
  margin: 0;
}

/* Page =================================================== */

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

html {
  height: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

#fixed-top,
body > section,
header,
footer {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 90%;
  padding: 42px 0 56px;
  margin: 0 auto;
  *zoom: 1;
}

.wrapper:before,
.wrapper:after {
  display: table;
  content: "";
}

.wrapper:after {
  clear: both;
}

.wrapper article {
  display: inline;
  float: left;
  width: 98.4375%;
  margin: 0 0.78125%;
  margin-bottom: 1em;
}

.row {
  text-align: center;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  content: "";
}

.row:after {
  clear: both;
}

.font-normal {
  font-family: 'merriweather_sansbook', arial, sans-serif;
}

.center-elem {
  margin: 0 auto;
}

.align-left,
.align-left > * {
  text-align: left !important;
}

.align-right,
.align-right > * {
  text-align: right !important;
}

.mobile-hidden {
  display: none;
}

#fixed-side-menu {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 100;
  padding-right: 21px;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

#fixed-side-menu nav {
  display: none;
  width: 30px;
  -webkit-opacity: 0;
     -moz-opacity: 0;
          opacity: 0;
  -webkit-transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

#fixed-side-menu nav.block {
  display: none;
}

#fixed-side-menu nav a,
#fixed-side-menu nav a:hover,
#fixed-side-menu nav a:focus {
  border-bottom: 0 none;
}

/* Fallback example for browsers that don't support transforms */

.no-csstransforms #fixed-side-menu {
  top: 40%;
}

#fixed-top {
  position: fixed;
  z-index: 150;
  padding: 0;
  margin: 0;
}

#fixed-top .wrapper {
  padding: 0;
}

#logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 75px;
}

/*header*/
#intro {
  display: flex;
  height: 100vh;
  margin-bottom: -5vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#intro h2 {
  margin-top: 28px;
  margin-bottom: 14px;
  letter-spacing: -0.05em;
}

#intro br {
  display: none;
}

#intro p {
  margin: 0 10% 28px;
}

/* svg*/
#iconized-my-header {
  display: none;
  height: 225px;
  margin: 0 auto 14px;
}

header a {
  display: block;
  width: 55px;
  height: 55px;
}

header .arrow-icon svg,
header .arrow-icon circle,
header .arrow-icon line {
  pointer-event: none;
}

#services {
  position: relative;
  z-index: 10;
  padding-top: 112px;
  margin: -126px 0;
  background: url('http://www.myradon.net/img/svgs/bg-services.svg') no-repeat 0 0 transparent;
  -moz-background-size: 100% 100%;
       background-size: 100% 100%;
}

#services .row article {
  text-align: left;
}

#services-diagram {
  position: relative;
  width: 100%;
  margin-top: 56px;
  margin-bottom: 42px;
}

#services-diagram ul {
  width: 100%;
  *zoom: 1;
}

#services-diagram ul:before,
#services-diagram ul:after {
  display: table;
  content: "";
}

#services-diagram ul:after {
  clear: both;
}

#services-diagram li {
  position: static;
  padding: 0;
  margin: 0;
  *zoom: 1;
}

#services-diagram li:before,
#services-diagram li:after {
  display: table;
  content: "";
}

#services-diagram li:after {
  clear: both;
}

#services-diagram li svg {
  float: left;
  width: 25%;
  clear: left;
}

#services-diagram .column-small,
#services-diagram .column-wide,
#services-diagram .column-x-wide {
  width: 100%;
}

#services-diagram .align-right,
#services-diagram .align-right > * {
  text-align: left !important;
}

#services-diagram h3,
#services-diagram p {
  padding-left: 28px;
  margin-left: 25%;
}

#services-diagram h3 {
  margin-bottom: 28px;
  margin-bottom: 7px;
  font-size: 20px;
  font-size: 2rem;
  line-height: 28px;
}

#services-diagram p {
  margin-bottom: 28px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 14px;
  line-height: 1.1em;
}

#diag-tablet,
#diag-desktop {
  display: none;
  margin: 0 auto;
}

#work-thumbs {
  padding-top: 112px;
}

#thumbs-work-container {
  display: inline;
  float: left;
  width: 98.4375%;
  margin: 0 0.78125%;
}

#thumbs-work-container ul {
  display: block;
  width: 101.5625%;
  padding: 0;
  margin: 0 -0.78125%;
  list-style: none outside none;
  *zoom: 1;
}

#thumbs-work-container ul:before,
#thumbs-work-container ul:after {
  display: table;
  content: "";
}

#thumbs-work-container ul:after {
  clear: both;
}

#thumbs-work-container ul li {
  position: relative;
  display: inline;
  float: left;
  width: 98.4375%;
  padding-bottom: 1.5625%;
  margin: 0 0.78125%;
  *zoom: 1;
}

#thumbs-work-container ul li:before,
#thumbs-work-container ul li:after {
  display: table;
  content: "";
}

#thumbs-work-container ul li:after {
  clear: both;
}

#thumbs-work-container a {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  *zoom: 1;
}

#thumbs-work-container a:before,
#thumbs-work-container a:after {
  display: table;
  content: "";
}

#thumbs-work-container a:after {
  clear: both;
}

#thumbs-work-container a figure {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

#thumbs-work-container a img {
  display: block;
  margin-bottom: 0;
}

#thumbs-work-container a .round-bg-svg {
  position: absolute;
  top: -1px;
  /* fixes rendering issue in FF */

  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}

#thumbs-work-container a figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 14px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

#thumbs-work-container a .h3 {
  margin-top: 21px;
  margin-bottom: 14px;
  line-height: 1em;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* avoid flickering and glitches */

}

.no-touchevents #thumbs-work-container a {
  /* hovering on portfolio-item anchor */

}

.no-touchevents #thumbs-work-container a img {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.no-touchevents #thumbs-work-container a:hover {
  cursor: pointer;
  outline: 0 none;
}

.no-touchevents #thumbs-work-container figure,
.no-touchevents #thumbs-work-container img,
.no-touchevents #thumbs-work-container svg,
.no-touchevents #thumbs-work-container figcaption,
.no-touchevents #thumbs-work-container h2 {
  pointer-events: none;
}

.no-touchevents #thumbs-work-container .nav-invisible {
  pointer-events: all;
}

.no-touchevents #thumbs-work-container figcaption {
  position: absolute;
}

.no-touchevents #thumbs-work-container .h3 {
  margin-top: 28px;
  margin-bottom: 14px;
  -webkit-opacity: 0;
     -moz-opacity: 0;
          opacity: 0;
}

.no-touchevents #thumbs-work-container .btn-open {
  position: static;
}

.no-touchevents #thumbs-work-container .btn-open circle {
  fill-opacity: 0;
}

.no-touchevents #thumbs-work-container .btn-open line {
  stroke-opacity: 0;
}

.touchevents #thumbs-work-container a {
  /* hide SVGs visible by hover */

}

.touchevents #thumbs-work-container a figcaption {
  position: static;
}

.touchevents #thumbs-work-container a .round-bg-svg,
.touchevents #thumbs-work-container a .btn-open {
  display: none;
}

#work-details article {
  display: none;
  min-width: 100%;
}

#work-details .wrapper {
  padding: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

#work-details .row {
  padding-bottom: 14px;
}

#work-details .row:first-child {
  padding-top: 28px;
}

#work-details .row:last-child {
  padding-bottom: 28px;
}

#work-details .col-1,
#work-details .cols-2 {
  display: inline;
  float: left;
  width: 98.4375%;
  padding-bottom: 28px;
  margin: 0 0.78125%;
}

#work-details .col-1 *:last-child,
#work-details .cols-2 *:last-child {
  margin-bottom: 0;
}

#work-details img {
  margin: 0 auto;
}

.link-to-project svg {
  position: relative;
  top: 9px;
}

#contact-details {
  padding-bottom: 28px;
}

#contact-details li {
  margin-bottom: 0;
}

footer .wrapper {
  padding: 42px 0 14px;
}

footer a:hover {
  text-decoration: none;
}

footer p {
  margin-bottom: 28px;
  margin-bottom: 14px;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 14px;
}

footer #copyright {
  line-height: 28px;
}

body {
  width: 100%;
  *zoom: 1;
}

body:before,
body:after {
  display: table;
  content: "";
}

body:after {
  clear: both;
}

@media only screen and (min-width: 480px) {
  #mq-active:before {
    color: blueviolet;
    content: "MQ 480px";
  }
  .wrapper {
    padding: 42px 0 84px;
  }
}

/* 600 Media Query     =================================================== */

@media only screen and (min-width: 600px) {
  
}

/* 768 Media Query     =================================================== */

@media only screen and (min-width: 768px) {
  #mq-active:before {
    color: gold;
    content: "MQ 768px";
  }
  .wrapper {
    width: 95%;
    max-width: 940px;
    min-width: 740px;
    padding: 84px 0;
  }
  .mobile-hidden {
    display: block;
  }
  #intro {
    padding-bottom: 84px;
  }
  #intro h2 {
    position: relative;
    margin-top: 0;
  }
  #intro p {
    margin: 0 8% 28px;
  }
  #intro br {
    display: block;
  }
  #iconized-my-header {
    display: block;
    height: 375px;
    margin-bottom: 28px;
  }
  #services {
    padding-top: 42px;
    margin: -84px 0;
  }
  #services article {
    display: inline;
    float: left;
    width: 48.4375%;
    margin: 0 0.78125%;
    margin-bottom: 28px;
    text-align: left;
  }
  #services-diagram {
    margin-top: 56px;
    margin-bottom: 70px;
  }
  #services-diagram li {
    position: absolute;
    padding: 0;
    margin: 0;
    -webkit-opacity: 0;
       -moz-opacity: 0;
            opacity: 0;
    -webkit-transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #services-diagram li > svg {
    display: none;
  }
  #services-diagram li h3,
  #services-diagram li p {
    padding-left: 0;
    margin-left: 0;
  }
  #services-diagram .column-small {
    width: 196px;
  }
  #services-diagram .column-wide {
    width: 210px;
  }
  #services-diagram .column-x-wide {
    width: 280px;
  }
  #services-diagram .align-right,
  #services-diagram .align-right > * {
    text-align: right !important;
  }
  #diag-tablet > g[class$="icon"],
  #diag-desktop > g[class$="icon"] {
    fill-opacity: 0;
  }
  #diag-tablet.triggered > g[class$="icon"],
  #diag-desktop.triggered > g[class$="icon"] {
    fill-opacity: 1;
  }
  #diag-tablettriggered .arrows-primary path,
  #diag-desktoptriggered .arrows-primary path,
  #diag-tablettriggered .arrows-secondary path,
  #diag-desktoptriggered .arrows-secondary path {
    stroke-dashoffset: 0;
  }
  #diag-tablet {
    display: block;
  }
  #text-diag-requirements {
    top: 0;
    left: 50%;
  }
  #text-diag-ideas {
    top: 149px;
    left: 72%;
  }
  #text-diag-experience {
    top: 127px;
    right: 56%;
  }
  #text-diag-design {
    top: 344px;
    left: 58%;
  }
  #text-diag-development {
    top: 502px;
    right: 70%;
  }
  #text-diag-finish {
    top: 557px;
    left: 69%;
  }
  #work-thumbs {
    padding-top: 56px;
  }
  #thumbs-work-container ul li {
    display: inline;
    float: left;
    width: 48.4375%;
    margin: 0 0.78125%;
  }
  #thumbs-work-container ul li:last-child {
    display: inline-block;
    float: none;
  }
  #work-details .row {
    padding-bottom: 42px;
  }
  #work-details .row:first-child {
    padding-top: 70px;
  }
  #work-details .row:last-child {
    padding-bottom: 70px;
  }
  #work-details .col-1 {
    display: inline;
    float: left;
    width: 48.4375%;
    padding-bottom: 0;
    margin: 0 0.78125%;
    margin-left: 25.78125%;
  }
  #work-details .cols-2 {
    display: inline;
    float: left;
    width: 48.4375%;
    padding-bottom: 0;
    margin: 0 0.78125%;
    text-align: left;
  }
  #work-details .cols-2 p {
    padding: 0 14px;
  }
}

/* 992 Media Query     =================================================== */

@media only screen and (min-width: 992px) {
  #mq-active:before {
    color: green;
    content: "MQ 992px";
  }
  .wrapper {
    width: 90%;
    max-width: 1140px;
    min-width: 960px;
  }
  .wrapper-small {
    width: 85%;
    max-width: 880px;
    min-width: 740px;
  }
  #iconized-my-header {
    height: 525px;
  }
  #services-diagram li {
    position: absolute;
    padding: 0;
    margin: 0;
  }
  #services-diagram .column-small {
    width: 252px;
  }
  #services-diagram .column-wide {
    width: 280px;
  }
  #services-diagram .column-x-wide {
    width: 360px;
  }
  #diag-tablet {
    display: none;
  }
  #diag-desktop {
    display: block;
  }
  #text-diag-requirements {
    top: 9px;
    left: 51%;
  }
  #text-diag-ideas {
    top: 171px;
    left: 71%;
  }
  #text-diag-experience {
    top: 163px;
    right: 65%;
  }
  #text-diag-design {
    top: 330px;
    left: 57%;
  }
  #text-diag-development {
    top: 517px;
    right: 74%;
  }
  #text-diag-finish {
    top: 560px;
    left: 67%;
  }
  #thumbs-work-container ul li {
    display: inline;
    float: left;
    width: 31.770833333333332%;
    margin: 0 0.78125%;
  }
  #thumbs-work-container ul li:last-child {
    display: inline;
    float: left;
  }
  #work-details .cols-2 {
    display: inline;
    float: left;
    width: 40.10416666666667%;
    margin: 0 0.78125%;
  }
  #work-details .cols-2:first-child {
    margin-left: 9.114583333333332%;
  }
}

/* 1060 Media Query    =================================================== */

@media only screen and (min-width: 1060px) {
  #mq-active:before {
    color: #ff0000;
    content: "MQ 1060px";
  }
  #fixed-side-menu nav.block {
    display: block;
  }
  #fixed-side-menu nav.show {
    -webkit-opacity: 1;
       -moz-opacity: 1;
            opacity: 1;
  }
}

/* 1382 Media Query    =================================================== */

@media only screen and (min-width: 1382px) {
  #mq-active:before {
    color: turquoise;
    content: "MQ 1382px";
  }
  .wrapper-wide {
    max-width: 1440px;
  }
  #thumbs-work-container ul li {
    display: inline;
    float: left;
    width: 23.4375%;
    margin: 0 0.78125%;
  }
  #thumbs-work-container ul li:last-child {
    display: inline-block;
    float: none;
  }
  #work-details .cols-2 {
    display: inline;
    float: left;
    width: 31.770833333333332%;
    margin: 0 0.78125%;
  }
  #work-details .cols-2:first-child {
    margin-left: 17.447916666666664%;
  }
}

/* @2x hdpi Media Query ================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  
}

/* Print Media Query   =================================================== */

@media print {
  * {
    color: black !important;
    text-shadow: none !important;
    background: transparent !important;
    -ms-filter: none !important;
        filter: none !important;
    box-shadow: none !important;
  }
  @page  {
    margin: 0.5cm;
  }
  h2,
  h3 {
    orphans: 3;
    widows: 3;
    page-break-after: avoid;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  pre,
  blockquote {
    border: 1px solid #808080;
    page-break-inside: avoid;
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
  }
}
              
            
!

JS

              
                "use strict";
(function (exports) {

	document.addEventListener("DOMContentLoaded", function(e){
		/* Emphatize elements */
		const uxer = document.querySelector("#uxer");
		const participants = document.querySelector("#participants");
		const balloon1 = document.querySelector("#balloon-1");
		const balloon2 = document.querySelector("#balloon-2");
		const balloon3 = document.querySelector("#balloon-3");
		const balloon4 = document.querySelector("#balloon-4");
		const buttonPlay = document.querySelector("#anim-trigger-play");
		const buttonReset = document.querySelector("#anim-trigger-reset");

		/* Emphatize timelines */
		var tlEmphatize = new TimelineLite({paused: true});
		var tlUxer	= new TimelineLite();
		var tlParticipants = new TimelineLite();
		var tlBalloon1 = new TimelineLite();
		var tlBalloon2 = new TimelineLite();
		var tlBalloon3 = new TimelineLite();
		var tlBalloon4 = new TimelineLite();
		tlUxer.fromTo(uxer, 0.25, {css: {x: "+=20", opacity: 0, scale: 0.75}}, { css: {x: 0, opacity: 1, scale: 1, transformOrigin:"50% 50%"}, ease:Power1.easeInOut});
		tlParticipants.fromTo(participants, 0.25, {css: {x: "-=20", opacity: 0, scale: 0.75}}, { css: {x: 0, opacity: 1, scale: 1, transformOrigin:"50% 50%"}, ease:Power1.easeInOut});

		tlBalloon1.addLabel("start", 0);
		tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start");
		tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start");

		tlBalloon2.addLabel("start", 0);
		tlBalloon2.fromTo(balloon2, 0.4,{css: {x: -10, y: -10, rotation: -10}}, { css: {x: 0, y: 0, rotation: 0}, ease:Back.easeOut.config(2)}, "start");
		tlBalloon2.fromTo(balloon2, 0.4, {css: {opacity: 0, scale: 0}}, {css: {opacity: 1, scale: 1, transformOrigin:"0% 50%"}, ease:Back.easeOut.config(2)}, "start");

		tlBalloon3.to(balloon3, 0.35,{ css: {x: -10, y: -10, opacity: 1, rotation: -3, transformOrigin:"75% 100%"}, ease:Power1.easeInOut});
		tlBalloon3.to(balloon3, 0.25,{ css: {x: 0, y: 0, rotation: 0, transformOrigin:"75% 100%"}, ease:Power1.easeInOut});

		tlBalloon4.to(balloon4, 0.25,{ css: {x: 2.5, y: 2.5, opacity: 1, scale: 1.15, rotation: 5, transformOrigin:"0% 100%"}, ease:Power1.easeInOut});
		tlBalloon4.to(balloon4, 0.45,{ css: {x: 0, y: 0, rotation: 0, scale: 1, transformOrigin:"0% 100%"}, ease:Power1.easeInOut});

		tlEmphatize.addLabel("start", 0);
		tlEmphatize.addLabel("startBalloons", 0.85);
		tlEmphatize.add(tlUxer,"start");
		tlEmphatize.add(tlParticipants,"start+=0.4");
		tlEmphatize.add(tlBalloon1,"startBalloons+=0.45");
		tlEmphatize.add(tlBalloon2,"startBalloons+=0.75");
		tlEmphatize.add(tlBalloon3,"startBalloons");
		tlEmphatize.add(tlBalloon4,"startBalloons+=1.25");

		buttonPlay.addEventListener('click', (e) => {
			tlEmphatize.play();
	});

		buttonReset.addEventListener('click', (e) => {
			tlEmphatize.pause(0);
	});
	});

})(this);
              
            
!
999px

Console