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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

body{font:13px/1.5 Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted invert}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:square}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}

#sb-nav-close {
	position: fixed;
	display: block;
	top: 30px;
	right: 30px;
	width: 53px;
	height: 51px;
	background-repeat: no-repeat;
	background-image: url(../images/steuerelemente.png);
	background-position: -74px -55px;
	cursor: pointer;
}

#sb-nav-next {
	position: fixed;
	width: 28px;
	height: 51px;
	background-repeat: no-repeat;
	background-image: url(../images/steuerelemente.png);
	background-position: -36px -55px;
	top: 49%;
	right: 30px;
	cursor: pointer;
}

#sb-nav-previous {
	position: fixed;
	width: 28px;
	height: 51px;
	background-repeat: no-repeat;
	background-image: url(../images/steuerelemente.png);
	background-position: 0 -55px;
	top: 49%;
	left: 30px;
	cursor: pointer;
}

#sb-nav-close:hover {
	background-position: -74px 0;
}

#sb-nav-next:hover {
	background-position: -36px 0;
}

#sb-nav-previous:hover {
	background-position: 0 0;
}

::-moz-selection { background: #393E40; color: #fff; text-shadow: none; }
::selection { background: #393E40; color: #fff; text-shadow: none; }

html {
	overflow-y: scroll;
}

body {
	/* background-image: url(../images/bg-kachel.jpg); */
	font-family: 'TradeGothicLTStd';
}

#wrapper {
	min-height: 401px;
	/* background-image: url(../images/bg-faserung.png); */
	background-position: 0 0;
	background-repeat: repeat-x;
}

.clear {
	clear: both;
}

.header {
	background-color: #FFF; /* 2e3334 */
	position: fixed;
	width: 100%;
	z-index: 99;
}

header {
	padding-top: 14px;
	height: 46px;
	position: relative;
	padding-left: 42px;
	padding-right: 42px;
}

nav {
	
}

h2 {
	font-size: 12px;
	font-weight: normal;
}

a {
	color: #8f9192;
	text-decoration: none;
}

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

nav li {
	margin: 0;
}
/*
nav a {
	font-family: 'CentennialItalicOsF';
	text-transform: uppercase;
	font-size: 21px;
	line-height: 21px;
	white-space: nowrap;
}
*/

.logo {
	position: relative;
	z-index: 20;
	margin-bottom: 40px;
}

.logo a,
nav a,
.filters a {
	font-family: 'TradeGothicLTStd';
	text-transform: lowercase;
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	padding-top: 4px;
}

.filters ul {
	margin-bottom: 0;
}

.filters a:hover {
	background-color: #393E40;
	color: #FFF;
}

nav.top a {
	font-size: 23px;
	line-height: 23px;
	color: #BBB;
	letter-spacing: 1px;
}

nav.top a:hover,
nav.system a:hover {
	color: #000;
}

nav.system a {
	line-height: 18px;
	font-size: 14px;
	color: #8f9192;
	letter-spacing: 1px;
}

header nav {
	position: absolute;
	right: 42px;
}

header nav.top {
	top: 28px;
}

header nav.system {
	top: 7px;
}

header nav li {
	float: left;
	margin-left: 26px;
}

header .logo a {
	display: block;
	width: 414px;
	height: 33px;
}

header .logo img {
	height: 33px;
}

aside nav li {
	margin-bottom: 14px;
}

.content {
	padding-top: 100px;
	padding-left: 42px;
	padding-right: 22px;
	min-height: 400px;
}

.intro {
	position: fixed;
	top: 103px;
	bottom: 0;
	left: 198px;
	right: 42px;
	z-index: 30;
	background-color: #FFF;
}

.intro ul {
	padding: 0;
	list-style-type: none;
}

.intro li {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 20;
	text-align: center;
}

.intro li.current {
	opacity: 1;
}

.intro li.next {
	z-index: 21;
}

.intro img {
	display: inline-block;
	max-width: 100%;
}

.skip-intro {
	position: fixed;
	left: 42px;
	top: 220px;
}

.cases a {
	display: block;
}

.cases ul {
	list-style-type: none;
	text-align: center;
}

/* .cases li {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	display: inline-block;
	overflow: hidden;
	opacity: 1;
	max-height: 450px;
	max-width: 450px;
	height: auto;
	width: auto;
} */

.cases li {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	display: inline-block;
	overflow: hidden;
	opacity: 1;
	/* max-height: 600px; */
	/* max-width: 450px; */
	max-width: 320px;
	height: auto;
	width: auto;
	vertical-align: top;
	padding-bottom: 7px;
}

.case-files li {
	max-height: 600px;
	max-width: 450px;
}

.case-files li.description-wrapper {
	max-height: none;
}

.cases li:hover h2 a {
	background-color: #393E40;
	color: #FFF;
}

.cases li.filter-space {
	width: 160px;
	height: 100px;
}

.cases li .image {
	display: inline-block;
	margin-bottom: 5px;
	position: relative;
}

.cases li .image a {
	display: block;
}

.cases li .image table {
	position: absolute;
	top: 0;
	visibility: hidden;
	height: 100%;
	max-height: 500px;
}

.cases li .image tr {
	height: 100%;
}

.cases li .image td {
	vertical-align: middle;
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255, 0.75);
	padding: 20px;
}

