BB New Site

In this example below you will see how to do a BB New Site with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by RobertEatough, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RobertEatough ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>BB New Site </title>
  
  
  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BLEACHED BONES</title>
	<meta name="description" content="Blueprint: A basic template for a page stack navigation effect" />
	<meta name="keywords" content="blueprint, template, html, css, page stack, 3d, perspective, navigation, menu" />
	<meta name="author" content="Codrops" />
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
	<!-- navigation -->
	<nav class="pages-nav">
		<div class="pages-nav__item"><a class="link link--page" href="#page-home">Home</a></div>
		<div class="pages-nav__item"><a class="link link--page" href="#page-docu">Documentation</a></div>
		<div class="pages-nav__item"><a class="link link--page" href="#page-manuals">Manuals</a></div>
		
		<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-buy">Where to buy</a></div>
		<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-blog">Blog &amp; News</a></div>
		<div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-contact">Contact</a></div>
		<div class="pages-nav__item pages-nav__item--social">
      <a class="link link--social link--faded" href="#"><i class="fa fa-soundcloud"></i><span class="text-hidden">Soundcloud</span></a>
      <a class="link link--social link--faded" href="#"><i class="fa fa-youtube-play"></i><span class="text-hidden">YouTube</span></a>
			<a class="link link--social link--faded" href="#"><i class="fa fa-facebook"></i><span class="text-hidden">Facebook</span></a>
      <a class="link link--social link--faded" href="#"><i class="fa fa-twitter"></i><span class="text-hidden">Twitter</span></a>
      <a class="link link--social link--faded" href="#"><i class="fa fa-instagram"></i><span class="text-hidden">Instagram</span></a>
			
      
		</div>
	</nav>
	<!-- /navigation-->
	<!-- pages stack -->
	<div class="pages-stack">
		<!-- page -->
		<div class="page" id="page-home">
			<!-- Blueprint header -->
			<header class="bp-header cf">
				<h1 class="bp-header__title">
        
        <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="auto" height="auto" viewBox="0 0 600 100">
<style type="text/css">

<![CDATA[

	text {
		filter: url(#filter);
		fill: white;
    	font-family: 'Share Tech Mono', sans-serif;
    	font-size: 1.5em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
     		}
]]>
</style>
	<defs>

		<filter id="filter">
		    <feFlood flood-color="#2a2b30" result="black" />
		    <feFlood flood-color="red" result="flood1" />
		    <feFlood flood-color="limegreen" result="flood2" />
			<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
			<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
			<feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
			<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
		    <feComposite in="flood1" in2="off1a" operator="in"  result="comp1" />
		    <feComposite in="flood2" in2="off2a" operator="in" result="comp2" />

 		  	<feMerge x="0" width="100%" result="merge1">
				<feMergeNode in = "black" />
				<feMergeNode in = "comp1" />
				<feMergeNode in = "off1b" />

				<animate 
					attributeName="y" 
		    		id = "y"
		    		dur ="4s"
		    		
		    		values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'

		    		keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

		    		repeatCount = "indefinite" />
 
				<animate attributeName="height" 
		    		id = "h" 
		    		dur ="4s"
		    		
		    		values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'

		    		keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

		    		repeatCount = "indefinite" />
		    </feMerge>
 			

 			<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
				<feMergeNode in = "black" />
				<feMergeNode in = "comp2" />
				<feMergeNode in = "off2b" />

				<animate attributeName="y" 
		    		id = "y"
		    		dur ="4s"
		    		values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;' 

		    		keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'

 		    		repeatCount = "indefinite" />
 
				<animate attributeName="height" 
		    		id = "h"
		    		dur = "4s"
					
					values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'

		    		keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513;  1'
		    		 
		    		repeatCount = "indefinite" />
		    </feMerge>
			
		 	<feMerge>
 				<feMergeNode in="SourceGraphic" />	

				<feMergeNode in="merge1" /> 
 			<feMergeNode in="merge2" />

		    </feMerge>
	    </filter>

	</defs>

<g>
	<text x="0" y="100">BLEACHED BONES</text>
</g>
</svg>
        
        
        </h1>
        
        <div class="gradient"></div>
<div class="gradient"></div>
<div class="gradient"></div>
				
				
			</header>
			
		</div>
		<!-- /page -->
		<div class="page" id="page-docu">
		<div id="container">
  <div id="message">
    <a id="animate" href="#">Transmit</a>
  </div>
</div>
		</div>
		<div class="page" id="page-manuals">
			 
<div id='aligner'>
  
  <!-- STEP SEQUENCER BOARD -->
  <div class='loading' id='board'>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='0'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='1'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='2'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='3'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='4'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='5'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='6'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='7'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='8'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='9'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='10'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='11'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='12'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='13'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='14'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
    <span class='holder' data-note='15'>
      <div class='note'>
        <div class='ripple'></div>
      </div>
    </span>
  </div>
  <!-- BEAT MARKERS -->
  <div id='markers'>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#8226;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
    <span>&#9702;</span>
  </div>
  <!-- CONTROLS -->
  <!-- All SVG icons from www.flaticon.com -->
  <!-- TODO: optimise the hell out of these -->
  <div id='controls'>
    <div class='button' id='audio'>
      <svg version='1.1' viewBox='0 0 513.32 513.32' xmlns='http://www.w3.org/2000/svg'>
        <path d='M139.023,128.33H42.777v256.66h96.247l85.553,128.33h74.859V0h-74.859L139.023,128.33z M256.66,42.777v427.767h-8.555l-85.553-128.33H85.553V171.107h76.998l85.553-128.33C248.104,42.777,256.66,42.777,256.66,42.777z'></path>
        <rect height='128.33' width='42.777' x='427.767' y='213.883'></rect>
        <rect height='256.66' width='42.777' x='342.213' y='149.718'></rect>
      </svg>
    </div>
    <div class='button' id='reset'>
      <svg version='1.1' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>
        <path d='M8 0c-3 0-5.6 1.6-6.9 4.1l-1.1-1.1v4h4l-1.5-1.5c1-2 3.1-3.5 5.5-3.5 3.3 0 6 2.7 6 6s-2.7 6-6 6c-1.8 0-3.4-0.8-4.5-2.1l-1.5 1.3c1.4 1.7 3.6 2.8 6 2.8 4.4 0 8-3.6 8-8s-3.6-8-8-8z'></path>
      </svg>
    </div>
  </div>
</div>











		</div>
	
		<div class="page" id="page-buy">
			<header class="bp-header cf">
				<h1 class="bp-header__title">Where to buy</h1>
				<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
				<p class="info">
					"When people ask me why I don't eat meat or any other animal products, I say, 'Because they are unhealthy and they are the product of a violent and inhumane industry.'" &mdash;
				</p>
			</header>
			<img class="poster" src="images/6.jpg" alt="img06" />
		</div>
		<div class="page" id="page-blog">
			<header class="bp-header cf">
				<h1 class="bp-header__title">Blog &amp; News</h1>
				<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
				<p class="info">
					"The question is not, 'Can they reason?' nor, 'Can they talk?' but rather, 'Can they suffer?" &mdash; Jeremy Bentham
				</p>
			</header>
			<img class="poster" src="images/1.jpg" alt="img01" />
		</div>
		<div class="page" id="page-contact">
			<header class="bp-header cf">
				<h1 class="bp-header__title">Contact</h1>
				<p class="bp-header__desc">Based on Ilya Kostin's Dribbble shot <a href="https://dribbble.com/shots/2286042-Stacked-navigation">Stacked navigation</a></p>
				<p class="info">
					"Man is the only animal that can remain on friendly terms with the victims he intends to eat until he eats them." &mdash; Samuel Butler
				</p>
			</header>
			<img class="poster" src="images/4.jpg" alt="img04" />
		</div>
	</div>
	<!-- /pages-stack -->
	<button class="menu-button" id="audio"><span>Menu</span></button>
	
</body>

</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.28/howler.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.27/polyfill.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/RobertEatough/bb-new-site-WGmaZJ */
html.js,
.js body {
	overflow: hidden;
	height: 100vh;
}

/* Pages nav */

.pages-nav {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	padding: 20px;
	text-align: center;
	background: #0e0f0f;
}

.js .pages-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh;
	padding: 30px;
	pointer-events: none;
	opacity: 0;
	background: transparent;
	-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 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);
	-webkit-transform: translate3d(0, 150px, 0);
	transform: translate3d(0, 150px, 0);
}

