/* HTML5 DISPLAY DEFINITIONS */
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; }

/* Base */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
form { margin: 0; }
input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
input { line-height: normal; }
input[type="submit"] { cursor: pointer; }
input::-moz-focus-inner { border: 0; padding: 0; }
a {text-decoration:none;}
*:focus  { outline: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; border-spacing: 0; }
html { overflow-y: scroll; }
ul, ol { margin: 0; padding: 0 ; }
nav ul, ul { list-style: none; list-style-image: none; }


/* LAYOUT */

/* allgemein */
body { font-family: 'brandon-grotesque', 'Source Sans Pro', Helvetica, Arial, sans-serif; color:#202a2b; background:#000; min-width:800px; font-weight:400; }
* { margin:0; padding:0; border:0; }
.js .keinjavascript { display:none; }
.no-js .keinjavascript { display:block; }
#alert_box {position:fixed; top:0; left:0; z-index:2010; margin: 0 auto; width:100%;}
.alert {z-index:200; background:red; color:#fff; padding: 5px 0 5px 20px; font-size:15px; }
.clear {clear:both;}
.invisible {display:none}
h1, h2, h3, h4, h5 {font-weight:normal;}

header { position:fixed; top:0; left:0; z-index:2000; height:195px; width:100%; z-index:10; font-weight:300;  background:#000; font-size:12px;line-height:18px;}
#einfach {position:absolute;left:80px;top:50px;background:#fff; color:#000; padding:5px 10px; font-weight:400;}
#einfach:hover {background:#e52b38;}
#einfach_machen {position:fixed; z-index:1010; width:100%; height:100%;top:0;left:0;}
/* NAVIGATION */
#nav_box {position:relative; left:50%; top:35px; width:50%;z-index:2020;}
#main_nav { width:25%; float:left;}
#work_nav { width:100px;float:left;}
#lang_nav {position:absolute;right:20px;top:35px;z-index:2030;}
#lang_nav li {float:left;padding:0 5px;}
#lang_nav li.first {border-right:1px solid #878786;}
nav.top_nav a {color:#878786; display:block;}
nav.top_nav a:hover, nav.top_nav a.active {color:#fff;}

#nav_box .mob_nav {display:none;}
#nav_box .top_nav .level_1 ul li {font-size:12px;line-height:18px;}
@media only screen and (max-width: 820px) { 
	#nav_box {position:absolute; left:20px; top:100px; width:700px; font-weight:700;}
	#nav_box .mob_nav {position:relative;display:block;font-size:20px; background:#e52b38 url(../images/navi.png) 165px 1px no-repeat; color:#000; line-height:35px;height:35px;padding-left:10px; cursor:pointer;}
	#nav_box .level_1 div.act {background-position:165px -34px;}
	#main_nav, #work_nav {width:200px;}
	#work_nav {margin-left:20px;}
	#nav_box .top_nav .level_1 ul {display:none;}
	#nav_box .top_nav .level_1 ul li {font-size:20px;line-height:35px; }
	nav.top_nav .level_1 a {position:relative; display:block; width:200px; color:#fff;background:#000; padding-left:10px; }
	nav.top_nav .level_1 a:hover, nav.top_nav .level_1 a.active {color:#e52b38;}	
	#lang_nav {font-size:18px;}
}

#logo {position:absolute;right:60px;top:40px;z-index:2010;}
#main { position:relative; padding:0 20px; margin-top:195px; margin-bottom:20px;}

/* WORK */
#work_list div img {position:absolute;top:0px;left:0px;width:100%; height:auto;}
#work_list a, #work_list .link_info { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/blank.gif) repeat;}
#work_list .hoch, #work_list .quer {float:left;position:relative;}
#work_list .hoch {width:274px;height:370px;}
#work_list .quer {width:548px;height:370px;}
#work_list .link_info h1 {position:relative;font-size:55px; font-weight:700; line-height:50px; margin:50px 0 0 40px; color:#fff;}
#work_list .link_info h3 {position:relative;font-size:14px; margin:10px 0 0 42px; color:#fff;}
#work_list .link_info .open {position:absolute; left:40px; bottom:50px; font-size:14px; color:#fff; }
#work_list .link_info .open .plus {font-size:40px;font-weight:300; position:relative; top:8px; margin-right:10px;}
#work_list .link_back {position:absolute;top:0; left:0; width:100%; height:100%;}

/* ABOUT */
.raster {position:absolute;top:0; left:0; width:100%; height:100%; background: url(../images/raster1.png) repeat;}
.raster_trans {position:absolute;top:0; left:0; width:100%; height:100%; background: url(../images/raster2.png) repeat;}
.main_about h1 {position:relative; margin-top:100px; margin-left:100px; font-size:120px; font-weight:600; line-height:110px; }

#about_us {position:relative; min-height:540px;}
#about_us h1 {color:#e52b38; }
#about_p { position:relative; margin:200px 0 50px 110px; color:#e52b38; font-size:20px; width:600px;}

#studio {position:relative; height:540px;}
#studio h1, #clients h1, #contact h1, #imprint h1 {color:#fff;  }
#studio_p { position:absolute; top:300px; left:110px; color:#fff; font-size:20px; width:550px;}
#studio_p a {background:#000;color:#fff; padding:2px 10px; display:inline-block; font-weight:300;}
#studio_p a:hover {background:#fff;color:#000;}

#services {position:relative; min-height:640px;}
#services h1 {color:#e52b38; }
.services_content { position:relative; margin:50px 0 50px 110px; color:#e52b38; font-size:20px; width:800px;}
.services_content ul {margin:20px 0 0 90px;}
#services h5 {font-size:14px; }

#clients {position:relative; min-height:540px;}
#clients #client_nav { position:relative; }
#clients #client_nav ul {margin:30px 200px 0 110px; }
#clients #client_nav ul li {margin:0 0 2px 0;background:#000;color:#fff; padding:2px 10px; display:inline-block;}
#client_list { position:relative; }
#client_list ul { position:relative; margin:50px 100px 0 110px; }
#client_list li { position:relative; float:left; width:200px; height:200px; background:#000; margin: 0 1px 1px 0;}

h2.data_header {color:#fff; position:relative; margin-top:100px; margin-left:100px; font-size:60px; font-weight:600; line-height:110px;}

#news {position:relative; min-height:870px;}
#news h1 {color:#000; }
#accordion {margin:50px 0 100px 100px; width:660px; position:relative;}
.accordionButton {display:block; cursor:pointer; width:650px; padding-left:10px; height:35px; line-height:35px; text-transform:uppercase; background:#fff url(../images/accordion.gif) no-repeat 620px 0; margin-bottom:5px;}
.accordionButton:hover { background:#000 url(../images/accordion.gif) no-repeat 620px -35px; color:#fff; }
.on { background:#000 url(../images/accordion.gif) no-repeat 620px -70px; color:#fff; margin-bottom:0;}
.on:hover { background:#000 url(../images/accordion.gif) no-repeat 620px -105px; }
.accordionButton .datum {margin-left:20px; font-size:12px;}
.accordionContent {margin:0 0 20px; background:#000; color:#fff; }
.accordionContent .newstext {padding:10px; width:500px; font-size:14px; line-height:20px; margin:0;}
.accordionContent .newstext p {margin-bottom:5px;}
.accordionContent a {text-decoration:underline; color:#fff;}

#contact {position:relative; height:700px;color:#fff;}
#contact_div {position:relative;margin:100px 200px 50px 110px;}
#contact_p { font-size:20px; }
#address {font-size:16px; border-top:1px solid #fff; padding:20px 20px 20px 0; width:500px; margin-top:50px;}
#address p {margin-bottom:10px;}
#address a {color:#fff;}
#address a:hover {color:#000;}
#google {position:relative;background:#000;color:#fff; padding:2px 10px; display:inline-block; font-size:12px;}
#google:hover {background:#fff;color:#000;}

#imprint {position:relative; height:1200px;}
#imprint_p { position:absolute; top:250px; left:110px; color:#fff; font-size:14px; width:660px;}
#imprint_p p {margin-top:15px;}

#data {position:relative; height:8000px;}
#data_p { position:absolute; top:250px; left:110px; color:#fff; font-size:14px; width:660px;}
#data_p p {margin-top:15px;}
/* BILDER IM HINTERGRUND */
/* normal */
#about_us { background: url(../../files/upload/1.jpg) no-repeat center center; overflow:hidden; }
#studio { background: url(../../files/upload/6.jpg) no-repeat center center fixed; overflow:hidden; }
#services { background: url(../../files/upload/20.jpg) no-repeat center center fixed; overflow:hidden; }
#clients { background: url(../../files/upload/25.jpg) no-repeat center center fixed; overflow:hidden; }
#news { background: url(../../files/upload/28.jpg) no-repeat center center fixed; overflow:hidden; }
#contact { background: url(../../files/upload/31.jpg) no-repeat center center fixed; overflow:hidden; }
#imprint { background: url(../../files/upload/15.jpg) no-repeat center center fixed; overflow:hidden; }	
#data { background: url(../../files/einfach_machen/19.jpg) no-repeat center center fixed; overflow:hidden; }	
#about_us, #studio, #services, #clients, #news, #contact, #imprint, #data { -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }

/* iPhone iPad ...  */
@media only screen and (max-width: 10px) {
	#about_us { background: url(../../files/upload/1.jpg) no-repeat; overflow:hidden; }
	#studio { background: url(../../files/upload/6.jpg) no-repeat; overflow:hidden; }
	#services { background: url(../../files/upload/20.jpg) no-repeat; overflow:hidden; }
	#clients { background: url(../../files/upload/25.jpg) no-repeat; overflow:hidden; }
	#news { background: url(../../files/upload/28.jpg) no-repeat; overflow:hidden; }
	#contact { background: url(../../files/upload/31.jpg) no-repeat; overflow:hidden; }
	#imprint { background: url(../../files/upload/15.jpg) no-repeat; overflow:hidden; }
	#data { background: url(../../files/einfach_machen/19.jpg) no-repeat; overflow:hidden; }
	#about_us, #studio, #services, #clients, #news, #contact, #imprint, #data { -webkit-background-size:auto 100%; -moz-background-size:auto 100%; -o-background-size:auto 100%; background-size:auto 100%; }
}
footer {position:fixed; height:20px; width:100%;bottom:0; background:#000;}
#social_media {position:absolute; right:50px;top:3px;}
#social_media ul li {float:left;border-left:1px solid #666; height:15px; line-height:15px;}
#social_media ul li.first {border:none;}
#social_media ul li img {margin-top:-3px;}
@media only screen and (max-width: 1280px) {
	.main_about h1 {  font-size:100px;line-height:80px;}
	#client_list ul li {width:150px; height:150px;}
	#client_list ul li img {width:150px; height:150px;}
}
@media only screen and (max-width: 1080px) {
	.main_about h1 {  font-size:90px; line-height:70px;}
	.services_content { width:700px;}
}
@media only screen and (max-width: 930px) {
	.main_about h1 {  font-size:70px; line-height:65px;}
	#about_p, #studio_p, .services_content {font-size:16px;}
	#client_list ul li {width:100px; height:100px;}
	#client_list ul li img {width:100px; height:100px;}
	.services_content { width:600px;}
}