html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline
}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
	display:block
}
	body
{
	line-height:1
}
	ol,ul
{
	list-style:none
}
	blockquote,q
{
	quotes:none
}
	blockquote:before,blockquote:after,q:before,q:after
{
	content:'';
	content:none
}
	table
{
	border-collapse:collapse;
	border-spacing:0
}
	body
{
	background:#fff;
	font:18px/30px "ff-tisa-web-pro",Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
	color:#444;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%
}
	h1,h2,h3,h4,h5,h6
{
	color:#000;
	font-family:"din-condensed-web","Arial Narrow",Arial,sans-serif;
	font-weight:normal;
	text-transform:uppercase
}
	h1 a,h2 a,h3 a,h4 a,h5 a,h6 a
{
	font-weight:inherit
}
	h1
{
	font-size:42px;
	line-height:48px;
	margin-bottom:14px
}
	h2
{
	font-size:36px;
	line-height:40px;
	margin-bottom:10px
}
	h3
{
	font-size:28px;
	line-height:34px;
	margin-bottom:4px
}
	h4
{
	font-size:22px;
	line-height:26px;
	margin-bottom:2px
}
	h5
{
	font-size:16px;
	line-height:24px
}
	h6
{
	font-size:14px;
	line-height:21px
}
.subheader
{
	color:#777
}
	p
{
	margin:0 0 20px 0;
	text-align:justify;
}
	p img
{
	margin:0
}
	p.lead
{
	font-size:21px;
	line-height:27px;
	color:#777
}
	em
{
	font-style:italic
}
	strong
{
	font-weight:bold
}
	small
{
	font-size:80%
}
	blockquote,blockquote p
{
	font-size:17px;
	line-height:24px;
	color:#777;
	font-style:italic
}
	blockquote
{
	margin:0 0 20px;
	padding:9px 20px 0 19px;
	border-left:1px solid #ddd
}
	blockquote cite
{
	display:block;
	font-size:12px;
	color:#555
}
	blockquote cite:before
{
	content:"\2014 \0020"
}
	blockquote cite a,blockquote cite a:visited,blockquote cite a:visited
{
	color:#555
}
	hr
{
	border:solid #ddd;
	border-width:1px 0 0;
	clear:both;
	margin:10px 0 30px;
	height:0
}
	ul,ol
{
	margin-bottom:20px
}
	ul
{
	list-style:none outside
}
	ol
{
	list-style:decimal
}
	ol,ul.square,ul.circle,ul.disc
{
	margin-left:30px
}
	ul.square
{
	list-style:square outside
}
	ul.circle
{
	list-style:circle outside
}
	ul.disc
{
	list-style:disc outside
}
	ul ul,ul ol,ol ol,ol ul
{
	margin:4px 0 5px 30px;
	font-size:90%
}
	ul ul li,ul ol li,ol ol li,ol ul li
{
	margin-bottom:6px
}
	li
{
	line-height:18px;
	margin-bottom:12px
}
	ul.large li
{
	line-height:21px
}
	li p
{
	line-height:30px
}
	img.scale-with-grid
{
	max-width:100%;
	height:auto
}
.button,button,input[type="submit"],input[type="reset"],input[type="button"]
{
	background:#eee;
	background:#eee -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background:#eee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(0,0,0,0.2)));
	background:#eee -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background:#eee -o-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background:#eee -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
	background:#eee linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%);
	border:1px solid #aaa;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	color:#444;
	display:inline-block;
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0 1px rgba(255,255,255,0.75);
	cursor:pointer;
	margin-bottom:20px;
	line-height:normal;
	padding:8px 10px;
	font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover
{
	color:#222;
	background:#ddd;
	background:#ddd -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.3) 100%);
	background:#ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.3)), color-stop(100%, rgba(0,0,0,0.3)));
	background:#ddd -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.3) 100%);
	background:#ddd -o-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.3) 100%);
	background:#ddd -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.3) 100%);
	background:#ddd linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.3) 100%);
	border:1px solid #888;
	border-top:1px solid #aaa;
	border-left:1px solid #aaa
}
.button:active,button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active
{
	border:1px solid #666;
	background:#ccc;
	background:#ccc -moz-linear-gradient(top, rgba(255,255,255,0.35) 0%, rgba(10,10,10,0.4) 100%);
	background:#ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.35)), color-stop(100%, rgba(10,10,10,0.4)));
	background:#ccc -webkit-linear-gradient(top, rgba(255,255,255,0.35) 0%, rgba(10,10,10,0.4) 100%);
	background:#ccc -o-linear-gradient(top, rgba(255,255,255,0.35) 0%, rgba(10,10,10,0.4) 100%);
	background:#ccc -ms-linear-gradient(top, rgba(255,255,255,0.35) 0%, rgba(10,10,10,0.4) 100%);
	background:#ccc linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(10,10,10,0.4) 100%)
}
.button.full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width
{
	width:100%;
	padding-left:0 !important;
	padding-right:0 !important;
	text-align:center
}
	button::-moz-focus-inner,input::-moz-focus-inner
{
	border:0;
	padding:0
}
	form
{
	margin-bottom:20px
}
	fieldset
{
	margin-bottom:20px
}
	input[type="text"],input[type="password"],input[type="email"],textarea,select
{
	border:1px solid #ccc;
	padding:6px 4px;
	outline:none;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	font:13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#777;
	margin:0;
	width:210px;
	max-width:100%;
	display:block;
	margin-bottom:20px;
	background:#fff
}
	select
{
	padding:0
}
	input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus
{
	border:1px solid #aaa;
	color:#444;
	-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
	box-shadow:0 0 3px rgba(0,0,0,0.2)
}
	textarea
{
	min-height:60px
}
	label,legend
{
	display:block;
	font-weight:bold;
	font-size:13px
}
	select
{
	width:220px
}
	input[type="checkbox"]
{
	display:inline
}
	label span,legend span
{
	font-weight:normal;
	font-size:13px;
	color:#444
}
.remove-bottom
{
	margin-bottom:0 !important
}
.half-bottom
{
	margin-bottom:10px !important
}
.add-bottom
{
	margin-bottom:20px !important
}
.container
{
	position:relative;
	width:960px;
	margin:0 auto;
	padding:0
}
.container .column,.container .columns
{
	float:left;
	display:inline;
	margin-left:10px;
	margin-right:10px
}
.row
{
	margin-bottom:20px
}
.column.alpha,.columns.alpha
{
	margin-left:0
}
.column.omega,.columns.omega
{
	margin-right:0
}
.container .one.column,.container .one.columns
{
	width:40px
}
.container .two.columns
{
	width:100px
}
.container .three.columns
{
	width:160px
}
.container .four.columns
{
	width:220px
}
.container .five.columns
{
	width:280px
}
.container .six.columns
{
	width:340px
}
.container .seven.columns
{
	width:400px
}
.container .eight.columns
{
	width:460px
}
.container .nine.columns
{
	width:520px
}
.container .ten.columns
{
	width:580px
}
.container .eleven.columns
{
	width:640px
}
.container .twelve.columns
{
	width:700px
}
.container .thirteen.columns
{
	width:760px
}
.container .fourteen.columns
{
	width:820px
}
.container .fifteen.columns
{
	width:880px
}
.container .sixteen.columns
{
	width:940px
}
.container .one-third.column
{
	width:300px
}
.container .two-thirds.column
{
	width:620px
}
.container .offset-by-one
{
	padding-left:60px
}
.container .offset-by-two
{
	padding-left:120px
}
.container .offset-by-three
{
	padding-left:180px
}
.container .offset-by-four
{
	padding-left:240px
}
.container .offset-by-five
{
	padding-left:300px
}
.container .offset-by-six
{
	padding-left:360px
}
.container .offset-by-seven
{
	padding-left:420px
}
.container .offset-by-eight
{
	padding-left:480px
}
.container .offset-by-nine
{
	padding-left:540px
}
.container .offset-by-ten
{
	padding-left:600px
}
.container .offset-by-eleven
{
	padding-left:660px
}
.container .offset-by-twelve
{
	padding-left:720px
}
.container .offset-by-thirteen
{
	padding-left:780px
}
.container .offset-by-fourteen
{
	padding-left:840px
}
.container .offset-by-fifteen
{
	padding-left:900px
}
	@media only screen and (min-width: 959px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 959px)
{
.container
{
	width:768px
}
.container .column,.container .columns
{
	margin-left:10px;
	margin-right:10px
}
.column.alpha,.columns.alpha
{
	margin-left:0;
	margin-right:10px
}
.column.omega,.columns.omega
{
	margin-right:0;
	margin-left:10px
}
.alpha.omega
{
	margin-left:0;
	margin-right:0
}
.container .one.column,.container .one.columns
{
	width:28px
}
.container .two.columns
{
	width:76px
}
.container .three.columns
{
	width:124px
}
.container .four.columns
{
	width:172px
}
.container .five.columns
{
	width:220px
}
.container .six.columns
{
	width:268px
}
.container .seven.columns
{
	width:316px
}
.container .eight.columns
{
	width:364px
}
.container .nine.columns
{
	width:412px
}
.container .ten.columns
{
	width:460px
}
.container .eleven.columns
{
	width:508px
}
.container .twelve.columns
{
	width:556px
}
.container .thirteen.columns
{
	width:604px
}
.container .fourteen.columns
{
	width:652px
}
.container .fifteen.columns
{
	width:700px
}
.container .sixteen.columns
{
	width:748px
}
.container .one-third.column
{
	width:236px
}
.container .two-thirds.column
{
	width:492px
}
.container .offset-by-one
{
	padding-left:48px
}
.container .offset-by-two
{
	padding-left:96px
}
.container .offset-by-three
{
	padding-left:144px
}
.container .offset-by-four
{
	padding-left:192px
}
.container .offset-by-five
{
	padding-left:240px
}
.container .offset-by-six
{
	padding-left:288px
}
.container .offset-by-seven
{
	padding-left:336px
}
.container .offset-by-eight
{
	padding-left:384px
}
.container .offset-by-nine
{
	padding-left:432px
}
.container .offset-by-ten
{
	padding-left:480px
}
.container .offset-by-eleven
{
	padding-left:528px
}
.container .offset-by-twelve
{
	padding-left:576px
}
.container .offset-by-thirteen
{
	padding-left:624px
}
.container .offset-by-fourteen
{
	padding-left:672px
}
.container .offset-by-fifteen
{
	padding-left:720px
}

}
	@media only screen and (max-width: 767px)
{
.container
{
	width:300px
}
.container .columns,.container .column
{
	margin:0
}
.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column
{
	width:300px
}
.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen
{
	padding-left:0
}

}
	@media only screen and (min-width: 480px) and (max-width: 767px)
{
.container
{
	width:420px
}
.container .columns,.container .column
{
	margin:0
}
.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column
{
	width:420px
}

}
.container:after
{
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.clearfix:before,.clearfix:after,.row:before,.row:after
{
	content:'\0020';
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}
.row:after,.clearfix:after
{
	clear:both
}
.row,.clearfix
{
	zoom:1
}
.clear
{
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}
.wf-loading a h1,.wf-loading a h2,.wf-loading a h3,.wf-loading a h4,.wf-loading a h5,.wf-loading a h6
{
	visibility:hidden
}
.wf-loading h1,.wf-loading h2,.wf-loading h3,.wf-loading h4,.wf-loading h5,.wf-loading h6,.wf-loading p,.wf-loading a
{
	visibility:hidden
}
.wf-active a h1,.wf-active a h2,.wf-active a h3,.wf-active a h4,.wf-active a h5,.wf-active a h6
{
	visibility:visible
}
.wf-active h1,.wf-active h2,.wf-active h3,.wf-active h4,.wf-active h5,.wf-active h6,.wf-active p,.wf-active a
{
	visibility:visible
}
.home #contact form div.input label,.home .awwwards
{
	display:block;
	border:0;
	text-indent:-999em;
	overflow:hidden;
	background-color:transparent;
	background-repeat:no-repeat;
	text-align:left;
	direction:ltr
}
.sprites-sprite
{
	background:url('/img/sprites-s052464804a.png') no-repeat
}

.projects .project a .background,

/* work sessions */
.projects .project.aso a,
.projects .project.bo a,
.projects .project.cat a,
.projects .project.cbw a,
.projects .project.cs a,
.projects .project.dashboard a,
.projects .project.etl a,
.projects .project.eudl a,
.projects .project.fs a,
.projects .project.mm a,
.projects .project.gapf a,
.projects .project.glue a,
.projects .project.hdfs a,
.projects .project.hmai a,
.projects .project.ldq a,
.projects .project.lfaf a,
.projects .project.miniboard a,

/* wow */
.projects .project.agile a,
.projects .project.bppy a,
.projects .project.bpsql a,
.projects .project.migrate a,
.projects .project.nc a,
.projects .project.pii a,
.projects .project.rle a,
.projects .project.roles a,
.projects .project.team a,

/* conference */
.projects .project.databricks a,
.projects .project.dis a,
.projects .project.pycon a,

/* fashion */
.projects .project.fafc a, 
.projects .project.jelly a,
.projects .project.unlabeled a,

.projects .project.next a,

.projects .project.bhm a,
.projects .project.bridge a,
.projects .project.conductive_thread a,
.projects .project.foodsters a,
.projects .project.icbc a,
.projects .project.ribeiro a,
.projects .project.sockeye a,

.gif .play,
.casestudy .timeline .spine,
.casestudy .timeline .event .description span,
.casestudy .timeline .event .dot,
.casestudy .tags li
{
	position:relative
}
.projects .project a .background:before,

/* work sessions */
.projects .project.aso a:before,
.projects .project.bo a:before,
.projects .project.cat a:before,
.projects .project.cbw a:before,
.projects .project.cs a:before,
.projects .project.dashboard a:before,
.projects .project.etl a:before,
.projects .project.eudl a:before,
.projects .project.fs a:before,
.projects .project.mm a:before,
.projects .project.gapf a:before,
.projects .project.glue a:before,
.projects .project.hdfs a:before,
.projects .project.hmai a:before,
.projects .project.ldq a:before,
.projects .project.lfaf a:before,
.projects .project.miniboard a:before,

/* wow */
.projects .project.agile a:before,
.projects .project.bppy a:before,
.projects .project.bpsql a:before,
.projects .project.migrate a:before,
.projects .project.nc a:before,
.projects .project.pii a:before,
.projects .project.rle a:before,
.projects .project.roles a:before,
.projects .project.team a:before,

/* conference */
.projects .project.databricks a:before,
.projects .project.dis a:before,
.projects .project.pycon a:before,

/* fashion */
.projects .project.fafc a:before, 
.projects .project.jelly a:before,
.projects .project.unlabeled a:before,

/* .projects .project.asr a:before, */
.projects .project.bhm a:before,
.projects .project.bridge a:before,
.projects .project.conductive_thread a:before,
.projects .project.foodsters a:before,
.projects .project.icbc a:before,
.projects .project.ribeiro a:before,
.projects .project.sockeye a:before,

.gif .play:before,.casestudy .timeline .spine:before,
.casestudy .timeline .event .description span:before,
.casestudy .timeline .event .dot:before,
.casestudy .tags li:before
{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0
}
.feature,.home footer,
.foodsters section.showcase,
.heading,.projects .project.asr a,
.projects .project.bhm a,
.projects .project.bridge a,
.projects .project.conductive_thread a,
.projects .project.foodsters a,

/* work sessions */
.projects .project.aso a,
.projects .project.bo a,
.projects .project.cat a,
.projects .project.cbw a,
.projects .project.cs a,
.projects .project.dashboard a,
.projects .project.etl a,
.projects .project.eudl a,
.projects .project.fs a,
.projects .project.mm a,
.projects .project.gapf a,
.projects .project.glue a,
.projects .project.hdfs a,
.projects .project.hmai a,
.projects .project.ldq a,
.projects .project.lfaf a,
.projects .project.miniboard a,

/* wow */
.projects .project.agile a,
.projects .project.bppy a,
.projects .project.bpsql a,
.projects .project.ls a,
.projects .project.migrate a,
.projects .project.nc a,
.projects .project.pii a,
.projects .project.rle a,
.projects .project.roles a,
.projects .project.team a,

/* conference */
.projects .project.databricks a,
.projects .project.dis a,
.projects .project.pycon a,

/* fashion */
.projects .project.fafc a, 
.projects .project.jelly a,
.projects .project.unlabeled a,

.projects .project.icbc a,
.projects .project.ribeiro a,
.projects .project.sockeye a,
.casestudy .timeline .spine,
.casestudy .timeline .event .dot,
.casestudy .tags li
{
	position:relative
}
.feature:after,.home footer:after,
.foodsters section.showcase:after,
.heading:after,
.projects .project.asr a:after,
.projects .project.bhm a:after,
.projects .project.bridge a:after,
.projects .project.conductive_thread a:after,
.projects .project.foodsters a:after,

/* work sessions */
.projects .project.aso a:after,
.projects .project.bo a:after,
.projects .project.cat a:after,
.projects .project.cbw a:after,
.projects .project.cs a:after,
.projects .project.dashboard a:after,
.projects .project.etl a:after,
.projects .project.eudl a:after,
.projects .project.fs a:after,
.projects .project.mm a:after,
.projects .project.gapf a:after,
.projects .project.glue a:after,
.projects .project.hdfs a:after,
.projects .project.hmai a:after,
.projects .project.ldq a:after,
.projects .project.lfaf a:after,
.projects .project.miniboard a:after,

/* wow */
.projects .project.agile a:after,
.projects .project.bppy a:after,
.projects .project.bpsql a:after,
.projects .project.ls a:after,
.projects .project.migrate a:after,
.projects .project.nc a:after,
.projects .project.pii a:after,
.projects .project.rle a:after,
.projects .project.roles a:after,
.projects .project.team a:after,

/* conference */
.projects .project.databricks a:after,
.projects .project.dis a:after,
.projects .project.pycon a:after,

/* fashion */
.projects .project.fafc a:after, 
.projects .project.it a:after,
.projects .project.jelly a:after,
.projects .project.unlabeled a:after,

.projects .project.icbc a:after,
.projects .project.ribeiro a:after,
.projects .project.sockeye a:after,
.casestudy .timeline .spine:after,
.casestudy .timeline .event .dot:after,
.casestudy .tags li:after
{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0
}
.feature:after,.home footer:after,
.foodsters section.showcase:after
{
	background:url('');
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:999
}
.casestudy section.mock img,
.casestudy section.brief .logo>div img,
.casestudy .gallery li img,
.casestudy .timeline .event img,
.foodsters section.research img,
.foodsters section.visual-design img,
.foodsters section.showcase img,
.bigheadmode section.papercraft img,
.bigheadmode section.pepakura img
{
	display:block;
	height:auto;
	max-width:100%;
	margin:0 auto
}
.no-transition
{
	-webkit-transition:none !important;
	-moz-transition:none !important;
	-o-transition:none !important;
	-ms-transition:none !important;
	transition:none !important
}
.preload
{
	display:none !important
}
.mobile .content
{
	background:none
}
.content
{
	position:relative;
	z-index:15;
	height:100%;
	background:#fafafa url(../img/noise.png);
	border-top:1px solid #eaeaea;
	-webkit-box-shadow:0 50px 150px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 50px 150px 0 rgba(0,0,0,0.1);
	box-shadow:0 50px 150px 0 rgba(0,0,0,0.1)
}
.content p a:hover
{
	color:#c33;
	padding-bottom:1px;
	border-bottom:1px solid #db7070
}
	button.flat
{
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
	font-family:"din-condensed-web","Arial Narrow",Arial,sans-serif;
	text-transform:uppercase;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
	-o-transition:background 0.5s;
	transition:background 0.5s;
	padding:10px 20px;
	background:#000;
	border:none;
	color:#fff;
	font-size:20px;
	font-weight:normal;
	text-shadow:none;
	outline:none
}
	button.flat:hover,button.flat:active,button.flat:focus
{
	background:#c33
}
	button.flat:visited
{
	background:#000
}
.feature
{
	position:relative;
	height:350px;
	z-index:1
}

/*.feature img.special_img
{
	position:fixed;
	left:50%;
	margin-left:-510px;
	top:0;
	width:auto;
	height:700px;
}*/

.feature img.special_img
{
	top:0;
	max-width:100%;
	height:auto;
}

/*bug: image center VS cannot move*/
.feature img
{
	position:fixed;
	left:50%;
	margin-left:-650px;
	top:0;
	width:auto;
	height:350px
}

.heading
{
	margin:75px 0;
	text-align:center
}
.heading span:first-child
{
	margin-left:-3px;
	margin-bottom:5px
}
.heading:after
{
	height:1px;
	width:300px;
	top:40px;
	left:50%;
	margin-left:-150px;
	background-color:#ccc;
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	transform:rotate(30deg);
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
	-ms-transform-origin:center center;
	-o-transform-origin:center center;
	transform-origin:center center;
	z-index:-1
}
.progress-bar
{
	position:absolute;
	display:block;
	height:0%;
	width:1px;
	top:0;
	left:200px;
	z-index:9999;
	background-color:#c33;
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity 0.5s ease-in-out
}
.progress-bar.loaded
{
	opacity:0
}
.cover
{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#FFF;
	z-index:9999
}
.modal
{
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	z-index:999999;
	display:none
}
.modal .video-wrapper
{
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-275px;
	margin-top:-256px;
	display:inline-block
}
.modal .video-wrapper .iframe
{
	position:relative;
	z-index:2
}
.modal .video-wrapper button
{
	position:absolute;
	top:380px;
	right:-2px;
	z-index:1;
	opacity:0;
	-webkit-transition:all 0.5s ease-in-out;
	-webkit-transition-delay:1.5s;
	-moz-transition:all 0.5s ease-in-out 1.5s;
	-o-transition:all 0.5s ease-in-out 1.5s;
	transition:all 0.5s ease-in-out 1.5s
}
.modal .video-wrapper button.loaded
{
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
	opacity:1;
	top:420px
}


/* .mobile .cover
{
	display:none
}
.mobile .feature img
{
	position:relative
} */


.projects .project
{
	margin-bottom:20px
}
.projects .project a,.projects .project img
{
	display:block;
	height:auto;
	width:100%
}
.projects .project a
{
	overflow:hidden
}
.projects .project a .info,.projects .project a .background
{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
.projects .project a .description
{
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity 0.5s ease-in-out;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity:0;
	position:relative;
	padding:45px 130px 0;
	font-size:12px;
	color:#fff;
	text-align:center;
	z-index:10000;

	width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    backface-visibility: hidden;
    padding: 0 20px;
    padding: 0 1.25rem
}
.projects .project a .description h4
{
	margin-bottom:10px;
	color:#fff
}
.projects .project a .background
{
	-webkit-transition:-webkit-transform 0.5s ease-in-out;
	-webkit-transition-delay:0.3s;
	-moz-transition:-moz-transform 0.5s ease-in-out 0.3s;
	-o-transition:-o-transform 0.5s ease-in-out 0.3s;
	transition:transform 0.5s ease-in-out 0.3s;
	-webkit-transform:translate(834px);
	-moz-transform:translate(834px);
	-ms-transform:translate(834px);
	-o-transform:translate(834px);
	transform:translate(834px);
	background-color:#c33;
	z-index:9999
}
.projects .project a .background:before
{
	left:-214px;
	width:0px;
	height:0px;
	border-style:solid;
	border-width:0 215px 215px 0;
	border-color:transparent #c33 transparent transparent
}
.projects .project a .snippet
{
	display:block
}
.projects .project a .link
{
	font-family:"din-condensed-web","Arial Narrow",Arial,sans-serif;
	text-transform:uppercase;
	width:80px;
	display:block;
	margin:20px auto 0;
	padding:5px 10px;
	border:2px solid #fff;
	-webkit-transition:background 0.5s ease-in-out;
	-webkit-transition-delay:0.15s;
	-moz-transition:background 0.5s ease-in-out 0.15s;
	-o-transition:background 0.5s ease-in-out 0.15s;
	transition:background 0.5s ease-in-out 0.15s
}
.projects .project a .link:hover
{
	background-color:#ab2b2b
}
.projects .project a:hover .description
{
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1;
	-webkit-transition:opacity 0.5s ease-in-out;
	-webkit-transition-delay:0.3s;
	-moz-transition:opacity 0.5s ease-in-out 0.3s;
	-o-transition:opacity 0.5s ease-in-out 0.3s;
	transition:opacity 0.5s ease-in-out 0.3s
}
.projects .project a:hover .background
{
	-webkit-transform:translate(0);
	-moz-transform:translate(0);
	-ms-transform:translate(0);
	-o-transform:translate(0);
	transform:translate(0);
	-webkit-transition:-webkit-transform 0.5s ease-in-out;
	-webkit-transition-delay:0.15s;
	-moz-transition:-moz-transform 0.5s ease-in-out 0.15s;
	-o-transition:-o-transform 0.5s ease-in-out 0.15s;
	transition:transform 0.5s ease-in-out 0.15s
}
.projects .project.one-third .background
{
	-webkit-transform:translate(515px);
	-moz-transform:translate(515px);
	-ms-transform:translate(515px);
	-o-transform:translate(515px);
	transform:translate(515px)
}
.projects .project.one-third .description
{
	padding:45px 15px 0
}

.projects .project.asr a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.asr.one-third a:after
{
	/*background:url('/img/ ') 0 -825px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.asr.two-thirds a:after
{
	/*background:url('/img/ ') 0 -825px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.asr a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.bhm a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.bhm.one-third a:after
{
	/*background:url('/img/ ') 0 -943px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.bhm.two-thirds a:after
{
	/*background:url('/img/ ') 0 -943px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.bhm a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.bhm.one-third img
{
	width:auto;
	position:relative;
	left:50%;
	margin-left:-430px
}
.projects .project.bridge a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.bridge.one-third a:after
{
	/*background:url('/img/ ') 0 -1599px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.bridge.two-thirds a:after
{
	/*background:url('/img/ ') 0 -1599px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.bridge a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.conductive_thread a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.conductive_thread.one-third a:after
{
	/*background:url('/img/ ') 0 -1329px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.conductive_thread.two-thirds a:after
{
	/*background:url('/img/ ') 0 -1329px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.conductive_thread a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.foodsters a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.foodsters.one-third a:after
{
	/*background:url('/img/ ') 0 -125px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.foodsters.two-thirds a:after
{
	/*background:url('/img/ ') 0 -125px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.foodsters a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.foodsters.one-third img
{
	width:auto;
	position:relative;
	left:50%;
	margin-left:-430px
}
.projects .project.dashboard a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.dashboard.one-third a:after
{
	/*background:url('/img/ ') 0 -361px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.dashboard.two-thirds a:after
{
	/*background:url('/img/ ') 0 -361px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.dashboard a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.icbc a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.icbc.one-third a:after
{
	/*background:url('/img/ ') 0 -479px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.icbc.two-thirds a:after
{
	/*background:url('/img/ ') 0 -479px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.icbc a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.ribeiro a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.ribeiro.one-third a:after
{
	/*background:url('/img/ ') 0 -243px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.ribeiro.two-thirds a:after
{
	/*background:url('/img/ ') 0 -243px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.ribeiro a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.projects .project.sockeye a:before
{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:9997
}
.projects .project.sockeye.one-third a:after
{
	/*background:url('/img/ ') 0 -1061px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:50%;
	margin-left:-83px;
	margin-top:-49px;
	z-index:9998
}
.projects .project.sockeye.two-thirds a:after
{
	/*background:url('/img/ ') 0 -1061px no-repeat;*/
	width:166px;
	height:98px;
	top:50%;
	left:5%;
	margin-top:-49px;
	z-index:9998
}
	@media only screen and (max-width: 767px)
{
.projects .project.sockeye a:after
{
	left:50% !important;
	margin-left:-83px;
	margin-top:-49px
}

}
.subtitle
{
	display:block;
	font:10px/18px "ff-tisa-web-pro",Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
	letter-spacing:2px;
	text-transform:uppercase;
	text-shadow:none
}
.gif
{
	position:relative;
	cursor:pointer
}
.gif .play
{
	display:block;
	position:absolute;
	left:50%;
	margin-left:-47px;
	top:50%;
	margin-top:-50px
}
.gif .play:before
{
	/*background:url('/img/ ') 0 -597px no-repeat;*/
	width:94px;
	height:94px;
	top:1px
}
	a
{
	color:#c33;
	text-decoration:none
}
	a h1,a h2,a h3,a h4,a h5,a h6
{
	color:#c33
}

p.deco{
	color:#c33;
	display:inline;
}

p.strong{
	font-weight: 700;
}

p.inline{
	display:inline;
	text-align: justify;
}
	html
{
	height:100%
}
	body
{
	position:relative;
	width:100%;
	height:100%;
	background-color:#fff
}
	header
{
	position:fixed;
	top:0;
	left:-201px;
	width:200px;
	height:100%;
	overflow:hidden;
	z-index:10000;
	display:inline;
	float:left;
	-webkit-transition:left 0.3s;
	-moz-transition:left 0.3s;
	-o-transition:left 0.3s;
	transition:left 0.3s
}
	#main
{
	overflow:hidden;
	min-height:100%;
	width:calc(100% - 200px);
	margin-left:200px;
	display:inline;
	float:left;
	background-color: currentcolor;
}
.column.omega,.columns.omega
{
	float:right
}
	header
{
	background-color:#fff;
	font-size:10px;
	line-height:16px;
	text-align:center;
	border-right:1px solid #eaeaea;
	overflow:visible
}
	header nav
{
	position:relative;
	top:50%;
	margin-top:-242px
}
	header nav li
{
	margin-bottom:65px
}
	header nav li>a
{
	display:block;
	text-decoration: none
}
	header nav li>a:hover
{
	color:#c33;
	text-decoration: none
}
	header nav li>a:hover h3,header nav li>a:hover span
{
	color:#c33
}
	header nav li>a h3,header nav li>a span
{
	color:#000;
	-webkit-transition:color 0.3s;
	-moz-transition:color 0.3s;
	-o-transition:color 0.3s;
	transition:color 0.3s
}
	header nav li.active>a
{
	color:#c33;
	text-decoration: none
}
	header nav li.active>a h3,header nav li.active>a span
{
	color:#c33
}
	header nav li.active>a svg
{
	fill:#c33
}
	header nav li.active>a svg line
{
	stroke:#c33
}
	header .navbar
{
	display:none
}
	header .copyright
{
	position:absolute;
	padding:20px;
	left:0;
	bottom:0;
	color:#999
}
	header .copyright a
{
	font-family:"din-condensed-web","Arial Narrow",Arial,sans-serif;
	text-transform:uppercase;
	font-size:12px
}
.home .feature
{
	min-height:350px;
	width:100%
}
.home .feature video
{
	position:fixed;
	top:80px;
	left:0;
	margin:0;
	width:1300px;
	height:auto;
	background-color:#FFF;
	border:none;
	z-index:5
}
.home .feature video.loaded
{
	-webkit-transition:margin-top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:margin-top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition:margin-top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:margin-top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	display:block;
	margin-top:-175px
}
.home.mobile .content
{
	top:0
}
.home .content
{
	min-height:1500px;
	//top:-250px;
	top:100px;
	padding-bottom:30px
}
.home .content.loaded
{
	-webkit-transition:top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition:top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:top 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	top:0
}
.home .content .container
{
	border-top:1px solid transparent
}
.home #about .resume
{
	margin-top:40px
}
.home #about .resume a
{
	/*background:url('/img/ ') 15px -1712px no-repeat;*/
	display:block;
	width:110px;
	height:111px;
	height:120px !important;
	width:145px !important;
	margin:0 auto;
	text-align:center
}
.home #about .resume a:first-child
{
	/*background:url('/img/ ') 15px -1712px no-repeat;*/
	display:block;
	width:110px;
	height:111px;
	margin-bottom:45px
}
.home #about .resume a:hover h4,.home #about .resume a:hover span
{
	color:#c33
}
.home #about .resume a:hover svg
{
	-webkit-transform:translate(0, -3px);
	-moz-transform:translate(0, -3px);
	-ms-transform:translate(0, -3px);
	-o-transform:translate(0, -3px);
	transform:translate(0, -3px)
}
.home #about .resume a h4,.home #about .resume a span,.home #about .resume a svg
{
	color:#c33;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s
}
.home #about .resume a svg
{
	display:block;
	margin:0 auto 5px
}
.home #about .heading
{
	margin:85px 0 65px
}
.home .leftHand,
.home .rightHand
{
	position:absolute;
	left:10%;
	top:-94px;
	z-index:20;
	/*width:270px;*/
	width:350px;
	height:auto
}
.home .leftHand.loaded
{
	left:3%;
	-webkit-transition:left 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:left 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition:left 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:left 1.5s cubic-bezier(0.77, 0, 0.175, 1)
}
.home .rightHand
{
	left:auto;
	right:10%
}
.home .rightHand.loaded
{
	right:3%;
	-webkit-transition:right 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:right 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition:right 1.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:right 1.5s cubic-bezier(0.77, 0, 0.175, 1)
}
.home #contact
{
	padding-bottom:100px
}
.home #contact .info
{
	margin-top:12px;
	font-size:14px
}
.home #contact form div.input
{
	position:relative
}
.home #contact form div.input label
{
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
	-o-transition:background 0.5s;
	transition:background 0.5s;
	position:absolute;
	top:0;
	left:0;
	width:45px !important;
	height:45px !important;
	cursor:pointer
}
.home #contact form div.input label.name
{
	background:url('') center center;
	background-color:#000
}
.home #contact form div.input label.email
{
	background:url('') center center;
	background-color:#000
}
.home #contact form div.input label.message
{
	background:url('') center center;
	background-color:#000
}
.home #contact form div.input label.focus
{
	background-color:#c33
}
.home #contact form div.input input,.home #contact form div.input textarea
{
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:border 0.5s;
	-moz-transition:border 0.5s;
	-o-transition:border 0.5s;
	transition:border 0.5s;
	height:45px;
	width:100%;
	padding:10px 10px 10px 55px;
	border:1px solid #000
}
.home #contact form div.input input:focus,.home #contact form div.input textarea:focus
{
	border-color:#c33
}
.home #contact form div.input textarea
{
	min-height:150px;
	resize:none
}
.home #contact form div.input button
{
	position:absolute;
	right:0;
	bottom:0;
	margin:0
}
.home #contact form .error
{
	margin-top:-12px;
	font-size:12px;
	color:#c33
}
.home footer
{
	position:relative;
	height:100%;
	width:100%;
	background:#FFF;
	z-index:10
}
.home footer img
{
	display:block;
	position:relative;
	left:50%;
	margin-left:-396px
}
.home .awwwards
{
	/*background:url('/img/ ') 0 0 no-repeat;*/
	display:false;
	width:70px;
	height:105px;
	position:absolute;
	top:30px;
	right:0;
	z-index:9999
}
	@-webkit-keyframes moveHand
{
	from
{
	-webkit-transform:translate(0, 0px) rotate(0deg)
}
	65%
{
	-webkit-transform:translate(1px, 0) rotate(-0.2deg)
}
	to
{
	-webkit-transform:translate(0, 0px) rotate(0deg)
}

}
.moveHand
{
	-webkit-animation-name:moveHand;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:infinite
}
.casestudy section
{
	padding-bottom:50px
}
.casestudy section .subheading
{
	margin:80px 0 50px;
	text-align:center
}
.casestudy section.mock img
{
	border:1px solid #CCC
}
.casestudy section.brief .heading
{
	margin:85px 0 65px
}
.casestudy section.brief .logo
{
	text-align:center
}
.casestudy section.brief .logo>div
{
	position:relative;
	width:280px;
	margin:15px auto 0
}
.casestudy section.brief .logo>div .ribbon
{
	position:absolute;
	top:0;
	display:block;
	width:140px;
	height:195px;
	background:url(../img/foodsters/logo-ribbon.png) no-repeat;
	z-index:0
}
.casestudy section.brief .logo>div .ribbon.left
{
	left:60px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s
}
.casestudy section.brief .logo>div .ribbon.right
{
	background:url(../img/foodsters/logo-ribbon.png) no-repeat right;
	right:60px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-webkit-transition:all 1s;
	-webkit-transition-delay:0.2s;
	-moz-transition:all 1s 0.2s;
	-o-transition:all 1s 0.2s;
	transition:all 1s 0.2s
}
.casestudy section.brief .logo>div .ribbon.visible
{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg)
}
.casestudy section.brief .logo>div .ribbon.visible.left
{
	left:0
}
.casestudy section.brief .logo>div .ribbon.visible.right
{
	background:url(../img/foodsters/logo-ribbon.png) no-repeat right;
	right:0
}
.casestudy section.brief .logo>div img
{
	position:relative;
	z-index:1
}
.casestudy section.brief .logo a
{
	display:inline-block;
	margin-top:15px
}
.casestudy section.brief .logo a .arrow
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-moz-transition:-moz-transform 0.3s ease-in-out;
	-o-transition:-o-transform 0.3s ease-in-out;
	transition:transform 0.3s ease-in-out
}
.casestudy section.brief .logo a h5
{
	margin-left:12px;
	color:#c33;
	display:inline-block
}
.casestudy section.brief .logo a:hover .arrow
{
	-webkit-transform:translate(2px, -2px);
	-moz-transform:translate(2px, -2px);
	-ms-transform:translate(2px, -2px);
	-o-transform:translate(2px, -2px);
	transform:translate(2px, -2px)
}
.casestudy figure
{
	font-size:12px;
	color:#999;
	text-align:center
}
.casestudy figure sup
{
	/*vertical-align:super;*/
	font-size:9px;
	top:-.5em;
}
.casestudy .gallery
{
	display:block;
	width:auto;
	height:auto;
	text-align:center;
	cursor:default;
	overflow:hidden;
	visibility:hidden
}
.casestudy .gallery li
{
	-webkit-transition:opacity 1s;
	-moz-transition:opacity 1s;
	-o-transition:opacity 1s;
	transition:opacity 1s;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	opacity:0.5;
	display:inline-block;
	text-align:center;
	margin:0 30px;
	cursor:pointer
}
.casestudy .gallery li.current
{
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1
}
.casestudy .gallery li:first-child
{
	display:inline-block
}
.casestudy .gallery-nav
{
	margin:10px 0 5px
}
.casestudy .gallery-nav li
{
	display:inline-block
}
.casestudy .gallery-nav li span
{
	margin:0 4px 0 8px
}
.casestudy .gallery-nav li a
{
	-webkit-transition:font 0.3s ease-in-out;
	-moz-transition:font 0.3s ease-in-out;
	-o-transition:font 0.3s ease-in-out;
	transition:font 0.3s ease-in-out;
	font-family:"din-condensed-web","Arial Narrow",Arial,sans-serif;
	text-transform:uppercase;
	font-size:16px;
	color:#000;
	text-transform:uppercase
}
.casestudy .gallery-nav li.current a
{
	color:#c33
}
.casestudy .gallery-description
{
	min-height:120px
}
.casestudy .gallery-description li
{
	display:none
}
.casestudy .gallery-description li.current
{
	display:block
}
.casestudy .timeline
{
	position:relative;
	padding-top:75px
}
.casestudy .timeline h4
{
	margin-bottom:25px;
	text-align:center
}
.casestudy .timeline .spine
{
	display:block;
	position:absolute;
	left:50%;
	margin-left:-15px;
	top:0;
	height:100%;
	width:30px
}
.casestudy .timeline .spine:before
{
	/*background:url('/img/ ') 0 -1179px no-repeat;*/
	width:30px;
	height:30px;
	top:1px
}
.casestudy .timeline .spine:before
{
	z-index:1
}
.casestudy .timeline .spine:after
{
	top:15px;
	height:100%;
	width:1px;
	margin-left:15px;
	background-color:#CCC;
	z-index:0
}
.casestudy .timeline .heading h4
{
	margin-bottom:15px;
	color:#c33;
	text-align:right
}
.casestudy .timeline .heading.omega
{
	margin-top:75px
}
.casestudy .timeline .heading.omega h4
{
	text-align:left
}
.casestudy .timeline .event
{
	position:relative;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity:0;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s
}
.casestudy .timeline .event>div:first-child
{
	position:relative;
	margin-bottom:45px;
	background-color:#fff;
	border:1px solid #CCC;
	z-index:1;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px
}
.casestudy .timeline .event img
{
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px
}
.casestudy .timeline .event .description
{
	font-size:12px;
	line-height:18px;
	border-top:1px solid #CCC
}
.casestudy .timeline .event .description h6
{
	padding:7px 10px 0
}
.casestudy .timeline .event .description p
{
	margin-bottom:5px;
	padding:6px 10px 5px;
	color:#666
}
.casestudy .timeline .event .description span
{
	position:relative;
	display:block;
	padding:7px 10px;
	border-top:1px solid #CCC;
	background:#EEE;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
	margin-left:19px;
	margin-left:0;
	padding-left:30px
}
.casestudy .timeline .event .description span:before
{
	/*background:url('/img/ ') 0 -1497px no-repeat;*/
	width:15px;
	height:15px;
	top:1px;
	left:-19px
}
.casestudy .timeline .event .description span:before
{
	top:9px;
	left:9px
}
.casestudy .timeline .event .dot
{
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	position:absolute;
	top:15px;
	width:7px;
	height:7px
}
.casestudy .timeline .event .dot:before
{
	top:-8px;
	content:".........................";
	font-family:Arial, sans-serif;
	font-size:10px;
	color:#AAA;
	z-index:0;
	cursor:default
}
.casestudy .timeline .event .dot:after
{
	-webkit-border-radius:3.5px;
	-moz-border-radius:3.5px;
	-ms-border-radius:3.5px;
	-o-border-radius:3.5px;
	border-radius:3.5px;
	display:block;
	width:100%;
	height:100%;
	background:#999;
	z-index:0
}
.casestudy .timeline .event.alpha
{
	left:-15px
}
.casestudy .timeline .event.alpha .dot
{
	right:0
}
.casestudy .timeline .event.alpha .dot:before
{
	left:-74px
}
.casestudy .timeline .event.alpha.visible
{
	left:0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1
}
.casestudy .timeline .event.alpha.visible .dot
{
	right:-74px
}
.casestudy .timeline .event.omega
{
	left:15px
}
.casestudy .timeline .event.omega .dot
{
	left:120px
}
.casestudy .timeline .event.omega .dot:before
{
	right:-100px
}
.casestudy .timeline .event.omega.visible
{
	left:0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1
}
.casestudy .timeline .event.omega.visible .dot
{
	left:-73px
}
.casestudy .timeline .offset-by-two
{
	padding-left:0
}
.casestudy .timeline .offset-by-eleven
{
	padding-left:0;
	margin-left:540px
}
.casestudy .tags
{
	margin-left:10px
}
.casestudy .tags li
{
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f0f0f0));
	background-image:-webkit-linear-gradient(#ffffff,#f0f0f0);
	background-image:-moz-linear-gradient(#ffffff,#f0f0f0);
	background-image:-o-linear-gradient(#ffffff,#f0f0f0);
	background-image:linear-gradient(#ffffff,#f0f0f0);
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
	-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1),inset 1px -2px 1px -1px #eee;
	-moz-box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1),inset 1px -2px 1px -1px #eee;
	box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1),inset 1px -2px 1px -1px #eee;
	position:relative;
	display:inline-block;
	height:30px;
	margin-right:25px;
	border:1px solid #d4d4d4;
	border-left:none
}
.casestudy .tags li:before
{
	top:50%;
	left:-9px;
	z-index:0;
	width:17px;
	height:17px;
	margin-top:-9px;
	border-right:solid 1px #adadad;
	border-bottom:solid 1px #d4d4d4;
	background-image:-webkit-linear-gradient(45deg, #ffffff,#f0f0f0);
	background-image:-moz-linear-gradient(45deg, #ffffff,#f0f0f0);
	background-image:-o-linear-gradient(45deg, #ffffff,#f0f0f0);
	background-image:linear-gradient(45deg, #ffffff,#f0f0f0);
	-webkit-transform:rotate(134deg) skewX(-10deg) skewY(-10deg);
	-moz-transform:rotate(134deg) skewX(-10deg) skewY(-10deg);
	-ms-transform:rotate(134deg) skewX(-10deg) skewY(-10deg);
	-o-transform:rotate(134deg) skewX(-10deg) skewY(-10deg);
	transform:rotate(134deg) skewX(-10deg) skewY(-10deg)
}
.casestudy .tags li:after
{
	content:"";
	top:50%;
	left:3px;
	margin-top:-3px;
	z-index:1;
	width:4px;
	height:4px;
	background:#FFF;
	border:1px solid #CCC;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	-ms-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px
}
.casestudy .tags li span
{
	position:relative;
	top:3px;
	padding:15px;
	font-size:12px;
	color:#666;
	cursor:default
}
.foodsters section.research
{
	border-top:1px solid #DDD;
	background-color:rgba(0,0,0,0.03)
}
.foodsters section.visual-design
{
	border-top:1px solid #DDD;
	background-image:-webkit-linear-gradient(45deg, #eeeeee 0%,#ffffff 100%);
	background-image:-moz-linear-gradient(45deg, #eeeeee 0%,#ffffff 100%);
	background-image:-o-linear-gradient(45deg, #eeeeee 0%,#ffffff 100%);
	background-image:linear-gradient(45deg, #eeeeee 0%,#ffffff 100%)
}
.foodsters section.visual-design img
{
	margin:30px 0
}
.foodsters section.ux
{
	border-top:1px solid #DDD
}
.foodsters section.showcase
{
	padding:0;
	background:url(../img/foodsters/showcase_bg.jpg) no-repeat 50% 25%
}
.foodsters section.showcase img
{
	position:relative;
	z-index:9999
}
.foodsters section.development .subheading
{
	margin-top:15px
}
.foodsters section.outcomes
{
	position:relative;
	min-height:600px
}
.foodsters section.outcomes .subheading
{
	margin-bottom:20px;
	text-align:left
}
.foodsters section.outcomes svg
{
	position:absolute;
	left:50%;
	margin-left:-800px;
	top:-200px;
	z-index:0
}
.foodsters section.outcomes svg path
{
	stroke-dasharray:2020;
	stroke-dashoffset:2020;
	-webkit-transition:stroke-dashoffset 2s ease-in-out;
	-webkit-transition-delay:0.5s;
	-moz-transition:stroke-dashoffset 2s ease-in-out 0.5s;
	-o-transition:stroke-dashoffset 2s ease-in-out 0.5s;
	transition:stroke-dashoffset 2s ease-in-out 0.5s
}
.foodsters section.outcomes svg circle
{
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1;
	-webkit-transform:scale(0, 0);
	-moz-transform:scale(0, 0);
	-ms-transform:scale(0, 0);
	-o-transform:scale(0, 0);
	transform:scale(0, 0);
	-webkit-transform-origin:50%;
	-moz-transform-origin:50%;
	-ms-transform-origin:50%;
	-o-transform-origin:50%;
	transform-origin:50%
}
.foodsters section.outcomes svg circle:nth-child(0)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0s;
	-o-transition:-o-transform 0.3s ease-in-out 0s;
	transition:transform 0.3s ease-in-out 0s
}
.foodsters section.outcomes svg circle:nth-child(1)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.05s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.05s;
	-o-transition:-o-transform 0.3s ease-in-out 0.05s;
	transition:transform 0.3s ease-in-out 0.05s
}
.foodsters section.outcomes svg circle:nth-child(2)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.1s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.1s;
	-o-transition:-o-transform 0.3s ease-in-out 0.1s;
	transition:transform 0.3s ease-in-out 0.1s
}
.foodsters section.outcomes svg circle:nth-child(3)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.15s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.15s;
	-o-transition:-o-transform 0.3s ease-in-out 0.15s;
	transition:transform 0.3s ease-in-out 0.15s
}
.foodsters section.outcomes svg circle:nth-child(4)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.2s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.2s;
	-o-transition:-o-transform 0.3s ease-in-out 0.2s;
	transition:transform 0.3s ease-in-out 0.2s
}
.foodsters section.outcomes svg circle:nth-child(5)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.25s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.25s;
	-o-transition:-o-transform 0.3s ease-in-out 0.25s;
	transition:transform 0.3s ease-in-out 0.25s
}
.foodsters section.outcomes svg circle:nth-child(6)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.3s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.3s;
	-o-transition:-o-transform 0.3s ease-in-out 0.3s;
	transition:transform 0.3s ease-in-out 0.3s
}
.foodsters section.outcomes svg circle:nth-child(7)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.35s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.35s;
	-o-transition:-o-transform 0.3s ease-in-out 0.35s;
	transition:transform 0.3s ease-in-out 0.35s
}
.foodsters section.outcomes svg circle:nth-child(8)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.4s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.4s;
	-o-transition:-o-transform 0.3s ease-in-out 0.4s;
	transition:transform 0.3s ease-in-out 0.4s
}
.foodsters section.outcomes svg circle:nth-child(9)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.45s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.45s;
	-o-transition:-o-transform 0.3s ease-in-out 0.45s;
	transition:transform 0.3s ease-in-out 0.45s
}
.foodsters section.outcomes svg circle:nth-child(10)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.5s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.5s;
	-o-transition:-o-transform 0.3s ease-in-out 0.5s;
	transition:transform 0.3s ease-in-out 0.5s
}
.foodsters section.outcomes svg circle:nth-child(11)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.55s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.55s;
	-o-transition:-o-transform 0.3s ease-in-out 0.55s;
	transition:transform 0.3s ease-in-out 0.55s
}
.foodsters section.outcomes svg circle:nth-child(12)
{
	-webkit-transition:-webkit-transform 0.3s ease-in-out;
	-webkit-transition-delay:0.6s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.6s;
	-o-transition:-o-transform 0.3s ease-in-out 0.6s;
	transition:transform 0.3s ease-in-out 0.6s
}
.foodsters section.outcomes.visible path
{
	stroke-dashoffset:0
}
.foodsters section.outcomes.visible circle
{
	-webkit-transform:scale(1, 1);
	-moz-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	-o-transform:scale(1, 1);
	transform:scale(1, 1)
}
.foodsters section.outcomes .testimonials,.foodsters section.outcomes .last-words
{
	margin-top:50px
}
.foodsters section.outcomes .testimonials blockquote,.foodsters section.outcomes .last-words blockquote
{
	display:none
}
.foodsters section.more-work
{
	border-top:1px solid #DDD;
	background-color:rgba(0,0,0,0.03)
}
.foodsters .knoll
{
	position:relative;
	display:block;
	width:940px;
	height:510px;
	margin:30px auto
}
.foodsters .knoll span
{
	position:absolute;
	background-image:url(../img/foodsters/knolling.png);
	background-repeat:no-repeat
}
.foodsters .knoll img
{
	display:none !important
}
.foodsters .knoll .bag
{
	display:block;
	width:363px;
	height:326px;
	background-position:-0px -0px;
	top:0px;
	left:0px
}
.foodsters .knoll .pad
{
	display:block;
	width:222px;
	height:188px;
	background-position:-373px -44px;
	top:44px;
	left:373px
}
.foodsters .knoll .card-1
{
	display:block;
	width:82px;
	height:49px;
	background-position:-603px -62px;
	top:62px;
	left:603px
}
.foodsters .knoll .card-2
{
	display:block;
	width:82px;
	height:51px;
	background-position:-603px -110px;
	top:110px;
	left:603px
}
.foodsters .knoll .card-3
{
	display:block;
	width:82px;
	height:50px;
	background-position:-603px -160px;
	top:160px;
	left:603px
}
.foodsters .knoll .envelope
{
	display:block;
	width:246px;
	height:179px;
	background-position:-691px -44px;
	top:44px;
	left:691px
}
.foodsters .knoll .stamp
{
	display:block;
	width:97px;
	height:108px;
	background-position:-373px -234px;
	top:234px;
	left:373px
}
.foodsters .knoll .ipad
{
	display:block;
	width:207px;
	height:180px;
	background-position:-485px -234px;
	top:234px;
	left:485px
}
.foodsters .knoll .receipt
{
	display:block;
	width:170px;
	height:216px;
	background-position:-691px -234px;
	top:234px;
	left:691px
}
.foodsters .knoll .glasses
{
	display:block;
	width:144px;
	height:58px;
	background-position:-513px -425px;
	top:425px;
	left:513px
}
.foodsters .knoll .iphone
{
	display:block;
	width:69px;
	height:137px;
	background-position:-407px -351px;
	top:351px;
	left:407px
}
.foodsters .knoll .sketchbook
{
	display:block;
	width:186px;
	height:137px;
	background-position:-213px -350px;
	top:350px;
	left:213px
}
.foodsters .knoll .watch
{
	display:block;
	width:36px;
	height:172px;
	background-position:-167px -337px;
	top:337px;
	left:167px
}
.bigheadmode section.papercraft
{
	background:url('/img/bigheadmode/shattered.png?1385596439') 0 0 repeat-x
}
.bigheadmode section.papercraft .animation
{
	width:400px;
	height:475px;
	background:url('/img/bigheadmode/animation/animation0011.gif?1386159563') no-repeat
}
.bigheadmode section.papercraft .facegen
{
	display:table;
	height:460px
}
.bigheadmode section.papercraft .facegen p
{
	display:table-cell;
	vertical-align:middle
}
.bigheadmode section.papercraft .facegen img
{
	margin-top:65px;
	width:100%
}
.bigheadmode section.pepakura
{
	margin-top:45px
}
.goodpeople .content
{
	padding:50px 0
}
.goodpeople .content ul
{
	-webkit-transition:top 0.5s ease-in-out;
	-moz-transition:top 0.5s ease-in-out;
	-o-transition:top 0.5s ease-in-out;
	transition:top 0.5s ease-in-out;
	position:relative;
	top:-30px;
	font-size:12px;
	text-align:center
}
.goodpeople .content ul a:hover
{
	color:#c33;
	padding-bottom:1px;
	border-bottom:1px solid #db7070
}
.goodpeople .content ul.loaded
{
	top:0
}
.resume .content h3
{
	margin-top:2px
}
.resume .content h4
{
	line-height:28px
}
.resume .content p
{
	font-size:16px;
	line-height:24px
}
.resume section
{
	margin-bottom:30px;
	padding-bottom:20px
}
.resume .border
{
	padding-bottom:25px;
	border-bottom:1px solid #DDD
}
.resume .position
{
	margin-bottom:30px
}
.resume .position .subtitle
{
	display:inline-block;
	margin-left:20px
}
.resume .working-knowledge>*
{
	padding-left:17px
}
.resume .technical h4,.resume .awards h4
{
	margin-bottom:10px
}
.resume .technical ul li,.resume .awards ul li
{
	margin:0 0 3px 17px;
	margin-bottom:2px;
	font-size:12px;
	list-style-type:disc
}
	@media only screen and (min-width: 1750px)
{
.feature img
{
	position:relative;
	left:0;
	margin-left:0;
	height:auto;
	width:100%
}

}
	@media only screen and (min-width: 1200px), only screen and (min-width: 959px) and (max-width: 1199px)
{
.casestudy .gallery-nav li.current a
{
	font-size:20px
}

}
	@media only screen and (min-width: 959px) and (max-width: 1199px)
{
.content section.showcase
{
	background:url(../img/foodsters/showcase_bg.jpg) no-repeat 50% 15%
}
.resume .position .subtitle
{
	display:block;
	margin-left:0
}

}
	@media only screen and (min-width: 959px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 959px)
{
.projects .project img
{
	height:170px
}
.projects .project a .background
{
	-webkit-transform:translate(834px);
	-moz-transform:translate(834px);
	-ms-transform:translate(834px);
	-o-transform:translate(834px);
	transform:translate(834px)
}
.projects .project a .description
{
	padding:22px 20px 0
}
.projects .project.one-third .background
{
	-webkit-transform:translate(515px);
	-moz-transform:translate(515px);
	-ms-transform:translate(515px);
	-o-transform:translate(515px);
	transform:translate(515px)
}
.projects .project.one-third .description
{
	padding:13px 10px 0
}
.projects .project.bhm.one-third img,.projects .project.foodsters.one-third img
{
	margin-left:-336px
}
.casestudy section.brief .logo>div
{
	width:auto
}
.casestudy section.brief .logo>div .ribbon
{
	display:none
}
.casestudy .timeline .event.alpha.visible
{
	left:0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1
}
.casestudy .timeline .event.alpha.visible .dot
{
	right:-62px
}
.casestudy .timeline .event.omega.visible
{
	left:0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1
}
.casestudy .timeline .event.omega.visible .dot
{
	left:-61px
}
.foodsters .knoll
{
	left:-95px
}
.bigheadmode section.papercraft .animation
{
	margin-left:-45px
}

}
	@media only screen and (min-width: 768px) and (max-width: 959px), only screen and (max-width: 767px)
{
.feature img
{
	position:relative
}
	header
{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	left:0;
	height:auto;
	width:100%;
	background:none;
	border:none
}
	header nav
{
	margin-top:0
}
	header nav ul
{
	-webkit-box-shadow:inset 0 -1px 0 0 #ddd;
	-moz-box-shadow:inset 0 -1px 0 0 #ddd;
	box-shadow:inset 0 -1px 0 0 #ddd;
	-webkit-transition:max-height 0.5s;
	-moz-transition:max-height 0.5s;
	-o-transition:max-height 0.5s;
	transition:max-height 0.5s;
	position:relative;
	max-height:450px;
	margin:0;
	background-color:#fff;
	border:none;
	overflow:hidden;
	z-index:0
}
	header nav ul li
{
	margin-bottom:40px
}
	header nav ul li:first-child
{
	margin-top:40px
}
	header nav ul.collapsed
{
	max-height:0
}
	header nav .contact
{
	padding-bottom:0
}
	header .navbar
{
	position:relative;
	display:block;
	text-align:right;
	background-color:#c33;
	z-index:1
}
	header .navbar button
{
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
	margin:12px 10px 10px;
	padding:0;
	background:none;
	border:none
}
	header .navbar button:hover,header .navbar button:focus
{
	background:none;
	outline:none
}
	header .navbar button .icon-bar
{
	display:block;
	width:22px;
	height:3px;
	margin-top:4px;
	background-color:#fff
}
	header .navbar button .icon-bar:first-child
{
	margin-top:0
}
	header .copyright,header .progress-bar
{
	display:none
}
	#main
{
	width:100%;
	margin-left:0
}
.casestudy section.brief h2.heading
{
	margin-bottom:0
}
.casestudy section.brief .logo
{
	margin-bottom:40px;
	padding-bottom:30px
}
.foodsters section.research figure
{
	margin-bottom:30px
}
.figure__image{
	display: block;
	max-width: 100%;
	transition: 500ms opacity ease-in-out;
	margin: 5px auto 10px;
	margin: .3125rem auto .625rem;
}
.foodsters section.showcase
{
	background:none
}
.resume .position .subtitle
{
	display:block;
	margin-left:0
}
.resume .content h3 br
{
	display:none
}
.modal .video-wrapper
{
	margin-left:-375px;
	margin-top:-256px
}

}
	@media only screen and (max-width: 767px)
{
.projects .project,.projects .project a
{
	height:104px;
	overflow:hidden
}
.projects .project a .info
{
	display:none
}
.home .awwwards
{
	display:none
}
.home #about .heading .subtitle
{
	display:none
}
.home #about .heading .subtitle.byline
{
	padding:0 10px;
	display:block
}

.home #about .resume
{
	text-align:center
}
.home #about .resume a,.home #about .resume a:first-child
{
	display:inline-block
}
.home .leftHand,.home .rightHand,.home .feature,.home footer
{
	display:none
}
.casestudy .timeline h4,.casestudy .timeline .event .dot
{
	display:none
}
.foodsters .knoll
{
	left:-285px
}
.bigheadmode section.papercraft .animation
{
	margin-left:-85px
}
.resume .working-knowledge>*
{
	padding-left:0
}

}
	@media only screen and (min-width: 480px) and (max-width: 767px)
{
.projects .project,.projects .project a
{
	height:146px;
	overflow:hidden
}

}
	@media only screen and (max-width: 320px)
{
.home .leftHand,.home .rightHand
{
	display:none
}

}

/* Embed youtube video*/
/* Center the video container */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0; /* Optional background color */
} 

/* Style the embedded video player */
#player {
    width: 100%;
	/* Set a maximum width if needed */
    /* max-width: 800px;  */
    height: 100vh;
	/* 16:9 aspect ratio */
    /* padding-bottom: 56.25%;  */
    position: relative;
} 

/* If you want the video to have a border or rounded corners */
#player iframe {
    border: 2px solid #ccc;
    border-radius: 10px;
} 

/* coding code blocks */
pre.code-block {
	background-color: #f4f4f4;
	padding: 10px;
	border: 1px solid #ddd;
	white-space: pre-wrap;
	font-family: 'Courier New', monospace;
	font-size: 14px;
}

pre.code-block code.python {
	display: block;
	margin: 10px 0;
	padding: 10px;
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	white-space: pre-wrap;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	color: #333;
}

/* invisible break line */
.blockquote__quote hr{
	border-top: 0px solid #eee;
}

div.context_customized{
	position: static; /* tunning conect to be aligned more from the left */
}