/***********************************************************************

Author:     Arno Hoogma
URL:        http://www.4rn0.nl

***********************************************************************/



/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,.scroll,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}article,aside,figure,footer,header,hgroup,.scroll,section{display:block;}.scroll ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}

/*
  fonts.css from the YUI Library: developer.yahoo.com/yui/
  Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/

body{font:13px sans-serif;*font-size:small;*font:x-small;line-height:1.22;}table{font-size:inherit;font:100%;}select,input,textarea{font:99% sans-serif;}pre,code,kbd,samp{font-family:monospace,sans-serif;}
 
/*
  new bulletproof @font-face syntax
  http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
*/

@font-face {
	font-family: 'MuseoSlab500';
	font-weight: normal;
	font-style: normal;
	src: url('fonts/museo_slab_500-webfont.eot?') format('eot'), 
	     url('fonts/museo_slab_500-webfont.woff') format('woff'), 
	     url('fonts/museo_slab_500-webfont.ttf')  format('truetype'),
	     url('fonts/museo_slab_500-webfont.svg#webfontsXVsfUzO') format('svg');
	}
	
@font-face {
	font-family: 'MuseoSlab500Italic';
	font-weight: normal;
	font-style: normal;
	src: url('fonts/museo_slab_500italic-webfont.eot?') format('eot'), 
	     url('fonts/museo_slab_500italic-webfont.woff') format('woff'), 
	     url('fonts/museo_slab_500italic-webfont.ttf')  format('truetype'),
	     url('fonts/museo_slab_500italic-webfont.svg#webfontvHVx5B18') format('svg');
	}


/*	= default styling
-------------------------------------------------------------------- */
html {
	background: #d2d8dc url(images/bg.loading.gif) scroll no-repeat -9999px -9999px;
	color: #000;
	font: normal normal normal 12px/12px sans-serif;
}

html,
body {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

body {
	background: #d2d8dc url(images/bg.body.jpg) fixed no-repeat center center;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

body, form, fieldset, input, 
select, textarea, button {
	font: normal normal 500 100%/100% 'MuseoSlab500', Arial, sans-serif;
}

a {
	color: #000;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
	font-weight: normal;
	margin: 0 0 1.0em;
}

li, dd, blockquote {
	margin-left: 1.5em;
}

fieldset {
	border: none;
}

legend, hr {
	display: none;
}


/*	= content
-------------------------------------------------------------------- */
div#main {
	margin: 0 auto;
	position: relative;
	width: 670px;
}

#main header {
	color: #003366;
	font-size: 188%;
	line-height: 136%;
	margin: 50px 0;
}

#main header h1 {
	/*background: transparent url(images/bg.branding.png) scroll no-repeat left top;*/
	height: 104px;
	margin: 0 0 -10px;
	text-indent: -9999px;
	width: 482px;
}

#main header h2,
#main header p {
	margin: 0;
}

#main header h2 em {
	color: #358de5;
	font: normal normal 500 100%/100% 'MuseoSlab500Italic', Arial, sans-serif;
}

#main header p em {
	position: absolute;
	top: -9999px;
}

#main article, 
#main aside {
	color: #999;
	float: left;
	font: normal normal normal 117%/157% 'Helvetica Neue', Helvetica, sans-serif;
	margin: 0 20px 0 0;
	width: 150px;
}

#main address {
	font-style: normal;
}

#main aside {
	float: right;
	margin: 0;
	width: 325px;
}

#main h3 {
	/*background: transparent url(images/bg.underline.png) scroll no-repeat -20px -3px;*/
	color: #3fca23;
	font: normal normal 500 130%/100% 'MuseoSlab500', Arial, sans-serif;
	line-height: 100%;
	margin: 0 0 0 -10px;
	padding: 0 0 15px 10px;
	position: static !important;
}

#main article.adr h3 {
	background-position: -185px -3px;
	color: #ea0000;
}

#main aside h3 {
	background-position: -365px -3px;
	color: #ffc000;
}

#main aside p {
	margin: 0 -20px 0 0;
}

#main aside {
	line-height: 144%;
}

#main aside a {
	/*background: transparent url(images/bg.underline.png) scroll no-repeat -195px -13px;*/
	display: inline-block;
	padding-bottom: 2px;	
}