.js .pages-nav--open {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.pages-nav__item {
	width: 33%;
	padding: 1em;
}

.js .pages-nav__item {
	padding: 0 10%;
}

.pages-nav .pages-nav__item--social {
	width: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 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);
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
}

.pages-nav--open .pages-nav__item--social {
	opacity: 1;
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.link {
	font-size: 0.85em;
	font-weight: bold;
	position: relative;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.link:hover,
.link:focus {
	color: #fff;
}

.link--page {
	display: block;
	color: #cecece;
}

.link--page:not(.link--faded)::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 30px;
	height: 2px;
	margin: 5px 0 0 -15px;
	background: #fff;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale3d(0, 1, 1);
	transform: scale3d(0, 1, 1);
}

.link--page:hover:before {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.link--faded {
	color: #4f4f64;
}

.link--faded:hover,
.link--faded:focus {
	color: #5c5edc;
}

.link--page.link--faded {
	font-size: 0.65em;
}

.link--social {
	font-size: 1.5em;
	margin: 0 0.75em;
}

.text-hidden {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
	color: transparent;
}

/* Pages stack */

.js .pages-stack {
	z-index: 100;
	pointer-events: none;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-perspective-origin: 50% -50%;
	perspective-origin: 50% -50%;
}

.js .page {
	position: relative;
	z-index: 5;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	pointer-events: auto;
	background: #2a2b30;
	box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}

.js .pages-stack--open .page {
	cursor: pointer;
	-webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
	transition: transform 0.45s, opacity 0.45s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.js .page--inactive {
	position: absolute;
	z-index: 0;
	top: 0;
	opacity: 0;
}

/* page content */

.info {
	font-size: 1.25em;
	max-width: 50%;
	margin-top: 1.5em;
}

.poster {
	position: absolute;
	bottom: 4vh;
	left: 60%;
	max-width: 100%;
	max-height: 80%;
}

/* Menu button */

.menu-button {
	position: absolute;
	z-index: 1000;
	top: 30px;
	left: 30px;
	width: 30px;
	height: 24px;
	padding: 0;
	cursor: pointer;
	border: none;
	outline: none;
	background: transparent;
}

.no-js .menu-button {
	display: none;
}

.menu-button::before,
.menu-button::after,
.menu-button span {
	background: #fff;
}

.menu-button::before,
.menu-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.menu-button span {
	position: absolute;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 2px;
	text-indent: 200%;
	-webkit-transition: opacity 0.25s;
	transition: opacity 0.25s;
}

.menu-button::before {
	-webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
}

.menu-button::after {
	-webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
	transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
}

.menu-button--open span {
	opacity: 0;
}

.menu-button--open::before {
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	transform: rotate3d(0, 0, 1, 45deg);
}

.menu-button--open::after {
	-webkit-transform: rotate3d(0, 0, 1, -45deg);
	transform: rotate3d(0, 0, 1, -45deg);
}

@media screen and (max-width: 60em) {
	.info {
		max-width: 100%;
	}
	.poster {
		position: relative;
		top: auto;
		left: auto;
		display: block;
		max-width: 100%;
		max-height: 50vh;
		margin: 0 0 0 50%;
	}
	.pages-nav__item {
		width: 50%;
		min-height: 20px;
	}
	.link--page {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.link--social {
		margin: 0 0.1em;
	}
}

@media screen and (max-width: 40em) {
	.js .pages-nav {
		display: block;
		padding: 10px 20px 0 20px;
		text-align: left;
	}
	.js .pages-nav__item {
		width: 100%;
		padding: 4px 0;
	}
	.js .pages-nav__item--small {
		display: inline-block;
		width: auto;
		margin-right: 5px;
	}
	.pages-nav__item--social {
		font-size: 0.9em;
	}
	.menu-button {
		top: 15px;
		right: 10px;
		left: auto;
	}
	.info {
		font-size: 0.85em;
	}
	.poster {
		margin: 1em;
	}
}

/* General Blueprint Style */

@font-face {
	font-family: 'bpicons';
	font-weight: normal;
	font-style: normal;
	src: url('../fonts/bpicons/bpicons.eot');
	src: url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), url('../fonts/bpicons/bpicons.woff') format('woff'), url('../fonts/bpicons/bpicons.ttf') format('truetype'), url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
}


/* Made with https://icomoon.io/ */


/* Resets */

*,
*:after,
*:before {
	box-sizing: border-box;
}


/* Helper classes */

.cf:before,
.cf:after {
	content: ' ';
	display: table;
}

.cf:after {
	clear: both;
}


/* Main styles */

body {
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
	margin: 0;
	color: #cecece;
	background: #1d1e21;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: #5c5edc;
	outline: none;
}

a:hover {
	color: #fff;
}


/* Blueprint header */

.bp-header {
	padding: 6em 10vw 2em;
}

.bp-header__title {
	font-size: 2.125em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.bp-header__desc {
	font-size: 0.95em;
	margin: 0.5em 0 1em;
	padding: 0;
}

.bp-header__present {
	font-size: 0.85em;
	font-weight: 700;
	position: relative;
	z-index: 100;
	display: block;
	padding: 0 0 0.6em 0.1em;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: #5c5edc;
}

.bp-tooltip:after {
	font-size: 50%;
	font-size: 75%;
	position: relative;
	top: -8px;
	left: -12px;
	width: 30px;
	height: 30px;
}

.bp-tooltip:hover:before {
	content: attr(data-content);
	font-size: 110%;
	font-weight: 700;
	line-height: 1.2;
	position: absolute;
	left: auto;
	margin-left: 4px;
	padding: 0.8em 1em;
	text-align: left;
	text-indent: 0;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background: #5c5edc;
}

.bp-nav {
	margin: 0 0 0 -0.75em;
}

.bp-nav__item {
	position: relative;
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	margin: 0 0.1em;
	text-align: left;
	border-radius: 50%;
}

.bp-nav__item > span {
	display: none;
}

.bp-nav__item:hover:before {
	content: attr(data-info);
	font-size: 0.85em;
	font-weight: bold;
	position: absolute;
	top: 120%;
	left: 0;
	width: 600%;
	text-align: left;
	pointer-events: none;
	color: #595a5f;
}

.bp-nav__item:hover {
	background: #5c5edc;
}

.bp-icon:after {
	font-family: 'bpicons';
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-align: center;
	text-transform: none;
	color: #5c5edc;
	-webkit-font-smoothing: antialiased;

	speak: none;
}

.bp-nav .bp-icon:after {
	line-height: 2.4;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: 0;
}

.bp-nav a:hover:after {
	color: #fff;
}

.bp-icon--next:after {
	content: '\e000';
}

.bp-icon--drop:after {
	content: '\e001';
}

.bp-icon--archive:after {
	content: '\e002';
}

.bp-icon--about:after {
	content: '\e003';
}

.bp-icon--prev:after {
	content: '\e004';
}

@media screen and (max-width: 40em) {
	.bp-header {
		padding: 50px 20px 1em;
	}
	.bp-header__title {
		font-size: 1.8em;
	}
}


svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: hidden;
  background: #2a2b30;
}

.gradient {
  position: absolute;
 width: .001vmin;
 height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}

.gradient:nth-child(2) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #ff00ff;
  box-shadow: 0 0 45vmax 45vmax #ff00ff;
  -webkit-animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
  animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
}

.gradient:nth-child(3) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #ffffff;
  box-shadow: 0 0 45vmax 45vmax #ffffff;
  -webkit-animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
  animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
}

.gradient:nth-child(4) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #00ffff;
  box-shadow: 0 0 45vmax 45vmax #00ffff;
  -webkit-animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
  animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
  opacity: .2;
}
@-webkit-keyframes 
hue { 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
@keyframes 
hue { 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
@-webkit-keyframes 
move1 { 0% {
 top: 0vh;
 left: 50vw;
}
 25% {
 left: 0vw;
}
 50% {
 top: 100vh;
}
 75% {
 left: 100vw;
}
 100% {
 top: 0vh;
 left: 50vw;
}
}
@keyframes 
move1 { 0% {
 top: 0vh;
 left: 50vw;
}
 25% {
 left: 0vw;
}
 50% {
 top: 100vh;
}
 75% {
 left: 100vw;
}
 100% {
 top: 0vh;
 left: 50vw;
}
}
@-webkit-keyframes 
move2 { 0% {
 top: 50vh;
 left: 100vw;
}
 25% {
 top: 100vh;
}
 50% {
 left: 0vw;
}
 75% {
 top: 0vh;
}
 100% {
 top: 50vh;
 left: 100vw;
}
}
@keyframes 
move2 { 0% {
 top: 50vh;
 left: 100vw;
}
 25% {
 top: 100vh;
}
 50% {
 left: 0vw;
}
 75% {
 top: 0vh;
}
 100% {
 top: 50vh;
 left: 100vw;
}
}
@-webkit-keyframes 
move3 { 0% {
 top: 100vh;
 left: 50vw;
}
 25% {
 left: 100vw;
}
 50% {
 top: 0vh;
}
 75% {
 left: 0vw;
}
 100% {
 top: 100vh;
 left: 50vw;
}
}
@keyframes 
move3 { 0% {
 top: 100vh;
 left: 50vw;
}
 25% {
 left: 100vw;
}
 50% {
 top: 0vh;
}
 75% {
 left: 0vw;
}
 100% {
 top: 100vh;
 left: 50vw;
}
}




p, a {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  
  font-smoothing: antialiased;
  margin: 0.8em 0;
  font-size: 18px;
  color: #B95;
}

.ghost,
.glitch {
  opacity: 0.25;
}

#message {
  margin-left: -300px;
  margin-top: -130px;
  position: absolute;
  height: 260px;
  width: 600px;
  left: 50%;
  top: 50%;
}

#animate {
  text-shadow: 0 0 8px rgba(209, 194, 165, 0.1);
  position: absolute;
  color: #4f4228;
  bottom: 0;
}

