/* RESET CSS */
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, a, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea { vertical-align: top; background: #fff; border: 1px solid; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
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; cursor: help; }
/* END RESET CSS */

body { line-height: 1; font-size: 100.01%; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body, select, input, textarea, a { color: #444; }

input, select { vertical-align: middle; }

h1, h2, h3, h5 { font-weight: normal; /* text-rendering: optimizeLegibility; */ }

label, input[type=button], input[type=submit], button { cursor: pointer; }

input { -webkit-appearance: none; }

ul { list-style-type: none; margin: 0; }

/* ===========================================
	NON-SEMANTIC HELPER CLASSES
============================================== */
/* For image replacement */
.ir { display: block; text-indent: -9999px; overflow: hidden; background-repeat: none; }

/* Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* Selections */
::-moz-selection { color: #444; background: rgba(0, 145, 195, 0.3); }

::selection { color: #444; background: rgba(0, 145, 195, 0.3); }

/* Tap highlights */
* { -webkit-tap-highlight-color: rgba(11, 140, 184, 0.6); }

textarea { resize: none; }

/* ===========================================
	BASE STYLES
============================================== */
#skip { display: none; }

html { height: 100%; }

body { background: #FFF url('../img/bg.png') repeat-y center top; background-attachment: fixed; text-align: center; font: normal 14px/20px "Raleway", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #9f9f9f; }

p, form { color: #9f9f9f; }

#wrapper { *position: relative; margin: 0 auto; max-width: 960px; }

section { clear:both; min-height:100%; text-align: left; position: relative; overflow: hidden; margin-left:66px; padding: 78px 60px; _border-top: 1px solid #444; }

#work h2, #clients h2, #expertise h2, #expertise h2, #contact h2 { font-family: "Raleway", "Arial Narrow", Helvetica, Arial, sans-serif; font-weight: 600; color: #444; font-size: 21px; text-transform: uppercase; margin-bottom: 36px; -webkit-font-smoothing: antialiased; }

h1 img { vertical-align:middle }

h3 { font-size: 120%; margin: 25px 0 10px 0; color: #444; text-transform: uppercase; }

h5 { margin: 10px 0; color: #444; }

/* ===========================================
	LINKS
============================================== */
a { text-decoration: none; position: relative; color: #999; border-bottom: 1px solid #CCC; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }

a:hover, p a:focus, #blog .over h4 a, #blog a:focus, #footer a:focus { color: #444; border-bottom: 1px solid #444; }

p a:focus { -webkit-box-shadow: #444 0 0 10px; -moz-box-shadow: #444 0 0 5px; box-shadow: #444 0 0 10px; }

a:hover img, a:focus img, #people a:hover .img, #people a:focus .img { border: 1px solid #444; -webkit-box-shadow: #444 0 0 10px; -moz-box-shadow: #444 0 0 5px; box-shadow: #444 0 0 10px; }

a:active, #submit:active { opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; }

/* ===========================================
	NAVIGATION
============================================== */
#nav span { margin-left:50px }
#nav img { width:22px; height:22px; border:0; display:block; margin:0; padding:0; border-radius:0; box-shadow:none }
.navi_home { background:url('../img/nav_icons_sprite.png') no-repeat left top }
a.selected .navi_home { background-position: right top }
.navi_proj { background:url('../img/nav_icons_sprite.png') no-repeat left -22px }
a.selected .navi_proj { background-position: right -22px }
.navi_clie{ background:url('../img/nav_icons_sprite.png') no-repeat left -44px }
a.selected .navi_clie { background-position: right -44px }
.navi_cont { background:url('../img/nav_icons_sprite.png') no-repeat left -88px }
a.selected .navi_cont { background-position: right -88px }
.navi_cont { background:url('../img/nav_icons_sprite.png') no-repeat left -66px }
a.selected .navi_cont { background-position: right -66px }
.navi_expe { background:url('../img/nav_icons_sprite.png') no-repeat left -88px }
a.selected .navi_expe { background-position: right -88px }
#nav { position: fixed; z-index: 999; top:0; padding-top:100px; height: 100%; *position: fixed !important; *top: 100px !important; width:60px; overflow:hidden; border-right: 1px solid #DDDDDD; background:transparent url('../img/bg.png') repeat-y -216px top }
#nav ul { text-align: center; display: inline-block; *float: left; margin: 0 auto; }
#nav li { margin-bottom: 10px }
#nav a { margin-left:25px; font-size: 18px; border: 0; text-transform: uppercase; text-decoration: none; color: #fff; height: 24px; width:80px; padding:19px; display: block; background: #1d1c1c; white-space:nowrap;
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -webkit-font-smoothing: antialiased; 
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px 0; -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px 0; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px 0}
#nav a:active { color: #999; }
#nav a:focus { outline: 0; }
#nav a:hover { background-color:#7b7878; margin-left:10px }
#nav a.selected { color:#282828; background:#FFF url('../img/nav_active_bg.gif') repeat-y top left; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; margin-left:0 }

#nav.active a { -moz-box-shadow: rgba(0, 0, 0, 1) 0 2px 10px 0; -webkit-box-shadow: rgba(0, 0, 0, 1) 0 2px 10px 0; -o-box-shadow: rgba(0, 0, 0, 1) 0 2px 10px 0; box-shadow: rgba(0, 0, 0, 1) 0 2px 10px 0; }

#nav.active { *position: absolute !important; *top: 100px !important; }

/* ===========================================
	HOME
============================================== */
#logo { float:right; margin-top: 10px; border:0; text-align:center; padding:0; box-shadow:none; max-width: 100%; height: auto; }

#hgroup h1 { color: #222; margin-top: 186px; margin-bottom: 7px; font: 67px/80px "Raleway", "Arial Narrow", Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -4px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); -webkit-font-smoothing: antialiased; }

#hgroup h2, #people .hd, #expertise .hd, #clients .hd, #contact .hd, #blog h3, .slidecontent h3 { margin: 30px 0 0 65px; letter-spacing: 0; font: 24px/34px "Raleway", "Arial Narrow", Helvetica, Arial, sans-serif; font-weight: 400; text-align: left; max-width: 570px; }

#hgroup h2 { float: left; margin-left: 75px; }

em { font-style: normal; color:#444 }

#hgroup em { font-family: "Raleway", "Arial Narrow", Helvetica, Arial, sans-serif; font-weight: 400; }

#expertise h3.subhl { padding-top: 20px; clear: both; }

.action, .action:hover { position: absolute; right: 103px; top: 410px; display: block; border: 0 !important; width: 146px; height: 146px; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; }

.action img, .action:hover img, .action:focus img { position: absolute; top: 0; left: 0; border: 0 !important; background: transparent; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

.action:hover img, .action:focus img { opacity: 0.7; }

.action:active img { opacity: 0.6; }

.hidden { display: none; }

/* ===========================================
	PROJECTS
============================================== */
#work { height: auto; overflow: visible; padding-bottom: 30px; }
#work p { width: 224px; float: left; }
#work .project img { float: left; margin-right: 15px; }
#work .project { float: left; width: 60%; margin-bottom: 45px; }
#work a.block { width: 100%; float: left; border: 0; }

#work h3, #people h3, #blog h4, .sidebar h4, #clients h4 { color: #444; font-weight: normal; font-size: 18px; line-height: 21px; margin-bottom: 10px; }

.prjimg { display:block; float:left; width:215px; height:136px; margin-right:15px; margin-bottom: 15px; overflow:hidden; border: 1px solid #444; background-color:#FFF;-webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px 0; -o-box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px 0; box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px 0 }
.prj1 { background:url('../img/work_fb-charts.jpg') no-repeat top left }
.prj2 { background:url('../img/work_business-on.jpg') no-repeat top left }
.prj3 { background:url('../img/work_innovativ-in.jpg') no-repeat top left }
.prj4 { background:url('../img/work_update-city.jpg') no-repeat top left }
.prj5 { background:url('../img/work_zukunft-im-mittelstand.jpg') no-repeat top left }
.prj6 { background:url('../img/work_overheat-de.jpg') no-repeat top left }
.prj7 { background:url('../img/work_shopstars.jpg') no-repeat top left }
.prjimg:hover, .project:hover .prjimg { background-position:top right; -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px 0; -o-box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px 0; box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px 0; }

/* ===========================================
	CLIENTS
============================================== */
#clients h4 { margin-bottom: 18px; }
#clients .col { border: 0; padding: 0; margin: 0 25px 0 0; background: transparent none; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; width: 60%; float: left; }
#clients .col p { margin-bottom: 18px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
#clients .hd { margin: 30px 0; padding-left: 150px; width: 310px; background:transparent url('../img/clients.png') no-repeat left 7px }

.col { width: 510px; float: left; }

.col2 { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; -o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; width: 200px; padding: 20px 25px; float: right; margin-top: 2px; margin-right: 0; border: 1px dashed rgba(255, 255, 255, 0.1); }
.col2 p { margin-bottom: 0; font: 200 16px/24px "Raleway", "Arial Narrow", Helvetica, Arial, sans-serif; }
.col2 em { float: left; color: #555; font: 69px/24px "Arial Narrow", Helvetica, Arial, sans-serif; margin: 0.35em 0.15em 0 0; line-height: 1px; }
.col2 em.sec { float: right; line-height: 20px; margin: -0.1em -0.1em 0 0.35em; }
.col2 .bywho { font: 12px/18px Helvetica, Arial, sans-serif; color:#444 }

/* ===========================================
	EXPERTISE
============================================== */
#expertise strong {color:#444}
#expertise p {clear:both; margin-left:65px}
#expertise .date {display:block; margin-top:10px; clear:left; float:left; width:152px}
#expertise .desc {display:block; margin-top:10px; float:left; max-width:480px}

/* ===========================================
	CONTACT
============================================== */
#contact { padding-bottom: 40px; margin-bottom: 100px; }
#contact .hd { max-width: 540px; margin-bottom:30px }
#contact form { float: left; max-width: 510px; padding-right: 30px; padding-top: 4px; }
#contact li { float: left; width: 100%; margin-bottom: 6px; }

label { text-align: right; padding-right: 20px; float: left; width: 100px; color: #444; line-height: 34px; }

input, textarea { float: left; width: 368px; max-width: 100%; border: 0; padding: 8px 10px; color: #666; font: 13px/18px Arial, Helvetica, sans-serif; background:transparent; -webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.3) 0 -1px 2px; -moz-box-shadow: inset rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.3) 0 -1px 2px; box-shadow: inset rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.3) 0 -1px 2px; border: 1px solid #CCC; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

input:hover, textarea:hover { border: 1px solid #666; }

input:focus, textarea:focus { color: #444; border: 1px solid #444; -webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 2px 2px 10px, #444 0 0 10px; -moz-box-shadow: inset rgba(0, 0, 0, 0.2) 2px 2px 10px, #666 0 0 10px; box-shadow: inset rgba(0, 0, 0, 0.2) 2px 2px 10px, #666 0 0 10px; outline: 0; }

#submit { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; width: 100px; background: #444; text-transform: uppercase; color: #fff; font: normal 18px/18px "Proxima Nova Condensed Regular", "Proxima Nova Condensed", "Arial Narrow", Helvetica, Arial, sans-serif; padding: 8px 0; border: 0; }

#submit:focus, #submit:hover { color:#444; background: #CCC;}

.sidebar { margin-top: 2px; width: 200px; float: left; padding: 0 0 17px 30px; font-size: 12px; }
.sidebar a:focus { -webkit-box-shadow: #666 0 0 10px; -moz-box-shadow: #666 0 0 5px; box-shadow: #666 0 0 10px; }
.sidebar li { float: left; margin-bottom: 18px !important; }
.sidebar div { float: right; width: 145px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sidebar h4 { margin-top: 2px; font-size: 18px; line-height: 18px; float: left; width: 55px; overflow: hidden; }

#confirmation { display: none; }

.formsent form { display: none; }

.formsent #confirmation { display: block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; -o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 0; background: #333; border: 1px solid #41c600; float: left; width: 460px; background: rgba(65, 198, 0, 0.14); padding: 25px; color: #fff; font: 14px/24px sans-serif; }

/* ===========================================
	VALIDATION
============================================== */
#contact .messages li { float: right; width: 388px; font-size: 11px; color: #d2493d; margin: 0 0 10px 0; }

.error input, .error textarea { border: 1px solid #d2493d; }

/* ===========================================
	FOOTER
============================================== */
#footer { font: 11px/20px Helvetica, Arial, sans-serif; background-image: none; text-align: center; max-width: 790px; color: #666; padding: 0; margin: 0 auto; -webkit-font-smoothing: antialiased; }

@media all and (max-width: 24em) {
	.hide-xs {
		display: none;
	}
	section {
		margin-left: 0;
		padding: 50px 20px;
	}
	label {
		width: auto;
	}
	#hgroup h1 {
		font-size: 45px;
		line-height: 56px;
	}
	#hgroup h2 {
		margin-left: 0;
		font-size: 19px;
		line-height: 31px;
	}
	h3, h3.hd, #expertise p {
		margin-left: 0 !important;
	}
	input, textarea {
		width: 60%;
		float: right;
	}
	textarea {
		height: 80px;
	}
	#contact {
		margin-bottom: 0;
	}
	#contact .sidebar {
		margin-top: 60px;
	}
	#work .project {
		float: none;
		width: 100%;
	}
	#work h3 {
		clear: both;
	}
	#work p {
		width: 100%;
	}
	#footer img,
	#footer div	{
		display: none;
	}
	.col {
		width: 100% !important;
	}
}
@media all and (max-width: 1024px) {
	.hide-sm {
		display: none;
	}
}