Genspace- homepage

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>About the Lab</title>
</head>
  <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/305459468?autoplay=1&loop=1&color=FF0063&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
 
  <header class="video">
 
    <div class="container">
    
    <div >
      
      <div class="navbar">
        <img src="https://i.imgur.com/ZpqS2Rt.png"/>
      </div>
    </div>
    
    
    <div>
    <ul class="sf-menu">
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Join The LAB</a></li>
        <li><a href="#">Our Story</a></li>
        <li><a href="#">Join The Lab</a></li>
      </ul>
    </li>
    <li><a href="#">Class</a></li>
    <li><a href="#">Event</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Donation</a></li>
    
  </ul>
   
    </div>
    
</div>

<div class="tag-line">   NEW YORKâ€™S COMMUNITY BIOLAB</div>
      <div class="tag-sub">Genspace is the worldâ€™s first community lab â€” a place where anyone can learn and work on biotechnology. </div>
      <div class="space"></div>
      <div class="button-red">JOIN OUR TEAM</div>
      
      
      
    </div>
 </header>
  
    
 
  <body>
    
    
   
     <div class="space-mission, space"></div>
  
       <h1>WHO WE ARE</h1>
     <div class="space-mission, space"></div>
    
        <div class="Mission">
             <div><img src="https://i.imgur.com/PQb9jnQ.png"></div>
             <div class="row-space"></div>
             <div class="Mission-body"> <h2>OUR MISSION</h2> 
               <h3>Genspace is a nonprofit organization dedicated to promoting science literacy through citizen access to biotechnology. </h3>
             </div>
        </div>

<div class="space-mission"></div>
    
    
    <div class="Mission">
             <div><img src="https://i.imgur.com/SsWL8qE.png" id="ourlab"></div>
             <div class="row-space"></div>
             <div class="Mission-body"> <h2>OUR LAB</h2> 
               <h3>Our lab follows Biosafety Level 1 guidelines.  We are also supporting several Community Projects for members who want to work on group research.  </h3>
             </div>
        </div>
    
    <div class="space-mission"></div>
    
    <div class="Mission">
             <div><img src="https://i.imgur.com/hEeNsJo.png" id="ourteam"></div>
             <div class="row-space"></div>
             <div class="Mission-body"> <h2>OUR TEAM</h2> 
               <h3>Genspace members include scientists, researchers, artists, designers, entrepreneurs, hobbyists, teachers, students and more! </h3>
             </div>
        </div>

<div class="space-mission"></div>
    
    
   <div class="button"> LEARN MORE </div>
    
    <div class="space-mission, space"></div>
    <hr class="line">
       
      
    
    
    <div>
      <br/>
          <div class="head-text"><h1>WHAT WE DO</h1></div>
      <div class="text-space"></div>
      <div class="body-text">At Genspace, anyone can work in our biolab on their own project. <br/>
Receive 24/7 access to our facility, equipment, and basic lab training from our staff.</div>
      
    </div>
    <div class="text-space two"><br></div>
    
     
    
    <div class="grid">

<div class="grid-box">
         <a href="#"> <img src="https://i.imgur.com/zhJDcdm.png"> </a>
         
      </div>
         
         
       <div class="grid-box "> <a href="#"> <img src="https://i.imgur.com/IvXKaq0.png"> </a></div>
      
      
     <div class="grid-box "> <a href="#"> <img src=" https://i.imgur.com/3Ml04VF.png"> </a></div>
      
      <div class="grid-box "> <a href="#"> <img src="https://i.imgur.com/0iRIUVJ.png"> </a></div>
     
      
      
    </div>
     
    
    
     
    
 <div class="text-space"><br></div>
   
      <div>
          <div class="head-text"><h1>OUR EVENTS</h1></div>
      <div class="text-space two"> </div>
      <div class="body-text">Genspace provides live story and updates with new events regulary. <br/>
