<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="dvifavicon.png" type="image/png">
<meta name="description" content="DV-i :: IMPLEMENTATION, 2020 - A Maltine Records Release.">
<meta name="author" content="DV-i, dvideo.music@gmail.com">

<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel=“preload” href=“2070POLYESTER-ALP53.ttf” as=“font”>
<link rel=“preload” href=“CHICAGO.TTF” as=“font”>
<link rel=“preload” href=“akzidenzgroteskbemdcn.otf” as=“font”>
<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<title>DV-i :: Implementation</title>

<script type="text/javascript">


if (document.images) {
			    img0 = new Image();
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();
				img4 = new Image();
				img5 = new Image();
				img6 = new Image();
				img7 = new Image();
				img8 = new Image();
				img9 = new Image();
				img10 = new Image();
			    img11 = new Image();
				img12 = new Image();
			    img13 = new Image();
			    img14 = new Image();
			    img15 = new Image();
			    img16 = new Image();
			    img17 = new Image();
			    img18 = new Image();
			    img19 = new Image();
			    img20 = new Image();
			    img21 = new Image();
			    img22 = new Image();
			    img23 = new Image();
			    img24 = new Image();
			    img25 = new Image();
			    img26 = new Image();
			    
				img0.src = "impmainlogo.svg";
				img1.src = "rdlogospart2.svg";
				img2.src = "rdlogospart1-maltine.svg";
				img3.src = "rdlogospart1-dvi.svg";
				img4.src = "rdlogospart1-andy.svg";
				img5.src = "main.svg";
				img6.src = "dvilogo.svg";
				img7.src = "parametertitle.svg";
				img8.src = "dreamnavlogos.svg";
				img9.src = "dreamnavdevlogo.svg";
				img10.src = "dividerwidget.svg";
				img11.src = "backbutton.svg";
				img12.src = "configtitle.svg";
				img13.src = "ambiguitylogos.svg";
			img14.src = "ambiguitydevlogo.svg";
			img15.src = "absolutefluxlogos.svg";
			img16.src = "absolutefluxdevlogo.svg";
			img17.src = "instincttitle.svg";
			img18.src = "selector.svg";
			img19.src = "human-index-defaultsmall2.png";
			img20.src = "absolute-defaultsmall.png";
			img21.src = "ambiguity-defaultsmall.png";
			img22.src = "dream-nav-defaultsmall2.png";
			
			img23.src = "dream-nav-posesmall.png";
			img24.src = "ambiguity-pose-small.png";
			img25.src = "absolute-flux-posesmall.png";
			img26.src = "human-index-pose-small.png";
			
			
			}

$( document ).ready(function() {
   
    $( '#logocenter' ).fadeIn(1000).delay(2000).fadeOut(300);
    $('#containerdiv').delay(3000).animate({opacity:'1'},600,function(){$('#bgvid').animate({opacity:'0.6'},200);});
   
});

function tantitlefade(){
$('#tantitle1').animate({opacity:'0'},150);
$('#tantitle2').animate({opacity:'0'},150);
$('#tantitle3').animate({opacity:'0'},150);
$('#tantitle4').animate({opacity:'0'},150);
}

function dividershow(a){
	document.getElementById('divider').style.display='block';
	document.getElementById('backbutton').style.display='block';
	$('#divider').animate({height:'400'},400, function(){

if(a=='1'){
absoluteheadershow();
}

	if(a=='2'){
humanheadershow();}	


	if(a=='3'){
ambiheadershow();}	


	if(a=='4'){
dreamnavheadershow();}	

});


}


function back(){
	document.getElementById('dreamnav').style.display='block';
	document.getElementById('ambiguity').style.display='block';
	document.getElementById('humanindex').style.display='block';
	document.getElementById('absoluteflux').style.display='block';
$('#divider').animate({height:'0'},300);
$('#ambiguity').animate({opacity:1},200);

$('#humanindex').animate({opacity:1},200);
$('#absoluteflux').animate({opacity:1},200);
$('#dreamnav').animate({opacity:1},200);

	$('#ambiguitydevlogo').animate({opacity:0},0);
	$('#dreamnavdevlogo').animate({opacity:0},0);
	$('#humanindexdevlogo').animate({opacity:0},0);
	$('#absolutefluxdevlogo').animate({opacity:0},0);
	
document.getElementById('divider').style.display='none';
	document.getElementById('backbutton').style.display='none';
	
	
	document.getElementById('dreamnavprofile').style.display='none';
	document.getElementById('ambiguityprofile').style.display='none';
	document.getElementById('humanindexprofile').style.display='none';
	document.getElementById('absolutefluxprofile').style.display='none';
	
	document.getElementById('dreamnavheader').style.display='none';
	document.getElementById('absolutefluxheader').style.display='none';
	document.getElementById('ambiguityheader').style.display='none';
	document.getElementById('humanindexheader').style.display='none';
	

}