#container {
  background: -webkit-radial-gradient(50% 50%, ellipse, #20202D 0%, #101018 75%, #060612 100%);
  background: -moz-radial-gradient(50% 50%, ellipse, #20202D 0%, #101018 75%, #060612 100%);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
#container:before {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 0;
  top: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDRCNjE4NDcxMDgzMTFFMkFGQkM4MzE4NzI4RjhBMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDRCNjE4NDgxMDgzMTFFMkFGQkM4MzE4NzI4RjhBMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENEI2MTg0NTEwODMxMUUyQUZCQzgzMTg3MjhGOEEyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENEI2MTg0NjEwODMxMUUyQUZCQzgzMTg3MjhGOEEyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp/mixwAABMrSURBVHjaNNrnrptV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);
}





html {
  min-height: 100%;
  font-family: Poppins, Helvetica, Arial, sans-serif;
  background: #EB3349;
  background: -webkit-linear-gradient(top left, #EB3349, #F45C43);
  background: linear-gradient(to bottom right, #EB3349, #F45C43);
}

body {
  height: 100%;
  margin: 0;
  font-size: 16px;
}

body.no-overflow {
  overflow: hidden;
}

#aligner {
  height: 100%;
  min-height: 99vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

#aligner * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

h1 {
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #F36E6B;
  letter-spacing: 10px;
}

#board {
  margin: 10px 0 0 0;
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  width: 576px;
  font-size: 0;
  background-color: transparent;
  cursor: crosshair;
  overflow: hidden;
}

.holder {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 1.5px;
  border-radius: 2px;
  background-color: #F36E6B;
}

.forward .holder {
  -webkit-animation: line 4s linear infinite;
          animation: line 4s linear infinite;
}
.forward .holder:nth-child(32n + 0) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.forward .holder:nth-child(32n + 1) {
  -webkit-animation-delay: 0.125s;
          animation-delay: 0.125s;
}
.forward .holder:nth-child(32n + 2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.forward .holder:nth-child(32n + 3) {
  -webkit-animation-delay: 0.375s;
          animation-delay: 0.375s;
}
.forward .holder:nth-child(32n + 4) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.forward .holder:nth-child(32n + 5) {
  -webkit-animation-delay: 0.625s;
          animation-delay: 0.625s;
}
.forward .holder:nth-child(32n + 6) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.forward .holder:nth-child(32n + 7) {
  -webkit-animation-delay: 0.875s;
          animation-delay: 0.875s;
}
.forward .holder:nth-child(32n + 8) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.forward .holder:nth-child(32n + 9) {
  -webkit-animation-delay: 1.125s;
          animation-delay: 1.125s;
}
.forward .holder:nth-child(32n + 10) {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.forward .holder:nth-child(32n + 11) {
  -webkit-animation-delay: 1.375s;
          animation-delay: 1.375s;
}
.forward .holder:nth-child(32n + 12) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.forward .holder:nth-child(32n + 13) {
  -webkit-animation-delay: 1.625s;
          animation-delay: 1.625s;
}
.forward .holder:nth-child(32n + 14) {
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
}
.forward .holder:nth-child(32n + 15) {
  -webkit-animation-delay: 1.875s;
          animation-delay: 1.875s;
}
.forward .holder:nth-child(32n + 16) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.forward .holder:nth-child(32n + 17) {
  -webkit-animation-delay: 2.125s;
          animation-delay: 2.125s;
}
.forward .holder:nth-child(32n + 18) {
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s;
}
.forward .holder:nth-child(32n + 19) {
  -webkit-animation-delay: 2.375s;
          animation-delay: 2.375s;
}
.forward .holder:nth-child(32n + 20) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.forward .holder:nth-child(32n + 21) {
  -webkit-animation-delay: 2.625s;
          animation-delay: 2.625s;
}
.forward .holder:nth-child(32n + 22) {
  -webkit-animation-delay: 2.75s;
          animation-delay: 2.75s;
}
.forward .holder:nth-child(32n + 23) {
  -webkit-animation-delay: 2.875s;
          animation-delay: 2.875s;
}
.forward .holder:nth-child(32n + 24) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.forward .holder:nth-child(32n + 25) {
  -webkit-animation-delay: 3.125s;
          animation-delay: 3.125s;
}
.forward .holder:nth-child(32n + 26) {
  -webkit-animation-delay: 3.25s;
          animation-delay: 3.25s;
}
.forward .holder:nth-child(32n + 27) {
  -webkit-animation-delay: 3.375s;
          animation-delay: 3.375s;
}
.forward .holder:nth-child(32n + 28) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.forward .holder:nth-child(32n + 29) {
  -webkit-animation-delay: 3.625s;
          animation-delay: 3.625s;
}
.forward .holder:nth-child(32n + 30) {
  -webkit-animation-delay: 3.75s;
          animation-delay: 3.75s;
}
.forward .holder:nth-child(32n + 31) {
  -webkit-animation-delay: 3.875s;
          animation-delay: 3.875s;
}
.forward .holder:nth-child(32n + 32) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.loading .holder {
  -webkit-animation: pulse 3s infinite;
          animation: pulse 3s infinite;
}

.note {
  background-color: transparent;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.note.active {
  background-color: #FFF;
  box-shadow: 0 0 5px #FFF;
}

#file-controls {
  position: fixed;
  background: rgba(255, 255, 255, 0.1);
  top: 0;
  right: 0;
}

.button {
  display: inline-block;
  background-color: #F36E6B;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  text-align: center;
  margin: 10px;
  cursor: crosshair;
  vertical-align: bottom;
  -webkit-transition: 0.1s all;
  transition: 0.1s all;
}
.button svg {
  fill: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
.button:hover {
  background-color: #FCD7D6;
}
.button:active {
  height: 45px;
}
.button:hover > svg {
  fill: #F45C43;
}

.alt {
  margin: 0;
  padding: 0;
  background: transparent;
}
.alt svg {
  fill: #FCD7D6;
  width: 25px;
  height: 25px;
  opacity: 0.6;
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
}
.alt:hover > svg {
  opacity: 1;
}

#audio rect {
  display: inline-block;
}
#audio.mute rect {
  display: none;
}

.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 100%;
  width: 15px;
  height: 15px;
  z-index: -1;
  opacity: 1;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.huzzar {
  opacity: 0;
  -webkit-transform: scale(8);
          transform: scale(8);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#markers {
  text-align: center;
  cursor: default;
  margin: 10px 0 0 0;
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  width: 576px;
  font-size: 0;
}
#markers span {
  font-size: 2rem;
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 1.5px;
  margin-bottom: 0;
  background-color: none;
  line-height: 8px;
  color: #F36E6B;
}

.ui-dialog {
  z-index: 1001;
  font-size: 1rem;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.65);
  background: #EB3349;
  box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.4), 0 0 200px -50px rgba(255, 255, 255, 0.4);
  padding: 10px;
  border: none;
  outline: none;
}
.ui-dialog textarea {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  border: none;
  padding: 2px;
  border-radius: 5px;
  min-height: 150px;
  resize: none;
  cursor: text;
}
.ui-dialog textarea::-moz-selection {
  background: rgba(98, 191, 237, 0.99);
  color: #FFF;
}
.ui-dialog textarea::selection {
  background: rgba(98, 191, 237, 0.99);
  color: #FFF;
}

