subhanshuja/index.html

## index.html
<header>
	<nav>
		<ul id="main_nav">
			<li class="active all" data-title="all" title="All">All</li>
			<li class="icon-address active" data-title="life" title="Life Events"></li>
			<li class="icon-graduation-cap active" data-title="education" title="Education"></li>
			<li class="icon-briefcase active" data-title="work" title="Work"></li>
			<li class="icon-user active" data-title="user" title="Additional Info"></li>

		</ul>
		<ul id="nav_ctrl">
			<li class="icon-up-open" data-title="Next"></li>
			<li class="icon-down-open" data-title="Previous"></li>
		</ul>
	</nav>
</header>
<div id="instructions_container">
	Use Keys 'J' and 'K' to navigate through the timeline.
</div><!-- of #instructions_container -->
<div id="timeline_container">
	<header>
		<figure>
			<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-snc7/300646_10150372857038898_914901400_n.jpg" title="The man" alt="Nicolas Slatiner"/>
		</figure>
    <h1>A short resume <br/> of Nicolas Slatiner</h1>
	</header>
	<ul>
		<li class="life_event active">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>The journey begins</h2>
				<p>
					At 6:32am, a healthy baby boy is born in Buenos Aires, Argentina.
				</p>
			</div>
			<div class="event_date">
				25/07/1982
			</div>
		</li>
		<li class="life_event">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>Learning to code</h2>
				<p>
					Got my first PC for my 13<sup>th</sup> birthday.
				</p>
			</div>
			<div class="event_date">
				25/07/1995
			</div>
		</li>
		<li class="education_event">
			<div class="event_icn icon-graduation-cap"></div>
			<div class="event_content">
				<h2>Markup and little wheels</h2>
				<p>
					Joined the science class in Ohel Shem High school, with emphasis on Computer Science and Robotics. There I built the school's first site in HTML and a little robot that extinguishes a small candle.
				</p>
			</div>
			<div class="event_date">
				01/09/1997
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>10-4</h2>
				<p>
					Recruited to the IDF (Israeli Defense Force). There I learned how to command a tank and a platoon's medical department.
				</p>
			</div>
			<div class="event_date">
				07/2000 - 07/2003
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>Nature Creation</h2>
				<p>
					Retail marketing intern of Nature Creation®, Chicago USA. <br/>in charge of sales.
				</p>
			</div>
			<div class="event_date">
				09/2004 - 02/2005
			</div>
		</li>
		<li class="life_event">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>See the world</h2>
				<p>
					Bought a good pair of hiking shoes and decided to travel through South America. Met my future wife on a beautiful beach in north-east Brasil.
				</p>
			</div>
			<div class="event_date">
				02/2005 - 09/2005
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>Partner Comunications</h2>
				<p>
					Data department team manager at Partner Comunications, Israel. Responsible for a team of 20 people, VIP client liaison, Software Q&A.
				</p>
			</div>
			<div class="event_date">
				09/2005 - 08/2008
			</div>
		</li>
		<li class="education_event">
			<div class="event_icn icon-graduation-cap"></div>
			<div class="event_content">
				<h2>Higher learning</h2>
				<p>
					Communication and administration studies at the Open University of Isreal.
				</p>
			</div>
			<div class="event_date">
				09/2005 - 07/2008
			</div>
		</li>
		<li class="life_event">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>See the world #2</h2>
				<p>
					The 'traveling bug' is rooted deep in me. Traveled through India and Nepal.
				</p>
			</div>
			<div class="event_date">
				08/2008 - 12/2008
			</div>
		</li>
		<li class="life_event">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>Home is where the heart is</h2>
				<p>
					Gathered some nerve and decided to move to Brasil for romantic related reasons.
				</p>
			</div>
			<div class="event_date">
				28/12/2008
			</div>
		</li>
		<li class="education_event">
			<div class="event_icn icon-graduation-cap"></div>
			<div class="event_content">
				<h2>Web mastery</h2>
				<p>
					Web master course with emphasis on development at WebBH, Belo Horizonte, MG, Brasil.
				</p>
			</div>
			<div class="event_date">
				05/2009-02/2011
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>Oliver art bar</h2>
				<p>
					Founded and managed the Oliver Art Bar, in Belo Horizonte, MG, Brasil, where I was responsible over a team of 8 and a lot of beer.
				</p>
			</div>
			<div class="event_date">
				07/2009 - 01/2011
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>Freelance Developer</h2>
				<p>
					Got my first paying web job. Developing templates for Revolutions, Israel.
				</p>
			</div>
			<div class="event_date">
				08/2009
			</div>
		</li>
		<li class="life_event">
			<div class="event_icn icon-address"></div>
			<div class="event_content">
				<h2>Love is all you need.</h2>
				<p>
					Married the love of my life.
				</p>
			</div>
			<div class="event_date">
				28/05/2010
			</div>
		</li>
		<li class="work_event">
			<div class="event_icn icon-briefcase"></div>
			<div class="event_content">
				<h2>Front end developer</h2>
				<p>
					Joined Domínio Público Comunicação. An advertising agency in Belo Horizonte, MG, Brasil.
				</p>
			</div>
			<div class="event_date">
				04/2011 - Today
			</div>
		</li>

		<li class="user_event">
			<div class="event_icn icon-user"></div>
			<div class="event_content">
				<h2>Virtual Identities</h2>
				<ul>
					<li><a href="http://www.facebook.com/slatiner" target="_blank">Facebook</a></li>
					<li><a href="http://br.linkedin.com/pub/nicolas-slatiner/45/610/385/en" target="_blank">LinkedIn</a></li>
					<li><a href="http://be.net/slatiner/frame" target="_blank" >Behance</a></li>
					<li><a href="http://codepen.io/slatiner" target="_blank">Codepen</a></li>
				</ul>
			</div>
			<div class="event_date">
			</div>
		</li>
		<li class="user_event">
			<div class="event_icn icon-user"></div>
			<div class="event_content">
				<h2>Additional information</h2>
				<ul>
					<li>Civil status: Married</li>
					<li>Nationalities: Argentinian, Israel</li>
					<li>Residency: Brazilian</li>
					<li>Languages: English, Portuguese, Spanish, Hebrew</li>
				</ul>
			</div>
			<div class="event_date">
			</div>
		</li>
		<li class="user_event">
			<div class="event_icn icon-user"></div>
			<div class="event_content">
				<h2>Contact Information</h2>
				<ul>
					<li>Phone: +55 31 8816-5008</li>
					<li>Address: R.Espanha, 571, Sabará - MG, 34590-340, Brazil</li>
					<li>E-mail: <a href="mailto:nslatiner@gmail.com" target="_blank">nslatiner@gmail.com</a></li>
				</ul>
			</div>
			<div class="event_date">
			</div>
		</li>
	</ul>