Come join our membership and let the Genspace become your story.</div>
        
 <div class="text-space"><br/></div> 
        
        
    </div>
        
    
 
    <div class="Event-container"> 
      
    <div class="background">
      <a href="#"> <img src=" https://i.imgur.com/E3jub5P.png"> </a>       </div>
 
       <div class="background"><a href="#"> <img src=" https://i.imgur.com/kCF93PW.png"> </a></div>
      
       <div class="background"><a href="#"> <img src=" https://i.imgur.com/TODzgOL.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/sAY7pkL.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/a4eAYSZ.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/SHCA0G6.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/9sT6RzO.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/kF9F6ZO.png"> </a> </div>
      
      <div class="background"><a href="#"> <img src=" https://i.imgur.com/iXVeZ4n.png"> </a> </div>
    
    
    
    
    </div>
    
    
    <div class="space-mission, space"></div>
    
    
   <div class="button"> SEE MORE ON THE BLOG </div>

<div class="space-mission, space"></div>
    
         
     <hr class="line">
    
 
    <br/> <h1 class="red-font"> SUPPORT OUR YOUNG SCIENTIST</h1>
    
          <div class="text-space two"> </div>
      <div class="body-text">Donations and sponsorships are great ways to demonstrate what science means to you. Over the last decade,<br>Genspace has become a global hub for biotech learning and innovation and we depend on your financial support to <br>run our award-winning programming.</div>
        
 <div class="text-space"><br/></div> 
        
  <div class="button-red"> SUPPORT US </div>

<div class="space-mission, space"></div>
    
    
    
    
    
  </body>
  
    <div class="footer">
    <div class="footer-contain">
      <div class="about top-border"> 
        <div>About</div> 
                <div></div> 
                <div class="font-size">Mission</div> 
                <div class="font-size">Our Story</div> 
                <div></div> 
                <div></div> 
                <div class="font-size">People</div> 
                <div class="font-size">Join The Lab</div> 
        </div>
      <div class="top-border">Event</div>
      <div class="information top-border">Information
                <div></div>
                <div class="font-size">Phone : (929) 387 - 8100
                <p>132 32nd Street, Suite <br> 108,
                    Brookyln, NY 11232</p></div> 
       </div>
      <div class="item-down top-border">Classes</div>
      <div class="item-down top-border">Contact Us</div>
      <div class="item-down top-border">Subscribe<br> <br/>
      
 
        
         <div class="box-container">

<div class="box font-size"> Enter email Address </div>
          <div class="small-box">SIGN UP</div>
        
        
      
      </div>
    </div>   
      
   
      <div class="symbols">
    
     
     
      
       <div class="social-media-footer">
          <img src="https://i.imgur.com/Wkpz1Bv.png"/>
          <img src="https://i.imgur.com/BAjjlC6.png"/>
          <img src="https://i.imgur.com/OrENktb.png"/>
          <img src="https://i.imgur.com/wr9fA6n.png"/>
         
        </div >
        <div class="copyright"><em>Copyright &#169; 2018 </em></div>
      
      </div>
      </div>
</div>
</html>

html{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  max-width: 1440px;
  background: #000000;
}

.video{
  
  width:100%;
  height: 810px;
  background-color: #808080;
  
}

.space{
  
  padding-top: 40px;
  
  
}
.grid{
  
  display: grid;
  grid-template-columns: auto auto auto auto;
  max-width: 1440px;
}

.grid-box{
  
  width: autox;
  height: auto;
  background-color: #FFFFFF;
  font-size: 18px;
  font-weight: normal;
  position: relative;
 
  
}

.grid-box img { width: 100%}

.grid-box  img {
  opacity: 0.54;

}

grid-box, img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

.video-tag { 
  width: 960px;
  margin: 0 auto;
  text-align: center;
  padding-top: 186px;
  
  
   
  
}
.tag-line{
  
  font-size: 48px;
  color: #ffffff;
  font-weight: 600 ;
  padding-bottom: 24px;
  max-width: 830;
 margin: 0 auto;
  
  
}

.tag-sub{
  font-weight: ligher;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.4;
  max-width: 830;
  margin: 0 auto;
  
}

.Mission {
  
  display: grid;
  grid-template-columns: auto auto auto;
  max-width: 788px;
  margin: 0 auto;
  
}