#main aside p a:nth-child(odd) {
	background-position: -235px -13px;
}

#main ul {
	list-style: none;
	margin: 0 0 1.0em
}

#main ul li {
	margin: 0;
}

#main article ul:last-child {
	/*background: transparent url(images/bg.underline.png) scroll no-repeat -676px -27px;*/
	margin: -1.0em 0 0;
	padding: 1.0em 0 0;
}

#main a {
	color: #999;
	text-decoration: none;
}

#main a:hover {
	color: #666;
}

.street-address {
	display: block;
}

.url {
	display: none;
}

#main .tel, .email, .twitter, .in, .fb {
	/*background: transparent url(images/bg.icons.png) scroll no-repeat 0 2px;*/
	padding: 1px 0 1px 25px;
	position:relative;
}

.tel {
	margin: 0 0 -2px !important;
}

.email {
	background-position: 0 -21px;
}

.twitter {
	background-position: 0 -66px;
}

.in {
	background-position: 0 -43px;
}

.fb {
	background-position: 0 -86px;
}

.email span, 
.twitter span, 
.in span,
.fb span {
	display: none;
	outline: 0;
	position: absolute;
	top: 0;
}

.email:hover span, 
.twitter:hover span, 
.in:hover span,
.fb:hover span {
	display: block;
}

.twitter span {
	/*background: transparent url(images/bg.illustration.twitter.png) scroll no-repeat left top;*/
	height: 119px;
	left: -162px;
	top: 5px;
	width: 152px;
}

.email span {
	/*background: transparent url(images/bg.illustration.mail.png) scroll no-repeat left top;*/
	height: 18px;
	left: -52px;
	width: 42px;
}

.in span {
	/*background: transparent url(images/bg.illustration.linkedin.png) scroll no-repeat left top;*/
	height: 159px;
	left: -130px;
	top: -142px;
	width: 120px;
}

.fb span {
	/*background: transparent url(images/bg.illustration.facebook.png) scroll no-repeat left top;*/
	height: 109px;
	left: -100px;
	top: -95px;
	width: 84px;
}

#main footer {
	/*background: transparent url(images/bg.social.png) scroll no-repeat left top;*/
	display: none;
	position: absolute;
	height: 60px;
	padding: 17px 0 0 25px;
	right: 0;
	top: -10px;
	width: 124px;
}

#main footer iframe {
	background: transparent;
	display: block;
	margin: 0 0 5px;
}

#main footer div.fb-like {
	display: block;
}

.fb_edge_comment_widget {
	display: none !important;
}


/*	= portfolio
-------------------------------------------------------------------- */
div#portfolio {
	display: none;
	height: 100%;
	width: 100%;
}

div#portfolio,
div#portfolio h3 {
	position: absolute;
	top: -9999px;
}

#portfolio .scroll {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

ul#work {
	float: left;
	height: 100%;
	list-style: none;
	margin: 0;
	width: 100%;
}

ul#work li {
	float: left;
	height: 100%;
	margin: 0;
	overflow: auto;
	position: relative;
	width: 100%;
	z-index: 1;
}

#portfolio ul li#me {
	background: none;
}

ul#work li li {
	background: none;
	float: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

ul#work li img {
	height: 307px;
	left: 50%;
	margin: -185px 0 0 -200px;
	position: absolute;
	top: 50%;
	width: 400px;
}

ul#work li div.portfolio-card {
	display: block;
}

ul#work li iframe.site {
	background: #fff;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	display: none;
	width: 100%;	
	z-index: 1;	
}

.scroll ul li div,
ul#work li div {
	display: none;
}

a.portfolio {
	background: #313b42;
	/*background: #313b42 url(images/bg.maximize.png) no-repeat scroll center center;*/
	border-radius: 15px;
	display: none;
	height: 64px;
	left: 50%;
	margin: -60px 0 0 -32px;
	opacity: 0.9;
	outline: 0;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 50%;
	width: 64px;
	z-index: 1;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	
}

a.portfolio:hover {
	background-color: #79838c;
}

a.disabled {
	top: -9999px;
}

div#portfolio-bg {
	background: transparent url(images/bg.portfolio.png) fixed no-repeat center center;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.transfer-frame {
	border: 1px solid #666;
	z-index: 100;
}