</div><!-- of #timeline_container -->


<div id="info_container">
		i
</div><!-- of #info_container -->


## script.js
//=====================================//
//======== Font license info  =========//
//=====================================//
/*
## Entypo
   Copyright (C) 2012 by Daniel Bruce
   Author:    Daniel Buce
   License:   SIL (http://scripts.sil.org/OFL)
   Homepage:  http://www.entypo.com

## Font Awesome
   Copyright (C) 2012 by Dave Gandy
   Author:    Dave Gandy
   License:   CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
   Homepage:  http://fortawesome.github.com/Font-Awesome/

## Web Symbols
   Copyright (c) 2011 by Just Be Nice studio. All rights reserved.
   Author:    Just Be Nice studio
   License:   SIL (http://scripts.sil.org/OFL)
   Homepage:  http://www.justbenicestudio.com/studio/websymbols/
*/
//=====================================//


$('nav ul#main_nav').on('click','li',function(){
	var $type=$(this).attr('data-title');
	$('nav ul#main_nav li').removeClass('active')
	if ($type=='all') {
		$('nav ul#main_nav li').addClass('active');
		$('div#timeline_container >ul> li').removeClass('hidden');
		$('div#timeline_container >ul> li').removeClass('active');
		$($('div#timeline_container >ul> li')[0]).addClass('active');
	} else {
		$(this).addClass('active');
		$('div#timeline_container >ul> li').addClass('hidden');
		$('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
		$('div#timeline_container >ul> li').removeClass('active');
		$($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
	}

});

$(document).on('scroll',function(){
	$('div#instructions_container').fadeOut('fast');
	$('div#info_container').fadeIn('fast');
});
$(document).on('click','div#info_container',function(){
	$('div#instructions_container').fadeIn('fast');
	$('div#info_container').fadeOut('fast');
});

$(document).on('click','li.icon-down-open',function(){
	scrollToNext();
});

$(document).on('click','li.icon-up-open',function(){
	scrollToPrev();
});

$(document).on('keypress',function(e){
	if(e.which==106) {
		scrollToNext();
	} else if(e.which==107) {
		scrollToPrev();
	}
});

$('div#timeline_container').on('click','li', function(){
	showNext($(this));
});

function showNext(li){
	var $itms=$('div#timeline_container li');
	$itms.removeClass('active');
	$(li).addClass('active');
	$('html,body').stop().animate({ scrollTop: $(li).offset().top-$(li).height()}, 500,function(){
		$('html,body').stop();
	});
}

function scrollToNext() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));

	if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
		$itms.removeClass('active');
		$($itms[$current+1]).addClass('active');
		$('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
	} else {
		$('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
	}
}
function scrollToPrev() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));

	if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
		$itms.removeClass('active');
		$($itms[$current-1]).addClass('active');
		$('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
	} else {
		$('html,body').stop().animate({ scrollTop: 0}, 500);
	}
}

## style.css
@import url('http://fonts.googleapis.com/css?family=Lobster');

