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

              
                <!DOCTYPE html>
<html lang="da" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="Cache-Control" content="public" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<link rel="shortcut icon" href="favicon.ico">
		
	
		<title>Walter den glade hval</title>
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		
		<script>document.documentElement.className = 'js';</script>
		<script src="https://gladhval.dk/js/prefixfree.min.js"></script>
	
<!-- 	<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js'></script>-->	
		
<script src="https://gladhval.dk/js/libraries.min.js"></script>

<!-- 
	<script src='http://threejs.org/examples/js/loaders/OBJLoader.js'></script>-->



		
	</head>
	<body>

	
		
		<svg class="hidden">
			<defs>
				<symbol id="icon-drop" viewBox="0 0 24 24">
					<title>arrow</title>
					<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
				</symbol>




				<symbol id="icon-old-drop" viewBox="0 0 24 24">
					<title>drop</title>
					<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
				</symbol>
				<symbol id="icon-grid" viewBox="0 0 100 100">
					<title>grid</title>
					<rect x="8.4" y="8.9" width="20.1" height="20.1"/>
					<rect x="40" y="8.9" width="20.1" height="20.1"/>
					<rect x="71.6" y="8.9" width="20.1" height="20.1"/>
					<rect x="8.3" y="40" width="20.1" height="20.1"/>
					<rect x="39.9" y="40" width="20.1" height="20.1"/>
					<rect x="71.6" y="40" width="20.1" height="20.1"/>
					<rect x="8.3" y="71" width="20.1" height="20.1"/>
					<rect x="39.9" y="71" width="20.1" height="20.1"/>
					<rect x="71.6" y="71" width="20.1" height="20.1"/>
				</symbol>
				<symbol id="icon-sound-on" viewBox="0 0 100 100">
					<title>sound on</title>
					<path d="M57.9,13c-6.6,0-13.1,1.8-18.8,5.1c-5.1,3-9.3,7.1-12.5,12.1H12.5c-5.7,0-10.4,4.7-10.4,10.4v18.9
						c0,5.7,4.7,10.4,10.4,10.4h14.1c3.1,4.9,7.4,9.1,12.5,12.1c5.7,3.3,12.1,5.1,18.8,5.1c1.5,0,2.7-1.2,2.7-2.7V15.7
						C60.6,14.2,59.4,13,57.9,13z M25.5,64.5h-13c-2.8,0-5.1-2.3-5.1-5.1V40.6c0-2.8,2.3-5.1,5.1-5.1h13C25.5,35.5,25.5,64.5,25.5,64.5
						z M55.2,81.6c-10-0.8-19.1-6.5-24.4-15.1V33.6c5.3-8.6,14.4-14.3,24.4-15.1V81.6z"/>
					<path d="M71,29.4c-1.2-0.8-2.9-0.6-3.7,0.7c-0.8,1.2-0.6,2.9,0.7,3.7c5.3,3.7,8.5,9.8,8.5,16.3S73.3,62.6,68,66.3
						c-1.2,0.8-1.5,2.5-0.7,3.7c0.5,0.8,1.3,1.1,2.2,1.1c0.5,0,1.1-0.2,1.5-0.5C77.8,66,81.8,58.3,81.8,50S77.8,34.1,71,29.4z"/>
					<path d="M81.3,18.3c-1.2-0.8-2.9-0.6-3.7,0.7c-0.8,1.2-0.6,2.9,0.7,3.7c8.9,6.2,14.3,16.4,14.3,27.3
						s-5.3,21.1-14.3,27.3c-1.2,0.8-1.5,2.5-0.7,3.7c0.5,0.8,1.3,1.1,2.2,1.1c0.5,0,1.1-0.2,1.5-0.5C91.7,74.5,97.9,62.6,97.9,50
						S91.7,25.5,81.3,18.3z"/>
				</symbol>
				<symbol id="icon-sound-off" viewBox="0 0 100 100">
					<title>sound off</title>
					<path d="M57.9,13c-6.6,0-13.1,1.8-18.8,5.1c-5.1,3-9.3,7.1-12.5,12.1H12.5c-5.7,0-10.4,4.7-10.4,10.4v18.9
						c0,5.7,4.7,10.4,10.4,10.4h14.1c3.1,4.9,7.4,9.1,12.5,12.1c5.7,3.3,12.1,5.1,18.8,5.1c1.5,0,2.7-1.2,2.7-2.7V15.7
						C60.6,14.2,59.4,13,57.9,13z M25.5,64.5h-13c-2.8,0-5.1-2.3-5.1-5.1V40.6c0-2.8,2.3-5.1,5.1-5.1h13C25.5,35.5,25.5,64.5,25.5,64.5z
						M55.2,81.6c-10-0.8-19.1-6.5-24.4-15.1V33.6c5.3-8.6,14.4-14.3,24.4-15.1V81.6z"/>
					<g>
						<path d="M68.4,66.4c-0.7,0-1.4-0.3-1.9-0.8c-1-1-1-2.7,0-3.8l27.6-27.6c1-1,2.7-1,3.8,0c1,1,1,2.7,0,3.8L70.3,65.7
						C69.8,66.2,69.1,66.4,68.4,66.4z"/>
						<path d="M96,66.4c-0.7,0-1.4-0.3-1.9-0.8L66.6,38.1c-1-1-1-2.7,0-3.8c1-1,2.7-1,3.8,0l27.6,27.6c1,1,1,2.7,0,3.8
						C97.4,66.2,96.7,66.4,96,66.4z"/>
					</g>
				</symbol>
			</defs>
		</svg>
		<main class="landing-layout">
			<!-- Landing wrap with sections -->
			<div class="landing-wrap">
	<section class="landing landing--above">
		
		<ul id="scene" class="scene unselectable"
			data-friction-x="0.1"
			data-friction-y="0.1"
			data-scalar-x="25"
			data-scalar-y="15">
			<li class="layer" data-depth="0.00"></li>
			<li class="layer" data-depth="0.10"><div class="background"></div></li>
		<!--	<li class="layer" data-depth="0.10"><div class="light orange b phase-4"></div></li>-->
			<li class="layer" data-depth="0.10"><div class="light purple c phase-5"></div></li>
		<!--	<li class="layer" data-depth="0.10"><div class="light orange d phase-3"></div></li>-->
			<li class="layer" data-depth="0.15">
				<ul class="rope depth-10">
					<li></li>
					<li class="hanger position-2">
						<div class="board cloud-2 swing-1"></div>
					</li>
					<li class="hanger position-4">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-8">
						<div class="board birds swing-5"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.20"><h1 class="title">Velkommen til Walter<br /> <em>den glade hval</em></h1></li>
			<li class="layer" data-depth="0.30">
				<ul class="rope depth-30">
					<li>
						</li>
					<li class="hanger position-1">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-5">
						<div class="board cloud-4 swing-1"></div>

						
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.30"><div class="wave paint depth-30"></div></li>
			<li class="layer" data-depth="0.40"><div class="wave plain depth-40"></div></li>
			

			<li class="layer" data-depth="0.50"><div class="wave paint depth-50"></div></li>
			<li class="layer" data-depth="0.60"><div class="lighthouse depth-60"></div>
				<div align="center" id="haj">

					<object class="haj" data="https://gladhval.dk/images/svg/hanibal2.svg" type="image/svg+xml">
					
					  </object>
					</div>
			
			
			</li>
			<li class="layer" data-depth="0.60">
				<ul class="rope depth-60">
					<li></li>
					<li class="hanger position-3">
						<div class="board birds swing-5"></div>
					</li>
					<li class="hanger position-6">
						<div class="board cloud-2 swing-2"></div>
					</li>
					<li class="hanger position-8">
						<div class="board cloud-3 swing-4"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.60"><div class="wave plain depth-60"></div>
					<div align="center" id="hval" >

							<object class="hval" data="https://gladhval.dk/images/svg/walter10.svg" type="image/svg+xml">
							
							  </object>
							</div>


			</li>
			<li class="layer" data-depth="0.80"><div class="wave plain depth-80"></div></li>
			<li class="layer" data-depth="1.00"><div class="wave paint depth-100"></div></li>
		</ul>
	
		<a class="wittlogo" href="https://designbywitt.com" target="_blank"></a>
		
	
		
				
				</section>


				<section class="landing landing--beneath">
					<ul id="sea" class="scene unselectable" 
					data-friction-x="0.1"
			data-friction-y="0.1"
			data-scalar-x="25"
			data-scalar-y="15">
					<li class="layer" data-depth="0.00"><div id="sea" class="background"></div></li>
					<li class="layer" data-depth="0.10"><div id="sea" class="background-1"></div></li>
					<li class="layer" data-depth="0.15">

							<div id="creatures" class="depth-20" style="height: 100%;">
						
									<object class="creature-1" data="https://gladhval.dk/images/svg/m4.svg" type="image/svg+xml">
					
									</object>
									<div class="creature-2"></div>
									<div class="creature-3"></div>
									<div class="creature-4"></div>
									<div class="creature-5"></div>

			
							</div>
				
							<ul class="depth-10">
							
							
							
								
								</li>
							
							</ul>
			

						</li>
						<li class="layer" data-depth="0.20"><div id="sea" class="background-2">




						</div>	</li>				
		<li class="layer" data-depth="0.30"><h1 class="title">Velkommen til<br /> <em></em>Walters univers</em></h1>
				<canvas id="bubbles" class="bubblesclick"></canvas> 
							
						
				<div class="walters-skjul">

					<svg class="pathcontainer" xmlns="http://www.w3.org/2000/svg"  
					width="100%" height="100%" viewBox="100 -70 600 400">
					<defs><style>.cls-1{fill:transparent;stroke:transparent;stroke-miterlimit:5;}</style></defs>
					<path fill="none" stroke="transparent" class="cls-1"
					id="motionPath" d="M.08,49.48a178.76,178.76,0,0,0,56,0c21.48-3.46,26.77-8.47,60-17,30.43-7.82,45.64-11.73,62-10,26.83,2.83,50.81,16,58,20,14.78,8.14,20,13.82,35,18,12,3.35,21.26,3.21,36,3a225.85,225.85,0,0,0,53-7c5.86-1.54,9.11-2.66,43-16,45.67-18,46.81-18.72,53-20,25.15-5.21,45.8-1.17,62,2,14.69,2.87,17.09,5,67,23,41.64,15,48.91,16.75,56,18a172,172,0,0,0,60,0c11.7-2.15,16.1-4.32,70-27,41-17.27,44.19-18.41,50-20,31.09-8.52,56.8-7.62,71-7,37.37,1.61,65.34,10.94,86,18,39,13.32,38.57,20.08,71,29a262.78,262.78,0,0,0,78,9c30.25-1,56.38-1.93,82-18,21.23-13.32,20.89-23.76,40-35,25.53-15,54.68-13.21,76-9"
					/>
		
						</svg>

						<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
						width="100%" height="100%" viewBox="0 0 2544 125.97">
							<title>test</title>
							<defs><style>.cls-2{fill:transparent;stroke:transparent;stroke-miterlimit:5;}</style></defs>
							<path fill="none" stroke="transparent" class="cls-2" 
							id="motionPathII" d="M2459.15,141.08c-40.93-8.08-96.9-11.52-145.92,17.28-36.69,21.58-36,41.63-76.8,67.2-49.19,30.85-99.36,32.64-157.44,34.56a504.54,504.54,0,0,1-149.76-17.28c-62.27-17.13-61.44-30.11-136.32-55.68-39.67-13.56-93.37-31.47-165.12-34.56-27.26-1.19-76.63-2.92-136.32,13.44-11.16,3.05-17.28,5.24-96,38.4C1292,248,1283.54,252.15,1261.07,256.28a330.24,330.24,0,0,1-115.2,0c-13.61-2.4-27.57-5.76-107.52-34.56-95.83-34.56-100.44-38.65-128.64-44.16-31.1-6.09-70.75-13.84-119-3.84-11.88,2.46-14.07,3.84-101.76,38.4-65.07,25.61-71.31,27.76-82.56,30.72a433.63,433.63,0,0,1-101.76,13.44c-28.3.4-46.08.67-69.12-5.76-28.8-8-38.82-18.93-67.2-34.56-13.8-7.68-59.85-33-111.36-38.4-31.41-3.32-60.61,4.19-119,19.2-63.8,16.38-74,26-115.2,32.64a343.22,343.22,0,0,1-107.52,0" transform="translate(84.85 -135.38)"/>
						</svg>

			</div>
						</li>
						<li class="layer" data-depth="0.30">
								<div id="sea" class="background-3"></div>	
							
							
							</li>
			

						<li class="layer" data-depth="0.50"><div class="depth-50">
								

						</div></li>
						<li class="layer" data-depth="0.60"><div class="depth-60"></div>
							
						
						
						</li>
						<li class="layer" data-depth="0.60">
							
						</li>

						<li class="layer" data-depth="0.80"><div class="depth-80"></div></li>
						<li class="layer" data-depth="1.00"><div class="depth-100"></div></li>
				
					</ul>

				

					
						<button id="addhval" class="button button--hval">
						

								<img id="hval-ikon" src="https://gladhval.dk/images/svg/Walter_ikon_hvid_small.svg" />
								<img id="hval-ikon-blue"  class="hidden" src="https://gladhval.dk/images/svg/Walter_ikon_blue_small.svg" />
						
							
						

						</button>

						<button id="addhvalII" class="button button--hval hidden">
						

							<img id="hval-ikonII" class="hidden" src="https://gladhval.dk/images/svg/Walter_ikon_hvid_small_reverse.svg" />
							<img id="hval-ikon-blueII"  class="hidden" src="https://gladhval.dk/images/svg/Walter_ikon_blue_small_reverse.svg" />
					
						
					

					</button>
			
					

					</button>
				</section>

		
			</div><!-- /landing-wrap -->
	
		
				<div id="jsModal" class="modal">
						<div class="modal__overlay jsOverlay"></div>
						<div class="modal__container">
						  <h1>Tag forbi vores webbutik</h1>
							<p>Og se mere til Walter og vores andre designfigurer m.m.</p>
							<p>Her er en gratis rabatkode på 20%: HAPPY </p>

						  <div id="modallinks">
<a target="_blank" href="https://designbywitt.com/collections/bogen-om-walter-den-glade-hval"><img src="https://gladhval.dk/images/modal/bog_1200x.jpg" /></a>
<a target="_blank" href="https://designbywitt.com/collections/tokens-of-happiness"><img src="https://gladhval.dk/images/modal/Happy-gifts_1200x.jpg" /></a>
<a target="_blank" href="https://designbywitt.com/collections/den-vagtgaende-garder"><img src="https://gladhval.dk/images/modal/garder-4_1200x.jpg" /></a>

						  </div>
				
						  <button class="modal__close jsModalClose"><span class="closesign">&#10005;</span></button>
						</div>
					  </div>




					  <!-- Fortælling om Walters bog -->

					  <div id="jsModalBook" class="modal">
						<div class="modal__overlay jsOverlay"></div>
						<div class="modal__container">
						  <h1>Gå på opdagelse i historien om Walter</h1>
						  <p>Dette er den spændende og lærerige historie om Walter den glade hval. </p>
							<p>Walter er den gladeste, lille hval, du nogensinde vil møde. </p>
								
								<p>Uanset hvad der sker, så vil Walter altid finde en grund til at smile. 
								En dag bliver Walter nysgerrig på, hvordan det føles at være ked af det. 
								Walters nysgerrighed tager ham ud på en spændende rejse rundt i hele verden. 

						  </p>

						