.Mission-body{
  width: 544;
}

.mission img {
  
  width: 118px;
  height: 118px;
 
  
 
}

#ourlab{
  padding-top: 20px;
  width: 118px;
  height: 118px;
 
  
}

#ourteam{
  padding-top: 20px;
  width: 133px;
  height: 107px;
 
  
  
}
.head-text {
  
  max-width: 140px;
  margin: 0 auto;
  text-align: center;
  display: inline;
  
  
  
}

.red-font {
  
  color: #FF0063;
}

.body-text{
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 1.6;
}

.text-space { 
  margin-top: 24px;
}

#text-space-two{
  
  margin-top: 36px;
}

.Event-container{
  display: grid;
  grid-template-columns: auto auto auto;
   grid-template-rows: auto auto auto;
grid-gap: 16px;
 max-width: 1100px;
  margin: 0 auto;
  
}

.background img{
  height: auto ;
  margin: 0 auto;
  opacity: 0.5;
  width: 350;
  
}

.background, img:hover {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

.sf-menu{  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  
  
}

.container{
  display: grid;
  grid-template-columns: 50% 50%;
   max-width: 960px;
   margin: 0 auto;
  padding-top: 100px;
}

.container img {
  height: 30px;
  width: 144px;
}

.navbar{
 
 
  list-style-type: none;
  overflow: hidden;
  display: inline-block;
 
}

.navbar li {
  float: left;
}

.navbar li a {
  font-size: 13px;
  font-weight: bold;
  display: block;
  color: #828181;
  text-align: center;
  margin-left: 32px;
  text-decoration: none;
  line-height: 32px;
  
}

.body-container{
  
  max-width: 960px;
  margin: 0 auto;
  
}
.body-container .head-img{
  margin-left: 200px;
  padding-top: 20px;
}

h1{
  font-size: 36px;
  color: #ffffff;
  text-align: center;
}
h2{
  
   font-size: 24px;
  color: #ffffff;
  
  
}

h3{
  font-size: 18px;
  color: #ffffff;
  font-weight: lighter;
  line-height: 1.6;
}

p{color: #ffffff;
line-height: 32px;
font-weight: lighter;}

.line {
  background-color: #494949;
  color: #494949;
  opacity: 0.3;
}

.button{
  max-width: 304px ;
  max-height: 56px;
    background-color: #1CA9EB;
    border: none;
    color: white;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    display:block;
    font-size: 16px;
    margin: 0 auto;
    cursor: pointer;
  
}

.button-red{
  max-width: 304px ;
  max-height: 56px;
    background-color: #FF0063;
    border: none;
    color: white;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    display:block;
    font-size: 16px;
    margin: 0 auto;
    cursor: pointer;
  
}

.space-mission space{ 
  padding-top: 58px;
 
}

.line {
  color: 494949;
  
  
}

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	
	
	
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #FFFFFF;
  opacity: 0.7;
}
.sf-menu li {

white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #000000;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #FF0063;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}
.about {
  display: grid;
  grid-template-columns: auto auto auto auto ;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;

}

.top-border{ /*NEED THIS*/
    border: 1px solid white;
  border-width:  0.6px 0 0;
  padding-top: 16px;
}
.font-size{
  font-size: 12px;
  font-weight: lighter;
  line-height: 1.6;
}

.information{
  
display: grid;
 grid-template-columns: auto auto auto  ;}

.footer-contain { 
display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: auto auto ;
  max-width: 960px;
  font-size: 16px;
  color:#E9E9E9;
  margin: 0 auto;
 padding-top:74px;
 text-align: left;
    grid-column-gap: 10px; /*NEED THIS*/
}

.item-down { 
  padding-top: 16px;

}
.copyright{
  font-size: 8px;
  color: #E9E9E9;
  padding-right: 897px;
  
  
  
  
}

.box-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
 
}

.box{
  background-color: #272727;
  width: 199px;
  height: 25px;
  color: #E9E9E9;
  
}
.small-box {
  padding-top: 8px;
  width: 94px;
  height: 24px;
  border: 0.6px solid #494949;
  font-size: 12px;
  text-align: center;
  color: #E9E9E9;
  
}