.ui-dialog-titlebar {
  cursor: move;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9);
}

.ui-dialog-titlebar-close {
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 30px;
  background: transparent;
  border: none;
  outline: none;
  float: right;
  -webkit-transition: 0.1s all;
  transition: 0.1s all;
}
.ui-dialog-titlebar-close:hover {
  color: #FFF;
}

.ui-dialog-buttonpane {
  padding: 10px 0;
  text-align: center;
}

.ui-dialog-buttonset button {
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  color: #EB3349;
  border-radius: 2px;
}

#ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: -1;
  -webkit-transition: z-index 0s 0.2s, opacity 0.2s;
  transition: z-index 0s 0.2s, opacity 0.2s;
}

#ui-widget-overlay.visible {
  cursor: default;
  opacity: 0.6;
  z-index: 1000;
  -webkit-transition: z-index 0s, opacity 0.2s;
  transition: z-index 0s, opacity 0.2s;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#social-container {
  opacity: 0.6;
  bottom: 5px;
  right: 5px;
}

#social-container p {
  padding-bottom: 0;
  margin-bottom: 0;
}

#social-container #social-links a {
  font-size: 2rem;
}

#social-message {
  font-size: 0.8rem;
}

@-webkit-keyframes line {
  0% {
    background: #FCD7D6;
  }
  30% {
    background: #F36E6B;
  }
}