<a class="readbook-button" target="_blank" href="https://designbywitt.com/collections/bogen-om-walter-den-glade-hval">
Se mere</a>

					
						  <button class="modal__close jsModalClose">&#10005;</button>
						</div>
					  </div>

		<!-- Trigger button for layout change Benyt til Landing Page redirection -->


			<button class="button button--trigger" aria-label="Se Walters Univers">
				<svg class="icon icon--drop icon--shown">
					
					<use xlink:href="#icon-drop"></use></svg>



					

				<svg class="icon icon--arrow-up icon--hidden" viewBox="0 0 72 72" x="0px" y="0px" width="512px" height="512px"
				fill="#fff">
									<g>
										<path d="M58,29c0-1.862-1.283-3.416-3.008-3.86c-0.156-13.476-4.116-21.867-22.13-22.127C32.419,1.286,30.863,0,29,0   s-3.419,1.286-3.862,3.013C7.123,3.273,3.164,11.663,3.008,25.14C1.283,25.584,0,27.138,0,29s1.283,3.416,3.008,3.86   c0.156,13.476,4.116,21.867,22.13,22.127C25.581,56.714,27.137,58,29,58s3.419-1.286,3.862-3.013   c18.015-0.26,21.974-8.651,22.13-22.127C56.717,32.416,58,30.862,58,29z M52.993,25.144c-0.44,0.115-0.857,0.29-1.225,0.538   c-0.25-1.73-0.718-3.417-1.357-5.046c-0.007-0.023-0.003-0.048-0.013-0.071c-0.011-0.027-0.033-0.045-0.046-0.071   c-0.728-1.818-1.67-3.563-2.866-5.179c-2.429-3.281-5.619-5.78-9.262-7.369c-0.021-0.011-0.035-0.03-0.057-0.04   c-0.026-0.012-0.054-0.008-0.081-0.017c-1.801-0.772-3.702-1.34-5.692-1.637c-0.029-0.004-0.057-0.004-0.085-0.009   c0.251-0.369,0.429-0.788,0.545-1.231C49.295,5.258,52.844,12.59,52.993,25.144z M37.62,48.142l-2.571-6.523   c0.792-0.382,1.558-0.832,2.28-1.367c1.732-1.282,3.103-2.916,4.072-4.773l6.437,2.797c-1.459,2.971-3.606,5.576-6.343,7.602   C40.274,46.783,38.972,47.53,37.62,48.142z M25.9,49.77c-1.503-0.224-2.952-0.616-4.341-1.139l2.792-6.425   c0.831,0.29,1.693,0.509,2.582,0.642c0.7,0.104,1.4,0.156,2.096,0.156c1.421,0,2.82-0.222,4.161-0.644l2.57,6.521   C32.628,49.949,29.268,50.273,25.9,49.77z M12.121,41.495c-0.904-1.221-1.651-2.523-2.263-3.875l6.518-2.569   c0.382,0.792,0.837,1.556,1.372,2.278c1.282,1.732,2.916,3.103,4.773,4.072l-2.797,6.437   C16.752,46.379,14.147,44.231,12.121,41.495z M20.38,9.859l2.569,6.518c-0.792,0.382-1.556,0.837-2.279,1.371   c-1.732,1.282-3.103,2.916-4.071,4.772l-6.437-2.797c1.459-2.971,3.606-5.576,6.343-7.602C17.726,11.217,19.028,10.47,20.38,9.859z    M28.955,7.996c0.003,0,0.007,0,0.01,0C28.977,7.997,28.988,8,29,8c0.006,0,0.011-0.002,0.016-0.002   c1.023,0.003,2.053,0.078,3.083,0.232c1.503,0.224,2.952,0.616,4.341,1.139l-2.792,6.425c-0.831-0.29-1.693-0.509-2.582-0.642   c-2.13-0.317-4.256-0.131-6.253,0.497l-2.576-6.536C24.392,8.38,26.655,7.996,28.955,7.996z M45.879,16.505   c0.904,1.221,1.651,2.523,2.263,3.875l-6.518,2.569c-0.382-0.792-0.837-1.556-1.372-2.278c-1.282-1.732-2.916-3.103-4.773-4.071   l2.797-6.437C41.248,11.621,43.853,13.769,45.879,16.505z M48.63,36.441l-6.425-2.792c0.29-0.831,0.509-1.693,0.642-2.582   c0.318-2.131,0.132-4.256-0.496-6.253l6.53-2.574c1.069,3.132,1.392,6.492,0.89,9.86C49.545,33.603,49.154,35.052,48.63,36.441z    M33.516,40.108c-0.043,0.01-0.087,0.006-0.13,0.023c-0.051,0.02-0.087,0.059-0.133,0.086c-1.899,0.724-3.958,0.962-6.026,0.651   c-3.17-0.473-5.967-2.152-7.873-4.729c-0.617-0.833-1.104-1.733-1.482-2.67c-0.008-0.026-0.004-0.053-0.014-0.079   c-0.012-0.031-0.037-0.051-0.052-0.079c-0.741-1.916-0.988-3.996-0.676-6.083c0.473-3.17,2.152-5.967,4.729-7.873   c0.853-0.631,1.773-1.133,2.734-1.514c0.002-0.001,0.004,0,0.006-0.001s0.003-0.002,0.004-0.003   c1.388-0.549,2.865-0.839,4.37-0.839c0.596,0,1.196,0.044,1.797,0.134c1.015,0.151,1.986,0.439,2.908,0.828   c0.033,0.019,0.055,0.048,0.091,0.063c0.041,0.018,0.083,0.014,0.124,0.026c1.867,0.831,3.501,2.124,4.75,3.811   c1.907,2.576,2.697,5.741,2.224,8.911c-0.155,1.038-0.451,2.031-0.854,2.971c-0.006,0.013-0.018,0.021-0.024,0.034   c-0.007,0.015-0.004,0.032-0.01,0.047c-0.829,1.896-2.132,3.557-3.84,4.821C35.32,39.251,34.436,39.732,33.516,40.108z M8.23,25.9   c0.224-1.503,0.616-2.952,1.139-4.341l6.425,2.792c-0.29,0.831-0.509,1.693-0.642,2.582c-0.318,2.131-0.132,4.256,0.496,6.253   L9.12,35.76C8.051,32.628,7.728,29.268,8.23,25.9z M29,2c1.103,0,2,0.897,2,2s-0.897,2-2,2s-2-0.897-2-2S27.897,2,29,2z    M25.146,5.012c0.115,0.438,0.289,0.854,0.536,1.22c-1.732,0.25-3.419,0.718-5.05,1.358c-0.022,0.007-0.044,0.003-0.066,0.012   c-0.026,0.01-0.043,0.031-0.067,0.043c-1.82,0.728-3.567,1.671-5.184,2.869c-3.28,2.429-5.78,5.619-7.369,9.261   c-0.011,0.021-0.03,0.035-0.04,0.058c-0.011,0.026-0.008,0.054-0.017,0.081c-0.772,1.801-1.34,3.702-1.637,5.692   c-0.004,0.029-0.004,0.057-0.009,0.085c-0.371-0.252-0.791-0.43-1.236-0.547C5.156,12.59,8.705,5.258,25.146,5.012z M2,29   c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2S2,30.103,2,29z M5.007,32.856c0.44-0.115,0.857-0.29,1.225-0.538   c0.25,1.73,0.717,3.417,1.357,5.046c0.007,0.024,0.003,0.048,0.013,0.071c0.014,0.036,0.039,0.064,0.057,0.097   c0.727,1.809,1.665,3.545,2.855,5.153c2.429,3.281,5.619,5.78,9.262,7.369c0.021,0.011,0.035,0.03,0.057,0.04   c0.026,0.011,0.052,0.008,0.078,0.016c1.802,0.772,3.704,1.341,5.694,1.638c0.028,0.004,0.056,0.005,0.085,0.009   c-0.251,0.369-0.428,0.788-0.544,1.231C8.705,52.742,5.156,45.41,5.007,32.856z M29,56c-1.103,0-2-0.897-2-2   c0-1.095,0.886-1.986,1.978-1.998c0.023,0,0.046,0.003,0.069,0.003C30.128,52.031,31,52.914,31,54C31,55.103,30.103,56,29,56z    M32.854,52.988c-0.116-0.442-0.293-0.86-0.543-1.228c1.746-0.252,3.451-0.708,5.094-1.356c0.009-0.003,0.019-0.002,0.029-0.005   c0.008-0.003,0.012-0.01,0.02-0.013c1.838-0.73,3.598-1.691,5.23-2.899c3.275-2.424,5.772-5.608,7.361-9.242   c0.015-0.027,0.036-0.048,0.048-0.077c0.011-0.026,0.008-0.054,0.017-0.081c0.772-1.801,1.34-3.702,1.637-5.692   c0.004-0.029,0.004-0.057,0.009-0.085c0.371,0.252,0.791,0.43,1.236,0.547C52.844,45.41,49.295,52.742,32.854,52.988z M54,31   c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S55.103,31,54,31z" />
									</g>
				
									
	

				</svg>
			</button>
			
		
			<button href="#jsModal" class="jsModalTrigger button button--products" aria-label="Se Walters figurer">
			
				


							

				<svg class="icon icon--shop icon--shown" x="0px" y="0px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
	<path d="M 37.074219 2 C 35.435219 2 33.895328 2.637875 32.736328 3.796875 C 31.680328 4.852875 31.006078 7.1752656 30.580078 9.4472656 C 30.235078 8.2522656 29.762328 7.1421875 29.111328 6.4921875 C 28.143328 5.5231875 26.856328 4.9902344 25.486328 4.9902344 C 24.116328 4.9902344 22.827375 5.5241875 21.859375 6.4921875 C 20.890375 7.4601875 20.357422 8.7491406 20.357422 10.119141 C 20.357422 11.489141 20.891375 12.776141 21.859375 13.744141 C 21.969375 13.854141 22.095422 13.958641 22.232422 14.056641 L 5 14 C 3.346 14 2 15.346 2 17 L 2 21 C 2 22.304 2.836 23.416125 4 23.828125 L 4 57.056641 C 4 58.710641 5.346 60 7 60 L 55 60 C 56.654 60 58 58.710641 58 57.056641 L 58 23.828125 C 59.164 23.415125 60 22.305953 60 21.001953 L 60 17.001953 C 60 15.346953 58.654 14 57 14 L 38.634766 14.056641 C 39.792766 13.605641 40.806109 13.078656 41.412109 12.472656 C 43.804109 10.080656 43.804109 6.188875 41.412109 3.796875 C 40.253109 2.637875 38.713219 2 37.074219 2 z M 37.074219 4 C 38.178219 4 39.217047 4.4299375 39.998047 5.2109375 C 41.610047 6.8229375 41.610047 9.4455937 39.998047 11.058594 C 38.878047 12.177594 34.924719 13.220578 32.011719 13.767578 C 32.307719 10.617578 33.043391 6.3189375 34.150391 5.2109375 C 34.932391 4.4299375 35.970219 4 37.074219 4 z M 25.486328 6.9902344 C 26.321328 6.9902344 27.106266 7.31425 27.697266 7.90625 C 28.486266 8.69625 29.075937 11.412703 29.335938 13.595703 C 26.756937 13.499703 24.004437 13.061078 23.273438 12.330078 C 22.682437 11.739078 22.355469 10.954141 22.355469 10.119141 C 22.355469 9.2841406 22.682437 8.49725 23.273438 7.90625 C 23.864438 7.31525 24.651328 6.9902344 25.486328 6.9902344 z M 5 16 L 29.84375 16 L 30 16.123047 L 30 22 L 6 22 L 5 22 C 4.449 22 4 21.552 4 21 L 4 17 C 4 16.449 4.449 16 5 16 z M 32 16 L 57 16 C 57.551 16 58 16.449 58 17 L 58 21 C 58 21.551 57.551 22 57 22 L 56 22 L 43 22 C 42.448 22 42 22.448 42 23 C 42 23.552 42.448 24 43 24 L 56 24 L 56 57.056641 C 56 57.607641 55.551 58 55 58 L 7 58 C 6.449 58 6 57.607641 6 57.056641 L 6 24 L 31 24 C 31.552 24 32 23.552 32 23 L 32 16 z M 35 22 C 34.448 22 34 22.448 34 23 C 34 23.552 34.448 24 35 24 L 39 24 C 39.552 24 40 23.552 40 23 C 40 22.448 39.552 22 39 22 L 35 22 z M 25.455078 27 C 23.475078 27 21.614844 27.739625 20.214844 29.140625 C 17.324844 32.030625 17.324844 36.733047 20.214844 39.623047 L 29.734375 49.144531 C 30.079375 49.489531 30.538391 49.679688 31.025391 49.679688 C 31.513391 49.679688 31.971406 49.489531 32.316406 49.144531 L 41.828125 39.623047 C 44.718125 36.733047 44.718125 32.030625 41.828125 29.140625 C 40.429125 27.739625 38.567891 27 36.587891 27 C 34.607891 27 32.745703 27.739625 31.345703 29.140625 L 31.021484 29.462891 L 30.697266 29.140625 C 29.297266 27.740625 27.435078 27 25.455078 27 z M 25.457031 28.96875 C 26.903031 28.96875 28.263156 29.530734 29.285156 30.552734 L 29.609375 30.876953 L 29.103516 31.382812 C 28.712516 31.772813 28.712516 32.405875 29.103516 32.796875 C 29.298516 32.991875 29.554547 33.089844 29.810547 33.089844 C 30.066547 33.089844 30.322578 32.991875 30.517578 32.796875 L 32.191406 31.121094 L 32.761719 30.552734 C 33.783719 29.530734 35.143844 28.96875 36.589844 28.96875 C 38.034844 28.96875 39.394016 29.530734 40.416016 30.552734 C 42.525016 32.663734 42.525063 36.097031 40.414062 38.207031 L 31.025391 47.603516 L 21.630859 38.207031 C 19.520859 36.097031 19.520859 32.663734 21.630859 30.552734 C 22.652859 29.530734 24.011031 28.96875 25.457031 28.96875 z M 9 52.056641 C 8.448 52.056641 8 52.504641 8 53.056641 L 8 55.056641 C 8 55.608641 8.448 56.056641 9 56.056641 C 9.552 56.056641 10 55.608641 10 55.056641 L 10 53.056641 C 10 52.504641 9.552 52.056641 9 52.056641 z M 14 52.056641 C 13.448 52.056641 13 52.504641 13 53.056641 L 13 55.056641 C 13 55.608641 13.448 56.056641 14 56.056641 C 14.552 56.056641 15 55.608641 15 55.056641 L 15 53.056641 C 15 52.504641 14.552 52.056641 14 52.056641 z M 19 52.056641 C 18.448 52.056641 18 52.504641 18 53.056641 L 18 55.056641 C 18 55.608641 18.448 56.056641 19 56.056641 C 19.552 56.056641 20 55.608641 20 55.056641 L 20 53.056641 C 20 52.504641 19.552 52.056641 19 52.056641 z M 24 52.056641 C 23.448 52.056641 23 52.504641 23 53.056641 L 23 55.056641 C 23 55.608641 23.448 56.056641 24 56.056641 C 24.552 56.056641 25 55.608641 25 55.056641 L 25 53.056641 C 25 52.504641 24.552 52.056641 24 52.056641 z M 29 52.056641 C 28.448 52.056641 28 52.504641 28 53.056641 L 28 55.056641 C 28 55.608641 28.448 56.056641 29 56.056641 C 29.552 56.056641 30 55.608641 30 55.056641 L 30 53.056641 C 30 52.504641 29.552 52.056641 29 52.056641 z M 34 52.056641 C 33.448 52.056641 33 52.504641 33 53.056641 L 33 55.056641 C 33 55.608641 33.448 56.056641 34 56.056641 C 34.552 56.056641 35 55.608641 35 55.056641 L 35 53.056641 C 35 52.504641 34.552 52.056641 34 52.056641 z M 39 52.056641 C 38.448 52.056641 38 52.504641 38 53.056641 L 38 55.056641 C 38 55.608641 38.448 56.056641 39 56.056641 C 39.552 56.056641 40 55.608641 40 55.056641 L 40 53.056641 C 40 52.504641 39.552 52.056641 39 52.056641 z M 44 52.056641 C 43.448 52.056641 43 52.504641 43 53.056641 L 43 55.056641 C 43 55.608641 43.448 56.056641 44 56.056641 C 44.552 56.056641 45 55.608641 45 55.056641 L 45 53.056641 C 45 52.504641 44.552 52.056641 44 52.056641 z M 49 52.056641 C 48.448 52.056641 48 52.504641 48 53.056641 L 48 55.056641 C 48 55.608641 48.448 56.056641 49 56.056641 C 49.552 56.056641 50 55.608641 50 55.056641 L 50 53.056641 C 50 52.504641 49.552 52.056641 49 52.056641 z M 54 52.056641 C 53.448 52.056641 53 52.504641 53 53.056641 L 53 55.056641 C 53 55.608641 53.448 56.056641 54 56.056641 C 54.552 56.056641 55 55.608641 55 55.056641 L 55 53.056641 C 55 52.504641 54.552 52.056641 54 52.056641 z"/>
	</svg>
	
	
	
	</button>

			<!-- Sound on/off button -->
			<button class="button button--sound" aria-label="Toggle sound">
				<svg class="icon icon--sound-on icon--shown"><use xlink:href="#icon-sound-on"></use></svg>
				<svg class="icon icon--sound-off icon--hidden"><use xlink:href="#icon-sound-off"></use></svg>
			</button>
		
		
			<div class="loader">
				
			</div>
		</main>
		<script src="https://gladhval.dk/js/howler.min.js"></script>
		<script src="https://gladhval.dk/js/imagesloaded.pkgd.min.js"></script>
		<script src="https://gladhval.dk/js/main.js"></script>





  <script src='https://gladhval.dk/js/TweenMax.min.js'></script>
<script src='https://gladhval.dk/js/MorphSVGPlugin.min.js'></script>

  

	

	


<script src="https://gladhval.dk/js/jquery.parallax.js"></script>
<script>

// jQuery Selections
var $html = $('html'),
		$container = $('#container'),
		$scene = $('#scene');
		$scene2 = $('#sea');










// Pretty simple huh?
$scene.parallax();
$scene2.parallax();



</script>



</html>

              
            
!

CSS

              
                *,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
-o-transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;

}

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color: #011110;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100vh;
}

.js body {
	overflow: hidden;
}

a {
	outline: none;
	color: #011110;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

a:hover,
a:focus {
	color: #f46377;
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Clouds */

.cloud1 {
	top: 80px;
  z-index: 100;
  fill: #eee;
  /* Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode */
  -webkit-animation: move 20s linear infinite;
  -moz-animation: move 20s linear infinite;
  -o-animation: move 20s linear infinite;
  animation: move 20s linear infinite;
}

.cloud2 {
	top: 240px;
  z-index: 200;
  fill: #eee;
  -webkit-animation: move 35s linear 10s infinite backwards;
  -moz-animation: move 35s linear 10s infinite backwards;
  -o-animation: move 35s linear 10s infinite backwards;
  animation: move 35s linear 10s infinite backwards;
}

@-webkit-keyframes move {
  from {-webkit-transform: translateX(-400px);}
  to {-webkit-transform: translateX(1350px);}
}

/* Icons */

.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.icon--arrow-up {
	width: 2.75em !important;
	height: 2.75em !important;
	margin-left: 20px !important;
    margin-top: 10px !important;

}
.icon--shop {
	width: 2.5em !important;
	height: 2.5em !important;
	margin-left: 17px !important;
	margin-top: 0px !important;
}


  /* Products Page */

  #jsModalBook .modal__container  {
    background-image: url(https://gladhval.dk/images/modal/udkast_bog.jpg);
    background-size: cover;
width: 80vw !important;
height: 80vh !important;
position: relative;
z-index: 22;
left: 0vw;
top: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
box-shadow: 0 0 10px #fff;
margin: 0 auto;
padding: 30px;
text-align: center;
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
  }
  #jsModalBook .modal__close  {
background: #0AA4E1;
  }

  #jsModal .modal__container {
    position: relative;
    z-index: 22;
    left: 0vw;
    width: 80vw;
    height: 80vh;
    top: 10%;
    box-shadow: 0 0 10px #fff;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    text-align: center;
  }

  #jsModalBook  .modal__container h1 {
    color: #fff !important;
	font-weight: 600 !important;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
}
#jsModalBook  .modal__container p {
	color: #fff !important;
	font-weight: 600 !important;
	line-height: 1.25;
	font-size: 1.25em !important;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
}
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    padding: 30px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear 0.1s,opacity 0.3s ease;
  }
  .modal.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .modal__overlay {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 21;
/*    background-color: rgba(0, 0, 0, 0.7); */
	}
	

  .modal__close {
    position: absolute;
    top: 10px;
		right: 10px;

text-align: center;
    border: none;
    outline: none;
    background: #0AA4E1;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
  }
  .modal__close:hover {
    color: #000;
  }

  .modal__container .fixedscene {
position: fixed;
  }
  .modal__container h1 {
    font-size: 2.5em;
    color: #000;
    margin-bottom: 15px;
  }

  .modal__container p {
    font-size: 1.5em;
  }

  #jsModalcontainer canvas {