function dreamnavheadershow(){
document.getElementById('dreamnavheader').style.display='block';
$('#dreamnavheader').animate({opacity:1},200);

}

function ambiheadershow(){
document.getElementById('ambiguityheader').style.display='block';
$('#ambiguityheader').animate({opacity:1},200);


}

function absoluteheadershow(){
document.getElementById('absolutefluxheader').style.display='block';
$('#absolutefluxheader').animate({opacity:1},200);


}

function humanheadershow(){
document.getElementById('humanindexheader').style.display='block';
$('#humanindexheader').animate({opacity:1},200);


}


function dreamnav(){
tantitlefade();
$('#selector').animate({opacity:0},100);

document.getElementById('divider').style.backgroundColor = '#80ff08';	
$('#ambiguity').animate({opacity:0},200,function(){document.getElementById('ambiguity').style.display='none';});
$('#humanindex').animate({opacity:0},200,function(){document.getElementById('humanindex').style.display='none';});
$('#absoluteflux').animate({opacity:0},200,function(){document.getElementById('absoluteflux').style.display='none';});
$('#dreamnav').animate({opacity:'0'},200, function(){
document.getElementById('dreamnav').style.display='none';
document.getElementById('dreamnavprofile').style.display='block';
$('#dreamnavprofile').animate({opacity:1},200);
$('#dreamnavdevlogo').animate({opacity:0},200, function(){dividershow('4');});});


}

function ambiguity(){
tantitlefade();
$('#selector').animate({opacity:0},100);

document.getElementById('divider').style.backgroundColor = '#FFDD17';	
	$('#dreamnav').animate({opacity:0},200,function(){document.getElementById('dreamnav').style.display='none';});
$('#humanindex').animate({opacity:0},200,function(){document.getElementById('humanindex').style.display='none';});
$('#absoluteflux').animate({opacity:0},200,function(){document.getElementById('absoluteflux').style.display='none';});
$('#ambiguity').animate({opacity:'0'},200, function(){
document.getElementById('ambiguity').style.display='none';
document.getElementById('ambiguityprofile').style.display='block';
$('#ambiguityprofile').animate({opacity:1},200);
$('#ambiguitydevlogo').animate({opacity:0},200,function(){dividershow('3');});

});

}

function humanindex(){
tantitlefade();
$('#selector').animate({opacity:0},100);

document.getElementById('divider').style.backgroundColor = '#7B65B7';	
	$('#dreamnav').animate({opacity:0},200,function(){document.getElementById('dreamnav').style.display='none';});
$('#ambiguity').animate({opacity:0},200,function(){document.getElementById('ambiguity').style.display='none';});
$('#absoluteflux').animate({opacity:0},200,function(){document.getElementById('absoluteflux').style.display='none';});
$('#humanindex').animate({opacity:'0'},200, function(){
document.getElementById('humanindex').style.display='none';
document.getElementById('humanindexprofile').style.display='block';
$('#humanindexprofile').animate({opacity:1},200);
$('#humanindexdevlogo').animate({opacity:0},200,function(){dividershow('2');}); 

});

}

function absoluteflux(){
tantitlefade();
$('#selector').animate({opacity:0},100);

document.getElementById('divider').style.backgroundColor = '#FFB6FA';	
	$('#dreamnav').animate({opacity:0},200,function(){document.getElementById('dreamnav').style.display='none';});
$('#humanindex').animate({opacity:0},200,function(){document.getElementById('humanindex').style.display='none';});
$('#ambiguity').animate({opacity:0},200,function(){document.getElementById('ambiguity').style.display='none';});
$('#absoluteflux').animate({opacity:'0'},200, function(){
document.getElementById('absoluteflux').style.display='none';
document.getElementById('absolutefluxprofile').style.display='block';
$('#absolutefluxprofile').animate({opacity:1},200);
$('#absolutefluxdevlogo').animate({opacity:0},200,function(){dividershow('1');});


});

}


</script>


<style type="text/css">
@keyframes zoomin{
	0% {transform: scale(1,1);}
	100% {transform: scale(1.05,1.05);}
	
}
@keyframes example {
    0%   {transform: rotateY(0deg); }

    100% {transform: rotateY(360deg); }
}