@keyframes line {
  0% {
    background: #FCD7D6;
  }
  30% {
    background: #F36E6B;
  }
}
@-webkit-keyframes pulse {
  40% {
    background: #FCD7D6;
  }
}
@keyframes pulse {
  40% {
    background: #FCD7D6;
  }
}
@media (max-width: 576px) {
  #social-container #social-links, #social-container #tooltip {
    display: none;
  }

  #board {
    width: 384px;
  }

  .holder {
    height: 10px;
    width: 10px;
    margin: 1px;
    border-radius: 0;
  }

  .note {
    border-radius: 0;
  }

  .ripple {
    height: 10px;
    width: 10px;
  }

  #markers {
    width: 384px;
  }
  #markers span {
    height: 10px;
    width: 10px;
    margin: 1px;
  }
}
@media (max-height: 700px) {
  #aligner {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 20px;
  }
}

/*Downloaded from https://www.codeseek.co/RobertEatough/bb-new-site-WGmaZJ */
/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2015, Codrops
 * http://www.codrops.com
 */

var buttons = 512,
  rows = 32;
var cols = rows;
var wLoaded = false,
  nLoaded = false;



;(function(window) {

	'use strict';

	var support = { transitions: Modernizr.csstransitions },
		// transition end event name
		transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		onEndTransition = function( el, callback ) {
			var onEndCallbackFn = function( ev ) {
				if( support.transitions ) {
					if( ev.target != this ) return;
					this.removeEventListener( transEndEventName, onEndCallbackFn );
				}
				if( callback && typeof callback === 'function' ) { callback.call(this); }
			};
			if( support.transitions ) {
				el.addEventListener( transEndEventName, onEndCallbackFn );
			}
			else {
				onEndCallbackFn();
			}
		},
		// the pages wrapper
		stack = document.querySelector('.pages-stack'),
		// the page elements
		pages = [].slice.call(stack.children),
		// total number of page elements
		pagesTotal = pages.length,
		// index of current page
		current = 0,
		// menu button
		menuCtrl = document.querySelector('button.menu-button'),
		// the navigation wrapper
		nav = document.querySelector('.pages-nav'),
		// the menu nav items
		navItems = [].slice.call(nav.querySelectorAll('.link--page')),
		// check if menu is open
		isMenuOpen = false;

	function init() {
		buildStack();
		initEvents();
	}

	function buildStack() {
		var stackPagesIdxs = getStackPagesIdxs();

		// set z-index, opacity, initial transforms to pages and add class page--inactive to all except the current one
		for(var i = 0; i < pagesTotal; ++i) {
			var page = pages[i],
				posIdx = stackPagesIdxs.indexOf(i);

			if( current !== i ) {
				classie.add(page, 'page--inactive');

				if( posIdx !== -1 ) {
					// visible pages in the stack
					page.style.WebkitTransform = 'translate3d(0,100%,0)';
					page.style.transform = 'translate3d(0,100%,0)';
				}
				else {
					// invisible pages in the stack
					page.style.WebkitTransform = 'translate3d(0,75%,-300px)';
					page.style.transform = 'translate3d(0,75%,-300px)';		
				}
			}
			else {
				classie.remove(page, 'page--inactive');
			}

			page.style.zIndex = i < current ? parseInt(current - i) : parseInt(pagesTotal + current - i);
			
			if( posIdx !== -1 ) {
				page.style.opacity = parseFloat(1 - 0.1 * posIdx);
			}
			else {
				page.style.opacity = 0;
			}
		}
	}

	// event binding
	function initEvents() {
		// menu button click
		menuCtrl.addEventListener('click', toggleMenu);

		// navigation menu clicks
		navItems.forEach(function(item) {
			// which page to open?
			var pageid = item.getAttribute('href').slice(1);
			item.addEventListener('click', function(ev) {
				ev.preventDefault();
				openPage(pageid);
			});
		});

		// clicking on a page when the menu is open triggers the menu to close again and open the clicked page
		pages.forEach(function(page) {
			var pageid = page.getAttribute('id');
			page.addEventListener('click', function(ev) {
				if( isMenuOpen ) {
					ev.preventDefault();
					openPage(pageid);
				}
			});
		});

		// keyboard navigation events
		document.addEventListener( 'keydown', function( ev ) {
			if( !isMenuOpen ) return; 
			var keyCode = ev.keyCode || ev.which;
			if( keyCode === 27 ) {
				closeMenu();
			}
		} );
	}

	// toggle menu fn
	function toggleMenu() {
		if( isMenuOpen ) {
			closeMenu();
		}
		else {
			openMenu();
			isMenuOpen = true;
		}
	}

	// opens the menu
	function openMenu() {
		// toggle the menu button
		classie.add(menuCtrl, 'menu-button--open')
		// stack gets the class "pages-stack--open" to add the transitions
		classie.add(stack, 'pages-stack--open');
		// reveal the menu
		classie.add(nav, 'pages-nav--open');

		// now set the page transforms
		var stackPagesIdxs = getStackPagesIdxs();
		for(var i = 0, len = stackPagesIdxs.length; i < len; ++i) {
			var page = pages[stackPagesIdxs[i]];
			page.style.WebkitTransform = 'translate3d(0, 75%, ' + parseInt(-1 * 200 - 50*i) + 'px)'; // -200px, -230px, -260px
			page.style.transform = 'translate3d(0, 75%, ' + parseInt(-1 * 200 - 50*i) + 'px)';
		}
	}

	// closes the menu
	function closeMenu() {
		// same as opening the current page again
		openPage();
	}

	// opens a page
	function openPage(id) {
		var futurePage = id ? document.getElementById(id) : pages[current],
			futureCurrent = pages.indexOf(futurePage),
			stackPagesIdxs = getStackPagesIdxs(futureCurrent);

		// set transforms for the new current page
		futurePage.style.WebkitTransform = 'translate3d(0, 0, 0)';
		futurePage.style.transform = 'translate3d(0, 0, 0)';
		futurePage.style.opacity = 1;

		// set transforms for the other items in the stack
		for(var i = 0, len = stackPagesIdxs.length; i < len; ++i) {
			var page = pages[stackPagesIdxs[i]];
			page.style.WebkitTransform = 'translate3d(0,100%,0)';
			page.style.transform = 'translate3d(0,100%,0)';
		}

		// set current
		if( id ) {
			current = futureCurrent;
		}
		
		// close menu..
		classie.remove(menuCtrl, 'menu-button--open');
		classie.remove(nav, 'pages-nav--open');
		onEndTransition(futurePage, function() {
			classie.remove(stack, 'pages-stack--open');
			// reorganize stack
			buildStack();
			isMenuOpen = false;
		});
	}

	// gets the current stack pages indexes. If any of them is the excludePage then this one is not part of the returned array
	function getStackPagesIdxs(excludePageIdx) {
		var nextStackPageIdx = current + 1 < pagesTotal ? current + 1 : 0,
			nextStackPageIdx_2 = current + 2 < pagesTotal ? current + 2 : 1,
			idxs = [],

			excludeIdx = excludePageIdx || -1;

		if( excludePageIdx != current ) {
			idxs.push(current);
		}
		if( excludePageIdx != nextStackPageIdx ) {
			idxs.push(nextStackPageIdx);
		}
		if( excludePageIdx != nextStackPageIdx_2 ) {
			idxs.push(nextStackPageIdx_2);
		}

		return idxs;
	}

	init();

})(window);


