<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="img/brand/favicon.png">
    <title>The VIA Agency</title>
    <link href="//fast.fonts.net/cssapi/83c7820e-3c64-4b68-bb0f-619e7f8359f9.css" rel="stylesheet"><!--fonts.com-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="/css/junebug.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>     
    <script src="/js/modernizr.custom.js"></script>     

<style type="text/css">
<style type="text/css">
* { margin: 0; padding: 0;}

html { height: 100%; overflow: hidden;}

canvas {
  z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

@-webkit-keyframes as {
  0%  { opacity: 0;}
  10% { opacity: .3;}
  20% { opacity: .1;}
  30% { opacity: .5;}
  40% { opacity: 0;}
  50% { opacity: .8;}
  55% { opacity: 0;}
  55% { opacity: 0;}
}

@-moz-keyframes as {
  0%  { opacity: 0;}
  10% { opacity: .3;}
  20% { opacity: .1;}
  30% { opacity: .5;}
  40% { opacity: 0;}
  50% { opacity: .8;}
  55% { opacity: 0;}
  55% { opacity: 0;}
}

@-o-keyframes as {
  0%  { opacity: 0;}
  10% { opacity: .3;}
  20% { opacity: .1;}
  30% { opacity: .5;}
  40% { opacity: 0;}
  50% { opacity: .8;}
  55% { opacity: 0;}
  55% { opacity: 0;}
}

@keyframes as {
  0%  { opacity: 0;}
  10% { opacity: .3;}
  20% { opacity: .1;}
  30% { opacity: .5;}
  40% { opacity: 0;}
  50% { opacity: .8;}
  55% { opacity: 0;}
  55% { opacity: 0;}
}

/* full-screen dark gradient */
.frame {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */
}

/* horizontal bars that move down */
.frame div {
  position: absolute;
  left: 0;
  top: -35%;
  width: 100%;
  height: 35%;
  background-color: rgba(0, 0, 0, .12);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  -webkit-animation: asd 15s linear infinite;
  -moz-animation: asd 15s linear infinite;
  -o-animation: asd 15s linear infinite;
  animation: asd 15s linear infinite;
}

.frame div:nth-child(1) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}

.frame div:nth-child(2) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
}

@-webkit-keyframes asd {
  0% { top: -35%;}
  100% { top: 100%;}
}

@-moz-keyframes asd {
  0% { top: -35%;}
  100% { top: 100%;}
}

@-o-keyframes asd {
  0% { top: -35%;}
  100% { top: 100%;}
}

@keyframes asd {
  0% { top: -35%;}
  100% { top: 100%;}
}

.h1 {
  z-index: 3; position: absolute;
  font-family: 'DIN Next W01 Medium', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 100px;
  line-height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  width: 100%;
  margin-left: -50%;
  height: 100px;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 30px rgba(0, 0, 0, .5);
  -webkit-animation: asdd 2s linear infinite;
  -moz-animation: asdd 2s linear infinite;
  -o-animation: asdd 2s linear infinite;
  animation: asdd 2s linear infinite;
}

@-webkit-keyframes asdd {
  0% { text-shadow: 0 0 30px rgba(0, 0, 0, .5);}
  33% { text-shadow: 0 0 10px rgba(0, 0, 0, .4);}
  66% { text-shadow: 0 0 20px rgba(0, 0, 0, .2);}
  100% { text-shadow: 0 0 40px rgba(0, 0, 0, .8);}
}

@-moz-keyframes asdd {
  0% { text-shadow: 0 0 30px rgba(0, 0, 0, .5);}
  33% { text-shadow: 0 0 10px rgba(0, 0, 0, .4);}
  66% { text-shadow: 0 0 20px rgba(0, 0, 0, .2);}
  100% { text-shadow: 0 0 40px rgba(0, 0, 0, .8);}
}

@-o-keyframes asdd {
  0% { text-shadow: 0 0 30px rgba(0, 0, 0, .5);}
  33% { text-shadow: 0 0 10px rgba(0, 0, 0, .4);}
  66% { text-shadow: 0 0 20px rgba(0, 0, 0, .2);}
  100% { text-shadow: 0 0 40px rgba(0, 0, 0, .8);}
}

@keyframes asdd {
  0% { text-shadow: 0 0 30px rgba(0, 0, 0, .5);}
  33% { text-shadow: 0 0 10px rgba(0, 0, 0, .4);}
  66% { text-shadow: 0 0 20px rgba(0, 0, 0, .2);}
  100% { text-shadow: 0 0 40px rgba(0, 0, 0, .8);}
}

.home {
  opacity: .7;
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 850px) {
  .h1 {
    font-size: 70px;
    line-height: 70px;
    margin-top: -25px;
    height: 55px;
  }
}

@media screen and (max-width: 700px) {
  .h1 {
    font-size: 50px; 
    line-height: 50px; 
    height: 40px;
  }
}

</style>
</head>
<body>
  <nav id="primary">
    <a class="home" href="/"><img src="http://www.theviaagency.com/img/brand/via-logo.png" alt="VIA logo"></a>
  </nav><!--#primary-->
      
  <p class="h1">Page not found</p>

  <div class="frame">
    <div></div>
    <div></div>
  </div>

  <canvas id="canvas"></canvas>

  <script type="text/javascript">
    var Application = ( function () {
      var canvas;
      var ctx;
      var imgData;
      var pix;
      var WIDTH;
      var HEIGHT;
      var flickerInterval;
  
      var init = function () {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = WIDTH = 700;
        canvas.height = HEIGHT = 500;
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
        ctx.fill();
        imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
        pix = imgData.data;
        flickerInterval = setInterval(flickering, 30);
      };
  
      var flickering = function () {
        for (var i = 0; i < pix.length; i += 4) {
          var color = (Math.random() * 255) + 50;
          pix[i] = color;
          pix[i + 1] = color;
          pix[i + 2] = color;
        }
        ctx.putImageData(imgData, 0, 0);
      };
  
      return {
        init: init
      };
    }());
  
    Application.init();
  </script>
</body>
</html>