.transfer-guide {
	
	background: #d4d9dd;
	border: 1px solid #000;
	border-radius: 15px;
	opacity: 0.4;
	z-index: 100;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
		
}


/*	= controls: prev / next
-------------------------------------------------------------------- */
#prev,
#next {
	/*background: transparent url(images/bg.buttons.png) no-repeat scroll left top;*/
	bottom: 17px;
	height: 40px;
	outline: 0;
	position: absolute;
	width: 40px;
	z-index: 1;
}

#prev {
	background-position: left top;
	left: 220px;
}

#prev.active {
	background-position: left bottom;
}

#next {
	background-position: right top;
	right: 220px;
}

#next.active {
	background-position: right bottom;
}


/*	= controls: indicators
-------------------------------------------------------------------- */
div#controls {
	background: transparent url(images/bg.controls.back.png) no-repeat scroll center center;
	bottom: 0;
	height: 73px;
	left: 50%;
	margin: 0 0 0 -450px;
	position: absolute;
	width: 900px;
	z-index: 1;
}

#controls ol {
	background: transparent url(images/bg.controls.front.png) no-repeat scroll -329px center;
	bottom: 0;
	height: 17px;
	left: 50%;
	list-style: none;
	margin: 0 0 0 -183px;
	padding: 28px 15px;
	position: absolute;
	width: 337px;
}

#controls ol li {
	float: left;
	margin: 0 23px 0 0;
	position: relative;
}

#controls ol li.last-child {
	margin: 0;
}

#controls ol li a {
	/*background: transparent url(images/bg.position.gif) no-repeat scroll right top;*/
	display: block;
	height: 17px;
	outline: 0;
	text-indent: -9999px;
	width: 17px;
	z-index: 1;
}

#controls ol li a.current,
#controls ol li a.active {
	background-position: left top;
}

#controls ol li a.hidden {
	background-position: right top;
}

#controls li.me {
	margin: -11px 11px 0 -11px;
}

#controls ol li.me a {
	/*background: transparent url(images/bg.position.me.gif) no-repeat scroll left top;*/
	height: 39px;
	width: 39px;
}

#controls ol li.me a.current,
#controls ol li.me a.active {
	background-position: right top;
}


/*	= control tooltips
-------------------------------------------------------------------- */
div.tooltip {
	bottom: 35px;
	display: none;
	position: absolute;
	z-index: 9999;	
}

div.balloon {
	background: #313b42;
	border-radius: 15px;
	color: #999;
	font: normal normal normal 1.15em/1.3em Helvetica, Verdana;
	padding: 20px 30px;
	text-align: center;
	white-space: nowrap;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
		
}

div.balloon strong {
	color: #fff;
	display: block;
}

.me div.balloon span {
	/*background: transparent url(images/bg.arrows.gif) no-repeat scroll left center;*/
	display: inline-block;
	padding: 2px 0 0 44px;
}

div.balloon span.guide {
	/*background: transparent url(images/bg.guide-open.png) scroll no-repeat left top;*/
	display: inline-block;
	height: 9px;
	margin: 0 0 0 5px;
	position: relative;
	top: -1px;
	width: 7px;
}

div.balloon:hover span.guide {
	background-position: left bottom;
}

div.inactive:hover span.guide {
	background-position: left top;
}

div.balloon div.arrow {
	/*background: transparent url(images/bg.tooltip.bottom.gif) repeat scroll left top;*/
	bottom: -10px;
	height: 10px;
	left: 50%;
	margin-left: -10px;
	position: absolute;
	right: auto;
	width: 20px;
}

div.illustration {
	display: none;
}

div.illustration.left {
	/*background: transparent url(images/bg.controls.illustration.guide-l.png) no-repeat scroll right top;*/
	height: 109px;
	position: absolute;
	right: -85px;
	top: -70px;
	width: 203px;
	z-index: -1;
}

div.illustration.right {
	/*background: transparent url(images/bg.controls.illustration.guide-r.png) no-repeat scroll left top;*/
	height: 133px;
	left: -85px;
	position: absolute;
	top: -85px;
	width: 232px;
	z-index: -1;
}

div.illustration.me {
	/*background: transparent url(images/bg.controls.illustration.me.png) no-repeat scroll center center;*/
	height: 150px;
	left: -50px;
	position: absolute;
	top: -40px;
	width: 425px;
	z-index: -1;
}