.box , font-size{
  padding-top:8px;
  padding-left: 16px;
  
}

.symbols{          /*NEED THIS INSTEAD OF WHAT YOU HAD*/
  width: 960px;
  margin: 0 auto;
  text-align: right;
  padding-top: 120px;
  
}

.social-media-footer{
    text-align: right;
    position: relative;
  width: 100%;
  
 
}

.social-media-footer img{
  width: 16px;

}

.footer{
  max-width: 1440px;
  height: 494px;
  margin: 0 auto;
  background: #0A0A0A;
  
}

.space-mission { 
padding-top: 96px;}

/*
 * jQuery Superfish Menu Plugin
 * Copyright (c) 2013 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *	http://www.opensource.org/licenses/mit-license.php
 *	http://www.gnu.org/licenses/gpl.html
 */

(function ($, w) {
	"use strict";

if (!this.parents('.' + o.hoverClass).length) {
					o.onIdle.call(getMenu(this));
					if (o.$path.length) {
						$.proxy(over, o.$path)();
					}
				}
			},
			out = function () {
				var $this = $(this),
					o = getOptions($this);
				if (ios) {
					$.proxy(close, $this, o)();
				}
				else {
					clearTimeout(o.sfTimer);
					o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
				}
			},
			touchHandler = function (e) {
				var $this = $(this),
					o = getOptions($this),
					$ul = $this.siblings(e.data.popUpSelector);

if (o.onHandleTouch.call($ul) === false) {
					return this;
				}

if ($ul.length > 0 && $ul.is(':hidden')) {
					$this.one('click.superfish', false);
					if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
						$this.trigger('focus');
					} else {
						$.proxy(over, $this.parent('li'))();
					}
				}
			},
			applyHandlers = function ($menu, o) {
				var targets = 'li:has(' + o.popUpSelector + ')';
				if ($.fn.hoverIntent && !o.disableHI) {
					$menu.hoverIntent(over, out, targets);
				}
				else {
					$menu
						.on('mouseenter.superfish', targets, over)
						.on('mouseleave.superfish', targets, out);
				}
				var touchevent = 'MSPointerDown.superfish';
				if (unprefixedPointerEvents) {
					touchevent = 'pointerdown.superfish';
				}
				if (!ios) {
					touchevent += ' touchend.superfish';
				}
				if (wp7) {
					touchevent += ' mousedown.superfish';
				}
				$menu
					.on('focusin.superfish', 'li', over)
					.on('focusout.superfish', 'li', out)
					.on(touchevent, 'a', o, touchHandler);
			};

return {
			// public methods
			hide: function (instant) {
				if (this.length) {
					var $this = this,
						o = getOptions($this);
					if (!o) {
						return this;
					}
					var not = (o.retainPath === true) ? o.$path : '',
						$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
						speed = o.speedOut;

if (instant) {
						$ul.show();
						speed = 0;
					}
					o.retainPath = false;

if (o.onBeforeHide.call($ul) === false) {
						return this;
					}

$ul.stop(true, true).animate(o.animationOut, speed, function () {
						var $this = $(this);
						o.onHide.call($this);
					});
				}
				return this;
			},
			show: function () {
				var o = getOptions(this);
				if (!o) {
					return this;
				}
				var $this = this.addClass(o.hoverClass),
					$ul = $this.children(o.popUpSelector);

if (o.onBeforeShow.call($ul) === false) {
					return this;
				}

$ul.stop(true, true).animate(o.animation, o.speed, function () {
					o.onShow.call($ul);
				});
				return this;
			},
			destroy: function () {
				return this.each(function () {
					var $this = $(this),
						o = $this.data('sfOptions'),
						$hasPopUp;
					if (!o) {
						return false;
					}
					$hasPopUp = $this.find(o.popUpSelector).parent('li');
					clearTimeout(o.sfTimer);
					toggleMenuClasses($this, o);
					toggleAnchorClass($hasPopUp);
					toggleTouchAction($this);
					// remove event handlers
					$this.off('.superfish').off('.hoverIntent');
					// clear animation's inline display style
					$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
						if (typeof style !== 'undefined') {
							return style.replace(/display[^;]+;?/g, '');
						}
					});
					// reset 'current' path classes
					o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
					$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
					o.onDestroy.call($this);
					$this.removeData('sfOptions');
				});
			},
			init: function (op) {
				return this.each(function () {
					var $this = $(this);
					if ($this.data('sfOptions')) {
						return false;
					}
					var o = $.extend({}, $.fn.superfish.defaults, op),
						$hasPopUp = $this.find(o.popUpSelector).parent('li');
					o.$path = setPathToCurrent($this, o);

$this.data('sfOptions', o);

toggleMenuClasses($this, o, true);
					toggleAnchorClass($hasPopUp, true);
					toggleTouchAction($this);
					applyHandlers($this, o);

$hasPopUp.not('.' + c.bcClass).superfish('hide', true);

o.onInit.call(this);
				});
			}
		};
	})();