(function () {
    var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;
    MESSAGES = [];
    MESSAGES.push({
        delay: 0,
        text: 'Incoming transmission...'
    });
    MESSAGES.push({
        delay: 1200,
        text: 'You don\'t talk to anybody.'
    });
    MESSAGES.push({
        delay: 2200,
        text: 'You don\'t interact with anybody.'
    });
    MESSAGES.push({
        delay: 3600,
        text: 'Your whole sense of reality is, pretty warped...'
    });
    MESSAGES.push({
        delay: 5200,
        text: 'Does it bother you that we\'re not real?'
    });
    $container = $('#container');
    $message = $('#message');
    $animate = $('#animate');
    $paragraph = null;
    scramble = function (element, text, options) {
        var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, j, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
        defaults = {
            probability: 0.2,
            glitches: '-|/\\',
            blank: '',
            duration: text.length * 40,
            ease: 'easeInOutQuad',
            delay: 0
        };
        $element = $(element);
        settings = $.extend(defaults, options);
        shuffle = function () {
            if (Math.random() < 0.5) {
                return 1;
            } else {
                return -1;
            }
        };
        wrap = function (text, classes) {
            return '<span class="' + classes + '">' + text + '</span>';
        };
        glitchText = settings.glitches;
        glitchCharacters = glitchText.split('');
        glitchLength = glitchCharacters.length;
        glitchProbability = settings.probability;
        glitches = function () {
            var j, len, results;
            results = [];
            for (j = 0, len = glitchCharacters.length; j < len; j++) {
                if (window.CP.shouldStopExecution(1)) {
                    break;
                }
                letter = glitchCharacters[j];
                results.push(wrap(letter, 'glitch'));
            }
            window.CP.exitedLoop(1);
            return results;
        }();
        ghostText = $element.text();
        ghostCharacters = ghostText.split('');
        ghostLength = ghostCharacters.length;
        ghosts = function () {
            var j, len, results;
            results = [];
            for (j = 0, len = ghostCharacters.length; j < len; j++) {
                if (window.CP.shouldStopExecution(2)) {
                    break;
                }
                letter = ghostCharacters[j];
                results.push(wrap(letter, 'ghost'));
            }
            window.CP.exitedLoop(2);
            return results;
        }();
        textCharacters = text.split('');
        textLength = textCharacters.length;
        order = function () {
            results = [];
            for (var j = 0; 0 <= textLength ? j < textLength : j > textLength; 0 <= textLength ? j++ : j--) {
                if (window.CP.shouldStopExecution(3)) {
                    break;
                }
                results.push(j);
            }
            window.CP.exitedLoop(3);
            return results;
        }.apply(this).sort(this.shuffle);
        output = [];
        for (i = k = 0, ref = textLength; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
            if (window.CP.shouldStopExecution(4)) {
                break;
            }
            glitchIndex = Math.floor(Math.random() * (glitchLength - 1));
            glitchCharacter = glitches[glitchIndex];
            ghostCharacter = ghosts[i] || settings.blank;
            addGlitch = Math.random() < glitchProbability;
            character = addGlitch ? glitchCharacter : ghostCharacter;
            output.push(character);
        }
        window.CP.exitedLoop(4);
        object = { value: 0 };
        target = { value: 1 };
        parameters = {
            duration: settings.duration,
            ease: settings.ease,
            step: function () {
                var index, l, progress, ref1;
                progress = Math.floor(object.value * (textLength - 1));
                for (i = l = 0, ref1 = progress; 0 <= ref1 ? l <= ref1 : l >= ref1; i = 0 <= ref1 ? ++l : --l) {
                    if (window.CP.shouldStopExecution(5)) {
                        break;
                    }
                    index = order[i];
                    output[index] = textCharacters[index];
                }
                window.CP.exitedLoop(5);
                return $element.html(output.join(''));
            },
            complete: function () {
                return $element.html(text);
            }
        };
        return $(object).delay(settings.delay).animate(target, parameters);
    };
    animate = function () {
        var data, element, index, j, len, options;
        for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
            if (window.CP.shouldStopExecution(6)) {
                break;
            }
            data = MESSAGES[index];
            element = $paragraph.get(index);
            element.innerText = '';
            options = { delay: data.delay };
            scramble(element, data.text, options);
        }
        window.CP.exitedLoop(6);
    };
    initialise = function () {
        var index, j, len, text;
        $animate.click(animate);
        for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
            if (window.CP.shouldStopExecution(7)) {
                break;
            }
            text = MESSAGES[index];
            $message.append('<p>');
        }
        window.CP.exitedLoop(7);
        $paragraph = $container.find('p');
        animate();
    };
    initialise();
}.call(this));