.me div.tooltip {
	bottom: 46px;
	display: block;
	margin: 0 0 0 11px;
}

/*	= tourguide
-------------------------------------------------------------------- */
div#tourguide {
	height: 120px;
	position: absolute;
	top: -9999px;
	z-index: 9999;
}

div#tourguide article {
	background: #313b42;
	background: rgba(49, 59, 66, 0.9);
	border-radius: 15px;
	left: 133px;
	padding: 10px;
	position: absolute;
	top: 0;
	width: 250px;	
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
		
}

div#tourguide article.bottom {
	top: -190px;
}

div#tourguide article.right {
	left: -280px;
}

div#tourguide article div.info {
	color: #fff;
	font: normal normal normal 1.15em/1.3em Helvetica, Verdana;
	padding: 10px;
}

div#tourguide span.hide {
	/*background: transparent url(images/bg.guide-close.png) scroll no-repeat left top;*/
	cursor: pointer;
	height: 16px;
	position: absolute;
	right: 15px;
	top: 20px;
	width: 16px;
}

div#tourguide span.hide:hover {
	background-position: left bottom;
}

div#tourguide div.arrow {
	/*background: transparent url(images/bg.tooltip.left.gif) repeat scroll left top;*/
	height: 20px;
	left: -10px;
	margin: 55px 0 0;
	opacity: 0.9;
	position: absolute;
	top: 0;
	width: 10px;
}

div#tourguide article.right div.arrow {
	/*background: transparent url(images/bg.tooltip.right.gif) repeat scroll left top;*/
	left: 270px;
}

div#tourguide article.bottom div.arrow {
	top: 190px;
}

div#tourguide article h4 {
	font: normal normal 500 130%/100% 'MuseoSlab500', Arial, sans-serif;
	line-height: 100%;	
}

div#tourguide article ul:last-child,
div#tourguide article p:last-child {
	margin: 0;
}

div#tourguide article ul {
	list-style-type: disc;
}

div#tourguide article a {
	color: #999;
}

div#tourguide article p small {
	display: block;
	font-size: 83%;
}

div#tourguide figure {
	background: #6a767f;
	background: rgba(49, 59, 66, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 15px;
	padding: 10px;
	position: relative;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	
}

div#tourguide figure img {
	border-radius: 15px;
	display: block;
	width: 100px;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	
}

div#tourguide span.left-eye {
	background: #313c42;
	display: none;
	height: 14px;
	left: 32px;
	position: absolute;
	top: 64px;
	width: 13px;
}

div#tourguide span.right-eye {
	background: #313c42;
	display: none;
	height: 14px;
	position: absolute;
	right: 32px;
	top: 64px;
	width: 13px;
}


/*	= iOS
-------------------------------------------------------------------- */
.ios .email:hover span, 
.ios .twitter:hover span, 
.ios .in:hover span,
.ios .fb:hover span {
	display: none;
}

.ios div.illustration.left,
.ios div.illustration.right {
	background: none;
}

/*
a.portfolio,
#controls a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*/


/*	= nyan cat
-------------------------------------------------------------------- */
#nyan {
	height: 63px;
	left: 0;
	margin: -50px 0 0;
	position: fixed;
	top: 50%;
	width: 200px;
	z-index: 9999;
}

#rainbow {
	background: transparent url(images/nyan.rainbow.gif) scroll repeat-x left;
	height: 100%;
	left: 0;
	position: absolute;
	width: 100%;
}

#cat {
	background: transparent url(images/nyan.cat.gif) scroll no-repeat left;
	height: 100%;
	position: absolute;
	right: -108px;
	top: 1px;
	width: 108px;
}


/*	= spriteme
-------------------------------------------------------------------- */
#main header h1 {
  background-image: url(images/sprite.png);
  background-position: -10px -10px;
}

#main footer {
  background-image: url(images/sprite.png);
  background-position: -10px -134px;
}

#main h3 {
  background-image: url(images/sprite.png);
  background-position: -30px -234px;
}

#main article.adr h3 {
  background-image: url(images/sprite.png);
  background-position: -195px -234px;
}

#main aside h3 {
  background-image: url(images/sprite.png);
  background-position: -375px -234px;
}