max-width: 400px !important;
  }
#modallinks {
display: flex;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
}
  #modallinks a {
    width: 33%;

  }
  #modallinks a img{
	
    height: auto;
	}
	
	@media (max-width: 599px) {
		.icon--shop {
			margin-left: 10px !important;
	}

	#jsModalBook  .modal__container {
		display: block !important;
		overflow: auto;
	}

	.icon--arrow-up {
		margin-left: 15px !important;
	}
}

@media (max-width: 1200px) {

	.modal__close  {
		background: transparent !important;
			} 
.modal__close .closesign {
	color:  #0AA4E1 !important;
	width:48px;
	height: 48px;
	margin-right: 2em;
	margin-top: 2em;
	text-align: center;
	
		}	}
@media (max-width: 700px) {



	.modal{
	overflow-y: scroll;
}

	#jsModal .modal__container {

left: 0 !important;
		width: 100vw !important;
		height: 100% !important;
		overflow-y: scroll;
	}

	#jsModal .modal__container h1 {
text-align: left !important;

	}
	#jsModal .modal__container p {
		text-align: left !important;
		line-height: 1.5;
			}
	
	#modallinks a {
	
	}



	.icon--shop {
    margin-left: 15px !important;
    margin-top: 0px !important;
}

#hval-ikon, #hval-ikon-blue, #hval-ikonII, #hval-ikon-blueII { 
	width: 50px !important;
}

#haj-ikon { 
width: 50px;
margin-left: 6px;
}
}

.icon--hidden {
	display: none;
}

.landing-layout--open .button--trigger .icon--hidden {
	display: block;
}

.landing-layout--open .button--trigger .icon--shown {
	display: none;
}
.landing-layout--open .readbook-button {
	background: #621f76 !important;
	border-radius: 25px !important;
	padding: 1rem 2rem !important;
	color: #fff !important;
	font-weight: 600 !important;
}
.button {
	margin: 0;
	padding: 0;
	color: #fff;
	border: none;
	background: none;
	width: 4em;
	height: 4em;
	background: #0dbdb2;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
.landing-layout--open .button {
	background: #621f76;
}

.button:hover {
	color: #fff;
}

.button:focus {
	outline: none;
}

.button--trigger {
	position: absolute;
	right: 2em;
	bottom: 2em;
}

.button--hval {
	position: absolute;

	left: 2em;
	top: 2em;
}
.button--hval:hover {
	background-color: #0AA4E1;
	color: #FFFFFF;
}


#addhvalII #hval-ikonII, #addhvalII #hval-ikon-blueII {
/*	transform: rotateY(180deg); */
	}

#hval-ikon, #hval-ikon-blue, #hval-ikonII, #hval-ikon-blueII  {
width: 70px;
height: 100%;
margin-left: 6px;
}

.hidden {
display: none;
}
.button--products  {
	position: absolute;
	left: 2em;
	bottom: 2em;
}
.button--haj {
	position: absolute;
	left: 2em;
	bottom: 2em;
}



.button--sound {
	position: absolute;
	right: 2em;
	top: 2em;
}

.button--sound-off .icon--shown {
	display: none;
}

.button--sound-off .icon--hidden {
	display: block;
}
.icon--drop  {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);

}

.landing-layout {
	height: 100vh;
	overflow: hidden;
}

.landing {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

.landing--above {
	background-position: 50% 100%;
}

.landing--beneath {
	background-position: 50% 0%;
}





.featured-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 100vh;
	left: 0;
}

.js .featured-content {
	top: 0;
	pointer-events: none;
}

.featured-list {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	max-width: 50vw;
	min-width: 550px;
	height: 60vh;
	margin: 30vh auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.featured-list__item {
	width: 33.33%;
	padding: 10% 0 0;
}

.featured-list__link {
	display: block;
	position: relative;
	text-align: center;
}

.featured-list__img {
	width: 37.5%;
	max-width: 80px;
	min-width: 60px;
	display: block;
	margin: 0 auto;
}

.featured-list__title {
	font-weight: 500;
	display: inline-block;
	padding: 0 0.65em;
	font-size: 0.95em;
	line-height: 1.8;
	font-family: "Verdana", serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-indent: 3px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

#walterobj canvas {
position: absolute;
top: 25%;
left: 25%;
}

/**********************************/
/* All transitions and animations */
/**********************************/

.landing-wrap {
	-webkit-transition: -webkit-transform 1.2s;
	transition: transform 1.2s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.landing-layout--open .landing-wrap {
	-webkit-transform: translate3d(0, -100vh, 0);
	transform: translate3d(0, -100vh, 0);
}

.landing-layout--products .landing-wrap {
	-webkit-transform: translate3d(0, -200vh, 0);
	transform: translate3d(0, -200vh, 0);
}


.js .featured-list__item {
	-webkit-transform: scale3d(0.8, 0.8, 1);
	transform: scale3d(0.8, 0.8, 1);
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.js .landing-layout--open .featured-list__item {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition: opacity 1.5s, -webkit-transform 0.8s;
	transition: opacity 1.5s, transform 0.8s;
}

.landing-layout--open .featured-list__item:nth-child(-n+3) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.landing-layout--open .featured-list__item:nth-child(n+4) {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

/* Page Loader */


.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
  
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
  
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
  
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
  
	z-index: 2000;
	position: fixed;
	margin: auto;
	top: 12px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 50px;
	overflow: hidden;
  }
  
  .pace .pace-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
  
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
  
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  
	display: block;
	position: absolute;
	right: 100%;
	margin-right: -7px;
	width: 93%;
	top: 7px;
	height: 14px;
	font-size: 12px;
	background: #29d;
	color: #29d;
	line-height: 60px;
	font-weight: bold;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  
	-webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
	-ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
	box-shadow: 120px 0 #fff, 240px 0 #fff;
  }
  
  .pace .pace-progress:after {
	content: attr(data-progress-text);
	display: inline-block;
	position: fixed;
	width: 45px;
	text-align: right;
	right: 0;
	padding-right: 16px;
	top: 4px;
  }
  
  .pace .pace-progress[data-progress-text="0%"]:after { right: -200px }
  .pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px }
  .pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px }
  .pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px }
  .pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px }
  .pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px }
  .pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px }
  .pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px }
  .pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px }
  .pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px }
  .pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px }
  .pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px }
  .pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px }
  .pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px }
  .pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px }
  .pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px }
  .pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px }
  .pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px }
  .pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px }
  .pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px }
  .pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px }
  .pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px }
  .pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px }
  .pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px }
  .pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px }
  .pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px }
  .pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px }
  .pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px }
  .pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px }
  .pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px }
  .pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px }
  .pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px }
  .pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px }
  .pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px }
  .pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px }
  .pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px }
  .pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px }
  .pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px }
  .pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px }
  .pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px }
  .pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px }
  .pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px }
  .pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px }
  .pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px }
  .pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px }
  .pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px }
  .pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px }
  .pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px }
  .pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px }
  .pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px }
  .pace .pace-progress[data-progress-text="50%"]:after { right: -107px }
  .pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px }
  .pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px }
  .pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px }
  .pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px }
  .pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px }
  .pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px }
  .pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px }
  .pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px }
  .pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px }
  .pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px }
  .pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px }
  .pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px }
  .pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px }
  .pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px }
  .pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px }
  .pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px }
  .pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px }
  .pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px }
  .pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px }
  .pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px }
  .pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px }
  .pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px }
  .pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px }
  .pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px }
  .pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px }
  .pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px }
  .pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px }
  .pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px }
  .pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px }
  .pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px }
  .pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px }
  .pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px }
  .pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px }
  .pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px }
  .pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px }
  .pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px }
  .pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px }
  .pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px }
  .pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px }
  .pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px }
  .pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px }
  .pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px }
  .pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px }
  .pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px }
  .pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px }
  .pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px }
  .pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px }
  .pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px }
  .pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px }
  .pace .pace-progress[data-progress-text="100%"]:after { right: -14px }
  
  
  .pace .pace-activity {
	position: absolute;
	width: 100%;
	height: 28px;
	z-index: 2001;
	box-shadow: inset 0 0 0 2px #29d, inset 0 0 0 7px #FFF;
	border-radius: 10px;
  }
  
  .pace.pace-inactive {
	display: none;
  }
  

.loader {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #011110;
	top: 0;
	left: 0;
	pointer-events: none;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	visibility: hidden;
}

.loader::after {
	position: absolute;
	content: 'Tænd for \0009 \266A \0009 lyden';
	color: #0AA4E1;
	top: 60%;
	width: 100%;
	left: 0;
	text-align: center;
	font-size: 1.5em;
}

.js .loader {
	visibility: visible;
}