@keyframes example2 {
    0%   {transform: rotateY(0deg); }

    100% {transform: rotateY(0deg); }
}

@keyframes dvilogo {
    0%   {opacity:0; filter:blur(20px); transform: scale(2); }

    100% {opacity:1; filter:blur(0px); transform: scale(1.0); }
}


@keyframes selectorrotate {
    0%   {transform: scaleY(.2) rotateZ(0deg);  }

    100% {transform: scaleY(.2) rotateZ(360deg);	 }
}


@keyframes example2 {
    0%   {background-position-y:0px; background-position-x:0px;}

    100% {background-position-y:200px; background-position-x:200px;}
}

@keyframes blink {
    0%   {opacity:1;}

    100% {opacity:.4;}
}

body{
	background:#ffffff;
}


@media only screen and (min-device-width : 375px) and (max-device-width : 667px){
	#maindiv{
position:absolute;
width:1200px;
height:600px;
top:50%;
left:50%;
z-index:2;
margin-top:-300px;
margin-left:-600px;	
zoom:1;
overflow:hidden;
}	

#header2{
	position:absolute;
	display:none;
	top:20px;
	right:20px;
	width:100px;
	height:100px;
	animation-name: example2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#tantitle1{
	opacity:1;
}

#tantitle2{
	opacity:1;
}

#tantitle3{
	opacity:1;
}

#tantitle4{
	opacity:1;
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -10000;
    opacity:1;
    zoom:0.7;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 

}

	#containerdiv{
	
zoom:0.43;
z-index:20;
}	
#ambiguityheader{
position:absolute;
font-size:6pt;
transform: scale(0.8);
margin-left:-60px;
margin-top:-60px;
	}
#ambiguityheader p{
	font-family:'Chicago';
	font-size:9px;
	margin-top:-30px;
}

#ambiguityheader h2{
font-family:"akzidenzgrotesk";
font-size:30pt;	
text-transform:uppercase;
margin-top:-37px;
}
	
}

#maindiv{
position:absolute;
width:1200px;
height:600px;
top:50%;
left:50%;
z-index:20;
margin-top:-300px;
margin-left:-600px;	

overflow:hidden;
}	


/* DREAM NAVIGATOR */

#dreamnav{
margin-top:150px;
position:absolute;
left:780px;	
width:400px;
height:220px;
background-image:url(parambot.png);
background-size:contain;
}
#dreamnav:hover{

width:400px;
height:220px;
background-image:url(parambot.png);
background-size:contain;
opacity:1;
cursor:pointer;
 animation-name: zoomin;
       animation-duration: .5s;
       animation-direction: alternate;
       animation-iteration-count: infinite;
}

#dreamnavprofile{
display:none;
opacity:0;
margin-top:20px;
position:absolute;
left:80px;	
width:500px;
height:500px;
background-image:url(paramrot.png);
background-size:cover;
}
#dreamnavheader{
display:none;
	position:absolute;
	left:650px;
top:30px;
opacity:0;
}


/* AMBIGUITY */

#ambiguity{
margin-top:60px;
position:absolute;
left:510px;	
width:400px;
height:400px;
background-image:url(configbot.png);
background-size:cover;
}
#ambiguity:hover{

width:400px;
height:400px;
background-image:url(configbot.png);
background-size:cover;
opacity:1;
cursor:pointer;
 animation-name: zoomin;
       animation-duration: .5s;
       animation-direction: alternate;
       animation-iteration-count: infinite;
}
#ambiguityprofile{
display:none;
opacity:0;
margin-top:0px;
position:absolute;
left:50px;	
width:500px;
height:500px;
background-image:url(configrot.png);
background-size:cover;
}
#ambiguityheader{
display:none;
	position:absolute;
	left:650px;
top:30px;
opacity:0;
}


/* HUMAN INDEX */

#humanindex{
margin-top:160px;
margin-left:30px;
position:absolute;
left:250px;	
width:400px;
height:271px;
background-image:url(mediabot.png);
background-size:cover;

}
#humanindex:hover{

width:400px;
height:271px;

margin-left:30px;
background-image:url(mediabot.png);
background-size:cover;
opacity:1;
cursor:pointer;
 animation-name: zoomin;
       animation-duration: .5s;
       animation-direction: alternate;
       animation-iteration-count: infinite;
}
#humanindexprofile{
display:none;
opacity:0;
margin-top:40px;
position:absolute;
left:50px;	
width:480px;
height:480px;
background-image:url(mediaprotrot2.png);
background-size:cover;
}
#humanindexheader{
display:none;
	position:absolute;
	left:650px;