@font-face {
  font-family: 'fontello';
  src: url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.eot");
  src: url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.eot?#iefix") format('embedded-opentype'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.woff") format('woff'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.ttf") format('truetype'), url("https://dl.dropbox.com/u/47948414/timeline/font/fontello.svg#fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}
<!-- Yes, it's an ugly hack, but needed in order to show the font which is hosted elsewhere.-->
@font-face {
  font-family: 'fontello';
  src: url("data:application/octet-stream;base64,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") format('woff'), url("data:application/octet-stream;base64,AAEAAAAPAIAAAwBwRkZUTWIY0uwAAAD8AAAAHE9TLzJWu2KrAAABGAAAAFZjbWFwCosYYgAAAXAAAAFqY3Z0IAxaBhIAAA20AAAALGZwZ20w+Z6VAAAN4AAACZZnYXNwAAAAEAAADawAAAAIZ2x5ZoNEs6AAAALcAAAG6GhlYWT9P2WtAAAJxAAAADZoaGVhB30DpAAACfwAAAAkaG10eCA0AJ0AAAogAAAALGxvY2EIign4AAAKTAAAABhtYXhwAPgKBAAACmQAAAAgbmFtZbqv1ZYAAAqEAAAC7nBvc3QAwwFvAAANdAAAADhwcmVwqL3AagAAF3gAAACVAAAAAQAAAADH/rDfAAAAAM0NEQYAAAAAzQ0RBgABA68B9AAFAAACigK7AAAAjAKKArsAAAHfADEBAgAAAgAGAwAAAAAAAAAAAAEAAAAAAAAAAAAAAABQZkVkAEAAYgB1A1L/agBaAyoAbgAAAAEAAAAAAAAAAAADAAAAAwAAABwAAQAAAAAAZAADAAEAAAAcAAQASAAAAA4ACAACAAYAYgBmAGwAcABzAHX//wAAAGIAZABsAHAAcwB1////of+g/5v/mP+W/5UAAQAAAAAAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAQFBgAAAAAABwAAAAgAAAkACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAIQAAASoCmgADAAcAKUAmAAAAAwIAA1cAAgEBAksAAgIBTwQBAQIBQwAABwYFBAADAAMRBQ8rMxEhESczESMhAQnox8cCmv1mIQJYAAAAAwAP/7YD9wMIABsAIwAwAPy1KAEJCwFAS7ANUFhALwoBCAALCwheAAUAAQVLBgMCAQQBAAgBAFcABwcCUQACAgpBDAELCwlSAAkJEglCG0uwFlBYQDAKAQgACwAIC2YABQABBUsGAwIBBAEACAEAVwAHBwJRAAICCkEMAQsLCVIACQkSCUIbS7AhUFhALQoBCAALAAgLZgAFAAEFSwYDAgEEAQAIAQBXDAELAAkLCVYABwcCUQACAgsHQhtANAoBCAALAAgLZgACAAcBAgdZAAUAAQVLBgMCAQQBAAgBAFcMAQsJCQtLDAELCwlSAAkLCUZZWVlAFSQkJDAkMC8uLCkTMhEREiQ0JhANFyslITY/ATY1NjsBNjc+ATsBMhYXFhczMhcTITUjAyEnJisBIgcTNSEGBwYjISI1JyEVAdf+OAIDBAEFX6AWJg4SHN4aFAwLMaBfBQr+OlpmASQcDhyYHA6kAa4DBwZU/RJaCgGu4j1DaicTbCRMGgwOGBNdbP7cZAEsNhoa/aRkKnxUVKZkAAABABAAZQMnAlcAFQAaQBcHAQIAAUABAQACAGgAAgINAkIXFBQDESsTND8BNjIXCQE2Mh8BHgEHAQYiJwEmEA8zDygPAQUBAQ4oDzQPAQ/+pQ4oD/6nDwHxEw81Dw/++gEGDw81DycO/qUPDwFbDgAAAwAP/+ID9wLOABgAMgBDAEZADDk4NS4fGAAHAAEBQEuwFlBYQBAAAgECaAABAQBRAAAADABCG0AVAAIBAmgAAQAAAU0AAQEAUQAAAQBFWbUyMC0sAxArLQEOAwcGBw4BBwYjIicmLwEmJyYnJic2FBYzMjcNAQYnJSY0NyU2FwUWFA8BJSYjIgE2JyYvATcWFxYXFgcGBwYmAgMBFAEGBAgGETQYZxAYDxEXCh85GhRHIB4R8DokGwkBJP70PDz+YBgYAaA8PAGgGBhO/swXQyQBgBIFBA8ORgUHBwoLEgURDyVGiAgnFhwIGRQKOQgLDQUSIA4IHyYkSfQ0HgREmCAg6g4mDuogIOoOJg4sZiT+KnFFQBoWJgcVFk9TchoEAw8AAAMAD/+SA6cDKgAHABMAGgCBtRcBAwQBQEuwFlBYQCUJAQYCBAIGBGYFAQQDAgQDZAgBAwAAAwBWAAICAVEHAQEBEAJCG0AsCQEGAgQCBgRmBQEEAwIEA2QHAQEAAgYBAlkIAQMAAANNCAEDAwBSAAADAEZZQBsUFAgIAAAUGhQaGRgWFQgTCBMODQAHAAcTCg8rCAEQACAAEAgBNjU0JyYgBwYVFBYTFTMHJzM1ApkBDv7y/oT+8gEOAVLUamv+2mtq1O5wyspwAyr+8v6E/vIBDgF8AQ78zNSUlmlpaWmWlNQCKs6+vs4AAAAAAgAP/5wD9wMgABsAKQBiS7AWUFhAIwAEAgUCBAVmAAYABQEGBVkAAgABAAIBWQAAAANRAAMDEABCG0AoAAQCBQIEBWYAAwYAA00ABgAFAQYFWQACAAEAAgFZAAMDAFEAAAMARVlACSEhFjIrIjIHFSsBERQrASI1ESMiJyYvASY0PwE2NzY7ATU0OwEyBRYUDwEGIwYjISchMhcBzRQuFLAQDA0NeAoKeA0NBxWwFC4UAiAKCnYXAw0P/tIoAVYWIAMM/KQUFAG4BgIKUgYUBlIKAgS+FNAGFAZSDAbmEAABABAAZQMnAlcAFQAaQBcQAQEAAUAAAAEAaAIBAQENAUIUGBQDESs2NDcBNjIXARYVFA8BBiInCQEGIi8BEA8BWQ8pDgFZEBAzDigP/vv+/g8oDzK5Jg4BWw8P/qUPExIQNQ8PAQb++g8PNQABABH/xwNtAvkAGQASQA8YEw4DAD0AAAALAEIlAQ8rEjY3JTc2MzIfAQUeAQ8BExYGLwEHBiY3EycNCBcBBHUMDQ8MdAEEFwkPviwEGBXn6hUZBSy6AbMcAybsFRXsJgMdEbf+/RcSDHp6DBIXAQO3AAAAAAEAD/+cA7sDIAAsADhACSEfFhMEAAEBQEuwFlBYQAsAAAABUQABARAAQhtAEAABAAABTQABAQBPAAABAENZtBwbEwIPKyUWHQEhNTQ3Njc2NTQnJicmJyYnND8BJicmNzYyFg8BFhUGBwYHBgcGFRQXFgLvzPxUzF0jIhYVCwMUEgUOBAcFBC0t4FwGDBIFEhQDBxgXIyKASDJqajJIIiMiPRcaGi8VBQU3IAYELio1Ozp0NlgIIjcFBRUvGxoWPCMiAAABAAAAAQAAkFyEKF8PPPUACwPoAAAAAM0NEQYAAAAAzQ0RBgAP/5ID9wMqAAAACAACAAAAAAAAAAEAAAMq/5IAWgQGAAAAAAP3AAEAAAAAAAAAAAAAAAAAAAALAWwAIQAAAAABTQAABAYADwM2ABAEBgAPA7YADwQGAA8DNgAQA30AEQPKAA8AAAAoACgAKADyASoBvAIyAqIC2AMSA3QAAQAAAAsARAADAAAAAAACABoAKABsAAAAYwmWAAAAAAAAAA4ArgABAAAAAAAAADUAAAABAAAAAAABAAgANQABAAAAAAACAAYAPQABAAAAAAADACMAQwABAAAAAAAEAAgAZgABAAAAAAAFAEoAbgABAAAAAAAGAAgAuAADAAEECQAAAGoAwAADAAEECQABABABKgADAAEECQACAAwBOgADAAEECQADAEYBRgADAAEECQAEABABjAADAAEECQAFAJQBnAADAAEECQAGABACMENvcHlyaWdodCAoQykgMjAxMiBieSBvcmlnaW5hbCBhdXRob3JzIEAgZm9udGVsbG8uY29tZm9udGVsbG9NZWRpdW1Gb250Rm9yZ2UgMi4wIDogZm9udGVsbG8gOiA0LTEtMjAxM2ZvbnRlbGxvVmVyc2lvbiAwMDEuMDAwIDsgdHRmYXV0b2hpbnQgKHYwLjk0KSAtbCA4IC1yIDUwIC1HIDIwMCAteCAxNCAtdyAiRyIgLWYgLXNmb250ZWxsbwBDAG8AcAB5AHIAaQBnAGgAdAAgACgAQwApACAAMgAwADEAMgAgAGIAeQAgAG8AcgBpAGcAaQBuAGEAbAAgAGEAdQB0AGgAbwByAHMAIABAACAAZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AZgBvAG4AdABlAGwAbABvAE0AZQBkAGkAdQBtAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAZgBvAG4AdABlAGwAbABvACAAOgAgADQALQAxAC0AMgAwADEAMwBmAG8AbgB0AGUAbABsAG8AVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAIAA7ACAAdAB0AGYAYQB1AHQAbwBoAGkAbgB0ACAAKAB2ADAALgA5ADQAKQAgAC0AbAAgADgAIAAtAHIAIAA1ADAAIAAtAEcAIAAyADAAMAAgAC0AeAAgADEANAAgAC0AdwAgACIARwAiACAALQBmACAALQBzAGYAbwBuAHQAZQBsAGwAbwAAAAIAAAAAAAD/gwAyAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAEAAgBFAEcASABJAE8AUwBWAFgAAQAB//8ADwAAAAAAAAAAAAAAAAAAAAAAMgAyAwgC+f/iAGUDKv+SAyoC+f++AGUDKv+SsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywCCNCsAcjQrAAI0KwAEOwB0NRWLAIQyuyAAEAQ2BCsBZlHFktsAUssABDIEUgsAJFY7ABRWJgRC2wBiywAEMgRSCwACsjsQYEJWAgRYojYSBkILAgUFghsAAbsDBQWLAgG7BAWVkjsABQWGVZsAMlI2FERC2wByyxBQVFsAFhRC2wCCywAWAgILAKQ0qwAFBYILAKI0JZsAtDSrAAUlggsAsjQlktsAksILgEAGIguAQAY4ojYbAMQ2AgimAgsAwjQiMtsAosS1RYsQcBRFkksA1lI3gtsAssS1FYS1NYsQcBRFkbIVkksBNlI3gtsAwssQANQ1VYsQ0NQ7ABYUKwCStZsABDsAIlQrIAAQBDYEKxCgIlQrELAiVCsAEWIyCwAyVQWLAAQ7AEJUKKiiCKI2GwCCohI7ABYSCKI2GwCCohG7AAQ7ACJUKwAiVhsAgqIVmwCkNHsAtDR2CwgGIgsAJFY7ABRWJgsQAAEyNEsAFDsAA+sgEBAUNgQi2wDSyxAAVFVFgAsA0jQiBgsAFhtQ4OAQAMAEJCimCxDAQrsGsrGyJZLbAOLLEADSstsA8ssQENKy2wECyxAg0rLbARLLEDDSstsBIssQQNKy2wEyyxBQ0rLbAULLEGDSstsBUssQcNKy2wFiyxCA0rLbAXLLEJDSstsBgssAcrsQAFRVRYALANI0IgYLABYbUODgEADABCQopgsQwEK7BrKxsiWS2wGSyxABgrLbAaLLEBGCstsBsssQIYKy2wHCyxAxgrLbAdLLEEGCstsB4ssQUYKy2wHyyxBhgrLbAgLLEHGCstsCEssQgYKy2wIiyxCRgrLbAjLCBgsA5gIEMjsAFgQ7ACJbACJVFYIyA8sAFgI7ASZRwbISFZLbAkLLAjK7AjKi2wJSwgIEcgILACRWOwAUViYCNhOCMgilVYIEcgILACRWOwAUViYCNhOBshWS2wJiyxAAVFVFgAsAEWsCUqsAEVMBsiWS2wJyywByuxAAVFVFgAsAEWsCUqsAEVMBsiWS2wKCwgNbABYC2wKSwAsANFY7ABRWKwACuwAkVjsAFFYrAAK7AAFrQAAAAAAEQ+IzixKAEVKi2wKiwgPCBHILACRWOwAUViYLAAQ2E4LbArLC4XPC2wLCwgPCBHILACRWOwAUViYLAAQ2GwAUNjOC2wLSyxAgAWJSAuIEewACNCsAIlSYqKRyNHI2EgWGIbIVmwASNCsiwBARUUKi2wLiywABawBCWwBCVHI0cjYbAGRStlii4jICA8ijgtsC8ssAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgsAlDIIojRyNHI2EjRmCwBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhIyAgsAQmI0ZhOBsjsAlDRrACJbAJQ0cjRyNhYCCwBEOwgGJgIyCwACsjsARDYLAAK7AFJWGwBSWwgGKwBCZhILAEJWBkI7ADJWBkUFghGyMhWSMgILAEJiNGYThZLbAwLLAAFiAgILAFJiAuRyNHI2EjPDgtsDEssAAWILAJI0IgICBGI0ewACsjYTgtsDIssAAWsAMlsAIlRyNHI2GwAFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDMssAAWILAJQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDQsIyAuRrACJUZSWCA8WS6xJAEUKy2wNSwjIC5GsAIlRlBYIDxZLrEkARQrLbA2LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEkARQrLbA3LLAuKyMgLkawAiVGUlggPFkusSQBFCstsDgssC8riiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSQBFCuwBEMusCQrLbA5LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwEUUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCg0FBCuzEBMFBCtZsgQoCUVSRLMKDwYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAA==") format('truetype');
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  opacity: 0.8;
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-1:before { content: '\73'; } /* 's' */
.icon-address:before { content: '\6c'; } /* 'l' */
.icon-down-circled:before { content: '\66'; } /* 'f' */
.icon-down-open:before { content: '\64'; } /* 'd' */
.icon-up-open:before { content: '\70'; } /* 'p' */
.icon-graduation-cap:before { content: '\65'; } /* 'e' */
.icon-user:before { content: '\75'; } /* 'u' */
.icon-briefcase:before { content: '\62'; } /* 'b' */

* {
	 -webkit-box-sizing: border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body {
	background:#ebe7e4;
	color:#6d6b6a;
	font-size:13px;
	font-family:helvetica,arial,sans-serif;
	overflow-y:scroll;
}
body > header {
	width:100%;
	position:fixed;
	z-index:30;
	background:#E0DCD9;
	border-bottom:1px solid #d5d1cf;
	box-shadow:0 1px 1px white;
	top:0;
	left:0;
}

body > header nav {
	width:960px;
	margin:0 auto;
	overflow:hidden;
}
body > header nav ul {
	margin:0 0 0 -65px;
	padding:0;
	text-align:center;
	font-size: 0em;
		letter-spacing: 0px;
		word-spacing: 0px;
}
body > header nav li {
	display:inline-block;
	cursor:pointer;
	border-left:1px solid #ebe7e4;
	border-top:1px solid #E0DCD9;
	box-shadow:-1px 0px 1px #d5d1cf;
	padding:1.2em;
	font-size:18px;
}
body > header nav li:hover {
	background:#d5d1cf;
}
body > header nav li:first-child {
	border-left:1px solid #E0DCD9;
	box-shadow:-1px 0px 1px #E0DCD9;
	text-shadow:1px 1px 1px #fff;
}
body > header nav li:active,body > header nav li.active {
	color:white;
}
body > header nav li.all:active,body > header nav li.all.active {
	text-shadow:1px 1px 1px #444;
}
body > header nav li.icon-address:active,body > header nav li.icon-address.active {
	background:#0ED1E7;
	border-left:1px solid #0cb4c6;
	border-top:1px solid #0cb4c6;
	box-shadow:none;
}
body > header nav li.icon-graduation-cap:active,body > header nav li.icon-graduation-cap.active {
	background:#EB2690;
	border-left:1px solid #bf1f75;
	border-top:1px solid #bf1f75;
	box-shadow:none;
}
body > header nav li.icon-briefcase:active,body > header nav li.icon-briefcase.active {
	background:#E76B0E;
	border-left:1px solid #B85307;
	border-top:1px solid #B85307;
	box-shadow:none;
}
body > header nav li.icon-star-1:active,body > header nav li.icon-star-1.active {
	background:#5E6297;
	border-left:1px solid #333;
	border-top:1px solid #333;
	box-shadow:none;
}
body > header nav li.icon-user:active,body > header nav li.icon-user.active {
	background:#454545;
	border-left:1px solid #333;
	border-top:1px solid #333;
	box-shadow:none;
}
body > header nav ul#nav_ctrl {
	position:absolute;
	top:0;
	right:0;
}

div#timeline_container {
	width:960px;
	margin:120px auto;
	position:relative;
}
div#timeline_container header {
	position:relative;
	z-index:20;
}
div#timeline_container header figure {
	width:200px;
	height:200px;
	border-radius:50%;
	border:5px solid #cdc9c6;
	overflow:hidden;
	display:block;
	margin:0 auto;
}
div#timeline_container header figure img {
	height:100%;
}
div#timeline_container header h1 {
	position:absolute;
	top:20px;
	right:80px;
	font-family: 'Lobster', cursive;
	font-size:2.8em;
	text-shadow:2px 2px 1px #fff;
	font-weight:normal;
}
div#timeline_container > ul {
	position:relative;
	width:4px;
	background:#cdc9c6;
	border-right:1px solid white;
	margin:0 auto;
	padding:6em 0 0;
	list-style:none;
}
div#timeline_container > ul:after {
	content:"";
	width:15px;
	height:15px;
	border-radius:50%;
	background:#cdc9c6;
	box-shadow:1px 1px 1px white;
	position:absolute;
	bottom:0;
	left:-6px;
}
div#timeline_container > ul > li {
	position:relative;
	padding:.3em 0;
	min-height:230px;
	cursor:pointer;

	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