#main aside a {
	background-image: url(images/sprite.png);
	background-position: -80px -241px;
}

#main aside p a:nth-child(odd) {
  	background-position: -230px -245px;
}

#main article ul:last-child {
  background-image: url(images/sprite.png);
  background-position: -686px -258px;
  background-repeat: no-repeat;
}

.email span {
  background-image: url(images/sprite.png);
  background-position: -10px -305px;
}

.in span {
  background-image: url(images/sprite.png);
  background-position: -10px -343px;
}

.twitter span {
  background-image: url(images/sprite.png);
  background-position: -10px -522px;
}

.fb span {
  background-image: url(images/sprite.png);
  background-position: -200px -460px;	
}

#main .tel {
  background-image: url(images/sprite.png);
  background-position: -10px -859px;
}

.email {
  background-image: url(images/sprite.png);
  background-position: -10px -882px;
}

.in {
  background-image: url(images/sprite.png);
  background-position: -10px -904px;
}

.twitter {
  background-image: url(images/sprite.png);
  background-position: -10px -927px;
}

.fb {
  background-image: url(images/sprite.png);
  background-position: -10px -947px;
}

a.portfolio {
  background-image: url(images/sprite.png);
  background-position: -11px -1198px;
}

#controls ol li a {
  background-image: url(images/sprite.png);
  background-position: -50px -973px;
}

#controls ol li a.current,
#controls ol li a.active {
  background-image: url(images/sprite.png);
  background-position: -10px -973px;
}

#controls ol li.me a {
  background-image: url(images/sprite.png);
  background-position: -10px -1000px;
}

#controls ol li.me a.current,
#controls ol li.me a.active {
  background-image: url(images/sprite.png);
  background-position: -49px -1000px;
}

#prev {
  background-image: url(images/sprite.png);
  background-position: -10px -1097px;
}

#prev.active {
  background-image: url(images/sprite.png);
  background-position: -10px -1137px;
}

#next {
  background-image: url(images/sprite.png);
  background-position: -60px -1097px;
}

#next.active {
  background-image: url(images/sprite.png);
  background-position: -60px -1137px;
}

div.tooltip span {
  background-image: url(images/sprite.png);
  background-position: -10px -1058px;
}

div.balloon div.arrow {
  background-image: url(images/sprite.png);
  background-position: -164px -1017px;
}

.me div.illustration {
  background-image: url(images/sprite.png);
  background-position: -9px -661px;
}

div.illustration.left {
  background-image: url(images/sprite.png);
  background-position: -490px -1855px;
}

div.illustration.right {
  background-image: url(images/sprite.png);
  background-position: -470px -1690px;
}

div#tourguide span.hide {
  background-image: url(images/sprite.png);
  background-position: -151px -1050px;	
}

div#tourguide span.hide:hover {
	background-position: -151px -1082px;
}

div.balloon span.guide {
  background-image: url(images/sprite.png);
   background-position: -124px -1052px;
}

div.balloon:hover span.guide {
	background-position: -124px -1070px;
}

div.inactive:hover span.guide {
	background-position: -124px -1052px;
}

div#tourguide div.arrow {
  background-image: url(images/sprite.png);
  background-position: -143px -1012px;
}

div#tourguide article.right div.arrow {
  background-image: url(images/sprite.png);
  background-position: -124px -1012px;
}


/*	= animations
-------------------------------------------------------------------- */
@-webkit-keyframes arrow {
	
	from {
		left: -62px;
	}
	
	to {
		left: -52px;
	}
	
}

@-webkit-keyframes hop {
	
	0% {
		left: -162px;
		top: 5px;
	}
	
	25% {
		left: -160px;
		top: 15px;
	}

	50% {
		left: -160px;
		top: 5px;
	}
	
	100% {
		left: -162px;
		top: 35px;
	}
	
}

@-webkit-keyframes hand {
	
	from {
		-webkit-transform: rotate(-20deg);
	}
	
	to {
		-webkit-transform: rotate(10deg);
	}
	
}

@-webkit-keyframes fb {
	
	from {
		left: -110px;
		top: -105px;
	}
	
	to {
		left: -100px;
		top: -95px;
	}
	
}

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }	
	50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}

@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }	
	50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}

