html {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#screen {
	position: absolute;
	height: 100%;
	width: 100%;
	background: #2a2a2a;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}
#clip {
	position: absolute;
	overflow: visible;
	top:20%;
	height: 60%;
	width: 100%;
	border-top: #444 1px solid;
	border-bottom: #444 1px solid;
	background: #000000;
}
#screen svg {
	position: absolute;
	width: 100%;
	height: 100%;
}
.search {
	background:#0065CB !important;
}

<div id="screen">
	<div id="clip"></div>
</div>

/* 
 * ======================================================
 * SVG experiment
 * http://www.dhteumeuleu.com/never-forcey
 * Author Gerard Ferrandez - September 2004
 * ---------------------------------------------------
 * Released under the MIT license
 * http://www.dhteumeuleu.com/LICENSE.html
 * 10 Oct 2011 : converted from VML to SVG
 * Last updated: 30 Nov 2012 - mobilized
 * ======================================================
 */

"use strict";

(function () {
	// ----- private vars -----
	var pointer, scr, svg, svgNS = "http://www.w3.org/2000/svg";
	var vect = [], lines = [], sw, nw, nh, py;
	var nbx = 14, nby = 0, cx = 0, cy = 0, rad = 0, ws = 0, hs = 0;
	// ----- insert SVG line -----
	var insertSVGLine = function () {
		var line = document.createElementNS(svgNS, "line");
		line.setAttribute("stroke-linecap", "round");
		line.setAttribute("stroke", "rgb(0,0,0)");
		svg.appendChild(line);
		return line;
	}
	// ----- Robot prototype -----
	var Vector = function (n, x, y) {
		if (lines.length <= n * 2) {
			lines.push(insertSVGLine());
			lines.push(insertSVGLine());
		}
		this.x = x;
		this.y = y;
	}
	// ----- 3D lens ----
	Vector.prototype.points = function () {
		this.x1 = this.x * ws;
		this.y1 = py + this.y * hs + sw * 0.5;
		var dx = cx - this.x1;
		var dy = cy - this.y1;
		var dist = Math.sqrt(dx * dx + dy * dy);
		if (dist < rad) {
			var k = Math.PI * Math.abs(dist / rad);
			var M = Math.sin(k);
			this.zIndex =  (1 + 3 * (1 - Math.sin(k * .5)));
			this.visible = true;
			this.x2 = 1 + this.x1 - dx * M;
			this.y2 = 1 + this.y1 - dy * M;
		} else {
			this.zIndex = -1;
			this.visible = false;
		}
	}
	// ----- animation function -----
	Vector.prototype.animSVG = function (i) {
		var shad = lines[i * 2];
		var line = lines[i * 2 + 1];
		if (this.visible) {
			this.isVisible = true;
			// ---- color line ----
			line.setAttribute("visibility", "visible");
			line.setAttribute("stroke-width", sw);
			line.setAttribute("x1", Math.round(this.x1));
			line.setAttribute("y1", Math.round(this.y1));
			line.setAttribute("x2", Math.round(this.x2));
			line.setAttribute("y2", Math.round(this.y2));
			var c = Math.round(-196 + this.zIndex * 255);
			line.setAttribute("stroke", "rgb(" + 
				Math.round(c * pointer.Y / nh) + "," + 
				Math.round(c * .5) + "," + 
				Math.round(c * pointer.X / nw) + ")"
			);
			// ---- shadow ----
			shad.setAttribute("visibility", "visible");
			shad.setAttribute("stroke-width", sw);
			shad.setAttribute("x1", Math.round(this.x1 + sw * 0.25));
			shad.setAttribute("y1", Math.round(this.y1));
			shad.setAttribute("x2", Math.round(this.x2 + sw * 0.25));
			shad.setAttribute("y2", Math.round(this.y2));
		} else {
			if (this.isVisible) {
				// ---- hide line ----
				line.setAttribute("visibility", "hidden");
				shad.setAttribute("visibility", "hidden");
				this.isVisible = false;
			}
		}
	}
	// ----- resize screen ----
	var resize = function () {
		nw = Math.max(scr.width, scr.height);
		var d = document.getElementById("clip");
		nh  = d.offsetHeight - 6;
		py  = d.offsetTop + 2;
		sw  = Math.round(nw / 20);
		ws  = nw / nbx;
		nby = Math.round(nbx * nh / nw);
		hs  = (nh - sw) / nby;
		rad = nw / 4;
		// ---- hide lines ----
		var i = 0, o;
		while ( o = lines[i++] ) 
			o.setAttribute("visibility", "hidden");
		// ---- reset lines ----
		vect = [];
		var k = 0;
		for (var j = 0; j <= nby; j++) {
			for (var i = 0; i <= nbx; i++) {
				vect.push(
					new Vector(k++, i, j)
				);
			}
		}
	}
	// ----- main loop -----
	var run = function () {
		// ---- easing mouse ----
		cx += Math.round((pointer.X - cx) * 0.1);
		cy += Math.round((pointer.Y - cy) * 0.1);
		// ---- calculate positions ----
		var i = 0, o;
		while ( o = vect[i++] ) o.points();
		// ---- zIndex sorting ----
		vect.sort(function (p0, p1) {
			return p0.zIndex - p1.zIndex;
		});
		// ---- painting ----
		var i = 0, o;
		while ( o = vect[i] ) o.animSVG(i++);
		// ---- animation loop ----
		requestAnimFrame(run);
	}
	// ----- initialization -----
	var init = function () {
		// ---- create SVG container ----
		svg = document.createElementNS(svgNS, "svg");
		document.getElementById("screen").appendChild(svg);
		scr = new ge1doot.Screen({
			container: "screen",
			resize: resize 
		});
		scr.resize();
		pointer = new ge1doot.Pointer({});
		// ----- start engine -----
		pointer.X = scr.left + nw / 2;
		pointer.Y = scr.top + nh / 2;
		run();
	}
	return {
		// ---- launch script -----
		load : function (params) {
			window.addEventListener('load', function () {
				init();
			}, false);
		}  
	}
})().load();