top:30px;
opacity:0;
}


/* ABSOLUTE FLUX */

#absoluteflux{
margin-top:160px;
position:absolute;
left:0px;	
width:400px;
height:283px;
background-image:url(instinctbot.png);
background-size:cover;
}
#absoluteflux:hover{

width:400px;
height:283px;
background-image:url(instinctbot.png);
background-size:cover;
opacity:1;
cursor:pointer;
 animation-name: zoomin;
       animation-duration: .5s;
       animation-direction: alternate;
       animation-iteration-count: infinite;
}
#absolutefluxprofile{
display:none;
opacity:0;
margin-top:20px;
position:absolute;
left:60px;	
width:500px;
height:500px;
background-image:url(instinctrot.png);
background-size:cover;
}
#absolutefluxheader{
display:none;
	position:absolute;
	left:650px;
top:30px;
opacity:0;
}


#bgdiv{	
	position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    opacity:.2;
    animation-name: example2;
       animation-duration: 2s;
       animation-timing-function:linear;
    animation-iteration-count: infinite;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(mainb.svg);
    background-repeat:repeat;
    background-size: 200px 200px;
     background-origin: content-box;
}
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -10000;
    opacity:1;
    zoom:0.7;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 

}
#divider{
position:absolute;
display:none;
top:90px;
left:590px;
	width: 30px;
	height:0px;
	background:#80ff08;
	opacity:1;
}

#selector{
opacity:0;
position:absolute;
top:340px;
left:100px;	
width:210px;
height:210px;
 	

background: url(selector.svg) no-repeat;
background-position: center center;
animation-name: selectorrotate;
       animation-duration: 3s;
       animation-direction: normal;
       animation-iteration-count: infinite;	
       animation-timing-function: linear;	
}

.tantitle{
opacity:0;
position:absolute;
top:480px;
left:100px;	
display:block;
width:230px;
height:210px;	
}

.additionalrotate{

}

#backbutton{
position:absolute;
display:none;
left:20px;
top:544px;
opacity:1;
animation-name: blink;
       animation-duration: .2s;
       animation-direction: normal;
       animation-iteration-count: infinite;	
}
#backbutton:hover{
position:absolute;
top:544px;
opacity:.5;
cursor:pointer;
	
}

@font-face {
  font-family: '2070poly';
  src: url('2070POLYESTER-ALP53.ttf');
}

@font-face {
  font-family: 'akzidenzgrotesk';
  src: url('akzidenzgroteskbemdcn.otf');
}

@font-face {
  font-family: 'chicago';
  src: url('CHICAGO.TTF');
}

h1{
font-family:"akzidenzgrotesk";
font-size:70pt;	
text-transform:uppercase;
line-height:56pt;
padding-bottom:0px;
}
h2{
font-family:"akzidenzgrotesk";
font-size:30pt;	
text-transform:uppercase;
margin-top:-47px;
}
p{
	font-family:"chicago";
	margin-top:-37px;
	font-size:9pt;
padding-bottom:0px;
margin-bottom:0px;
}

@keyframes typing {
  from { width: 0% }
  to { width: 100% }
}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
   /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: typing 3.5s steps(30, end);
  
}

/* The typing effect */


#footerpt1{
position:absolute;
bottom:20px;
left:25px;
	
}
#footerpt1 a{
cursor:pointer;
opacity:1;
}

#footerpt1 a:hover{

cursor:pointer;
opacity:0.7;	
}
#footerpt2{
position:absolute;
bottom:12px;
right:30px;	
}

#footerpt2 a{
cursor:pointer;
opacity:1;
}

#footerpt2 a:hover{

cursor:pointer;
opacity:0.7;	
}

#header{
	position:absolute;
	top:10px;
	left:20px;
}
#header2{
	position:absolute;
	top:20px;
	right:20px;
	width:100px;
	height:100px;
	animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}
#containerdiv{
	opacity:0;
}
#logocenter{
position:absolute;	
width:400px;
height:400px;
top:50%;
left:50%;
opacity:1;
margin-left:-200px;
margin-top:-200px;
animation-name: dvilogo;
    animation-duration: 2s;
    animation-iteration-count: 1;
background: url(dvilogo.svg) no-repeat;
background-position: center center;
}

