article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;}
audio:not([controls]) {display: none;}
[hidden] {display: none;}

html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url("../img/html_back.png") repeat fixed #313235;}

body {margin: 0; height: 100%; font-size: 13px; line-height: 1.5; background: url("../img/body_back.png") no-repeat center top fixed; background-size: 100% 100%;}
body, button, input, select, textarea {font-family: "DIN Next W01 Regular", sans-serif; color: #737373;}

#preloader {position:fixed;top:0;left:0;width:100%;height:100%;background:#000 url("../img/html_back.png");z-index:99;}
#status {width:64px;height:64px;position:fixed;left:50%;top:50%;background:url('../img/status.gif') no-repeat center center;margin:-32px 0 0 -32px;}

::-moz-selection {background: transparent; color: #ec3184; text-shadow: none;}
::selection {background: transparent; color: #ec3184; text-shadow: none;}

a {color: #ec3184; text-decoration: none;}
a:visited {color: #ec3184;}
a:hover {text-decoration: underline}
a:focus, a:hover, a:active {outline: 0;}

abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: normal; color: #fcfcfc}
blockquote {margin: 1em 40px;}
dfn {font-style: italic;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
ins {background: #ff9; color: #000; text-decoration: none;}
mark {background: #ff0; color: #000; font-style: italic; font-weight: bold;}
pre, code, kbd, samp {font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}

q {quotes: none;}
q:before, q:after {content: ""; content: none;}
small {font-size: 85%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

ul, ol {margin: 1em 0; padding: 0;}
dd {margin: 0 0 0 40px;}
nav ul, nav ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}
img {border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;}

svg:not(:root) {overflow: hidden;}
figure {margin: 0;}
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}
label {cursor: pointer;}
legend {border: 0; *margin-left: -7px; padding: 0;}
button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button, input {line-height: normal; *overflow: visible;}
table button, table input {*overflow: auto;}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top; resize: vertical;}
input:valid, textarea:valid {}
input:invalid, textarea:invalid {background-color: #f0dddd;}

table {border-collapse: collapse; border-spacing: 0;}
td {vertical-align: top;}

/* */
#intro, #projects, #progress, #contact {position: relative; height: auto; width: 960px; margin: 0 auto 100px auto; padding: 40px 0 0;}

#intro {text-align:center;}
#contact {margin: 0 auto; padding-bottom: 50px;}

header {padding-bottom:10px; text-align: center; text-transform: uppercase;}

h2 {margin: 0; font: normal 52px "DIN Next W01 Heavy"; color: #010101;}
h3 {position: absolute; top: 15px; left: 645px; font: normal 13px "DIN Next W01 Regular"; text-align: left; margin: 0;}
h4 {font: normal 26px "DIN Next W01 Light"; color: #fcfcfc; margin: 0; text-transform: uppercase}
h5 {font: normal 25px "DIN Next W01 Regular"; color: #fcfcfc; margin: 30px 0 0;}
h6 {font: normal 26px "DIN Next W01 Regular"; color: #ec3184; margin: 0}

.right ul {color: #fcfcfc; list-style: none; text-transform: uppercase;}

#progressBar {position:fixed; top:300px; left:50%; margin-left:500px;}
#progressBar a {display:block; width:12px; height:12px; margin:10px; border-radius:12px; background:#333;}

#logo {
  height: 70px;
  width: 960px;
  background: url("../img/logo.png") no-repeat center;
}

#logo b {display: block; padding-top: 65px; color: #ec3184; font-size: 14px; text-transform: uppercase}

#design {width: 25%; display:inline-block; position:relative; height:309px;}
#it {width: 25%; display:inline-block; position:relative;}
#marketing {width:25%; display:inline-block; position:relative;}
#intro .plus {width:5%; display:inline-block;}

#design span, #it span, #marketing span {font: normal 1.8em "DIN Next W01 Light"; color: #737272; position:absolute; display:block; width:100%; text-align:center; bottom:15%;}

.content,
#design,
#it,
#marketing,
#intro .plus {*display:inline;}


.content {position: relative; padding: 50px 35px 50px 50px; background: url("../img/content_back.png");}
#intro .content {display:inline-block; margin:0 auto; padding:50px 35px; text-align:center; background: none}
#intro .content {width: 960px; margin: 0 auto; padding: 60px 0 50px; text-align: center; text-transform: uppercase;}
.content p {}

#intro p {clear: both; margin-top: 45px; padding-top: 5px;}
.left {float: left; width: 560px; margin-right: 35px}
.right {float: left; width: 280px; position:relative; min-height:418px;}
.content img {max-width: 560px}
.productlogo {position:absolute; bottom:0; right:0;}
.more {height: 30px; background: url("../img/arrow2.png") no-repeat center bottom}
.getincontact {position: absolute; bottom: 70px; right: 50px;}
.galnav {width: 960px; margin: 20px auto 0; text-align: center}
.galnav a {display: inline-block; height: 36px; width: 36px; margin: 0 20px; background: url("../img/pfeile.png") no-repeat;}
a.prev {background-position: 0 0}
a.next {background-position: -76px 0}
a.prev:hover {background-position: 0 -40px}
a.next:hover {background-position: -76px -40px}
.r {text-align: right}
.l {text-align: left}
.m {text-align: center}
.scale {width: 100%}

#contact p a, #contact p a:visited, .getincontact a, .getincontact a:visited {padding-right: 15px; background: url("../img/arrow.png") no-repeat scroll right 3px transparent}

footer {
  height: 125px;
  width: 960px;
  margin: 0 auto;
  padding: 120px 0 0 0;
  text-align: center;
  text-transform: uppercase;  
  background: url("../img/logo.png") no-repeat center top;
}

footer ul li {display: inline; margin: 0 5px}

footer a, footer a:visited {color: #737373;}



.clearfix:before, .clearfix:after, .content:before, .content:after, #intro:before, #intro:after, #projects:before, #projects:after, #progress:before, #progress:after, #contact:before, #contact:after { content: ""; display: table; }
.clearfix:after, .content:after, #intro:after, #projects:after, #progress:after, #contact:after { clear: both; }
.clearfix, .content, #intro, #projects, #progress, #contact { zoom: 1; }

@media only screen and (max-width: 1050px) {
  #progressBar {position:fixed; top:300px; left:auto; right:2%; margin-left:0;}
}

@media only screen and (max-width: 990px) {
  body {font-size: 18px; padding: 0 10px}
  #design span, #it span, #marketing span {font-size:0.8em;}
  h3 {position: relative; top: 0; left: 0; text-align: center}
  h4, h5, h6 {margin: 0 auto; max-width: 560px;}
  .content p {margin: 0 auto; max-width: 560px;}
 .right ul {margin: 0 auto; max-width: 560px;}
  #intro, #projects, #progress, #contact {width: 100%}
  #intro .content {width: 100%}
  #logo {width: 100%}
  footer {width: 100%}
  .left {width: 100%; text-align: center; margin-right: 0}
  .right {clear:left; float:none; width:auto; max-width:560px; margin: 0 auto 0 auto; padding-top:30px; min-height:auto;}
  .content {padding: 25px; margin-top: 20px}
  .galnav {width: 100%}
  .productlogo {position:static; float:right; margin:0;}
  .getincontact {position: static; right: 0; bottom: 0}
  #contact .right p {position: relative; top: -65px; left: 130px; max-width: 200px}
  #contact .right h5, #contact .right h6 {max-width: 400px}
}

@media screen and (max-width: 680px) {
  #progressBar {display:none;}
}

@media only screen and (max-width: 480px) {
  #contact .right p {position: static; margin:0; padding:0;}
  .productlogo {position:static; float:none;}
  #design span, #it span, #marketing span {font-size:0.5em;}
}

@media only screen and (max-width: 320px) {
  body {font-size: 14px; padding: 0 10px}
  #design span, #it span, #marketing span {font-size:0.3em;}
  h2 {font-size:30px;}
  h3 {font-size:12px;}
  h4 {font-size:16px;}
  h5 {font-size:15px;}
  h6 {font-size:16px;}

}


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  nav, footer, #picture {display: none;}
 
  body {quotes: "\201E" "\201C" "\201A" "\2018";}
  * {width: 100% !important; min-height: 0 !important; height: auto !important; border: none !important;}
	h3 {margin-bottom: 5px; padding: 0;}
	p {margin:0; padding: 0;}
  ul, li {list-style-type: disc !important; color: #000 !important; list-style-image: none !important;}
  #container2, #container3, #container4, #container12 {page-break-inside: avoid;}
}