.landing-layout--loaded .loader {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader__circle {
	fill: rgba(255,255,255,0.6);
	opacity: 0.1;
	-webkit-animation: moveUpDown 0.5s ease alternate infinite forwards;
	animation: moveUpDown 0.5s ease alternate infinite forwards;
}

.loader__circle:nth-child(2) {
	opacity: 0.8;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.loader__circle:nth-child(3) {
	opacity: 0.3;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

@-webkit-keyframes moveUpDown {
	to {
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
		opacity: 0.5;
	}
}

@keyframes moveUpDown {
	to {
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
		opacity: 0.5;
	}
}

/* Media queries */

@media screen and (max-width: 43.75em) {

	.landing-wrap {
		-webkit-transition-property: -webkit-transform, opacity;
		transition-property: transform, opacity;
	}

	.landing-layout--open .featured-list__item:nth-child(-n+2) {
		-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}
	.landing-layout--open .featured-list__item:nth-child(3),
	.landing-layout--open .featured-list__item:nth-child(4) {
		-webkit-transition-delay: 0.6s;
		transition-delay: 0.6s;
	}
	.landing-layout--open .featured-list__item:nth-child(n+5) {
		-webkit-transition-delay: 0.9s;
		transition-delay: 0.9s;
	}
	
	.loader::after {
		font-size: 1em;
	}
}

/* Logo */

.wittlogo {
	background-image: url('https://gladhval.dk/images/Design-by-witt-logo-dansk-design.png');
	background-repeat: no-repeat;
	position: absolute;
	top: 2em;
	left: 2em;
	width: 150px;
	height: 85px;
}


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

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

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

[hidden] {
  display: none; }

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

html,
button,
input,
select,
textarea {
  font-family: sans-serif; }



a:focus {
  outline: thin dotted; }

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

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

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

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

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

q {
  quotes: none; }

q:before,
q:after {
  content: "";
  content: none; }

small {
  font-size: 75%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

dl,
menu,
ol,
ul {
  margin: 1em 0; }

dd {
  margin: 0 0 0 40px; }

menu,
ol,
ul {
  padding: 0 0 0 40px; }

nav ul,
nav ol {
  list-style: none;
  list-style-image: none; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

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

figure {
  margin: 0; }

form {
  margin: 0; }

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

legend {
  border: 0;
  padding: 0;
  white-space: normal;
  *margin-left: -7px; }

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button,
input {
  line-height: normal; }

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

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

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px; }

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

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

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

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

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


::selection {
  text-shadow: none;
  background: #000000;
  color: #FFFFFF; }

::-moz-selection {
  text-shadow: none;
  background: #000000;
  color: #FFFFFF; }

html {
  font-family: Verdana, sans-serif;
  font-size: 12px; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.4em;
  text-align: center;
  color: #FFFFFF; 
 }

h1, h2, h3 {
  line-height: 1.4em;
  font-weight: 300;
  margin: 0; }

h1 {
  font-size: 2.83333em; }

h2 {
  font-size: 2.33333em; }

p {
  margin: 0 0 1.4em;
color: #000; }

em {
  font-style: normal;
  color: #0AA4E1; }

img {
  display: block;
  width: 100%; }

ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0; }

a {
  text-decoration: none;
  color: #D92400; }


#haj {
  display: block;
  position: absolute;
  bottom: 170px;
  right: 25%;
  -webkit-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
#hval-sub {
  position: absolute;
  top: 0;
  left: -340px;
}

#hval-subII {
  position: absolute;
top: 0;
left: -340px;
}

.walters-skjul {
  position: absolute;
  left: 0;
  height: 120%;
  width: 120%;
  top: 0;
}

#motionPath {

}

#hval {
    display: block;
position: absolute;
    bottom: 80px;
    left: 5%;
    webkit-animation: hval 6s 0.1s infinite linear;
    -moz-animation: hval 6s 0.1 infinite linear;
    animation: hval 6s 0.1s infinite;

}

.haj {
transition: all .5s;
}

.hval {
  transition: all .5s;

}
  

.fisk{

	margin-left: -235px;
	position: absolute;	
	animation: fisk 20s;
	-webkit-animation: fisk 20s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

svg #fish1,
svg #fish2,
svg #fish3,
svg #fish4,
svg #fish5,
svg #fish6 {
fill:#528484;
  
    -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}


svg #fish2{
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}

svg #fish3{
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

svg #fish4{
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

svg #fish5{
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

svg #fish6{
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}



button {
  -webkit-font-smoothing: antialiased;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  font-size: 1.33333em;
  line-height: 45.6px;
  font-family: Verdana, sans-serif;
  background-color: #F2F2F2;
  font-weight: 600;
  height: 48px;
  width: 48px;
  position: relative;
  display: block;
  margin: 0 auto;
  outline: none;
  border: none; }
  button.hide {
    opacity: 0; }

footer {
  position: absolute;
  text-align: right;
  line-height: 0;
  font-size: 0;
  bottom: 0;
  right: 0;
  left: 0; }
  footer .fb-like {
    display: inline-block;
    position: absolute;
    margin-left: 12px;
    bottom: 48px;
    right: 22px; }
  footer .twitter-share-button {
    display: inline-block;
    position: absolute;
    margin-left: 12px;
    bottom: 20px;
    right: 10px; }

.accelerate {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden; }

.center {
  max-width: 400px;
  margin: 0 auto;
  width: 88%; }
/*
.wrapper {
  min-height: 460px;
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }
*/
.cell {
  vertical-align: middle;
  display: table-cell; }

.panel {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  position: relative; }

.about {
  -webkit-font-smoothing: auto;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  color: #666666; }
  .about:after {
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    position: absolute;
    display: block;
    width: 100%;
    content: "";
    height: 5%;
    left: 0;
    top: 0; }
  .about.hide .cables {
    -webkit-transform: translate3d(0,-10%,0) rotateX(-90deg);
    -moz-transform: translate3d(0,-10%,0) rotateX(-90deg);
    transform: translate3d(0,-10%,0) rotateX(-90deg);
    opacity: 0; }
  .about.hide .panel {
    -webkit-transform: rotateX(-20deg);
    -moz-transform: rotateX(-20deg);
    transform: rotateX(-20deg); }
  .about .panel,
  .about .cables {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative; }
  .about .cables {
    -webkit-transform-origin: 50% -100%;
    -moz-transform-origin: 50% -100%;
    transform-origin: 50% -100%; }
    .about .cables:before {
      left: 10%;
      background: transparent url(https://gladhval.dk/images/parallax/cable.png) 0 0 no-repeat;
      position: absolute;
      display: block;
      height: 860px;
      width: 30px;
      content: "";
      top: -837px;
      z-index: 1; }
    .about .cables:after {
      right: 10%;
      background: transparent url(https://gladhval.dk/images/parallax/cable.png) 0 0 no-repeat;
      position: absolute;
      display: block;
      height: 860px;
      width: 30px;
      content: "";
      top: -837px;
      z-index: 1; }
  .about .panel {
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    background: #F2F2F2 url(https://gladhval.dk/images/parallax/panel.jpg) -7px 0;
    background-size: 399px 357px; }
    .about .panel:before {
      border-left: 1px dashed rgba(29, 31, 39, 0.2);
      position: absolute;
      display: block;
      height: 100%;
      content: "";
      left: 5%;
      top: 0; }
    .about .panel:after {
      -webkit-border-radius: 0 0 6px 0;
      -moz-border-radius: 0 0 6px 0;
      border-radius: 0 0 6px 0;
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding-box;
      background-clip: padding-box;
      background: transparent url(https://gladhval.dk/images/parallax/compass.png) 0 0 no-repeat;
      background-size: 224px 224px;
      position: absolute;
      display: block;
      height: 160px;
      width: 120px;
      opacity: 0.2;
      content: "";
      bottom: 0;
      right: 0; }
    .about .panel header {
      padding: 1em 0 1em; }
      .about .panel header:before {
        -webkit-border-radius: 6px 0 0 0;
        -moz-border-radius: 6px 0 0 0;
        border-radius: 6px 0 0 0;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
        background: transparent url(https://gladhval.dk/images/parallax/map.png) 0 0 no-repeat;
        background-size: 60.5px 82.5px;
        position: absolute;
        display: block;
        height: 150px;
        width: 110px;
        opacity: 0.8;
        content: "";
        left: 0;
        top: 0; }
    .about .panel h1 {
      font-weight: 100;
      color: #0AA4E1; }
      .about .panel h1 em {
        color: #1D1F27; }
    .about .panel p {
      margin: 0 8% 1.2em;
      position: relative;
      z-index: 1; }
      .about .panel p strong {
        font-weight: 700;
        color: #1D1F27; }
    .about .panel .social {
      margin: 1.4em 0 1em;
      position: relative;
      z-index: 1; }
    .about .panel .twitter-follow-button {
      display: inline-block;
      margin-bottom: 0.8em; }
      .about .panel .twitter-follow-button + .twitter-follow-button {
        margin-left: 0.4em; }
    .about .panel .links {
      zoom: 1;
      -webkit-box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      position: relative;
      z-index: 1; }
      .about .panel .links:after, .about .panel .links:before {
        display: table;
        content: ""; }
      .about .panel .links:after {
        clear: both; }
      .about .panel .links li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        float: left;
        width: 50%; }
        .about .panel .links li a {
          -webkit-border-radius: 0 0 0 5px;
          -moz-border-radius: 0 0 0 5px;
          border-radius: 0 0 0 5px;
          -webkit-background-clip: padding-box;
          -moz-background-clip: padding-box;
          background-clip: padding-box; }
        .about .panel .links li + li {
          border-left: 1px solid rgba(0, 0, 0, 0.2); }
          .about .panel .links li + li a {
            -webkit-border-radius: 0 0 5px 0;
            -moz-border-radius: 0 0 5px 0;
            border-radius: 0 0 5px 0;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            background-clip: padding-box; }
      .about .panel .links a {
        -webkit-font-smoothing: antialiased;
        font-size: 1.33333em;
        font-family: Verdana, sans-serif;
        text-transform: uppercase;
        font-weight: 600;
        padding: 1em 0 1.1em;
        display: block; }
        .about .panel .links a.github:before, .about .panel .links a.download:before {
          content: "";
          font-family: "icons";
          text-transform: none;
          font-weight: normal;
          font-style: normal;
          line-height: 1em;
          font-size: 0.8em;
          margin-right: 0.5em;
          margin-left: -0.8em;
          position: relative;
          top: -1px; }
        .about .panel .links a.download:before {
          content: "d"; }
        .about .panel .links a.github:before {
          margin-right: 0.4em;
          content: "g"; }

.toggle {
  display: none;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin: -24px;
  position: absolute;
  bottom: 11.6%;
  left: 50%; }



.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }


.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden; }

.layer {
  position: absolute; }
  .layer div {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }

    #sea .title {
   color: #fff;
  }

.title {
  font-size: 3.5em;
  text-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
  margin-top: -0.7em;
  font-weight: 600;
  position: absolute;
  width: 100%;
  top: 25%; }

 @media (max-width: 1450px) and (max-height:767px) {
  #sea .background, #over-there .background  {
    background: url(https://gladhval.dk/images/parallax/sea_1500.jpg) !important;
 }
}

@media (max-width: 767px) {
  #sea .background, #over-there .background  {
    background: url(https://gladhval.dk/images/parallax/sea_1200.jpg) !important;
 }
}

  #sea .background, #over-there .background  {
background: url(https://gladhval.dk/images/parallax/sea.jpg);
    background-repeat: no-repeat;
    background-position: 100% 0%; 
background-size: cover;  
bottom: 0 !important;
height: 110vh !important;

/* background: #00b6d9; */
  }
.background-1 {
    background: url(https://gladhval.dk/images/parallax/sea-background-1-1000.png);
    background-repeat: repeat;
    background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: -6% !important;
top: -2% !important;
height: 110vh !important;
width: 100%;
   }


  .layer div {
  
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
  
  }
  .background-2 {
      background: url(https://gladhval.dk/images/parallax/sea-background-2-1000.png);
          background-position-x: 0%;
          background-position-y: 0%;
          background-repeat: no-repeat;
          background-size: contain;
      position: absolute;
      left: -5% !important;
      bottom: -5% !important;
      height: 70vh !important;     
      width: 100%;      
      max-width: 90vw;      
      background-position: 0% 100%;
  }

  .background-3 {
    background: url(https://gladhval.dk/images/parallax/sea-background-3-1000.png);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;        
        left: 20% !important;        
        bottom: -4% !important;        
        height: 70vh !important;       
        width: 100%;       
        max-width: 90vw;       
        background-position: 100% 100%;
}
.fixedscene {
background: #fff;
width: 90vw;
height: 90vh;
max-height: 900px;
max-width: 1200px;
}

.background {
  background: #e7f7fd;
  bottom: 96px;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%; }

.lighthouse {
  -webkit-transform-origin: 50% 90%;
  -moz-transform-origin: 50% 90%;
  transform-origin: 50% 90%;
  -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  margin: 0px -64px;
  background-size: 128px 224px;
  height: 224px;
  width: 128px;
  background-image: url(https://gladhval.dk/images/parallax/lighthouse.png);
  background-repeat: no-repeat;
  bottom: 64px;
  position: absolute;
  right: 20%; }

.wave {
  background: transparent repeat-x;
  position: absolute;
  width: 300%;
  left: -100%; }
  .wave:after {
    background-color: #008185;
    position: absolute;
    display: block;
    content: "";
    height: 500px;
    width: 100%;
    top: 100%;
    left: 0; }
  .wave.plain {
    background-image: url(https://gladhval.dk/images/parallax/Boelger_1.png); }
  .wave.paint {
    background-image: url(https://gladhval.dk/images/parallax/Boelger_2.png); }

.light {
  margin: -120px -120px;
  background-size: 240px 240px;
  height: 240px;
  width: 240px;
  background-repeat: no-repeat;
  bottom: 112px;
  position: absolute;
  left: 50%; }
  .light.orange {
    background-image: url(https://gladhval.dk/images/parallax/light-sun.png); }
  .light.purple {
    background-image: url(https://gladhval.dk/images/parallax/light-sun.png); }
  .light.a {
    bottom: 80px;
    left: 20%; }
  .light.b {
    bottom: 80px;
    left: 30%; }
  .light.c {
    bottom: 112px;
    left: 45%; }
  .light.d {
    bottom: 96px;
    left: 60%; }
  .light.e {
    bottom: 112px;
    left: 75%; }
  .light.f {
    bottom: 64px;
    left: 80%; }
  .light.phase-1 {
    -webkit-animation: phase 20s 0.1s infinite linear;
    -moz-animation: phase 20s 0.1s infinite linear;
    animation: phase 20s 0.1s infinite linear; }
  .light.phase-2 {
    -webkit-animation: phase 18s 0.1s infinite linear;
    -moz-animation: phase 18s 0.1s infinite linear;
    animation: phase 18s 0.1s infinite linear; }
  .light.phase-3 {
    -webkit-animation: phase 16s 0.1s infinite linear;
    -moz-animation: phase 16s 0.1s infinite linear;
    animation: phase 16s 0.1s infinite linear; }
  .light.phase-4 {
    -webkit-animation: phase 14s 0.1s infinite linear;
    -moz-animation: phase 14s 0.1s infinite linear;
    animation: phase 14s 0.1s infinite linear; }
  .light.phase-5 {
    -webkit-animation: phase 12s 0.1s infinite linear;
    -moz-animation: phase 12s 0.1s infinite linear;
    animation: phase 12s 0.1s infinite linear; }
  .light.phase-6 {
    -webkit-animation: phase 10s 0.1s infinite linear;
    -moz-animation: phase 10s 0.1s infinite linear;
    animation: phase 10s 0.1s infinite linear; }

.rope {
  width: 120%;
  position: relative;
  left: -10%;
  position: relative; }

.hanger {
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: absolute; }
  .hanger.position-1 {
    top: 28%; }
  .hanger.position-2 {
    top: 46%; }
  .hanger.position-3 {
    top: 59%; }
  .hanger.position-4 {
    top: 66.5%; }
  .hanger.position-5 {
    top: 69.5%; }
  .hanger.position-6 {
    top: 66.5%; }
  .hanger.position-7 {
    top: 59%; }
  .hanger.position-8 {
    top: 46%; }
  .hanger.position-9 {
    top: 28%; }
  .hanger.position-1 {
    left: 10%; }
  .hanger.position-2 {
    left: 20%; }
  .hanger.position-3 {
    left: 30%; }
  .hanger.position-4 {
    left: 40%; }
  .hanger.position-5 {
    left: 50%; }
  .hanger.position-6 {
    left: 60%; }
  .hanger.position-7 {
    left: 70%; }
  .hanger.position-8 {
    left: 80%; }
  .hanger.position-9 {
    left: 90%; }

.board, .sea {
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  margin: 0px -140px;
  background-size: 296px 160px;
  height: 160px;
  width: 300px;
  background-repeat: no-repeat;
  position: absolute;
  top: -4px;
  left: 0; }
  .board.birds {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1480.000000pt' height='800.000000pt' viewBox='0 0 1480.000000 800.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3Cfilter id='filter1' x='0' y='0'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='-15' dy='-5' /%3E%3CfeGaussianBlur result='blurOut' in='offOut' stdDeviation='20' /%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal' /%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,800.000000) scale(0.100000,-0.100000)'%0Afill='%23fff' filter='url(%23filter1)' stroke='none'%3E%3Cpath d='M8510 7189 c-103 -10 -277 -44 -462 -89 -270 -67 -503 -186 -715%0A-363 -72 -61 -199 -191 -256 -262 -14 -18 -122 -172 -132 -189 -9 -16 -15 -15%0A-70 10 -204 91 -481 132 -701 104 -118 -14 -428 -88 -534 -126 -88 -31 -198%0A-85 -256 -125 -40 -27 -43 -28 -124 -20 -75 8 -248 1 -310 -13 -304 -65 -442%0A-105 -565 -161 -375 -171 -653 -552 -739 -1014 -9 -47 -17 -85 -19 -86 -1 -1%0A-72 -21 -157 -44 -312 -87 -429 -147 -588 -304 -212 -208 -322 -492 -322 -833%0A0 -282 82 -551 241 -786 71 -105 222 -260 319 -330 90 -63 228 -131 330 -162%0A235 -71 427 -59 752 46 53 17 103 28 111 25 8 -3 47 -71 86 -151 78 -162 143%0A-270 226 -381 338 -448 878 -676 1379 -580 120 23 235 66 417 154 186 91 262%0A137 367 223 l73 60 112 -46 c499 -201 917 -228 1334 -85 130 45 440 200 572%0A286 184 121 382 318 482 481 8 12 18 22 24 22 5 0 46 -37 90 -81 297 -301 711%0A-478 1122 -479 169 0 349 36 529 107 106 42 351 182 472 270 525 384 731 1108%0A500 1762 -101 288 -250 507 -492 726 -50 45 -124 100 -192 143 -167 104 -312%0A158 -609 227 -88 20 -163 40 -168 44 -7 7 -16 55 -37 206 -73 526 -319 994%0A-700 1333 -165 147 -400 291 -602 368 -244 93 -546 136 -788 113z' filter='url(%23filter1)' /%3E%3C/g%3E%3C/svg%3E%0A");    background-repeat: no-repeat;}
  .board.cloud-1 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1480.000000pt' height='800.000000pt' viewBox='0 0 1480.000000 800.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3Cfilter id='filter1' x='0' y='0'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='-15' dy='-5' /%3E%3CfeGaussianBlur result='blurOut' in='offOut' stdDeviation='20' /%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal' /%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,800.000000) scale(0.100000,-0.100000)'%0Afill='%23fff' filter='url(%23filter1)' stroke='none'%3E%3Cpath d='M8510 7189 c-103 -10 -277 -44 -462 -89 -270 -67 -503 -186 -715%0A-363 -72 -61 -199 -191 -256 -262 -14 -18 -122 -172 -132 -189 -9 -16 -15 -15%0A-70 10 -204 91 -481 132 -701 104 -118 -14 -428 -88 -534 -126 -88 -31 -198%0A-85 -256 -125 -40 -27 -43 -28 -124 -20 -75 8 -248 1 -310 -13 -304 -65 -442%0A-105 -565 -161 -375 -171 -653 -552 -739 -1014 -9 -47 -17 -85 -19 -86 -1 -1%0A-72 -21 -157 -44 -312 -87 -429 -147 -588 -304 -212 -208 -322 -492 -322 -833%0A0 -282 82 -551 241 -786 71 -105 222 -260 319 -330 90 -63 228 -131 330 -162%0A235 -71 427 -59 752 46 53 17 103 28 111 25 8 -3 47 -71 86 -151 78 -162 143%0A-270 226 -381 338 -448 878 -676 1379 -580 120 23 235 66 417 154 186 91 262%0A137 367 223 l73 60 112 -46 c499 -201 917 -228 1334 -85 130 45 440 200 572%0A286 184 121 382 318 482 481 8 12 18 22 24 22 5 0 46 -37 90 -81 297 -301 711%0A-478 1122 -479 169 0 349 36 529 107 106 42 351 182 472 270 525 384 731 1108%0A500 1762 -101 288 -250 507 -492 726 -50 45 -124 100 -192 143 -167 104 -312%0A158 -609 227 -88 20 -163 40 -168 44 -7 7 -16 55 -37 206 -73 526 -319 994%0A-700 1333 -165 147 -400 291 -602 368 -244 93 -546 136 -788 113z' filter='url(%23filter1)' /%3E%3C/g%3E%3C/svg%3E%0A");    background-repeat: no-repeat;
}
  .board.cloud-2 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1480.000000pt' height='800.000000pt' viewBox='0 0 1480.000000 800.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3Cfilter id='filter1' x='0' y='0'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='-15' dy='-5' /%3E%3CfeGaussianBlur result='blurOut' in='offOut' stdDeviation='20' /%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal' /%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,800.000000) scale(0.100000,-0.100000)'%0Afill='%23fff' filter='url(%23filter1)' stroke='none'%3E%3Cpath d='M8510 7189 c-103 -10 -277 -44 -462 -89 -270 -67 -503 -186 -715%0A-363 -72 -61 -199 -191 -256 -262 -14 -18 -122 -172 -132 -189 -9 -16 -15 -15%0A-70 10 -204 91 -481 132 -701 104 -118 -14 -428 -88 -534 -126 -88 -31 -198%0A-85 -256 -125 -40 -27 -43 -28 -124 -20 -75 8 -248 1 -310 -13 -304 -65 -442%0A-105 -565 -161 -375 -171 -653 -552 -739 -1014 -9 -47 -17 -85 -19 -86 -1 -1%0A-72 -21 -157 -44 -312 -87 -429 -147 -588 -304 -212 -208 -322 -492 -322 -833%0A0 -282 82 -551 241 -786 71 -105 222 -260 319 -330 90 -63 228 -131 330 -162%0A235 -71 427 -59 752 46 53 17 103 28 111 25 8 -3 47 -71 86 -151 78 -162 143%0A-270 226 -381 338 -448 878 -676 1379 -580 120 23 235 66 417 154 186 91 262%0A137 367 223 l73 60 112 -46 c499 -201 917 -228 1334 -85 130 45 440 200 572%0A286 184 121 382 318 482 481 8 12 18 22 24 22 5 0 46 -37 90 -81 297 -301 711%0A-478 1122 -479 169 0 349 36 529 107 106 42 351 182 472 270 525 384 731 1108%0A500 1762 -101 288 -250 507 -492 726 -50 45 -124 100 -192 143 -167 104 -312%0A158 -609 227 -88 20 -163 40 -168 44 -7 7 -16 55 -37 206 -73 526 -319 994%0A-700 1333 -165 147 -400 291 -602 368 -244 93 -546 136 -788 113z' filter='url(%23filter1)' /%3E%3C/g%3E%3C/svg%3E%0A");    background-repeat: no-repeat;}
  .board.cloud-3 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1480.000000pt' height='800.000000pt' viewBox='0 0 1480.000000 800.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3Cfilter id='filter1' x='0' y='0'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='-15' dy='-5' /%3E%3CfeGaussianBlur result='blurOut' in='offOut' stdDeviation='20' /%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal' /%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,800.000000) scale(0.100000,-0.100000)'%0Afill='%23fff' filter='url(%23filter1)' stroke='none'%3E%3Cpath d='M8510 7189 c-103 -10 -277 -44 -462 -89 -270 -67 -503 -186 -715%0A-363 -72 -61 -199 -191 -256 -262 -14 -18 -122 -172 -132 -189 -9 -16 -15 -15%0A-70 10 -204 91 -481 132 -701 104 -118 -14 -428 -88 -534 -126 -88 -31 -198%0A-85 -256 -125 -40 -27 -43 -28 -124 -20 -75 8 -248 1 -310 -13 -304 -65 -442%0A-105 -565 -161 -375 -171 -653 -552 -739 -1014 -9 -47 -17 -85 -19 -86 -1 -1%0A-72 -21 -157 -44 -312 -87 -429 -147 -588 -304 -212 -208 -322 -492 -322 -833%0A0 -282 82 -551 241 -786 71 -105 222 -260 319 -330 90 -63 228 -131 330 -162%0A235 -71 427 -59 752 46 53 17 103 28 111 25 8 -3 47 -71 86 -151 78 -162 143%0A-270 226 -381 338 -448 878 -676 1379 -580 120 23 235 66 417 154 186 91 262%0A137 367 223 l73 60 112 -46 c499 -201 917 -228 1334 -85 130 45 440 200 572%0A286 184 121 382 318 482 481 8 12 18 22 24 22 5 0 46 -37 90 -81 297 -301 711%0A-478 1122 -479 169 0 349 36 529 107 106 42 351 182 472 270 525 384 731 1108%0A500 1762 -101 288 -250 507 -492 726 -50 45 -124 100 -192 143 -167 104 -312%0A158 -609 227 -88 20 -163 40 -168 44 -7 7 -16 55 -37 206 -73 526 -319 994%0A-700 1333 -165 147 -400 291 -602 368 -244 93 -546 136 -788 113z' filter='url(%23filter1)' /%3E%3C/g%3E%3C/svg%3E%0A");    background-repeat: no-repeat;} 
  .board.cloud-4 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1480.000000pt' height='800.000000pt' viewBox='0 0 1480.000000 800.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3Cfilter id='filter1' x='0' y='0'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='-15' dy='-5' /%3E%3CfeGaussianBlur result='blurOut' in='offOut' stdDeviation='20' /%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal' /%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,800.000000) scale(0.100000,-0.100000)'%0Afill='%23fff' filter='url(%23filter1)' stroke='none'%3E%3Cpath d='M8510 7189 c-103 -10 -277 -44 -462 -89 -270 -67 -503 -186 -715%0A-363 -72 -61 -199 -191 -256 -262 -14 -18 -122 -172 -132 -189 -9 -16 -15 -15%0A-70 10 -204 91 -481 132 -701 104 -118 -14 -428 -88 -534 -126 -88 -31 -198%0A-85 -256 -125 -40 -27 -43 -28 -124 -20 -75 8 -248 1 -310 -13 -304 -65 -442%0A-105 -565 -161 -375 -171 -653 -552 -739 -1014 -9 -47 -17 -85 -19 -86 -1 -1%0A-72 -21 -157 -44 -312 -87 -429 -147 -588 -304 -212 -208 -322 -492 -322 -833%0A0 -282 82 -551 241 -786 71 -105 222 -260 319 -330 90 -63 228 -131 330 -162%0A235 -71 427 -59 752 46 53 17 103 28 111 25 8 -3 47 -71 86 -151 78 -162 143%0A-270 226 -381 338 -448 878 -676 1379 -580 120 23 235 66 417 154 186 91 262%0A137 367 223 l73 60 112 -46 c499 -201 917 -228 1334 -85 130 45 440 200 572%0A286 184 121 382 318 482 481 8 12 18 22 24 22 5 0 46 -37 90 -81 297 -301 711%0A-478 1122 -479 169 0 349 36 529 107 106 42 351 182 472 270 525 384 731 1108%0A500 1762 -101 288 -250 507 -492 726 -50 45 -124 100 -192 143 -167 104 -312%0A158 -609 227 -88 20 -163 40 -168 44 -7 7 -16 55 -37 206 -73 526 -319 994%0A-700 1333 -165 147 -400 291 -602 368 -244 93 -546 136 -788 113z' filter='url(%23filter1)' /%3E%3C/g%3E%3C/svg%3E%0A");    background-repeat: no-repeat;}

    /* Rød fisk */
 .creature-1 {
/* background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 450.449 450.449' style='enable-background:new 0 0 450.449 450.449;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%23CE3E3E;' d='M149.995,77.286L149.995,77.286c7.914-7.914,20.746-7.914,28.661,0l39.807,39.807l-28.661,28.661 l-39.807-39.807C142.08,98.033,142.08,85.201,149.995,77.286z'/%3E%3Cpath style='fill:%23CE3E3E;' d='M121.334,105.947L121.334,105.947c7.914-7.914,20.746-7.914,28.661,0l39.807,39.807 l-28.661,28.661l-39.807-39.807C113.42,126.694,113.42,113.862,121.334,105.947z'/%3E%3C/g%3E%3Cg%3E%3Cpath style='fill:%23CE3E3E;' d='M121.334,344.502L121.334,344.502c-7.914-7.914-7.914-20.746,0-28.661l39.807-39.807 l28.661,28.661l-39.807,39.807C142.08,352.416,129.249,352.416,121.334,344.502z'/%3E%3Cpath style='fill:%23CE3E3E;' d='M149.995,373.163L149.995,373.163c-7.914-7.914-7.914-20.746,0-28.661l39.807-39.807 l28.661,28.661l-39.807,39.807C170.741,381.077,157.909,381.077,149.995,373.163z'/%3E%3C/g%3E%3C/g%3E%3Cpath style='fill:%23F74B4B;' d='M438.213,254.761l-67.55,67.56l-22.93,22.93c-44.51,44.52-116.68,44.52-161.2,0l-120.03-120.03 l120.04-120.03c44.51-44.51,116.68-44.51,161.19,0l22.93,22.93l67.55,67.56c2.48,2.48,4.58,5.19,6.3,8.06l-17.07,17.07 c-3.32,3.32-4.98,7.67-4.98,12.02c0,4.36,1.66,8.71,4.98,12.03l22.88-22.88C451.233,233.721,447.203,245.781,438.213,254.761z'/%3E%3Cg%3E%3Cpath style='fill:%23CE3E3E;' d='M98.558,225.221L98.558,225.221l-31.538,0C30.005,225.221,0,195.216,0,158.202v0h31.538 C68.552,158.202,98.558,188.208,98.558,225.221z'/%3E%3Cpath style='fill:%23CE3E3E;' d='M98.558,225.221L98.558,225.221l-31.538,0C30.005,225.221,0,255.227,0,292.24v0h31.538 C68.552,292.24,98.558,262.235,98.558,225.221z'/%3E%3C/g%3E%3Cpath style='fill:%23CE3E3E;' d='M438.213,254.761l-67.55,67.56c-24.85-24.85-40.22-59.18-40.22-97.1s15.37-72.25,40.22-97.1 l67.55,67.56c2.48,2.48,4.58,5.19,6.3,8.06l-17.07,17.07c-3.32,3.32-4.98,7.67-4.98,12.02c0,4.36,1.66,8.71,4.98,12.03l22.88-22.88 C451.233,233.721,447.203,245.781,438.213,254.761z'/%3E%3Cg%3E%3Ccircle style='fill:%23FFFFFF;' cx='379.631' cy='225.221' r='22.238'/%3E%3Ccircle style='fill:%234D4D4D;' cx='379.631' cy='225.221' r='13.606'/%3E%3C/g%3E%3Cpath style='fill:%23CE3E3E;' d='M287.653,356.839h-70.398v0c0-30.017,24.334-54.351,54.351-54.351h45.402v24.996 C317.009,343.696,303.866,356.839,287.653,356.839z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat; */
position: absolute;
z-index: 9;
left: 40vw;
bottom: 120px;
transition: margin 700ms;
width: 400px;
height: 125px;
animation: swim2 20s linear infinite;
-webkit-animation: swim2 20s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;

-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Gul stribet fisk */
   .creature-2 {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 415.478 415.478' style='enable-background:new 0 0 415.478 415.478;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23F74B4B;' d='M122.45,138.479v99.39l-36.04,8.15c-3.44,0.78-6.84,1.11-10.14,1.04 c-26.3-0.51-46.71-26.26-38.7-53.22l4.91-16.54c0.97-3.28,1.43-6.56,1.43-9.78c0-18.2-14.75-34.08-34.16-34.08 c-5.39,0-9.75-4.36-9.75-9.75c0-5.38,4.36-9.75,9.75-9.75l60.01,13.07L122.45,138.479z'/%3E%3Cpath style='fill:%23F9D43A;' d='M405.728,312.93H140.966c-28.979,0-52.471-23.492-52.471-52.471v-125.27 c0-25.266-20.482-45.748-45.748-45.748h0c-5.385,0-9.75-4.365-9.75-9.75v0c0-5.384,4.365-9.75,9.75-9.75h217.926 c54.847,0,99.309,44.462,99.309,99.309v78.433c0,25.266,20.482,45.748,45.748,45.748h0c5.385,0,9.75,4.365,9.75,9.749v0 C415.478,308.565,411.113,312.93,405.728,312.93z'/%3E%3Cg%3E%3Ccircle style='fill:%23FFFFFF;' cx='329.382' cy='280.831' r='18.726'/%3E%3Ccircle style='fill:%234D4D4D;' cx='329.382' cy='280.831' r='11.457'/%3E%3C/g%3E%3Cpath style='fill:%23F74B4B;' d='M207.209,345.535h-48.914v-14.823c0-17.09,13.854-30.944,30.944-30.944h53.056v10.682 C242.294,329.827,226.586,345.535,207.209,345.535z'/%3E%3Cpath style='fill:%23D3B742;' d='M287.45,276.619L287.45,276.619c-21.539,0-39-17.461-39-39v-138h0c21.539,0,39,17.461,39,39V276.619 z'/%3E%3Cpath style='fill:%23D3B742;' d='M193.2,276.619L193.2,276.619c21.539,0,39-17.461,39-39v-138h0c-21.539,0-39,17.461-39,39V276.619z' /%3E%3Cpath style='fill:%23D3B742;' d='M176.95,276.619L176.95,276.619c-21.539,0-39-17.461-39-39v-138h0c21.539,0,39,17.461,39,39V276.619 z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
   position: absolute;
  z-index: 9;
  left: 40vw;
  bottom: 200px;
  width: 400px;
  height: 125px;
  animation: swim 20s  ease-in infinite;
  -webkit-animation: swim 20s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	-webkit-animation-timing-function: ease-in;

}
/* Blæksprutte */
.creature-3 {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 422.245 422.245' style='enable-background:new 0 0 422.245 422.245;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23F9993A;' d='M362.313,256.502c-6.881,0.126-12.265,6.03-12.265,12.913v13.484 c0,16.304-12.759,30.103-29.056,30.587c-16.934,0.503-30.87-13.127-30.87-29.949V203V79c0-43.63-35.369-79-79-79h0 c-43.63,0-79,35.369-79,79v124v79.9c0,16.304-12.759,30.103-29.056,30.587c-16.934,0.503-30.87-13.126-30.87-29.949l0-14.122 c0-6.882-5.384-12.786-12.265-12.913c-7.011-0.129-12.735,5.516-12.735,12.498v13.702c0,30.162,23.951,55.331,54.109,55.791 c30.696,0.469,55.817-24.365,55.817-54.956V213.75c0-5.937,4.813-10.75,10.75-10.75h0c5.937,0,10.75,4.813,10.75,10.75v152.911 c0,16.611-13.25,30.528-29.861,30.584c-16.513,0.055-29.975-13.317-30.065-29.797c-0.037-6.855-5.574-12.628-12.43-12.666 c-6.936-0.038-12.571,5.573-12.571,12.5c0,30.591,25.121,55.425,55.817,54.956c30.158-0.46,54.109-25.629,54.109-55.791V210.5 c0-4.142,3.358-7.5,7.5-7.5h0c4.142,0,7.5,3.358,7.5,7.5v155.898c0,30.333,24.2,55.611,54.532,55.845 c30.365,0.234,55.168-24.288,55.392-54.548c0.049-6.626-4.962-12.402-11.571-12.879c-7.323-0.528-13.428,5.256-13.428,12.466 c0,16.823-13.936,30.452-30.87,29.949c-16.297-0.484-29.056-14.283-29.056-30.587V213.75c0-5.937,4.813-10.75,10.75-10.75h0 c5.937,0,10.75,4.813,10.75,10.75v68.953c0,30.162,23.951,55.331,54.109,55.791c30.696,0.468,55.817-24.366,55.817-54.956V269 C375.048,262.019,369.324,256.374,362.313,256.502z'/%3E%3Cg%3E%3Ccircle style='fill:%23E2822B;' cx='260.119' cy='140' r='39.769'/%3E%3Ccircle style='fill:%23FFFFFF;' cx='260.119' cy='140' r='25'/%3E%3Cpath style='fill:%234D4D4D;' d='M260.119,155L260.119,155c-3.038,0-5.5-2.462-5.5-5.5v-19c0-3.038,2.462-5.5,5.5-5.5h0 c3.038,0,5.5,2.462,5.5,5.5v19C265.619,152.538,263.157,155,260.119,155z'/%3E%3C/g%3E%3Cg%3E%3Ccircle style='fill:%23E2822B;' cx='159.622' cy='140' r='39.769'/%3E%3Ccircle style='fill:%23FFFFFF;' cx='159.622' cy='140' r='25'/%3E%3Cpath style='fill:%234D4D4D;' d='M159.622,155L159.622,155c-3.038,0-5.5-2.462-5.5-5.5v-19c0-3.038,2.462-5.5,5.5-5.5h0 c3.038,0,5.5,2.462,5.5,5.5v19C165.122,152.538,162.66,155,159.622,155z'/%3E%3C/g%3E%3Ccircle style='fill:%23E2822B;' cx='248.122' cy='42.5' r='10'/%3E%3Ccircle style='fill:%23E2822B;' cx='157.122' cy='55.5' r='10'/%3E%3Ccircle style='fill:%23E2822B;' cx='265.119' cy='61.5' r='5'/%3E%3Ccircle style='fill:%23E2822B;' cx='169.122' cy='34.5' r='5'/%3E%3Ccircle style='fill:%23E2822B;' cx='245.122' cy='67.5' r='5'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  animation: float 6s ease-in-out infinite;
  position: absolute;
  z-index: 9;
  left: 40vw;
  bottom: 50px;
  width: 400px;
  height: 125px;
 }
/* Lilla Vandmand */
 .creature-4 {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 407.5 407.5' style='enable-background:new 0 0 407.5 407.5;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%23AF91E8;' d='M161.25,123v207.5c0,18.2-14.8,33-33,33s-33-14.8-33-33V296c0-5.8,4.7-10.5,10.5-10.5 s10.5,4.7,10.5,10.5v34.5c0,6.62,5.38,12,12,12s12-5.38,12-12V123c0-5.8,4.7-10.5,10.5-10.5S161.25,117.2,161.25,123z'/%3E%3Cpath style='fill:%23AF91E8;' d='M312.25,296v34.5c0,18.2-14.8,33-33,33s-33-14.8-33-33V123c0-5.8,4.7-10.5,10.5-10.5 s10.5,4.7,10.5,10.5v207.5c0,6.62,5.38,12,12,12s12-5.38,12-12V296c0-5.8,4.7-10.5,10.5-10.5S312.25,290.2,312.25,296z'/%3E%3Cpath style='fill:%23AF91E8;' d='M196.58,167v230c0,5.8-4.7,10.5-10.5,10.5c-5.8,0-10.5-4.7-10.5-10.5V167c0-5.8,4.7-10.5,10.5-10.5 C191.88,156.5,196.58,161.2,196.58,167z'/%3E%3Cpath style='fill:%23AF91E8;' d='M231.92,167v230c0,5.8-4.7,10.5-10.5,10.5c-5.8,0-10.5-4.7-10.5-10.5V167c0-5.8,4.7-10.5,10.5-10.5 C227.22,156.5,231.92,161.2,231.92,167z'/%3E%3C/g%3E%3Cpath style='fill:%238369C4;' d='M96.492,181.102c0,6.719,8.4,9.808,12.719,4.661c3.599-4.288,6.935-8.892,14.1-8.892 c13.409,0,13.409,16.129,26.818,16.129c13.407,0,13.407-16.129,26.815-16.129c13.408,0,13.408,16.129,26.816,16.129 c13.407,0,13.407-16.129,26.814-16.129c13.407,0,13.407,16.129,26.814,16.129c13.405,0,13.405-16.129,26.811-16.129 c7.159,0,10.494,4.6,14.09,8.887c4.318,5.148,12.72,2.059,12.72-4.661V143H96.492V181.102z'/%3E%3Cpath style='fill:%23C4A4F7;' d='M339.905,151c8.309,0,14.906-7.145,14.068-15.411C346.253,59.433,281.942,0,203.75,0 S61.247,59.433,53.527,135.589C52.689,143.855,59.286,151,67.595,151H339.905z'/%3E%3Cpath style='fill:%23C8AFF9;' d='M67.46,137c7.035-68.99,65.474-123,136.29-123s129.255,54.01,136.29,123H67.46z'/%3E%3Ccircle style='fill:%238369C4;' cx='136.25' cy='91.5' r='16.5'/%3E%3Ccircle style='fill:%238369C4;' cx='270.25' cy='106.5' r='20.5'/%3E%3Ccircle style='fill:%238369C4;' cx='213.334' cy='57.083' r='14.084'/%3E%3Ccircle style='fill:%238369C4;' cx='186.208' cy='97.458' r='8.542'/%3E%3Ccircle style='fill:%238369C4;' cx='269.75' cy='66' r='8.542'/%3E%3Crect x='96.492' y='151' style='fill:%236B58A8;' width='214.516' height='9.667'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat; 
  position: absolute;
  z-index: 9;
  animation: flydevandmand 50s ease-in-out infinite;
  right: 15vw;
  bottom: 80px;
  width: 400px;
  height: 125px;




}
/* Søstjerne */
.creature-5 {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 402.156 402.156' style='enable-background:new 0 0 402.156 402.156;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23269DC6;' d='M92.218,118.002h44.771L245.9,32.534V0h-29.708C149.802,0,95.421,52.392,92.218,118.002z'/%3E%3Cpath style='fill:%2351CAF4;' d='M310.259,86.671l42.8,5.34V54.917l-40.244,5.021c-10.875,1.357-21.71-3.557-27.471-12.881 c-8.163-13.214-22.77-22.021-39.445-22.021h-29.708c-54.726,0-99.09,44.364-99.09,99.09v14.534 c0,54.675-20.396,106.557-53.835,149.813c-8.884,11.492-14.17,25.907-14.17,41.556v4.122c0,37.558,30.447,68.005,68.005,68.005 h2.061c37.558,0,68.005-30.447,68.005-68.005c0,0-10.925,33.096-54.61,30.911c-41.215-2.061-50.489-70.066,34.003-70.066h57.638 c48.049,0,88.972-37.363,90.679-85.382c1.792-50.412-38.543-91.844-88.555-91.844h19.577c15.343,0,28.927-7.461,37.355-18.948 C289.554,90.238,299.693,85.353,310.259,86.671z'/%3E%3Cpolygon style='fill:%23269DC6;' points='73.104,237.836 142.168,222.462 142.168,177.57 73.104,162.196 '/%3E%3Cg%3E%3Ccircle style='fill:%23FFFFFF;' cx='239.727' cy='75.7' r='20.466'/%3E%3Ccircle style='fill:%234D4D4D;' cx='239.727' cy='75.7' r='12.144'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  animation: hval 15s ease-in-out infinite;
  position: absolute;
  z-index: 9;
  left: 2vw;
  top: 250px;
  width: 400px;
  height: 125px;
}

 .creature-6 {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 442.5 442.5' style='enable-background:new 0 0 442.5 442.5;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%2348E0AA;' d='M228.457,442.5h61.242V222.354c0-6.632,5.376-12.008,12.008-12.008h16.811 c16.911,0,30.621-13.709,30.621-30.621v0c0-16.911-13.709-30.621-30.621-30.621h-16.811c-40.455,0-73.25,32.795-73.25,73.25V442.5z '/%3E%3Ccircle style='fill:%2347A583;' cx='318.878' cy='179.965' r='19.573'/%3E%3Cpath style='fill:%2342CC97;' d='M198.391,442.5h61.242V73.25c0-6.632,5.376-12.008,12.008-12.008h16.811 c16.911,0,30.621-13.709,30.621-30.621v0C319.073,13.709,305.364,0,288.452,0l-16.811,0c-40.455,0-73.25,32.795-73.25,73.25V442.5z '/%3E%3Ccircle style='fill:%2347A583;' cx='288.813' cy='30.861' r='19.573'/%3E%3Cpath style='fill:%2353F2BD;' d='M233.815,442.5h-61.242V145.299c0-6.632-5.376-12.008-12.008-12.008h-16.811 c-16.911,0-30.621-13.709-30.621-30.621v0c0-16.911,13.709-30.621,30.621-30.621h16.811c40.455,0,73.25,32.795,73.25,73.25V442.5z' /%3E%3Ccircle style='fill:%2347A583;' cx='143.394' cy='102.91' r='19.573'/%3E%3Cpath style='fill:%2348E0AA;' d='M197.791,442.5h-61.242V282.792c0-6.632-5.376-12.008-12.008-12.008H107.73 c-16.911,0-30.621-13.709-30.621-30.621v0c0-16.911,13.709-30.621,30.621-30.621h16.811c40.455,0,73.25,32.795,73.25,73.25V442.5z' /%3E%3Ccircle style='fill:%2347A583;' cx='107.37' cy='240.403' r='19.573'/%3E%3Cpath style='fill:%2342CC97;' d='M277.732,442.5V271.372c0-16.911-13.709-30.621-30.621-30.621h0 c-16.911,0-30.621,13.709-30.621,30.621V442.5'/%3E%3Ccircle style='fill:%2347A583;' cx='247.351' cy='271.012' r='19.573'/%3E%3Cpath style='fill:%2342CC97;' d='M365.391,442.5V330.458c0-16.911-13.709-30.621-30.621-30.621h0 c-16.911,0-30.621,13.709-30.621,30.621V442.5'/%3E%3Ccircle style='fill:%2347A583;' cx='335.01' cy='330.098' r='19.573'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
}

.swing-1 {
  -webkit-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-2 {
  -webkit-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-3 {
  -webkit-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-4 {
  -webkit-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-5 {
  -webkit-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.wave.depth-10 {
  -webkit-animation: wave 8s 0.1s infinite linear;
  -moz-animation: wave 8s 0.1s infinite linear;
  animation: wave 8s 0.1s infinite linear;
  bottom: 140px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 16px; }
  .wave.depth-10:after {
    height: 144px; }

.rope.depth-10 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  top: 20%; }
  .rope.depth-10 .hanger {
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    transform: scale(0.25); }

.wave.depth-20 {
  -webkit-animation: wave 7.55556s 0.1s infinite linear;
  -moz-animation: wave 7.55556s 0.1s infinite linear;
  animation: wave 7.55556s 0.1s infinite linear;
  bottom: 120px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 32px; }
  .wave.depth-20:after {
    height: 128px; }

.rope.depth-20 {
  -webkit-transform: scale(1.02778);
  -moz-transform: scale(1.02778);
  transform: scale(1.02778);
  top: 16.66667%; }
  .rope.depth-20 .hanger {
    -webkit-transform: scale(0.27778);
    -moz-transform: scale(0.27778);
    transform: scale(0.27778); }

.wave.depth-30 {
  -webkit-animation: wave 7.11111s 0.1s infinite linear;
  -moz-animation: wave 7.11111s 0.1s infinite linear;
  animation: wave 7.11111s 0.1s infinite linear;
  bottom: 100px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 48px; }
  .wave.depth-30:after {
    height: 112px; }

.rope.depth-30 {
  -webkit-transform: scale(1.05556);
  -moz-transform: scale(1.05556);
  transform: scale(1.05556);
  top: 13.33333%; }
  .rope.depth-30 .hanger {
    -webkit-transform: scale(0.30556);
    -moz-transform: scale(0.30556);
    transform: scale(0.30556); }

.wave.depth-40 {
  -webkit-animation: wave 6.66667s 0.1s infinite linear;
  -moz-animation: wave 6.66667s 0.1s infinite linear;
  animation: wave 6.66667s 0.1s infinite linear;
  bottom: 80px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 64px; }
  .wave.depth-40:after {
    height: 96px; }

.rope.depth-40 {
  -webkit-transform: scale(1.08333);
  -moz-transform: scale(1.08333);
  transform: scale(1.08333);
  top: 10%; }
  .rope.depth-40 .hanger {
    -webkit-transform: scale(0.33333);
    -moz-transform: scale(0.33333);
    transform: scale(0.33333); }

.wave.depth-50 {
  -webkit-animation: wave 6.22222s 0.1s infinite linear;
  -moz-animation: wave 6.22222s 0.1s infinite linear;
  animation: wave 6.22222s 0.1s infinite linear;
  bottom: 60px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 80px; }
  .wave.depth-50:after {
    height: 80px; }

.rope.depth-50 {
  -webkit-transform: scale(1.11111);
  -moz-transform: scale(1.11111);
  transform: scale(1.11111);
  top: 6.66667%; }
  .rope.depth-50 .hanger {
    -webkit-transform: scale(0.36111);
    -moz-transform: scale(0.36111);
    transform: scale(0.36111); }

.wave.depth-60 {
  -webkit-animation: wave 5.77778s 0.1s infinite linear;
  -moz-animation: wave 5.77778s 0.1s infinite linear;
  animation: wave 5.77778s 0.1s infinite linear;
  bottom: 40px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 96px; }
  .wave.depth-60:after {
    height: 64px; }

.rope.depth-60 {
  -webkit-transform: scale(1.13889);
  -moz-transform: scale(1.13889);
  transform: scale(1.13889);
  top: 3.33333%; }
  .rope.depth-60 .hanger {
    -webkit-transform: scale(0.38889);
    -moz-transform: scale(0.38889);
    transform: scale(0.38889); }

.wave.depth-70 {
  -webkit-animation: wave 5.33333s 0.1s infinite linear;
  -moz-animation: wave 5.33333s 0.1s infinite linear;
  animation: wave 5.33333s 0.1s infinite linear;
  bottom: 20px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 112px; }
  .wave.depth-70:after {
    height: 48px; }

.rope.depth-70 {
  -webkit-transform: scale(1.16667);
  -moz-transform: scale(1.16667);
  transform: scale(1.16667);
  top: 0%; }
  .rope.depth-70 .hanger {
    -webkit-transform: scale(0.41667);
    -moz-transform: scale(0.41667);
    transform: scale(0.41667); }

.wave.depth-80 {
  -webkit-animation: wave 4.88889s 0.1s infinite linear;
  -moz-animation: wave 4.88889s 0.1s infinite linear;
  animation: wave 4.88889s 0.1s infinite linear;
  bottom: -80px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 250px;
  transition: all .5s;
 }
  .wave.depth-80:after {
    height: 32px; }

.rope.depth-80 {
  -webkit-transform: scale(1.19444);
  -moz-transform: scale(1.19444);
  transform: scale(1.19444);
  top: -3.33333%; }
  .rope.depth-80 .hanger {
    -webkit-transform: scale(0.44444);
    -moz-transform: scale(0.44444);
    transform: scale(0.44444); }

.wave.depth-90 {
  -webkit-animation: wave 4.44444s 0.1s infinite linear;
  -moz-animation: wave 4.44444s 0.1s infinite linear;
  animation: wave 4.44444s 0.1s infinite linear;
  bottom: -100px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 244px; }
  .wave.depth-90:after {
    height: 16px; }

.rope.depth-90 {
  -webkit-transform: scale(1.22222);
  -moz-transform: scale(1.22222);
  transform: scale(1.22222);
  top: -6.66667%; }
  .rope.depth-90 .hanger {
    -webkit-transform: scale(0.47222);
    -moz-transform: scale(0.47222);
    transform: scale(0.47222); }

.wave.depth-100 {
  -webkit-animation: wave 4s 0.1s infinite linear;
  -moz-animation: wave 4s 0.1s infinite linear;
  animation: wave 4s 0.1s infinite linear;
  bottom: -220px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 101%;
  height: 360px; }
  .wave.depth-100:after {
    height: 0px; }

.rope.depth-100 {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  transform: scale(1.25);
  top: -10%; }
  .rope.depth-100 .hanger {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5); }

a, button {
  -webkit-transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }

.cross, .x, .y {
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }

.about .panel,
.about .cables {
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); }

html.mouse a:hover, html.mouse button:hover {
  -webkit-transition: color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
html.mouse a:hover {
  color: #ff755a; }
html.mouse button:hover {
  background-color: #0AA4E1;
  color: #FFFFFF; }
html.mouse .toggle:hover .x, html.mouse .toggle:hover .y {
  background-color: #FFFFFF; }
html.mouse .links a:hover {
  background-color: #D92400;
  color: #FFFFFF; }

html.touch a.tap, html.touch button.tap {
  -webkit-transition: color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.touch a.tap {
  color: #ff755a; }
html.touch button.tap {
  background-color: #D92400;
  color: #FFFFFF; }
html.touch .toggle.tap .x, html.touch .toggle.tap .y {
  background-color: #FFFFFF; }
html.touch .links a.tap {
  background-color: #D92400;
  color: #FFFFFF; }



  /* Sea Scene */

  .button--over-there {

    position: absolute;
    left: 4em;
    bottom: 4em;
  }

  .bubbles-outer
{
    width: 100%;
    text-align: center;
}
#bubbles 
{

}
  #sea {
    
  }

  .bubbles {
    width: 100%;
    height: auto;
  }
  .bubbles circle {
    stroke: white;
    fill: none;
  }
  .bubbles > g > g:nth-of-type(3n) circle {
    stroke: #87f5fb;
    background: #fff;
  }
  .bubbles > g > g:nth-of-type(4n) circle {
    stroke: #8be8cb;
    background: #fff;
  }
  
  .bubbles-large {
    overflow: visible;
  }
  .bubbles-large > g {
    -webkit-transform: translateY(2048px);
            transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
  }
  .bubbles-large g:nth-of-type(1) {
    -webkit-animation: up 6.5s infinite;
            animation: up 6.5s infinite;
  }
  .bubbles-large g:nth-of-type(1) g {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  .bubbles-large g:nth-of-type(1) circle {
    -webkit-animation: wobble 13s infinite ease-in-out;
            animation: wobble 13s infinite ease-in-out;
  }
  .bubbles-large g:nth-of-type(2) {
    -webkit-animation: up 5.25s 250ms infinite;
            animation: up 5.25s 250ms infinite;
  }
  .bubbles-large g:nth-of-type(2) g {
    -webkit-transform: translateX(450px);
            transform: translateX(450px);
  }
  .bubbles-large g:nth-of-type(2) circle {
    -webkit-animation: wobble 13s infinite ease-in-out;
            animation: wobble 13s infinite ease-in-out;
  }
  .bubbles-large g:nth-of-type(3) {
    -webkit-animation: up 16s 750ms infinite;
            animation: up 16s 750ms infinite;
  }
  .bubbles-large g:nth-of-type(3) g {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  .bubbles-large g:nth-of-type(3) circle {
    -webkit-animation: wobble 13s infinite ease-in-out;
            animation: wobble 13s infinite ease-in-out;
  }
  .bubbles-large g:nth-of-type(4) {
    -webkit-animation: up 15.5s 1.5s infinite;
            animation: up 15.5s 1.5s infinite;
  }
  .bubbles-large g:nth-of-type(4) g {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
  }
  .bubbles-large g:nth-of-type(4) circle {
    -webkit-animation: wobble 13s infinite ease-in-out;
            animation: wobble 13s infinite ease-in-out;
  }
  .bubbles-large g:nth-of-type(5) {
    -webkit-animation: up 16.5s 4s infinite;
            animation: up 16.5s 4s infinite;
  }
  .bubbles-large g:nth-of-type(5) g {
    -webkit-transform: translateX(675px);
            transform: translateX(675px);
  }
  .bubbles-large g:nth-of-type(5) circle {
    -webkit-animation: wobble 13s infinite ease-in-out;
            animation: wobble 13s infinite ease-in-out;
  }
  
  .bubbles-small {
    overflow: visible;
  }
  .bubbles-small {
    -webkit-transform: translateY(2048px);
            transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
  }
  .bubbles-small g circle {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  .bubbles-small g:nth-of-type(1) {
    -webkit-animation: up 5.25s infinite;
            animation: up 5.25s infinite;
  }
  .bubbles-small g:nth-of-type(1) g {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  .bubbles-small g:nth-of-type(1) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
            animation: wobble 3s infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(2) {
    -webkit-animation: up 5.75s infinite;
            animation: up 5.75s infinite;
  }
  .bubbles-small g:nth-of-type(2) g {
    -webkit-transform: translateX(750px);
            transform: translateX(750px);
  }
  .bubbles-small g:nth-of-type(2) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
            animation: wobble 3s infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(3) {
    -webkit-animation: up 5.25s 250ms infinite;
            animation: up 5.25s 250ms infinite;
  }
  .bubbles-small g:nth-of-type(3) g {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  .bubbles-small g:nth-of-type(3) circle {
    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
            animation: wobble 3s 250ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(4) {
    -webkit-animation: up 5.75s 325ms infinite;
            animation: up 5.75s 325ms infinite;
  }
  .bubbles-small g:nth-of-type(4) g {
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  .bubbles-small g:nth-of-type(4) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
            animation: wobble 3s 325ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(5) {
    -webkit-animation: up 6s 125ms infinite;
            animation: up 6s 125ms infinite;
  }
  .bubbles-small g:nth-of-type(5) g {
    -webkit-transform: translateX(350px);
            transform: translateX(350px);
  }
  .bubbles-small g:nth-of-type(5) circle {
    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
            animation: wobble 3s 250ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(6) {
    -webkit-animation: up 5.13s 250ms infinite;
            animation: up 5.13s 250ms infinite;
  }
  .bubbles-small g:nth-of-type(6) g {
    -webkit-transform: translateX(650px);
            transform: translateX(650px);
  }
  .bubbles-small g:nth-of-type(6) circle {
    -webkit-animation: wobble 3s 125ms infinite ease-in-out;
            animation: wobble 3s 125ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(7) {
    -webkit-animation: up 6.25s 350ms infinite;
            animation: up 6.25s 350ms infinite;
  }
  .bubbles-small g:nth-of-type(7) g {
    -webkit-transform: translateX(480px);
            transform: translateX(480px);
  }
  .bubbles-small g:nth-of-type(7) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
            animation: wobble 3s 325ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(8) {
    -webkit-animation: up 7s 200ms infinite;
            animation: up 7s 200ms infinite;
  }
  .bubbles-small g:nth-of-type(8) g {
    -webkit-transform: translateX(330px);
            transform: translateX(330px);
  }
  .bubbles-small g:nth-of-type(8) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
            animation: wobble 3s 325ms infinite ease-in-out;
  }
  .bubbles-small g:nth-of-type(9) {
    -webkit-animation: up 6.25s 233ms infinite;
            animation: up 6.25s 233ms infinite;
  }
  .bubbles-small g:nth-of-type(9) g {
    -webkit-transform: translateX(230px);
            transform: translateX(230px);
  }
  .bubbles-small g:nth-of-type(9) circle {
    -webkit-animation: wobble 3s 275ms infinite ease-in-out;
            animation: wobble 3s 275ms infinite ease-in-out;
  }
  .bubbles-small  {
    -webkit-animation: up 6s 900ms infinite;
            animation: up 6s 900ms infinite;
  }
  .bubbles-small g:nth-of-type(10) g {
    -webkit-transform: translateX(730px);
            transform: translateX(730px);
  }
  .bubbles-small g:nth-of-type(10) circle {
    -webkit-animation: wobble 2s 905ms infinite ease-in-out;
            animation: wobble 2s 905ms infinite ease-in-out;
  }
  
  @-webkit-keyframes wobble {
    33% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    66% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }
  
  @keyframes wobble {
    33% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    66% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }
  @-webkit-keyframes up {
    0% {
      opacity: 0;
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-1024px);
              transform: translateY(-1024px);
    }
  }
  @keyframes up {
    0% {
      opacity: 0;
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-1024px);
              transform: translateY(-1024px);
    }
  }
  

  /* Media Queries */


  @media (max-width:499px) {
    #haj {
      bottom: 80px;
      right: 0%;
  }
    .haj { 
      height: 150px;
      transition: all .5s;
      }
      #hval-sub, #hval-subII {
        max-width: 180px;
        width: 100%;
    }
      #hval {
        bottom: 40px;
        left: 0%;
      }
      .hval { 
        height: 150px;
        transition: all .5s;
        }
        .title { 
top: 150px !important;
        }
        .creature-1 { 
height: 80px !important;
        }

        .creature-2, .creature-3, .creature-4, .creature-5  { 
        background-size: 50% 50%;
      }
    }
  @media (max-height:480px){
    #haj {
      bottom: 80px;
      right: 0%;
  }
    .haj { 
      height: 150px;
      transition: all .5s;
      }

      #hval-sub, #hval-subII {
        max-width: 200px;
        width: 100%;
    }
      #hval {
        bottom: 40px;
        left: 0%;
      }
      .hval { 
        height: 150px;
        transition: all .5s;
        }
        .board {
          margin-top: -35vh !important;
        }
        .title { 
          top: 100px;
                  }
                  .creature-1 { 
                    height: 80px !important;
                            }
                    
                            .creature-2, .creature-3, .creature-4, .creature-5  { 
                            background-size: 50% 50%;
                          }
      }
  
 

      @media (min-height: 400px) and (max-width:599px) {
        .background-1 {
          left: -30% !important;
        }
      }

@media (min-width: 500px) and (max-width:599px) {
  #haj {
      bottom: 80px;
      right: 0%;
  }  
  #hval {
    bottom: 40px;
    left: 0%;
  }

  #hval-sub, #hval-subII {
    max-width: 250px;
    width: 100%;
}

  .haj { 
    height: 200px;
    transition: all .5s;
    }

  .hval { 
  height: 200px;
  transition: all .5s;
  }
  .title { 
    top: 30% !important;
            }
            .creature-1 { 
              height: 80px !important;
                      }
              
                      .creature-2, .creature-3, .creature-4, .creature-5  { 
                      background-size: 50% 50%;
                    }
}
  
  @media (min-width: 600px) and (max-width:991px) {
  #haj {
      bottom:115px;
      right: 40%;
      transition: all .5s;
  }
  #hval {
    bottom: 15px;
    left: 25%;
    transition: all .5s;
  }
  .haj { 
    height: 250px;
    transition: all .5s;
    }

  .hval { 
  height: 250px;
  transition: all .5s;
  }
  .creature-1 { 
    height: 100px !important;
            }
    
            .creature-2, .creature-3, .creature-4, .creature-5  { 
            background-size: 50% 70%;
          }
  }
  
  @media (min-width: 992px) and (max-width:1199px) {
  #haj {
    transition: all .5s;
      bottom: 130px;
  }
  #hval {
    bottom: 10px;
    transition: all .5s;
  }
  .haj { 
    height: 250px;
    transition: all .5s;
    }

  .hval { 
  height: 250px;
  transition: all .5s;
  }
  }
  
  @media (min-width: 1200px) and (max-width: 1440px) {
   #haj {
      bottom: 160px;
      transition: all .5s;
  }
  #hval {
    bottom: 10px;
    transition: all .5s;
  }
  .haj { 
    height: 320px;
    transition: all .5s;
    }

  .hval { 
  height: 320px;
  transition: all .5s;
  }
  }
  
  @media (min-width: 1441px) {
   #haj {
      bottom: 180px;
      transition: all .5s;
  }
  #hval {
    transition: all .5s;
    bottom: 10px;
  }
  .haj { 
    height: 320px;
    transition: all .5s;
    }

  .hval { 
  height: 320px;
  transition: all .5s;
  }
  }
  

 @media (min-width: 1600px) {
  #hval {
    transition: all .5s;
    bottom: 20px;
  }

  #haj {
    bottom: 90px;
    transition: all .5s;
}


}

  @media (min-width: 1400px) {
    #sea .background, #over-there .background {
      background-size: 125vw auto !important;      
      background-position: 130% 0% !important;
  }  }


@media all and (min-width: 400px) {
  html {
    font-size: 12px; }
/*
  .wrapper {
    min-height: 360px; }*/

  .about .panel header:before {
    background-size: 66px 90px; }

  .toggle {
    bottom: 12%; }

  .prompt .panel img {
    width: 80px; }

  .scene {
    min-height: 100vh; }

   

  .rope.depth-10 {
    top: 10%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      transform: scale(0.3); }

  .rope.depth-20 {
    top: 6.11111%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.33333);
      -moz-transform: scale(0.33333);
      transform: scale(0.33333); }

  .rope.depth-30 {
    top: 2.22222%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.36667);
      -moz-transform: scale(0.36667);
      transform: scale(0.36667); }

  .rope.depth-40 {
    top: -1.66667%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.4);
      -moz-transform: scale(0.4);
      transform: scale(0.4); }

  .rope.depth-50 {
    top: -5.55556%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.43333);
      -moz-transform: scale(0.43333);
      transform: scale(0.43333); }

  .rope.depth-60 {
    top: -9.44444%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.46667);
      -moz-transform: scale(0.46667);
      transform: scale(0.46667); }

  .rope.depth-70 {
    top: -13.33333%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .rope.depth-80 {
    top: -17.22222%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.53333);
      -moz-transform: scale(0.53333);
      transform: scale(0.53333); }

  .rope.depth-90 {
    top: -21.11111%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.56667);
      -moz-transform: scale(0.56667);
      transform: scale(0.56667); }

  .rope.depth-100 {
    top: -25%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6); } }


      @media all and (max-width: 599px) {
        .wave.depth-80 {
          bottom: -30px;
          margin: 0px 0px;
          background-position: center bottom;
          background-size: auto 101%;
          height: 192px; }

.wave.depth-100 {
    bottom: -140px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 250px;
}
      }

@media all and (min-width: 600px) {
  html {
    font-size: 15px; }

  button {
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    height: 56px;
    width: 56px; }

  footer {
    padding: 0 10px 20px; }
    footer .fb-like,
    footer .twitter-share-button {
      position: static;
      bottom: auto;
      right: auto; }

  .center {
    max-width: 440px; }

  .about .panel:after {
    background-size: 252px 252px;
    height: 180px;
    width: 140px; }
  .about .panel header:before {
    background-size: 82.5px 112.5px; }



  .toggle {
    margin: -28px;
    bottom: 15%; }

  .title {
    font-size: 3.46667em; }

  .background {
    bottom: 96px; }

  .lighthouse {
    margin: 0px -96px;
    background-size: 192px 336px;
    height: 336px;
    width: 192px;
    bottom: 128px; }

  .light {
    margin: -140px -140px;
    background-size: 280px 280px;
    height: 280px;
    width: 280px; }
    .light.a {
      bottom: 144px; }
    .light.b {
      bottom: 144px; }
    .light.c {
      bottom: 192px; }
    .light.d {
      bottom: 160px; }
    .light.e {
      bottom: 192px; }
    .light.f {
      bottom: 128px; }

  .wave.depth-10 {
    bottom: 210px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 24px; }
    .wave.depth-10:after {
      height: 216px; }

  .rope.depth-10 {
    top: 20%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .wave.depth-20 {
    bottom: 180px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 48px; }
    .wave.depth-20:after {
      height: 192px; }

  .rope.depth-20 {
    top: 16.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.55556);
      -moz-transform: scale(0.55556);
      transform: scale(0.55556); }

  .wave.depth-30 {
    bottom: 150px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 72px; }
    .wave.depth-30:after {
      height: 168px; }

  .rope.depth-30 {
    top: 13.33333%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.61111);
      -moz-transform: scale(0.61111);
      transform: scale(0.61111); }

  .wave.depth-40 {
    bottom: 120px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 96px; }
    .wave.depth-40:after {
      height: 144px; }

  .rope.depth-40 {
    top: 10%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.66667);
      -moz-transform: scale(0.66667);
      transform: scale(0.66667); }

  .wave.depth-50 {
    bottom: 90px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 120px; }
    .wave.depth-50:after {
      height: 120px; }

  .rope.depth-50 {
    top: 6.66667%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.72222);
      -moz-transform: scale(0.72222);
      transform: scale(0.72222); }

  .wave.depth-60 {
    bottom: 50px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 144px; }
    .wave.depth-60:after {
      height: 120px; }

  .rope.depth-60 {
    top: 3.33333%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.77778);
      -moz-transform: scale(0.77778);
      transform: scale(0.77778); }

  .wave.depth-70 {
    bottom: 30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 168px; }
    .wave.depth-70:after {
      height: 72px; }

  .rope.depth-70 {
    top: 0%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.83333);
      -moz-transform: scale(0.83333);
      transform: scale(0.83333); }

  .wave.depth-80 {
    bottom: -20px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 192px; }
    .wave.depth-80:after {
      height: 48px; }

  .rope.depth-80 {
    top: -3.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.88889);
      -moz-transform: scale(0.88889);
      transform: scale(0.88889); }

    .wave.depth-90 {
      bottom: -35px;
      margin: 0px 0px;
      background-position: center bottom;
      background-size: auto 101%;
      height: 245px; }

    .wave.depth-90:after {
      height: 24px; }

  .rope.depth-90 {
    top: -6.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.94444);
      -moz-transform: scale(0.94444);
      transform: scale(0.94444); }

      

  .wave.depth-100 {
    bottom: -140px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 250px; }
    .wave.depth-100:after {
      height: 0px; }

  .rope.depth-100 {
    top: -10%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1); } }


@media all and (min-width: 900px) {
  html {
    font-size: 15px; }

  .center {
    max-width: 560px; }

  .about .panel:after {
    background-size: 280px 280px;
    height: 200px;
    width: 160px; }
  .about .panel header:before {
    background-size: 82.5px 112.5px; }
  .about .panel .links a {
    padding: 1.2em 0 1.3em; }

  .toggle {
    margin: -24px;
    bottom: 12%; }

  .title {
    font-size: 3.46667em; }

  .background {
    bottom: 160px; }

  .lighthouse {
    margin: 0px -104px;
    background-size: 208px 364px;
    height: 364px;
    width: 208px;
    bottom: 128px; }

  .light {
    margin: -160px -160px;
    background-size: 320px 320px;
    height: 320px;
    width: 320px; }
    .light.a {
      bottom: 112px;
      left: 15%; }
    .light.b {
      bottom: 160px; }
    .light.c {
      bottom: 208px; }
    .light.d {
      bottom: 176px; }
    .light.e {
      bottom: 208px; }
    .light.f {
      bottom: 128px;
      left: 85%; }

  .wave.depth-10 {
    bottom: 238px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 27px; }
    .wave.depth-10:after {
      height: 244.8px; }

  .rope.depth-10 {
    top: 10%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .wave.depth-20 {
    bottom: 204px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 54px; }
    .wave.depth-20:after {
      height: 217.6px; }

  .rope.depth-20 {
    top: 6.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.56111);
      -moz-transform: scale(0.56111);
      transform: scale(0.56111); }

  .wave.depth-30 {
    bottom: 170px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 82px; }
    .wave.depth-30:after {
      height: 190.4px; }

  .rope.depth-30 {
    top: 3.33333%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.62222);
      -moz-transform: scale(0.62222);
      transform: scale(0.62222); }

  .wave.depth-40 {
    bottom: 136px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 109px; }
    .wave.depth-40:after {
      height: 163.2px; }

  .rope.depth-40 {
    top: 0%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.68333);
      -moz-transform: scale(0.68333);
      transform: scale(0.68333); }

  .wave.depth-50 {
    bottom: 102px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 136px; }
    .wave.depth-50:after {
      height: 136px; }

  .rope.depth-50 {
    top: -3.33333%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.74444);
      -moz-transform: scale(0.74444);
      transform: scale(0.74444); }

  .wave.depth-60 {
    bottom: 50px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 163px; }
    .wave.depth-60:after {
      height: 130px; }

  .rope.depth-60 {
    top: -6.66667%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.80556);
      -moz-transform: scale(0.80556);
      transform: scale(0.80556); }

  .wave.depth-70 {
    bottom: 34px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 190px; }
    .wave.depth-70:after {
      height: 81.6px; }

  .rope.depth-70 {
    top: -10%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.86667);
      -moz-transform: scale(0.86667);
      transform: scale(0.86667); }

  .wave.depth-80 {
    bottom: -120px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 300px; }
    .wave.depth-80:after {
      height: 54.4px; }

  .rope.depth-80 {
    top: -13.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.92778);
      -moz-transform: scale(0.92778);
      transform: scale(0.92778); }

  .wave.depth-90 {
    bottom: -35px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 245px; }
    .wave.depth-90:after {
      height: 27.2px; }

  .rope.depth-90 {
    top: -16.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.98889);
      -moz-transform: scale(0.98889);
      transform: scale(0.98889); }

  .wave.depth-100 {
    bottom: -300px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 430px; }
    .wave.depth-100:after {
      height: 0px; }

  .rope.depth-100 {
    top: -20%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      transform: scale(1.05); } }