</style>
</head>
<body>
<audio>
	<source src="regularbeep.mp3" id="selectbeep"></source>
	</audio>
	
	<audio>
	<source src="hover.mp3" id="hoverbeep"></source>
	</audio>

<audio id="dviost" src="DViAudioLogo2017-4.mp3" autoplay="autoplay" hidden=true></audio>
<div id="logocenter">

</div>
<div id="containerdiv">

<div id="header"><img src="impmainlogo.svg"width=600></div>
<div id="header2"><img src="main.svg"width=100></div>
<div id="backbutton" onclick="back();"><img src="backbutton.svg" width=45></div>
<div id="maindiv">
<div id="selector" class="additionalrotate"></div>
<div id="tantitle1" class="tantitle"style="left:100px;" ><img src="instincttitle.svg" width=210></div>
<div id="tantitle2" class="tantitle" style="left:350px;" ><img src="mediatitle.svg" width=210></div>
<div id="tantitle3" class="tantitle" style="left:610px;"><img src="configtitle.svg" width=210></div>
<div id="tantitle4" class="tantitle" style="left:880px;"><img src="parametertitle.svg" width=210></div>
<div id="dreamnav" onmouseover="  $('#tantitle4').animate({opacity:'1'},150); document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.left='880px';" onmouseout="document.getElementById('tantitle4').style.opacity='0'; document.getElementById('selector').style.opacity='0';" onclick="dreamnav();"></div>

<div id="ambiguity" onmouseover="$('#tantitle3').animate({opacity:'1'},150); document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.left='610px';" onmouseout="document.getElementById('selector').style.opacity='0'; document.getElementById('tantitle3').style.opacity='0';" onclick="ambiguity();"></div>

<div id="humanindex" onmouseover="$('#tantitle2').animate({opacity:'1'},150); document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.left='350px';" onmouseout="document.getElementById('selector').style.opacity='0'; document.getElementById('tantitle2').style.opacity='0';"onclick="humanindex();"></div>
<div id="absoluteflux" onmouseover=" $('#tantitle1').animate({opacity:'1'},150);   document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.opacity='1'; document.getElementById('selector').style.left='100px';" onmouseout="document.getElementById('selector').style.opacity='0'; document.getElementById('tantitle1').style.opacity='0';" onclick="absoluteflux();"></div>
<div id="divider"><img src="dividerwidget.svg" width=25 style="position:absolute;left:6px; top:-3px;"></div>

<div id="dreamnavprofile"></div>
<div id="absolutefluxprofile"></div>
<div id="humanindexprofile"></div>
<div id="ambiguityprofile"></div>

<div id="dreamnavheader">
<h1>PARAMETER<br>MX-04</h1>
<h2>Advanced Anti-Tier Browsing System</h2>
<p>•FLAT™ SATTELITE ACCESS<br>
•PERSONAL MULTI-REGION FRACTAL VPN ACCESSIBILITY<br>
•COMPLETE DATA PRIVACY<br>
•100 LAYERS OF ENCRYPTION
•1 YOTTAFLOP QUANTUM PROCESSOR<br>
•COST : $7,000,000<br>
<img src="paramlogos.svg"style="width:300px; margin-left:-25px;">
</p>

</div>

<div id="ambiguityheader">
<h1>CONFIGURATION<br>MX-03</h1>
<h2>Personal OZone Layer</h2>
<p>•INTEGRATED ARMOR SYSTEM<br>
•VARIABLE TEMPERATURE SENSORS WITH ATMOS™ SENSITIVITY<br>
•NULL FOOTPRINT PERSONAL OZONE LAYER GENERATOR SYSTEM<br>
•.5 YOTTAFLOP QUANTUM PROCESSOR<br><br>
•DETECTS MINUTE CHANGES IN LOCAL REEF TEMPERATURE<br>
•QUANTUM INTERNET ENABLED<br>
•COST : $6,000,000<br></p>
<img src="configlogos.svg"style="width:180px; margin-left:-2px;margin-top:10px;">

</div>

<div id="absolutefluxheader">
<h1>Instinct ABYSS<br>MX-01</h1>
<h2>Advanced Personal Defense System</h2>
<p>•ENCAPSULATING ENERGY SHIELD GRID<br>
•VARIABLE VOLTAGE TASER SYSTEM<br>
•INTERCEPTION TARGETING AND NULLIFICATION<br>
•1 YOTTAFLOP QUANTUM PROCESSOR<br>
•COST : $7,000,000<br>
<img src="instinctlogos.svg"style="width:300px; margin-left:-4px; margin-top:15px;">
</p>