.cases li .image td p {
	font-size: 12px;
	color: #8f9192;
	text-align: center;
	line-height: 16px;
}

.cases li:hover .image table {
	visibility: visible;
}

.cases li img,
.cases li iframe {
	/* max-height: 450px;
	max-width: 450px; */
	max-height: 300px;
	max-width: 240px;
	display: block;
	margin: 0 auto;
}

.case-files li img,
.case-files li iframe {
	max-height: 450px;
	max-width: 450px;
}

.cases li iframe {
	max-height: 260px;
	margin-bottom: 5px;
}

.cases h2,
.cases p {
	margin-bottom: 0;
	text-align: left;
}

.cases h2 {
	/*font-family: 'TradeGothicLTStdBold';*/
	font-weight: normal;
	margin-bottom: 0px;
	/* font-size: 21px; */
	font-size: 12px;
	text-transform: lowercase;
}

.cases p {
	line-height: 12px;
}

.cases h2 a,
.cases p a {
	display: inline;
	margin-bottom: 0;
}

.filters {
	padding-top: 60px;
	visibility: visible;
}

.hide-filters .filters {
	opacity: 0;
	visibility: hidden;
}

.hide-filters .cases {
	opacity: 0;
}

.hide-intro .cases {
	opacity: 1;
}

.hide-intro .filters {
	opacity: 1;
	visibility: visible;
}

.hide-intro .intro {
	display: none;
}

.cases,
.filters,
.transition {
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

.filters ul {
	text-align: left;
}

.filters li {
	clear: both;
	display: block;
	margin: 0;
}

.cases {
	margin-top: -54px;
}

.cases .hidden {
	opacity: 0;
	max-width: 0;
	display: none;

}

.case-files {
	/* margin-left: 300px; */
	position: relative;
}

.case-files ul {
	margin: 0;
	display: block;
}

.case-files li {
	/* display: block;
	clear: both;
	margin: 0;
	padding: 0;
	margin-bottom: 10px; */
	float: left;
	margin: 0;
	width: 490px;
	padding-bottom: 40px;
	background: none;
}

.case-files li:hover {
	background: none !important;
}

.case-files li a {
	margin-bottom: 5px;
}

.case-files h2 {
	font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif;
	font-weight: normal;
	font-size: 15px;
}

.case-files p.description,
.case-files p.materials,
.case-files p.price,
.case-files p.sizes {
	font-size: 10px;
	line-height: 13px;
}

.case-description {
	/* position: fixed;
	left: 42px;
	top: 88px; */
	position: relative;
	width: 340px;
	padding-top: 60px;
}

.case-description p {
	line-height: 16px;
}

.case-description h1 {
	/*
	font-family: 'TradeGothicLTStdBold';
	font-weight: normal;
	line-height: 1.1em;*/
	font-weight: normal;
	font-size: 12px;
	text-align: left;
}

.case-description a,
.tinymcewysiwyg a {
	color: #8F9192;
	padding-top: 2px;
	padding-bottom: 2px;
	text-decoration: underline;
}

.case-description a:hover,
.tinymcewysiwyg a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #393E40;
}