div#timeline_container > ul > li.hidden {
	position:absolute;
	top:-500px;
}
div#timeline_container > ul > li div {
	position:absolute;
}
div#timeline_container > ul li > div.event_icn {
	padding:0.3em;
	font-size:1.7em;
	border-radius:50%;
	background:#ebe7e4;
	border:3px solid #cdc9c6;
	margin-left:-22px;
	color:rgba(85,86,86,0.3);
	box-shadow:1px 1px 1px white;

	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#bde3e7;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#0ED1E7}

div#timeline_container > ul > li.education_event div.event_icn { background:#eb98c5}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#EB2690}

div#timeline_container > ul > li.work_event div.event_icn { background:#e7b793}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#E76B0E}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
	background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}


div#timeline_container > ul > li div.event_content {
	width:400px;
	padding:1em 2em 1.3em;
	border:1px solid #DDDBDA;
	border-radius:10px;
	top:-2em;
	opacity:0.3;
	background:white;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
	opacity:1;
}
div#timeline_container > ul > li:nth-child(odd) div.event_content {
	right:-470px;
}
div#timeline_container > ul > li:nth-child(even) div.event_content {
	left:-470px;
	text-align:right
}
div#timeline_container > ul > li div.event_content:before {
	content:"";
	position:absolute;
	width:20px;
	height:20px;
	border-bottom:1px solid #DDDBDA;
	border-left:1px solid #DDDBDA;
	top:3em;
	background:#ebe7e4;
	margin-top:8px;
	background:white;
}