@media all and (min-width: 1200px) {
  html {
    font-size: 16px; }

  .center {
    max-width: 620px; }

  .about .panel:after {
    background-size: 280px 280px;
    height: 200px;
    width: 170px; }
  .about .panel header:before {
    background-size: 93.5px 127.5px; }

  .prompt .panel {
    width: 240px; }

  .lighthouse {
    margin: 0px -112px;
    background-size: 224px 392px;
    height: 392px;
    width: 224px; }

  .light {
    margin: -200px -200px;
    background-size: 400px 400px;
    height: 400px;
    width: 400px; }

  .wave.depth-10 {
    bottom: 252px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 29px; }
    .wave.depth-10:after {
      height: 259.2px; }

  .rope.depth-10 {
    top: 5%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6); }

  .wave.depth-20 {
    bottom: 216px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 58px; }
    .wave.depth-20:after {
      height: 230.4px; }

  .rope.depth-20 {
    top: 1.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.67778);
      -moz-transform: scale(0.67778);
      transform: scale(0.67778); }

  .wave.depth-30 {
    bottom: 180px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 86px; }
    .wave.depth-30:after {
      height: 201.6px; }

  .rope.depth-30 {
    top: -1.66667%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.75556);
      -moz-transform: scale(0.75556);
      transform: scale(0.75556); }

  .wave.depth-40 {
    bottom: 144px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 115px; }
    .wave.depth-40:after {
      height: 172.8px; }

  .rope.depth-40 {
    top: -5%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.83333);
      -moz-transform: scale(0.83333);
      transform: scale(0.83333); }

  .wave.depth-50 {
    bottom: 108px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 144px; }
    .wave.depth-50:after {
      height: 144px; }

  .rope.depth-50 {
    top: -8.33333%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.91111);
      -moz-transform: scale(0.91111);
      transform: scale(0.91111); }

  .wave.depth-60 {
    bottom: -40px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 300px;}

    .wave.depth-60:after {
      height: 115.2px; }

  .rope.depth-60 {
    top: -11.66667%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.98889);
      -moz-transform: scale(0.98889);
      transform: scale(0.98889); }

  .wave.depth-70 {
    bottom: 36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 202px; }
    .wave.depth-70:after {
      height: 86.4px; }

  .rope.depth-70 {
    top: -15%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(1.06667);
      -moz-transform: scale(1.06667);
      transform: scale(1.06667); }

      .wave.depth-80 {
        bottom: -120px;
        margin: 0px 0px;
        background-position: center bottom;
        background-size: auto 101%;
        height: 300px; }
        .wave.depth-80:after {
          height: 57.6px; }

  .rope.depth-80 {
    top: -18.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(1.14444);
      -moz-transform: scale(1.14444);
      transform: scale(1.14444); }

  .wave.depth-90 {
    bottom: -36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 101%;
    height: 259px; }
    .wave.depth-90:after {
      height: 28.8px; }

  .rope.depth-90 {
    top: -21.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(1.22222);
      -moz-transform: scale(1.22222);
      transform: scale(1.22222); }

      .wave.depth-100 {
        bottom: -300px;
        margin: 0px 0px;
        background-position: center bottom;
        background-size: auto 101%;
        height: 430px; }
        .wave.depth-100:after {
          height: 0px; }

  .rope.depth-100 {
    top: -25%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      transform: scale(1.3); } }