.articles {
	position: relative;
}

.filters {
	position: absolute;
	left: 0;
	top: -5px;
	z-index: 5;
}

.vorabseite a.button {
	background-color: #FFF;
	color: #000;
	padding-left: 5px;
	padding-right: 5px;
	font-family: 'TradeGothicLTStdBold';
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	left: -5px;
}

/* styles für vorabseite */
body.vorabseite {
	font-size: 17px;
	font-family: 'CentennialItalicOsF';
	text-transform: uppercase;
}

body.vorabseite header {
	padding-top: 30px;
	height: 40px;
}

body.vorabseite h2 {
	font-weight: normal;
	margin-bottom: 0;
	line-height: 27px;
	font-size: 27px;
}

body {
	font-size: 12px;
	color: #8f9192;
}

.vorabseite a.button:hover {
	background-color: #000;
	color: #FFF;
}

.vorabseite .block {
	margin-bottom: 30px;
}

.vorabseite section.image img {
	display: block;
}

.vorabseite .articles .image {
	width: 620px;
	float: left;
	margin-right: 20px;
}

.vorabseite .articles .text {
	width: 320px;
	float: left;
}

.vorabseite .articles .text p {
	margin-bottom: 30px;
}

.vorabseite .articles .text p.small-margin {
	margin-bottom: 22px;
}

.clearfix {
	clear: both;
}

.article-6 section.block {
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
}