div#timeline_container > ul > li:nth-child(odd) div.event_content:before {
	left:-11px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
div#timeline_container > ul > li:nth-child(even) div.event_content:before {
	right:-11px;
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	transform: rotate(225deg);
}
div#timeline_container > ul > li div.event_content h2 {
	margin:0.3em 0;
	padding:0;
	text-transform:capitalize;
	font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
	margin:0;
	padding:0;
	line-height:1.5em;
}
div#timeline_container > ul > li div.event_content ul {
	margin:0;
	padding:0;
	list-style:none;
	line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
	top:1em;
	width:180px;
	text-align:right;
	font-size:1.2em;
	text-shadow:1px 1px 1px white;
	opacity:0.3;
	font-weight:bold;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}
div#timeline_container > ul > li:nth-child(odd) div.event_date {right:60px;}
div#timeline_container > ul > li:nth-child(even) div.event_date {left:60px;}

div#instructions_container {
	position:fixed;
	padding:2em;
	width:300px;
	bottom:2em;
	right:2em;
	line-height:1.4em;
	background:#FDFDBD;
	border-radius:10px;
	border:1px solid #DDDBDA;
	z-index:40;
	font-size:0.9em;
	color:black;
	line-height:1.6em;
}
div#info_container{
	position:fixed;
	bottom:2em;
	right:2em;
	border-radius:50%;
	color:#ebe7e4;
	background:#6d6b6a;
	opacity:0.3;
	cursor:pointer;
	width:22px;
	font-size:14px;
	height:22px;
	padding-top:2px;
	text-align:center;
	font-family:'lobster','cursive';
	display:none;
}
div#info_container:hover {
	opacity:0.9;
}
footer {
	width:960px;
	margin:2em auto;
	color:#999;
}
footer a {
	color:#444;
}
footer a.icon-down-circled {
	text-decoration:none;
}
	<header>
	<nav>
	<ul id="main_nav">
	<li class="active all" data-title="all" title="All">All</li>
	<li class="icon-address active" data-title="life" title="Life Events"></li>
	<li class="icon-graduation-cap active" data-title="education" title="Education"></li>
	<li class="icon-briefcase active" data-title="work" title="Work"></li>
	<li class="icon-user active" data-title="user" title="Additional Info"></li>

	</ul>
	<ul id="nav_ctrl">
	<li class="icon-up-open" data-title="Next"></li>
	<li class="icon-down-open" data-title="Previous"></li>
	</ul>
	</nav>
	</header>
	<div id="instructions_container">
	Use Keys 'J' and 'K' to navigate through the timeline.
	</div><!-- of #instructions_container -->
	<div id="timeline_container">
	<header>
	<figure>
	<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-snc7/300646_10150372857038898_914901400_n.jpg" title="The man" alt="Nicolas Slatiner"/>
	</figure>
	<h1>A short resume <br/> of Nicolas Slatiner</h1>
	</header>
	<ul>
	<li class="life_event active">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>The journey begins</h2>
	<p>
	At 6:32am, a healthy baby boy is born in Buenos Aires, Argentina.
	</p>
	</div>
	<div class="event_date">
	25/07/1982
	</div>
	</li>
	<li class="life_event">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>Learning to code</h2>
	<p>
	Got my first PC for my 13<sup>th</sup> birthday.
	</p>
	</div>
	<div class="event_date">
	25/07/1995
	</div>
	</li>
	<li class="education_event">
	<div class="event_icn icon-graduation-cap"></div>
	<div class="event_content">
	<h2>Markup and little wheels</h2>
	<p>
	Joined the science class in Ohel Shem High school, with emphasis on Computer Science and Robotics. There I built the school's first site in HTML and a little robot that extinguishes a small candle.
	</p>
	</div>
	<div class="event_date">
	01/09/1997
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>10-4</h2>
	<p>
	Recruited to the IDF (Israeli Defense Force). There I learned how to command a tank and a platoon's medical department.
	</p>
	</div>
	<div class="event_date">
	07/2000 - 07/2003
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>Nature Creation</h2>
	<p>
	Retail marketing intern of Nature Creation®, Chicago USA. <br/>in charge of sales.
	</p>
	</div>
	<div class="event_date">
	09/2004 - 02/2005
	</div>
	</li>
	<li class="life_event">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>See the world</h2>
	<p>
	Bought a good pair of hiking shoes and decided to travel through South America. Met my future wife on a beautiful beach in north-east Brasil.
	</p>
	</div>
	<div class="event_date">
	02/2005 - 09/2005
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>Partner Comunications</h2>
	<p>
	Data department team manager at Partner Comunications, Israel. Responsible for a team of 20 people, VIP client liaison, Software Q&A.
	</p>
	</div>
	<div class="event_date">
	09/2005 - 08/2008
	</div>
	</li>
	<li class="education_event">
	<div class="event_icn icon-graduation-cap"></div>
	<div class="event_content">
	<h2>Higher learning</h2>
	<p>
	Communication and administration studies at the Open University of Isreal.
	</p>
	</div>
	<div class="event_date">
	09/2005 - 07/2008
	</div>
	</li>
	<li class="life_event">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>See the world #2</h2>
	<p>
	The 'traveling bug' is rooted deep in me. Traveled through India and Nepal.
	</p>
	</div>
	<div class="event_date">
	08/2008 - 12/2008
	</div>
	</li>
	<li class="life_event">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>Home is where the heart is</h2>
	<p>
	Gathered some nerve and decided to move to Brasil for romantic related reasons.
	</p>
	</div>
	<div class="event_date">
	28/12/2008
	</div>
	</li>
	<li class="education_event">
	<div class="event_icn icon-graduation-cap"></div>
	<div class="event_content">
	<h2>Web mastery</h2>
	<p>
	Web master course with emphasis on development at WebBH, Belo Horizonte, MG, Brasil.
	</p>
	</div>
	<div class="event_date">
	05/2009-02/2011
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>Oliver art bar</h2>
	<p>
	Founded and managed the Oliver Art Bar, in Belo Horizonte, MG, Brasil, where I was responsible over a team of 8 and a lot of beer.
	</p>
	</div>
	<div class="event_date">
	07/2009 - 01/2011
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>Freelance Developer</h2>
	<p>
	Got my first paying web job. Developing templates for Revolutions, Israel.
	</p>
	</div>
	<div class="event_date">
	08/2009
	</div>
	</li>
	<li class="life_event">
	<div class="event_icn icon-address"></div>
	<div class="event_content">
	<h2>Love is all you need.</h2>
	<p>
	Married the love of my life.
	</p>
	</div>
	<div class="event_date">
	28/05/2010
	</div>
	</li>
	<li class="work_event">
	<div class="event_icn icon-briefcase"></div>
	<div class="event_content">
	<h2>Front end developer</h2>
	<p>
	Joined Domínio Público Comunicação. An advertising agency in Belo Horizonte, MG, Brasil.
	</p>
	</div>
	<div class="event_date">
	04/2011 - Today
	</div>
	</li>

	<li class="user_event">
	<div class="event_icn icon-user"></div>
	<div class="event_content">
	<h2>Virtual Identities</h2>
	<ul>
	<li><a href="http://www.facebook.com/slatiner" target="_blank">Facebook</a></li>
	<li><a href="http://br.linkedin.com/pub/nicolas-slatiner/45/610/385/en" target="_blank">LinkedIn</a></li>
	<li><a href="http://be.net/slatiner/frame" target="_blank" >Behance</a></li>
	<li><a href="http://codepen.io/slatiner" target="_blank">Codepen</a></li>
	</ul>
	</div>
	<div class="event_date">
	</div>
	</li>
	<li class="user_event">
	<div class="event_icn icon-user"></div>
	<div class="event_content">
	<h2>Additional information</h2>
	<ul>
	<li>Civil status: Married</li>
	<li>Nationalities: Argentinian, Israel</li>
	<li>Residency: Brazilian</li>
	<li>Languages: English, Portuguese, Spanish, Hebrew</li>
	</ul>
	</div>
	<div class="event_date">
	</div>
	</li>
	<li class="user_event">
	<div class="event_icn icon-user"></div>
	<div class="event_content">
	<h2>Contact Information</h2>
	<ul>
	<li>Phone: +55 31 8816-5008</li>
	<li>Address: R.Espanha, 571, Sabará - MG, 34590-340, Brazil</li>
	<li>E-mail: <a href="mailto:nslatiner@gmail.com" target="_blank">nslatiner@gmail.com</a></li>
	</ul>
	</div>
	<div class="event_date">
	</div>
	</li>
	</ul>
	</div><!-- of #timeline_container -->


	<div id="info_container">
	i
	</div><!-- of #info_container -->
	//=====================================//
	//======== Font license info =========//
	//=====================================//
	/*
	## Entypo
	Copyright (C) 2012 by Daniel Bruce
	Author: Daniel Buce
	License: SIL (http://scripts.sil.org/OFL)
	Homepage: http://www.entypo.com

	## Font Awesome
	Copyright (C) 2012 by Dave Gandy
	Author: Dave Gandy
	License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
	Homepage: http://fortawesome.github.com/Font-Awesome/

	## Web Symbols
	Copyright (c) 2011 by Just Be Nice studio. All rights reserved.
	Author: Just Be Nice studio
	License: SIL (http://scripts.sil.org/OFL)
	Homepage: http://www.justbenicestudio.com/studio/websymbols/
	*/
	//=====================================//


	$('nav ul#main_nav').on('click','li',function(){
	var $type=$(this).attr('data-title');
	$('nav ul#main_nav li').removeClass('active')
	if ($type=='all') {
	$('nav ul#main_nav li').addClass('active');
	$('div#timeline_container >ul> li').removeClass('hidden');
	$('div#timeline_container >ul> li').removeClass('active');
	$($('div#timeline_container >ul> li')[0]).addClass('active');
	} else {
	$(this).addClass('active');
	$('div#timeline_container >ul> li').addClass('hidden');
	$('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
	$('div#timeline_container >ul> li').removeClass('active');
	$($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
	}

	});

	$(document).on('scroll',function(){
	$('div#instructions_container').fadeOut('fast');
	$('div#info_container').fadeIn('fast');
	});
	$(document).on('click','div#info_container',function(){
	$('div#instructions_container').fadeIn('fast');
	$('div#info_container').fadeOut('fast');
	});

	$(document).on('click','li.icon-down-open',function(){
	scrollToNext();
	});

	$(document).on('click','li.icon-up-open',function(){
	scrollToPrev();
	});

	$(document).on('keypress',function(e){
	if(e.which==106) {
	scrollToNext();
	} else if(e.which==107) {
	scrollToPrev();
	}
	});

	$('div#timeline_container').on('click','li', function(){
	showNext($(this));
	});

	function showNext(li){
	var $itms=$('div#timeline_container li');
	$itms.removeClass('active');
	$(li).addClass('active');
	$('html,body').stop().animate({ scrollTop: $(li).offset().top-$(li).height()}, 500,function(){
	$('html,body').stop();
	});
	}

	function scrollToNext() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));

	if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
	$itms.removeClass('active');
	$($itms[$current+1]).addClass('active');
	$('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
	} else {
	$('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
	}
	}
	function scrollToPrev() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));

	if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
	$itms.removeClass('active');
	$($itms[$current-1]).addClass('active');
	$('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
	} else {
	$('html,body').stop().animate({ scrollTop: 0}, 500);
	}
	}