</div>

<div id="humanindexheader">
<h1>Media Prototype<br>MX-02</h1>
<h2>Personal Psycho-Medical System</h2>
<p>•INTEGRATED PSYCHOANALYSIS + ANXIETY COUNTERMEASURES<br>
•FULL HEALTH MONITORING SYSTEM<br>
•MOLECULAR SYNTHESIZER AND CRISPR EDITOR<br>
•3.5 YOTTAFLOP QUANTUM PROCESSOR<br>
•COST : $10,000,000<br>
<img src="medialogos.svg"style="width:250px; margin-left:-2px;">
</p>
</div>


<img src="dreamnavdevlogo.svg" id="dreamnavdevlogo" width=200 style="opacity:0;position:absolute;top:450px;left:55px;">
<img src="ambiguitydevlogo.svg" id="ambiguitydevlogo" width=200 style="opacity:0;position:absolute;top:450px;left:55px;">
<img src="humanindexdevlogo.svg" id="humanindexdevlogo" width=200 style="opacity:0;position:absolute;top:450px;left:55px;">
<img src="absolutefluxdevlogo.svg" id="absolutefluxdevlogo" width=200 style="opacity:0;position:absolute;top:450px;left:55px;">
</div>
<div id="footerpt1"><a href="http://www.soundcloud.com/d-video" target="_blank"><img src="rdlogospart1-dvi.svg" width=90></a><a href="https://soundcloud.com/maltine-record" target="_blank"><img src="rdlogospart1-maltine.svg" width=46 style="margin-left:4px;"></a></div>
<div id="footerpt2"><a href="https://soundcloud.com/maltine-record/configuration?in=maltine-record/sets/dv-i-implementation" target="_blank"><img src="configlogopt2.svg" width=93></a><a href="https://soundcloud.com/maltine-record/media-prototype-text-888-for?in=maltine-record/sets/dv-i-implementation" target="_blank"><img src="medialogopt2.svg" style="margin-left:3px; padding-right:5px; margin-top:10px;"width=110></a><a href="https://soundcloud.com/maltine-record/parameter?in=maltine-record/sets/dv-i-implementation" target="_blank"><img src="paramlogopt2.svg"width=110 style="margin-left:-5px;"></a><a href="https://soundcloud.com/maltine-record/instinct-abyss?in=maltine-record/sets/dv-i-implementation" target="_blank"><img src="instinctlogopt2.svg"width=117></a></div>
</div>
<video autoplay loop muted playsinline preload id="bgvid">
    <source src="websitebackingcomp4.mp4" type="video/mp4">
    

<script>
 
    $(document).ready(function() {
        var obj = document.createElement("audio");
        obj.src="regularbeep.mp3";
        obj.volume=0.50;
        obj.autoPlay=false;
        obj.preLoad=true;     
         var hoverobj = document.createElement("audio");
        hoverobj.src="hover.mp3";
        hoverobj.volume=0.50;
        hoverobj.autoPlay=false;
        hoverobj.preLoad=true;  
        
           var backobj = document.createElement("audio");
        backobj.src="windowclose2.mp3";
        backobj.volume=0.50;
        backobj.autoPlay=false;
        backobj.preLoad=true;       
		
		$("#backbutton").click(function() {
		    backobj.pause();
            backobj.currentTime = 0;
            backobj.play();
        });
 
        $("#dreamnav").click(function() {
            obj.pause();
            obj.currentTime = 0;
            obj.play();
        });
        
        $("#dreamnav").mouseenter(function() {
            hoverobj.pause();
            hoverobj.currentTime = 0;
            hoverobj.play();
        });
 
 
        $("#ambiguity").click(function() {
            obj.pause();
            obj.currentTime = 0;
            obj.play();
        });
        
        $("#ambiguity").mouseenter(function() {
            hoverobj.pause();
            hoverobj.currentTime = 0;
            hoverobj.play();
        });
        
        
        $("#absoluteflux").click(function() {
            obj.pause();
            obj.currentTime = 0;
            obj.play();
           
        });
        
        $("#absoluteflux").mouseenter(function() {
            hoverobj.pause();
            hoverobj.currentTime = 0;
            hoverobj.play();
        });
        
        
        $("#humanindex").click(function() {
            obj.pause();
            obj.currentTime = 0;
            obj.play();
        });
        
          $("#humanindex").mouseenter(function() {
            hoverobj.pause();
            hoverobj.currentTime = 0;
            hoverobj.play();
        });
    });
 
</script>
	
</body>
</html>