@-webkit-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@-moz-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@-ms-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }

    @-webkit-keyframes tilt {
      0% {
        -webkit-transform: rotateZ(30deg);
        transform: rotateZ(30deg); }
      25% {
        -webkit-transform: rotateZ( 20deg);
        transform: rotateZ( 20deg); }
      50% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg); }
      75% {
        -webkit-transform: rotateZ( -20deg);
        transform: rotateZ( -20deg); }
      100% {
        -webkit-transform: rotateZ( 0deg);
        transform: rotateZ( 0deg); } }

       
   
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

   


@-webkit-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-moz-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-ms-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-moz-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-ms-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

    /* Swim */

    @-webkit-keyframes swim
{
	0% {margin-left: -535px}
	50% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes swim
{
	0% {margin-left: -535px}
	50% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@-webkit-keyframes swim2
{
	0% {margin-left: 535px}
  50% {margin-left: -120%;}
	100% {margin-left: -120%;}
}


@keyframes swim2
{
	0% {margin-left: 535px;}
  50% {margin-left: -120%;}
	100% {margin-left: -120%;}
}




  /* Hval */


  @-webkit-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @-moz-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @-ms-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
   
  
        20% {
          -webkit-transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg);
          -moz-transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg);
          transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg); }

         /* 50% {
            -webkit-transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg);
            -moz-transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg);
            transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg); }
  
 
          50% {
            -webkit-transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg);
            -moz-transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg);
            transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg); } */
     
 
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

      /* Fisk */ 
      @-webkit-keyframes fisk
{
	0% {margin-left: -235px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes fisk
{
	0% {margin-left: -235px}
	70% {margin-left: 100%;}
	100% {margin-left: 100%;}
}


/**/
@-moz-keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -moz-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -moz-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

/* Float */

@keyframes float {
	0% {

		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-50px);
	}
	100% {

		transform: translatey(0px);
	}
}

/* flydevandmand */

@keyframes flydevandmand {
	0% {

		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-90vh);
	}
	100% {

		transform: translatey(0px);
	}
}