$(document).ready(function() {
  var holder = $('#board .holder'),
    note = $('.note');
  var notes = [];

  for (var i = 0; i < rows; i++) {
    notes[i] = new Howl({
      urls: ['https://emptyhands.bleachedbones.co.uk/samples/' + i + 'BB.wav'
      ],
      onload: loadCount(i + 1)
    });
  }

  $(window).load(function() {
    bindUserActions();
    initControls();

    wLoaded = true;
    if (nLoaded)
      $('#board').removeClass('loading').addClass('forward');

    for (var i = 0; i < rows; i++) {
      bindNote(i);
    }
  });

  function loadCount(i) {
    if (i === rows) {
      nLoaded = true;
      if (wLoaded)
        $('#board').removeClass('loading').addClass('forward');
    }
  }

  function bindNote(currNote) {
    $('#board .holder:nth-child(' + cols + 'n + ' + currNote + ')')
    .on('webkitAnimationIteration mozAnimationIteration animationiteration', 
    function() {
      if ($(this).hasClass('active')) {
        var currNote = $(this).attr('data-note');
        notes[currNote].play();

        $(this).find('.ripple').addClass('huzzar').delay(500).queue(function() {
          $(this).removeClass('huzzar').dequeue();
        });
      }
    });
  }

  function bindUserActions() {
    $(note).mousedown(function() {
      $(this).toggleClass("active");
      $(this).parent().toggleClass("active");
    });
    $(document).mousedown(function() {
      $(note).bind('mouseover', function() {
        $(this).toggleClass("active");
        $(this).parent().toggleClass("active");
      });
    }).mouseup(function() {
      $(note).unbind('mouseover');
    });
    $("#dialogSave").dialog({
      autoOpen: false,
      modal: true,
      closeText: "&#10006;",
      hide: 200
    });
    $("#dialogLoad").dialog({
      autoOpen: false,
      buttons: [{
        text: "Play",
        click: function() {
          importLoop($(this));
        }
      }],
      modal: true,
      closeText: "&#10006;",
      hide: 200
    });
  }

  function initControls() {
    $('#reset').on('click', function() {
      $('.active').removeClass('active');
    });
    $('#audio').on('click', function() {
      if ($(this).hasClass("mute"))
        Howler.unmute();
      else
        Howler.mute();
      $(this).toggleClass('mute');
    });
    $('#save').on('click', function() {
      if ($(".dialog").dialog("isOpen") !== true)
        exportLoop();
    });
    $('#load').on('click', function() {
      if ($(".dialog").dialog("isOpen") !== true)
        $("#dialogLoad").dialog("open");
    });

    $('.ui-dialog').on('dialogopen', function(event) {
      $('body').addClass('no-overflow');
      Howler.volume(0.5);
      $('#ui-widget-overlay').addClass('visible');
    }).on('dialogclose', function(event) {
      $('body').removeClass('no-overflow');
      Howler.volume(1);
      $('textarea#saveCode').val('');
      $('#ui-widget-overlay').removeClass('visible');
    });
  }

  //:x represents ON //;x represents OFF
  function exportLoop() {
    var noteCode = "",
      offCount = 0,
      onCount = 0;

    holder.each(function() {
      if ($(this).hasClass('active')) {
        if (offCount > 0)
          noteCode = noteCode + ";" + offCount;
        onCount++;
        offCount = 0;
      } else {
        if (onCount > 0)
          noteCode = noteCode + ":" + onCount + " ";
        offCount++;
        onCount = 0;
      }
    });

    if (offCount > 0)
      noteCode = noteCode + ";" + offCount;
    else if (onCount > 0)
      noteCode = noteCode + ":" + onCount;

    $("#saveCode").val("[" + noteCode + "]");
    $("#dialogSave").dialog("open");
  }

  function importLoop(dialog) {
    var noteCode = '',
       noteState,
       error = false,
       note;

    noteCode = dialog.find('textarea#importCode').val();
    dialog.dialog("close");

    noteCode = noteCode.replace("[", "");
    noteCode = noteCode.replace("]", "");

    if (noteCode.charAt(0) === ":")
      noteState = 1;
    else if (noteCode.charAt(0) === ";")
      noteState = 0;
    else {
      alert("Your note code wasn't recognised");
      error = true;
    }

    if (!error) {
      $('.active').removeClass('active');
      noteCode = noteCode.substr(1);
      var splitCode = noteCode.split(/:|;/g);
      var noteCounter = 0;

      for (i = 0; i < splitCode.length; i++) {
        var currNum = parseInt(splitCode[i]);

        if (noteState) {
          for (var n = 0; n < currNum; n++) {
            noteCounter++;
            note = $('#board span:nth-child(' + noteCounter + ')');
            note.addClass('active');
            note.children().addClass('active');
          }
        } else {
          noteCounter = noteCounter + currNum;
        }
        noteState = !noteState;
      }
    }
  }
});

Comments