.articles table tr td {
	padding-bottom: 10px;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

@media only screen and (max-width: 940px) {
	header {
		padding-bottom: 15px;
		height: auto;
	}
	
	header div.logo {
		margin-bottom: 15px;
	}
	
	header nav.top {
		position: relative;
		right: auto;
		top: auto;
	}
	
	header nav.top li {
		margin-left: 0;
		margin-right: 26px;
	}
	
	.header {
		position: relative;
	}
	
	.content {
		padding-top: 28px;
	}
}

@media only screen and (max-width: 660px) {
	header {
		padding-bottom: 30px;
	}
	
	header nav.system {
		right: auto;
		left: 42px;
		top: auto;
		bottom: 10px;
	}
	
	header nav.system li {
		margin-left: 0;
		margin-right: 26px;
	}
	
	.cases li {
		margin-left: 0;
		margin-right: 0;
	}
}

@media only screen and (max-width: 1044px) {
	.vorabseite .articles section.image {
		margin-right: 0;
	}
	
	.vorabseite .articles .text {
		clear: both;
	}
	
	.footer a {
		top: -20px;
	}
}

@media only screen and (max-width: 770px) {
	.vorabseite .articles .image {
		width: 500px;
	}
	
	.vorabseite .articles section.image img {
		width: 500px;
	}
	
	.footer a {
		top: -20px;
	}
}

@media only screen and (max-width: 590px) {
	.vorabseite .articles .image {
		width: 414px;
	}
	
	.vorabseite .articles section.image img {
		width: 414px;
	}
	
	.footer a {
		top: -20px;
	}
}

/*
		FOOTER
*/

.footer {
	background:url('../images/footer_logo.png') no-repeat center 328px #393e40;
}

footer {
	text-transform:uppercase; 
	text-align:center;
}

footer h3 {
	font-size:36px; 
	color:#5f6e76; 
	font-family: 'TradeGothicLTStdBold'; 
	font-weight:normal; 
	margin:0; 
	padding:22px 0 5px 0;
}

footer .description {
	font-family: 'TradeGothicLTStd'; 
	color:#b2b4b5; 
	font-size:16px; 
	line-height:23px;
}

footer  h4 {
	font-weight:normal; 
	display:inline-block;  
	padding:10px 11px 5px 11px;
}

footer h4 a {
	font-size:23px; 
	line-height:24px; 
	font-family: 'CentennialItalicOsF';
}

footer .twitter,
footer .facebook,
footer .rss {
	display:inline-block; 
	height:55px; 
	width:55px; 
	margin:0 5px; 
	background-image:url('../images/ico_social_network.png');
	background-repeat:no-repeat;
}

footer .twitter {
	background-position:0 0;
}

footer .facebook {
	background-position:-69px 0;
}

footer .rss {
	background-position:-137px 0;
}

footer .copyright {
	display:block; 
	margin-top:5px; 
	color:#a3a6a8; 
	font-size:16px; 
	line-height:24px; 
	font-family: 'CentennialItalicOsF';
}

footer .copyright a {
	font-size:16px; 
	line-height:24px; 
	font-family: 'CentennialItalicOsF';
}


.footer {
	height: 436px;
	padding-left: 42px;
	padding-right: 42px;
	background-color: #393e40;
	margin-top: 80px;
}

.footer a {
	position: relative;
	top: 0;
	color:#a3a6a8;
}

footer a:hover,
.footer a:hover {
	color:#fff;
  text-decoration:underline;
}

.footer {
	/* background:url('../images/footer_logo.png') no-repeat center 328px; */
	background: none;
	background-color: #393e40;
}

footer {
	text-transform:uppercase; 
	text-align:center;
}

footer h3 {
	font-size:36px; 
	color:#5f6e76; 
	font-family: 'TradeGothicLTStdBold'; 
	font-weight:normal; 
	margin:0; 
	padding:22px 0 5px 0;
}

footer .description {
	font-family: 'TradeGothicLTStd'; 
	color:#b2b4b5; 
	font-size:16px; 
	line-height:23px;
}

footer  h4 {
	font-weight:normal; 
	color:#a3a6a8; 
	display:inline-block; 
	font-size:23px; 
	line-height:24px; 
	font-family: 'CentennialItalicOsF'; 
	padding:10px 11px 5px 11px;
}

footer .twitter,
footer .facebook,
footer .rss {
	top:0; 
	display:inline-block; 
	height:55px; 
	width:55px; 
	margin:0 5px; 
	background-image:url('../images/ico_social_network.png');
	background-repeat:no-repeat;
}


/* new added hover state */
footer .twitter:hover,
footer .facebook:hover,
footer .rss:hover {
	background-image:url('../images/ico_social_network_hover.png');
}
/* END hover state */


footer .twitter {
	background-position:0 0;
}

footer .facebook {
	background-position:-69px 0;
}

footer .rss {
	background-position:-137px 0;
}

footer .copyright {
	display:block; 
	margin-top:5px; 
	color:#a3a6a8; 
	font-size:16px; 
	line-height:24px; 
	font-family: 'CentennialItalicOsF';
}

.footer .softloop {
	width: 140px;
	height: 45px;
	background:url('../images/footer_logo.png') no-repeat 0 0;
	display: block;
	margin: 0 auto;
	margin-top: 15px;
}

.footer .softloop img {
	display: block;
}

.footer .softloop:hover img {
	visibility: visible;
}

.facebook-posts {
	
}

.facebook-posts .entry {
	width: 430px;
	background-color: #EEE;
	padding: 20px;
	margin-bottom: 30px;
}

.facebook-posts .message {
	font-family: 'CentennialItalicOsF';
	color: #A3A6A8;
	margin-bottom: 0;
}

.facebook-posts .message a {
	color: #747e82;
}

.facebook-posts .message a:hover {
	text-decoration: underline;
}

.facebook-posts .date {
	margin-bottom: 5px;
}

.facebook-posts .date p {
	margin-bottom: 0;
}

.facebook-posts .preview-image {
	width: 130px;
	float: left;
}

.facebook-posts .preview-image img {
	width: 130px;
}

.facebook-posts .has-picture {
	width: 280px;
	float: right;
}

.facebook-posts .entry h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	line-height: 1.1em;
}

.facebook-posts .facebook-more {
	display: block;
	text-align: center;
	width: 430px;
	padding: 10px 20px;
	background-color: #393E40;
	color: #A3A6A8;
	font-family: 'TradeGothicLTStd';
	text-transform: uppercase;
	padding-bottom: 5px;
}

.facebook-posts .facebook-more:hover {
	text-decoration: underline;
}

.facebook-posts .loading {
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	background-position: 430px center;
}

.clickable {
	cursor: pointer;
}

.image-list li {
	max-width: 450px;
}

.image-list li img {
	max-width: 390px;
}