/* Reset */
html,body,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,nav,section,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, nav, section {
	display: block;
}
nav ul, .no-list { list-style: none; list-style-image: none; margin: 0; }
nav li, .no-list li { list-style: none; list-style-image: none; margin: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } 
html, body { min-height: 100%; }

/* General */
body, input, select, textarea, button {
	margin: 0;
	font-family: 'kepler-std-semicondensed', Georgia, serif; 
	font-size: 100%;
	font-weight: 300;
	color: #222;
}
body {
	background: #F5F5F5;
	font-size: 125%; /* 20px */
	line-height: 1.5; /* 30px */
	border-top: 4px solid #E41B13;
}
.brand {
	color: #E41B13;
	-webkit-transition: color 0.2s linear, padding 0.2s linear, background-color 0.2s linear, opacity 0.2s linear;
	-moz-transition: color 0.2s linear, background-color 0.2s linear, opacity 0.2s linear;
	transition: color 0.2s linear, padding 0.2s linear, background-color 0.2s linear, opacity 0.2s linear, border 0.2s linear;
}
h1,
.h1 {
	text-align: center;
	font-weight: 300;
	font-size: 250%;
	line-height: 1.2;
}
.tagline {
	text-align: center;
	font-style: italic;
	color: #888;
	line-height: 1.2;
}
h2:not(.h1) {
	margin: 1em 0 2em 0;
	padding: 2em 0 0 0;
	position: relative;
	color: #E41B13;
	font-family: "proxima-nova", Arial, sans-serif;
	font-size: 70%;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.065em;
	text-align: center;
}
h2:not(.h1):after {
	display: block;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: 0.9em;
	content: " ";
	height: 1px;
	background: #CCC;
}
h2:not(.h1) span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 1em;
	background: #F5F5F5;
}
h3 {
	text-align: center;
	margin: 1em 0 .5em 0;
	font-size: 150%;
	font-weight: 300;
}
h4 {
	text-align: center;
	margin: 0 0 .5em 0;
	font-size: 120%;
	font-weight: 300;
}
p {
	margin: 0 0 1em 0;
}
p:last-child {
	margin-bottom: 0;
}
strong {
	font-weight: 600;
}
ul {
	list-style: disc;
	margin: 0 0 1.5em 1.5em;
}
dt {
	font-weight: 600;
}
dd {
	margin: 0 0 1.5em 0;
}
a {
	color: #13ABE4;
	text-decoration: none;
	-webkit-transition: color 0.2s linear, padding 0.2s linear, background-color 0.2s linear, opacity 0.2s linear;
	-moz-transition: color 0.2s linear, background-color 0.2s linear, opacity 0.2s linear;
	transition: color 0.2s linear, padding 0.2s linear, background-color 0.2s linear, opacity 0.2s linear, border 0.2s linear;
}
a img {
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
a:hover,
a:focus {
	color: #E41B13;
	border-bottom: 1px solid #222;
}
a .brand {
	color: #13ABE4;
}
a:hover .brand {
	color: #E41B13;
}
img {
	display: block;
	max-width: 100%;
}

blockquote {
	font-style: italic;
}
cite {
	color: #E41B13;
	font-style: normal;
	font-family: "proxima-nova", Arial, sans-serif;
	font-size: 70%;
	font-weight: 700;
	text-transform: uppercase;	
}

.wrap {
	position: relative;
	max-width: 1200px;
	margin: auto;
	padding-left: 5%;
	padding-right: 5%;
}
.team:after,
.wrap:after,
.gr:after,
.article-nav:after {
	clear: both;
	display: table;
	content: " ";
}


/* Header */
header[role="banner"] {
	text-align: center;
	background: #FFF;
	padding: 1em 0;
	border-bottom: 1px solid #CCC;
}
header[role="banner"] h1 {
	margin: 0 0 0.5em 0;
	font-size: 160%;
}
header[role="banner"] h1 a {
	color: #222;
}
.brand sup {
	font-size: 75%;
	vertical-align: super;
	color: #222;
	font-weight: 600;
}
#nav-main ul {
	display: inline-block;
}
#nav-main li {
	display: inline-block;
	margin: 0 5px;
}
#nav-main a {
	padding: 0;
	color: #222;
}
#nav-main a:hover {
	border-bottom: 1px solid #E41B13;
}
#nav-main .active {
	position: relative;
	color: #E41B13;
}
#nav-main .active:after, #nav-main .active:before {
	bottom: -1.95em;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#nav-main .active:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #FFFFFF;
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}
#nav-main .active:before {
	bottom: -2.05em;
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbbbbb;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}


/* Content */
#content {
	position: relative;
	padding-top: 2em;
	padding-bottom: 2em;
}
article header {
	margin: 0 0 1.5em 0;
}
#content > p:first-child,
header + p,
header + p:last-child {
	margin: 0 0 1.5em 0;
	font-size: 125%;
	text-align: center;
}