@-webkit-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@-moz-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@-ms-keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }
@keyframes phase {
  0% {
    opacity: 1; }
  25% {
    opacity: 0.4; }
  50% {
    opacity: 0.8; }
  75% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }

    @-webkit-keyframes tilt {
      0% {
        -webkit-transform: rotateZ(30deg);
        transform: rotateZ(30deg); }
      25% {
        -webkit-transform: rotateZ( 20deg);
        transform: rotateZ( 20deg); }
      50% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg); }
      75% {
        -webkit-transform: rotateZ( -20deg);
        transform: rotateZ( -20deg); }
      100% {
        -webkit-transform: rotateZ( 0deg);
        transform: rotateZ( 0deg); } }

       
   
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

   


@-webkit-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-moz-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-ms-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }
  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-moz-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@-ms-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }
@keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }
  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

    /* Swim */

    @-webkit-keyframes swim
{
	0% {margin-left: -535px}
	50% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes swim
{
	0% {margin-left: -535px}
	50% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@-webkit-keyframes swim2
{
	0% {margin-left: 535px}
  50% {margin-left: -120%;}
	100% {margin-left: -120%;}
}


@keyframes swim2
{
	0% {margin-left: 535px;}
  50% {margin-left: -120%;}
	100% {margin-left: -120%;}
}




  /* Hval */


  @-webkit-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @-moz-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @-ms-keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
      20% {
        -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg);
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(-50deg); }
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
  @keyframes hval {
    0% {
      -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
      transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
   
  
        20% {
          -webkit-transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg);
          -moz-transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg);
          transform: rotateZ(80deg) translate3d(0,10%,0) rotateZ(-100deg); }

         /* 50% {
            -webkit-transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg);
            -moz-transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg);
            transform: rotateZ(100deg) translate3d(0,10%,0) rotateZ(-150deg); }
  
 
          50% {
            -webkit-transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg);
            -moz-transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg);
            transform: rotateZ(250deg) translate3d(0,20%,0) rotateZ(-240deg); } */
     
 
    100% {
      -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
      transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

      /* Fisk */ 
      @-webkit-keyframes fisk
{
	0% {margin-left: -235px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes fisk
{
	0% {margin-left: -235px}
	70% {margin-left: 100%;}
	100% {margin-left: 100%;}
}


/**/
@-moz-keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -moz-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -moz-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
}
@keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -moz-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

/* Float */

@keyframes float {
	0% {

		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-50px);
	}
	100% {

		transform: translatey(0px);
	}
}

/* flydevandmand */

@keyframes flydevandmand {
	0% {

		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-90vh);
	}
	100% {

		transform: translatey(0px);
	}
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
-o-transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
transition: max-height 1s ease-in-out, width 0.5s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;

}

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color: #011110;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100vh;
}

.js body {
	overflow: hidden;
}