@-ms-keyframes pulse {
    0% { -ms-transform: scale(1); }	
	50% { -ms-transform: scale(1.1); }
    100% { -ms-transform: scale(1); }
}

@-o-keyframes pulse {
    0% { -o-transform: scale(1); }	
	50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); }	
	50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.email:hover span {
	-webkit-animation: arrow 0.25s infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

.twitter:hover span {
	-webkit-animation: hop 0.75s infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

.in:hover span {
	-webkit-animation: hand 0.5s infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-transform-origin: bottom right;
}

.fb:hover span {
	-webkit-animation: fb 0.25s infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

.pulse {
	-webkit-animation: 1s ease;
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-moz-animation: 1s ease;
	-ms-animation-name: pulse;
	-ms-animation: 1s ease;
	-o-animation-name: pulse;
	-o-animation: 1s ease;
	animation-name: pulse;
	animation: 1s ease;
}

.flip {
	-o-transform: scaleX(-1);
	-o-transition: all 0.4s ease-in-out;
	-ms-transform: scaleX(-1);
	-ms-transition: all 0.4s ease-in-out;
	-moz-transform: scaleX(-1);
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transform: scaleX(-1);
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.4s ease-in-out;
	transform: scaleX(-1);
	transition: all 0.4s ease-in-out;
}


/*	= javascript enabled
-------------------------------------------------------------------- */
html.js {
	background: none;
}

html.js div#main {
	display: block !important;
	float: left;
}

html.js-loading #main,
html.js-loading #portfolio {
	visibility: hidden !important;
}

html.ui div#portfolio {
	display: block;
	position: static;
}

html.ui #main footer {
	display: block;
}


/*	= media queries
-------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
	
	html, body {
		height: auto;
		width: 100%;
	}
	
	body {
		-webkit-background-size: 750px 1099px;
		-moz-background-size: 750px 1099px;
	}
	
	div#main {
		height: auto;
		left: 50%;
		margin: 0 0 0 -155px;
		padding: 5px 5px 50px;
		position: absolute;
		top: 0;
		width: 310px;
		-webkit-transform: scale(0.9);
	}
	
	#main header {
		font-size: 120%;
		margin: 20px 0 15px;
	}
	
	#main header h1 {
		background: transparent url(images/bg.branding.png) scroll no-repeat left top;
		height: 65px;
		margin: 0;
		width: 310px;
		-webkit-background-size: 310px 65px;
		-moz-background-size: 310px 65px;
	}
	
	#main article,
	#main aside {
		font-size: 100%;
		width: 100%;
	}
	
	#main article {
		float: left;
		margin: 10px 0;
		width: 50%;
	}
	
	#main h3 {
		background: transparent url(images/bg.underline.png) scroll no-repeat -20px -10px;
		font-size: 100%;
	}
	
	#main article.adr h3 {
		background: transparent url(images/bg.underline.png) scroll no-repeat -185px -10px;
	}

	#main aside h3 {
		background: transparent url(images/bg.underline.png) scroll no-repeat -365px -10px;
	}

	#main .tel, .email, .twitter, .in, .fb {
		background: transparent url(images/bg.icons.png) scroll no-repeat 0 0;
		-webkit-background-size: 14px 90px;
		-moz-background-size: 14px 90px;
	}
	
	#main .tel {
		background-position: 0 2px;
	}
	
	#main .email {
		background-position: 0 -19px;
	}

	#main .twitter {
		background-position: 0 -56px;
	}

	#main .in {
		background-position: 0 -37px;
	}
	
	#main .fb {
		background-position: 0 -75px;
	}
	
	#main aside {
		margin: 10px 0 20px;
	}
		
	/**/
	
	html.ui,
	html.ui body {
		height: 100%;
	}
	
	html.ui #portfolio {;
		position: static;
	}
	
	html.ui ul#work li img {
		-webkit-transform: scale(0.6);	
	}
	
	html.ui #tourguide,
	html.ui #controls,
	html.ui #portfolio-bg,
	html.ui #main footer {
		display: none;
		visibility: hidden;
	}
	
}

@media (max-width: 768px) {
	
	div#controls {
		margin: 0 0 0 -384px;
		width: 768px;
	}
	
	#prev {
		left: 155px;
	}
	
	#next {
		right: 155px;
	}
	
}