.work-link,
.people-link {
	display: block;
	padding: 1em;
	color: #222;
	border: 1px solid #F5F5F5;
	border-radius: 3px;
	-webkit-transform: translate3d(0, 0, 0);
}
.work-link h3,
.people-link h3 {
	margin: 0;
}
.people-link h3 {
	margin: 0 0 1em 0;
}
.work-link img,
.people-link img {
	margin: 1em auto 1.5em auto;
	-webkit-transform: translate3d(0, 0, 0);
}
.work-link:hover,
.people-link:hover {
	background: #FFF;
	color: #222;
	border: 1px solid #DDD;
}
.work-link:hover img,
.people-link:hover img {
	opacity: 0.75;
}

.photo {
	margin-top: .4em;
	border: solid #E41B13;
	border-width: 4px 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.photo:hover {
	border-color: #222;
}
.photo img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.photo:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
.avatar img {
	margin: -1em auto 2em auto;
}

.big-screenshot {
	padding: 2em 5%;
}
.sbb .big-screenshot img {
	margin: auto;
}

.skills li {
	margin-bottom: 1.5em;
	padding-left: 160px;
}
.skills h4 {
	float: left;
	margin-left: -160px;
}
.skills p,
.skills span {
	position: relative;
	display: block;
	text-indent: -9999em;
	background: #FFF;
	border: 1px solid #DDD;
	border-radius: 2px;
}
.skills span {
	height: 1.5em;
	margin: -1px;
	border-color: #13ABE4;
	background-color: #13ABE4;
}

/* Partners */
.partners {
	margin-bottom: 2em;
}
.partners li {
	display: inline-block;
	margin-right: 1em;
}

/* People */
.person .character {
	position: relative;
	margin: 1em auto 1.5em auto;
	padding: 1em;
	background: #FFF;
	border: 1px solid #DDD;
	border-radius: 2px;
}
.person .character img {
	max-width: 160px;
	margin: auto;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}
.person .character:hover img {
	-webkit-transform: translate3d(0, -25px, 0) scale(0.8);
	-moz-transform: translate3d(0, -25px, 0) scale(0.8);
	transform: translate3d(0, -25px, 0) scale(0.8);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.touch .person .character img {
	-webkit-transform: translate3d(0, -25px, 0) scale(0.8);
	-moz-transform: translate3d(0, -25px, 0) scale(0.8);
	transform: translate3d(0, -25px, 0) scale(0.8);
}
.person .character .contact-card {
	opacity: 0;
	position: absolute;
	left: 0;
	right: -1px;
	bottom: 0;
	border-right: 1px solid #DDD;
	background: RGBa(255,255,255,0.9);
	border-top: 1px solid #DDD;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-transform: translate3d(0, 0, 0) scale(0.9);
	-moz-transform: translate3d(0, 0, 0) scale(0.9);
	transform: translate3d(0, 0, 0) scale(0.9);
}
.person .character:hover .contact-card,
.touch .person .character .contact-card {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	-moz-transform: translate3d(0, 0, 0) scale(1);
	transform: translate3d(0, 0, 0) scale(1);
}
.person .character .contact-card li {
	float: left;
	width: 25%;
	position: relative;
	box-shadow: 1px 0 0 #DDD;
}
.person .character .contact-card li:last-child {
	box-shadow: none;
}
.person .character .contact-card li a {
	display: block;
	padding: .75em 0;
	border: none;
	text-align: center;
}
.person .character .contact-card li a:before {
	font-size: 26px;
}
.person .character .contact-card span {
	display: none;
}

/* Products */
.product-image {
	margin: .2em 0 1em 0;
	padding: 1em 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	border-radius: 2px;
}
.product-image img {
	width: 300px;
	margin: 0 auto 0 auto;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.product a:hover .product-image {
	opacity: .75;
}
.product a:hover .product-image img {
	-webkit-transform: scale(1.2) translate3d(0, 0, 0);
	-moz-transform: scale(1.2) translate3d(0, 0, 0);
	transform: scale(1.2) translate3d(0, 0, 0);
}
.product.somsum .product-image {
	color: #FFF;
	background-color: #363636;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#363636), to(#494143));
	background-image: -webkit-linear-gradient(top, #363636, #494143);
	background-image: -moz-linear-gradient(top, #363636, #494143);
	background-image: -ms-linear-gradient(top, #363636, #494143);
	background-image: -o-linear-gradient(top, #363636, #494143);
}
.product.freshjobs .product-image {
	color: #FFF;
	background: #00A3DF;
}
.product.facturandum .product-image {
	color: #FFF;
	background-color: #444;
	background: -webkit-gradient(linear, left top, left bottom, from(RGBa(255,255,255,0.1)), to(RGBa(0,0,0,0.1))), url(../img/facturandum-linen.png);
	background: -webkit-linear-gradient(top, RGBa(255,255,255,0.1), RGBa(0,0,0,0.1)), url(../img/facturandum-linen.png);
	background:    -moz-linear-gradient(top, RGBa(255,255,255,0.1), RGBa(0,0,0,0.1)), url(../img/facturandum-linen.png);
	background:     -ms-linear-gradient(top, RGBa(255,255,255,0.1), RGBa(0,0,0,0.1)), url(../img/facturandum-linen.png);
	background:      -o-linear-gradient(top, RGBa(255,255,255,0.1), RGBa(0,0,0,0.1)), url(../img/facturandum-linen.png);
	background:         linear-gradient(to bottom, RGBa(255,255,255,0.1), RGBa(0,0,0,0.1)), url(../img/facturandum-linen.png);
}
.product.required-foundation .product-image {
	color: #FFF;
	background: #970B0E;
}

/* Projects */
.project .screenshot {
	margin: 1em auto 1.5em auto;
	padding: 2em;
	background: #FFF;
	border: 1px solid #DDD;
	border-radius: 2px;
}
.project .screenshot img {
	margin: auto;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}
.project .screenshot a:hover img {
	opacity: 0.75;
	-webkit-transform: translate3d(0, 0, 0) scale(1.05);
	-moz-transform: translate3d(0, 0, 0) scale(1.05);
	transform: translate3d(0, 0, 0) scale(1.05);
}

/* Article Nav */
.article-nav a {
	display: block;
	position: relative;
	border: none;
}
.article-nav .prev {
	float: left;
	margin-left: 3%;
}
.article-nav .next {
	float: right;
	margin-right: 3%;
}
.article-nav .prev a {
	padding-left: 40px;
}
.article-nav .next a {
	text-align: right;
	padding-right: 40px;
}
.article-nav a:before,
.article-nav a:after {
	display: block;
	content: " ";
	position: absolute;
	width: 40px;
	height: 1px;
	background: #DDD;
}
.article-nav .next a:before,
.article-nav .next a:after {
	right: 0;
}
.article-nav .prev a:before,
.article-nav .prev a:after {
	left: 0;
}
.article-nav a:hover:before,
.article-nav a:hover:after {
	background: #222;
}

.article-nav a:before {
	top: 0;
}
.article-nav a:after {
	bottom: 0;
}
.article-nav .prev a:before { -webkit-transform: rotate(-45deg); }
.article-nav .prev a:after { -webkit-transform: rotate(45deg); }
.article-nav .next a:before { -webkit-transform: rotate(45deg); }
.article-nav .next a:after { -webkit-transform: rotate(-45deg); }

/* Footer */
footer[role="contentinfo"] {
	overflow: auto;
	padding: 1.5em 0;
	background: #222;
	color: #FFF;
	font-family: "proxima-nova", Arial, sans-serif;
	font-size: 70%;
}
footer[role="contentinfo"] [data-icon]:before {
	position: relative;
	top: 1px;
	margin-right: .25em;
}
footer[role="contentinfo"] a {
	border: none;
}
footer[role="contentinfo"] .brand sup {
	color: #FFF;
}
@media screen and (min-width: 600px) {
	.gc {
		float: left;
		margin-left: 2.5%;
		margin-right: 2.5%;
		margin-bottom: 1em;
	}
	.gcr {
		float: right;
	}
	.gc:first-child { margin-left: 0; }
	.gc:last-child { margin-right: 0; }

	.gc2, .gc1 { width: 47.4792%; }
	.gc3, .gc2.gci1 { width: 73.7188%; }
	.gc4 { width: 100%; }

	.gci1, .gci1:first-child { margin-left: 13.1406%; }

	#content > p:first-child,
	header + p,
	header + p:last-child {
		margin: 0 0 1.5em 0;
		font-size: 150%;
		text-align: center;
	}
}

@media screen and (min-width: 800px) {
	.article-nav li {
		position: absolute;
		top: 2.75em;
		white-space: nowrap;
	}
	.article-nav .prev { left: 0; }
	.article-nav .next { right: 0; }
	footer[role="contentinfo"] p:first-child {
		float: left;
		margin: 0;
	}
	footer[role="contentinfo"] p:last-child {
		float: right;
		margin: 0;
	}
}

@media screen and (min-width: 600px) and (max-width: 1039px) {
	.gc1:nth-child(2n+1) { margin-left: 0; clear: left; }
	.gc1:nth-child(2n) { margin-right: 0; }
}

@media screen and (min-width: 1040px) {
	.gc1 { width: 21.2396%; }
	.gc2.gci1 { width: 47.4792%; }
	.gci1, .gci1:first-child { margin-left: 26.2396%; }

	.product-image {
		width: 45%;
	}
	.product:nth-child(2n+1) {
		text-align: left;
	}
	.product:nth-child(2n) {
		text-align: right;
	}
	.product:nth-child(2n+1) .product-image {
		float: left;
		margin-right: 5%;
	}
	.product:nth-child(2n) .product-image {
		float: right;
		margin-left: 5%;
	}	
}