a {
	outline: none;
	color: #011110;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

a:hover,
a:focus {
	color: #f46377;
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Clouds */

.cloud1 {
	top: 80px;
  z-index: 100;
  fill: #eee;
  /* Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode */
  -webkit-animation: move 20s linear infinite;
  -moz-animation: move 20s linear infinite;
  -o-animation: move 20s linear infinite;
  animation: move 20s linear infinite;
}

.cloud2 {
	top: 240px;
  z-index: 200;
  fill: #eee;
  -webkit-animation: move 35s linear 10s infinite backwards;
  -moz-animation: move 35s linear 10s infinite backwards;
  -o-animation: move 35s linear 10s infinite backwards;
  animation: move 35s linear 10s infinite backwards;
}

@-webkit-keyframes move {
  from {-webkit-transform: translateX(-400px);}
  to {-webkit-transform: translateX(1350px);}
}

/* Icons */

.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.icon--arrow-up {
	width: 2.75em !important;
	height: 2.75em !important;
	margin-left: 20px !important;
    margin-top: 10px !important;

}
.icon--shop {
	width: 2.5em !important;
	height: 2.5em !important;
	margin-left: 17px !important;
	margin-top: 0px !important;
}


  /* Products Page */

  #jsModalBook .modal__container  {
    background-image: url(https://gladhval.dk/images/modal/udkast_bog.jpg);
    background-size: cover;
width: 80vw !important;
height: 80vh !important;
position: relative;
z-index: 22;
left: 0vw;
top: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
box-shadow: 0 0 10px #fff;
margin: 0 auto;
padding: 30px;
text-align: center;
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
  }
  #jsModalBook .modal__close  {
background: #0AA4E1;
  }

  #jsModal .modal__container {
    position: relative;
    z-index: 22;
    left: 0vw;
    width: 80vw;
    height: 80vh;
    top: 10%;
    box-shadow: 0 0 10px #fff;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    text-align: center;
  }

  #jsModalBook  .modal__container h1 {
    color: #fff !important;
	font-weight: 600 !important;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
}
#jsModalBook  .modal__container p {
	color: #fff !important;
	font-weight: 600 !important;
	line-height: 1.25;
	font-size: 1.25em !important;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
}
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    padding: 30px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear 0.1s,opacity 0.3s ease;
  }
  .modal.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .modal__overlay {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 21;
/*    background-color: rgba(0, 0, 0, 0.7); */
	}
	

  .modal__close {
    position: absolute;
    top: 10px;
		right: 10px;

text-align: center;
    border: none;
    outline: none;
    background: #0AA4E1;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
  }
  .modal__close:hover {
    color: #000;
  }

  .modal__container .fixedscene {
position: fixed;
  }
  .modal__container h1 {
    font-size: 2.5em;
    color: #000;
    margin-bottom: 15px;
  }

  .modal__container p {
    font-size: 1.5em;
  }

  #jsModalcontainer canvas {
max-width: 400px !important;
  }
#modallinks {
display: flex;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
}
  #modallinks a {
    width: 33%;

  }
  #modallinks a img{
	
    height: auto;
	}
	
	@media (max-width: 599px) {
		.icon--shop {
			margin-left: 10px !important;
	}

	#jsModalBook  .modal__container {
		display: block !important;
		overflow: auto;
	}

	.icon--arrow-up {
		margin-left: 15px !important;
	}
}

@media (max-width: 1200px) {

	.modal__close  {
		background: transparent !important;
			} 
.modal__close .closesign {
	color:  #0AA4E1 !important;
	width:48px;
	height: 48px;
	margin-right: 2em;
	margin-top: 2em;
	text-align: center;
	
		}	}
@media (max-width: 700px) {



	.modal{
	overflow-y: scroll;
}

	#jsModal .modal__container {

left: 0 !important;
		width: 100vw !important;
		height: 100% !important;
		overflow-y: scroll;
	}

	#jsModal .modal__container h1 {
text-align: left !important;

	}
	#jsModal .modal__container p {
		text-align: left !important;
		line-height: 1.5;
			}
	
	#modallinks a {
	
	}



	.icon--shop {
    margin-left: 15px !important;
    margin-top: 0px !important;
}

#hval-ikon, #hval-ikon-blue, #hval-ikonII, #hval-ikon-blueII { 
	width: 50px !important;
}

#haj-ikon { 
width: 50px;
margin-left: 6px;
}
}

.icon--hidden {
	display: none;
}

.landing-layout--open .button--trigger .icon--hidden {
	display: block;
}

.landing-layout--open .button--trigger .icon--shown {
	display: none;
}
.landing-layout--open .readbook-button {
	background: #621f76 !important;
	border-radius: 25px !important;
	padding: 1rem 2rem !important;
	color: #fff !important;
	font-weight: 600 !important;
}
.button {
	margin: 0;
	padding: 0;
	color: #fff;
	border: none;
	background: none;
	width: 4em;
	height: 4em;
	background: #0dbdb2;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
.landing-layout--open .button {
	background: #621f76;
}

.button:hover {
	color: #fff;
}

.button:focus {
	outline: none;
}

.button--trigger {
	position: absolute;
	right: 2em;
	bottom: 2em;
}

.button--hval {
	position: absolute;

	left: 2em;
	top: 2em;
}
.button--hval:hover {
	background-color: #0AA4E1;
	color: #FFFFFF;
}


#addhvalII #hval-ikonII, #addhvalII #hval-ikon-blueII {
/*	transform: rotateY(180deg); */
	}

#hval-ikon, #hval-ikon-blue, #hval-ikonII, #hval-ikon-blueII  {
width: 70px;
height: 100%;
margin-left: 6px;
}

.hidden {
display: none;
}
.button--products  {
	position: absolute;
	left: 2em;
	bottom: 2em;
}
.button--haj {
	position: absolute;
	left: 2em;
	bottom: 2em;
}



.button--sound {
	position: absolute;
	right: 2em;
	top: 2em;
}

.button--sound-off .icon--shown {
	display: none;
}

.button--sound-off .icon--hidden {
	display: block;
}
.icon--drop  {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);

}

.landing-layout {
	height: 100vh;
	overflow: hidden;
}

.landing {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

.landing--above {
	background-position: 50% 100%;
}

.landing--beneath {
	background-position: 50% 0%;
}





.featured-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 100vh;
	left: 0;
}

.js .featured-content {
	top: 0;
	pointer-events: none;
}

.featured-list {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	max-width: 50vw;
	min-width: 550px;
	height: 60vh;
	margin: 30vh auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.featured-list__item {
	width: 33.33%;
	padding: 10% 0 0;
}

.featured-list__link {
	display: block;
	position: relative;
	text-align: center;
}

.featured-list__img {
	width: 37.5%;
	max-width: 80px;
	min-width: 60px;
	display: block;
	margin: 0 auto;
}

.featured-list__title {
	font-weight: 500;
	display: inline-block;
	padding: 0 0.65em;
	font-size: 0.95em;
	line-height: 1.8;
	font-family: "Verdana", serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-indent: 3px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

#walterobj canvas {
position: absolute;
top: 25%;
left: 25%;
}

/**********************************/
/* All transitions and animations */
/**********************************/

.landing-wrap {
	-webkit-transition: -webkit-transform 1.2s;
	transition: transform 1.2s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.landing-layout--open .landing-wrap {
	-webkit-transform: translate3d(0, -100vh, 0);
	transform: translate3d(0, -100vh, 0);
}

.landing-layout--products .landing-wrap {
	-webkit-transform: translate3d(0, -200vh, 0);
	transform: translate3d(0, -200vh, 0);
}


.js .featured-list__item {
	-webkit-transform: scale3d(0.8, 0.8, 1);
	transform: scale3d(0.8, 0.8, 1);
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.js .landing-layout--open .featured-list__item {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition: opacity 1.5s, -webkit-transform 0.8s;
	transition: opacity 1.5s, transform 0.8s;
}

.landing-layout--open .featured-list__item:nth-child(-n+3) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.landing-layout--open .featured-list__item:nth-child(n+4) {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

/* Page Loader */


.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
  
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
  
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
  
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
  
	z-index: 2000;
	position: fixed;
	margin: auto;
	top: 12px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 50px;
	overflow: hidden;
  }
  
  .pace .pace-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
  
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
  
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  
	display: block;
	position: absolute;
	right: 100%;
	margin-right: -7px;
	width: 93%;
	top: 7px;
	height: 14px;
	font-size: 12px;
	background: #29d;
	color: #29d;
	line-height: 60px;
	font-weight: bold;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  
	-webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
	-ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
	box-shadow: 120px 0 #fff, 240px 0 #fff;
  }
  
  .pace .pace-progress:after {
	content: attr(data-progress-text);
	display: inline-block;
	position: fixed;
	width: 45px;
	text-align: right;
	right: 0;
	padding-right: 16px;
	top: 4px;
  }
  
  .pace .pace-progress[data-progress-text="0%"]:after { right: -200px }
  .pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px }
  .pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px }
  .pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px }
  .pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px }
  .pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px }
  .pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px }
  .pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px }
  .pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px }
  .pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px }
  .pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px }
  .pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px }
  .pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px }
  .pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px }
  .pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px }
  .pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px }
  .pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px }
  .pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px }
  .pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px }
  .pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px }
  .pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px }
  .pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px }
  .pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px }
  .pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px }
  .pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px }
  .pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px }
  .pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px }
  .pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px }
  .pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px }
  .pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px }
  .pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px }
  .pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px }
  .pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px }
  .pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px }
  .pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px }
  .pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px }
  .pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px }
  .pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px }
  .pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px }
  .pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px }
  .pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px }
  .pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px }
  .pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px }
  .pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px }
  .pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px }
  .pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px }
  .pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px }
  .pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px }
  .pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px }
  .pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px }
  .pace .pace-progress[data-progress-text="50%"]:after { right: -107px }
  .pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px }
  .pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px }
  .pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px }
  .pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px }
  .pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px }
  .pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px }
  .pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px }
  .pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px }
  .pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px }
  .pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px }
  .pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px }
  .pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px }
  .pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px }
  .pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px }
  .pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px }
  .pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px }
  .pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px }
  .pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px }
  .pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px }
  .pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px }
  .pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px }
  .pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px }
  .pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px }
  .pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px }
  .pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px }
  .pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px }
  .pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px }
  .pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px }
  .pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px }
  .pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px }
  .pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px }
  .pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px }
  .pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px }
  .pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px }
  .pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px }
  .pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px }
  .pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px }
  .pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px }
  .pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px }
  .pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px }
  .pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px }
  .pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px }
  .pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px }
  .pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px }
  .pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px }
  .pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px }
  .pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px }
  .pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px }
  .pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px }
  .pace .pace-progress[data-progress-text="100%"]:after { right: -14px }
  
  
  .pace .pace-activity {
	position: absolute;
	width: 100%;
	height: 28px;
	z-index: 2001;
	box-shadow: inset 0 0 0 2px #29d, inset 0 0 0 7px #FFF;
	border-radius: 10px;
  }
  
  .pace.pace-inactive {
	display: none;
  }
  

.loader {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #011110;
	top: 0;
	left: 0;
	pointer-events: none;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	visibility: hidden;
}

.loader::after {
	position: absolute;
	content: 'Tænd for \0009 \266A \0009 lyden';
	color: #0AA4E1;
	top: 60%;
	width: 100%;
	left: 0;
	text-align: center;
	font-size: 1.5em;
}

.js .loader {
	visibility: visible;
}

.landing-layout--loaded .loader {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader__circle {
	fill: rgba(255,255,255,0.6);
	opacity: 0.1;
	-webkit-animation: moveUpDown 0.5s ease alternate infinite forwards;
	animation: moveUpDown 0.5s ease alternate infinite forwards;
}

.loader__circle:nth-child(2) {
	opacity: 0.8;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.loader__circle:nth-child(3) {
	opacity: 0.3;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

@-webkit-keyframes moveUpDown {
	to {
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
		opacity: 0.5;
	}
}

@keyframes moveUpDown {
	to {
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
		opacity: 0.5;
	}
}

/* Media queries */

@media screen and (max-width: 43.75em) {

	.landing-wrap {
		-webkit-transition-property: -webkit-transform, opacity;
		transition-property: transform, opacity;
	}

	.landing-layout--open .featured-list__item:nth-child(-n+2) {
		-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}
	.landing-layout--open .featured-list__item:nth-child(3),
	.landing-layout--open .featured-list__item:nth-child(4) {
		-webkit-transition-delay: 0.6s;
		transition-delay: 0.6s;
	}
	.landing-layout--open .featured-list__item:nth-child(n+5) {
		-webkit-transition-delay: 0.9s;
		transition-delay: 0.9s;
	}
	
	.loader::after {
		font-size: 1em;
	}
}

/* Logo */

.wittlogo {
	background-image: url('https://gladhval.dk/images/Design-by-witt-logo-dansk-design.png');
	background-repeat: no-repeat;
	position: absolute;
	top: 2em;
	left: 2em;
	width: 150px;
	height: 85px;
}

              
            
!

JS

              
                	 var t, addhval, addhaj, boxes, container;
		 var modalWindow = document.getElementById("jsModalBook");
		 TweenMax.set("#target", {xPercent:-50, yPercent:-50});
var pathRoute = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:hval});
var pathRouteReverse = MorphSVGPlugin.pathDataToBezier("#motionPathII", {align:hvalII, offsetY:10,offsetX:10});
/* TweenMax.to("#target", 40, {bezier:{values:pathRoute, type:"cubic", autoRotate:true}, 
ease:Linear.easeNone, repeat:-1, yoyo:true}); */


addhval = $("#addhval");
addhvalII = $("#addhvalII");
addhaj = $("#addhaj");
container = $(".landing--beneath #sea .walters-skjul");
containerII = $(".landing--beneath #sea .walters-skjul");
var hval = $("<object id='hval-sub' data='https://gladhval.dk/Walter_sub.svg' style='transform: rotate(20deg);' type='image/svg+xml' height=350></object>");
var hvalII = $("<object id='hval-subII' data='https://gladhval.dk/Walter_reverse.svg' style='transform: rotate(0deg) !important;' type='image/svg+xml' height=350></object>");
var haj = $("<object id='haj-sub' data='haj_ikon.svg' type='image/svg+xml' height=350></object>");
boxes = ["blue"];

t = new TimelineLite({paused:true,onComplete: this.killremove
});
t2 = new TimelineLite({paused:true,onComplete: this.killremove2
});


var $target = $(t);
		 var $parent = $(".landing--beneath");

		 function loopBoxesHval(color, i){
  hval.appendTo(container);
  t.to(hval, 20, {bezier:{values:pathRoute, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:0, yoyo:false});
}

function loopBoxesHvalReverse(color, i){
  hvalII.appendTo(containerII);
  t2.to(hvalII, 20, {bezier:{values:pathRouteReverse, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:0, yoyo:false});
}

function loopBoxesHvalContinue(color, i){
	hvalII.appendTo(containerII);
  t.to(hvalII, 1, { bezier:{curviness:1.1, values:[{x:-100, y:-200},{x:200, y:-200},{x:400, y:-300},{x:600, y:-200},
      {x:800, y:-300},{x:1000, y:-200}],autoRotate:["x","y","rotation",20,false]}, ease:Power1.easeInOut});
}

function loopBoxesHvalStartStop(color, i){
	hval.appendTo(container);
  t.to(hval, 25, { bezier:{curviness:1.1, values:[{x:-100, y:-200},{x:200, y:-200},{x:400, y:-300},{x:600, y:-200},
      {x:800, y:-300},{x:1000, y:-200}],autoRotate:["x","y","rotation",20,false]}, ease:Power1.easeInOut});
}

function finished() {
  alert('finished');
}

function killremove() {
 /* t.kill(); */
 
/*  alert('Test for at se om Walter har svømmet færdig'); */
  t.pause(0);
/*    hval.remove(); */
/*  TweenLite.delayedCall(5.5, loopBoxesHvalContinue, null, loopBoxesHvalContinue);  */
  
 
modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';

document.getElementById("hval-ikon").classList.remove("hidden");
document.getElementById("hval-ikon-blueII").classList.add("hidden");
document.getElementById("addhval").classList.add("hidden");
document.getElementById("addhvalII").classList.remove("hidden");
document.getElementById("hval-ikonII").classList.remove("hidden");
document.getElementById("hval-sub").classList.add("hidden");
document.getElementById("hval-subII").classList.remove("hidden");
document.getElementById("addhvalII").disabled=false;

}

function killremove2() {
 /* t.kill(); */

  t.pause(0);
	modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';


document.getElementById("hval-ikon").classList.remove("hidden");
document.getElementById("hval-ikon-blue").classList.add("hidden");
document.getElementById("addhval").classList.remove("hidden");
document.getElementById("addhvalII").classList.add("hidden");
document.getElementById("hval-ikonII").classList.add("hidden");
document.getElementById("hval-subII").classList.add("hidden");
document.getElementById("hval-sub").classList.remove("hidden");
document.getElementById("addhval").disabled=false;
}

function addBoxeshval(){
  boxes.forEach(loopBoxesHval);
	t.play();
	document.getElementById("addhval").disabled=true;
 document.getElementById("hval-ikon").classList.add("hidden");
	document.getElementById("hval-ikon-blue").classList.remove("hidden");
}

function addBoxeshvalreverse(){
  boxes.forEach(loopBoxesHvalReverse);
	t2.play();
	document.getElementById("addhvalII").disabled=true;
 document.getElementById("hval-ikonII").classList.add("hidden");
	document.getElementById("hval-ikon-blueII").classList.remove("hidden");
}

function addBoxeshaj(){
  boxes.forEach(loopBoxes);
  t.play();
}

addhval.click(addBoxeshval);
addhvalII.click(addBoxeshvalreverse);
addhaj.click(addBoxeshaj);

 



/* This script supports IE9+ */
		(function() {
		  /* Opening modal window function */
		  function openModal() {
			  /* Get trigger element */
			  var modalTrigger = document.getElementsByClassName('jsModalTrigger');
		
			  /* Set onclick event handler for all trigger elements */
			  for(var i = 0; i < modalTrigger.length; i++) {
				  modalTrigger[i].onclick = function() {
					var target = this.getAttribute('href').substr(1);
					var modalWindow = document.getElementById(target);
		
					modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open'; 
				  }
			  }   
		  }
		
		  function closeModal(){
			/* Get close button */
			var closeButton = document.getElementsByClassName('jsModalClose');
			var closeOverlay = document.getElementsByClassName('jsOverlay');
		
			/* Set onclick event handler for close buttons */
			  for(var i = 0; i < closeButton.length; i++) {
				closeButton[i].onclick = function() {
				  var modalWindow = this.parentNode.parentNode;
		
				  modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
				}
			  }   
		
			/* Set onclick event handler for modal overlay */
			  for(var i = 0; i < closeOverlay.length; i++) {
				closeOverlay[i].onclick = function() {
				  var modalWindow = this.parentNode;
		
				  modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
				}
			  }  
		
		  }
		
		  /* Handling domready event IE9+ */
		  function ready(fn) {
			if (document.readyState != 'loading'){
			  fn();
			} else {
			  document.addEventListener('DOMContentLoaded', fn);
			}
		  }
		
		  /* Triggering modal window function after dom ready */
		  ready(openModal);
		  ready(closeModal);
		}());
              
            
!
999px

Console