$.fn.superfish = function (method, args) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || ! method) {
			return methods.init.apply(this, arguments);
		}
		else {
			return $.error('Method ' +  method + ' does not exist on jQuery.fn.superfish');
		}
	};

$.fn.superfish.defaults = {
		popUpSelector: 'ul,.sf-mega', // within menu context
		hoverClass: 'sfHover',
		pathClass: 'overrideThisToUse',
		pathLevels: 1,
		delay: 800,
		animation: {opacity: 'show'},
		animationOut: {opacity: 'hide'},
		speed: 'normal',
		speedOut: 'fast',
		cssArrows: true,
		disableHI: false,
		onInit: $.noop,
		onBeforeShow: $.noop,
		onShow: $.noop,
		onBeforeHide: $.noop,
		onHide: $.noop,
		onIdle: $.noop,
		onDestroy: $.noop,
		onHandleTouch: $.noop
	};

})(jQuery, window);

/**
 * hoverIntent is similar to jQuery's built-in "hover" method except that
 * instead of firing the handlerIn function immediately, hoverIntent checks
 * to see if the user's mouse has slowed down (beneath the sensitivity
 * threshold) before firing the event. The handlerOut function is only
 * called after a matching handlerIn.
 *
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license. Basically that
 * means you are free to use hoverIntent as long as this header is left intact.
 * Copyright 2007, 2013 Brian Cherne
 *
 * // basic usage ... just like .hover()
 * .hoverIntent( handlerIn, handlerOut )
 * .hoverIntent( handlerInOut )
 *
 * // basic usage ... with event delegation!
 * .hoverIntent( handlerIn, handlerOut, selector )
 * .hoverIntent( handlerInOut, selector )
 *
 * // using a basic configuration object
 * .hoverIntent( config )
 *
 * @param  handlerIn   function OR configuration object
 * @param  handlerOut  function OR selector for delegation OR undefined
 * @param  selector    selector OR undefined
 * @author Brian Cherne <brian(at)cherne(dot)net>
 **/
(function($) {
    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {

// default configuration values
        var cfg = {
            interval: 100,
            sensitivity: 7,
            timeout: 0
        };

if ( typeof handlerIn === "object" ) {
            cfg = $.extend(cfg, handlerIn );
        } else if ($.isFunction(handlerOut)) {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
        } else {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
        }

// instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

// A private function for getting mouse position
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };

// A private function for comparing current and previous mouse position
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they've crossed the threshold
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).off("mousemove.hoverIntent",track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                // set previous coordinates for next time
                pX = cX; pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };

// A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

// A private function for handling mouse 'hovering'
        var handleHover = function(e) {
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

// cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

// if e.type == "mouseenter"
            if (e.type == "mouseenter") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).on("mousemove.hoverIntent",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

// else e.type == "mouseleave"
            } else {
                // unbind expensive mousemove event
                $(ob).off("mousemove.hoverIntent",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

// listen for mouseenter and mouseleave
        return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
    };
})(jQuery);

jQuery(document).ready(function(){
		jQuery('ul.navbar').superfish();
	});