/*
feingestalten theme 2013

design & code / feingestalten webdesign

green:	#99bb11
blue:	#0099ee
*/

/* body */
body { margin:0; padding:0; background:#fafafa; /* min-width:1000px; */ -webkit-text-size-adjust:none; /* overflow:scroll; */ overflow-x: hidden; }
.ie7 body,
.ie8 body { min-width:960px }
a { color:#777; text-decoration:none; }
.clear { clear:both; width:0; height:0; line-height:0; }

/* header */
header { position:relative; /* min-width:1000px; */ background:#fafafa; text-align:center; text-transform:uppercase; border-bottom:1px solid #ddd; }
header .brand { width:98px; height:98px; margin:0 auto; }
header a.logo { display:block; width:48px; height:48px; margin:0 auto; padding:25px; background:url(../images/feingestalten-signet.png) center center no-repeat; }

header nav { position:absolute; top:0; right:20px; /* float:right; */ }
header nav ul { list-style:none; margin:0; padding:0; }
header nav ul li { float:left; margin:0; padding:0; border-top:5px solid #fafafa; }
header nav ul li a { display:block; padding:40px 20px; color:#666; font-size:13px; font-weight:300; line-height:1; }
header nav ul li a:hover { color:#000; }
header nav ul li.current,
header nav ul li.section { border-top:5px solid #000; }
header nav ul li.current a,
header nav ul li.section a { color:#000; }

/* site-layout */
.main { position:relative; /* padding:15px; */ margin-bottom:200px; } */
.main .inner {  }
.main .content-container { position:relative; }
.main .content-container article { position:relative; width:780px; margin:0 auto; padding:50px; margin-bottom:30px; }
.main .content-container article h1 { color:#000; }
.main .content-container article .content { color:#000; }

/* clients */
.main .clientholder .client-logos { position:relative; width:540px; margin:0 auto; }
.main .clientholder .client-logos ul { list-style:none; }
.main .clientholder .client-logos li { position:relative; display:block; width:180px; height:180px; margin:0; padding:0; float:left; }
.main .clientholder .client-logos li a { position:relative; display:block; width:180px; height:180px; background-color:transparent; background-repeat:no-repeat; background-position:center center; }
.main .clientholder .client-logos li a .logo-color { position:absolute; top:0; left:0; width:180px; height:180px; display:block; background-color:transparent; background-repeat:no-repeat; background-position:center center; }
.main .clientholder .client-logos li a .logo-color-overlay { position:absolute; top:0; left:0; width:180px; height:180px; display:block; opacity:0; background-color:#fafafa; background-repeat:no-repeat; background-position:center center; }
.main .clientholder .client-logos li a:hover { background-position-y:-500px; }
.main .clientholder .client-logos li a:hover .logo-color-overlay { /* display:block; opacity:0; */ }

/* client */
.main .client .mainimage { position:relative; height:400px; margin-top:40px; /* background-color:#444; */ background-repeat:no-repeat; background-size:cover; background-position:center center; /* background-position:50% 50%; */ background-attachment:fixed; /* overflow:hidden; */ }
.main .client .mainimage .overlay { position:relative; height:400px; background-color:rgba(0,0,0,0.4); }
.main .client .mainimage .logo-white { position:relative; width:240px; height:400px; margin:0 auto; background-color:transparent; background-repeat:no-repeat; background-position:center center; }
.main .client a.backbutton { position:absolute; display:block; top:5px; left:10px; width:28px; height:28px; padding:10px; background:url(../images/icons/arrow-back-white.png) center center no-repeat; }
.main .client .made-wrapper { position:relative; width:780px; margin:0 auto; padding:10px; }
.main .client .made { /* width:200px; */ /* margin:0 auto; */ position:absolute; top:10px; right:20px; /* float:right; */ font-size:12px; z-index:10; }

.main .client .made .icon-link { position:relative; display:block; /* width:32px; */ height:32px; line-height:32px; padding:0; float:left; margin-left:10px; margin-bottom:10px; background-repeat:no-repeat; background:url(../images/icons/icon-link-center-blue.png) center top repeat; margin-right:20px; color:#000; text-decoration:none; font-size:13px; /* -webkit-transition:width 1s; */ }
.main .client .made .icon-link:before { content:" "; font-size:0; position:absolute; left:-16px; top:0; width:16px; height:32px; background:url(../images/icons/icon-link-leftright.png) left top no-repeat; }
.main .client .made .icon-link:after { content:" "; font-size:0; position:absolute; right:-16px; top:0; width:16px; height:32px; background:url(../images/icons/icon-link-leftright.png) right top no-repeat; }
.main .client .made .icon-link:hover { background-position:center bottom; color:#fff; }
.main .client .made .icon-link:hover:before { background-position:left bottom; }
.main .client .made .icon-link:hover:after { background-position:right bottom; }
.main .client .made .icon-link .icon-link-label { display:block; }
.main .client .made .icon-link .icon-link-url { display:none; }
.main .client .made .icon-link:hover .icon-link-label { display:none; }
.main .client .made .icon-link:hover .icon-link-url { display:block; }

.main .client .made .icon { position:relative; display:block; width:32px; height:32px; float:left; margin-left:10px; margin-bottom:10px; background-repeat:no-repeat; }
.main .client .made .web { background-image:url(../images/icons/icon-web.png); }
.main .client .made .cd { background-image:url(../images/icons/icon-cd.png); }
.main .client .made .photo { background-image:url(../images/icons/icon-photo.png); }
.main .client .made .print { background-image:url(../images/icons/icon-print.png); }
.main .client .made .icon.yes { background-position:center top; }
.main .client .made .icon.no { background-position:center bottom; }
.main .client .secondimage { position:relative; height:700px; margin-top:50px; margin-bottom:50px; background-color:#eee; background-repeat:no-repeat; background-size:cover; background-position:center center; overflow:hidden; }
.main .client .secondimage .fximage { position:absolute; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; }
.main .client .client-imagegrid { position:relative; width:1000px; margin:0 auto; }
.main .client .client-imagegrid ul { list-style:none; padding-left:5px; padding-right:5px; }
.main .client .client-imagegrid li { float:left; display:block; padding:15px; }
.main .client .client-imagegrid li img { display:block; padding:0; margin:0; }

.camera_wrap { width:100%; margin-bottom:100px; }

.camera-slideshow { width:100%; margin-bottom:0; }

/* services */
.services .service { position:relative; background-color:transparent; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.services .service.right article { width:370px; padding:70px 0 70px 530px; }
.services .service.left article { width:370px; padding:70px 530px 70px 0; }
.services .service.black article.typography,
.services .service.black article.typography p,
.services .service.black article.typography h2,
.services .service.black article.typography ul { color:#000; }
.services .service.white article.typography,
.services .service.white article.typography p,
.services .service.white article.typography h2,
.services .service.white article.typography ul { color:#fff; }

/* contact */
.main .contact .mainimage { position:relative; height:400px; margin-top:40px; background-color:#444; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.main .contact #map { /* position:absolute; top:0; bottom:0; width:100%; */ height:400px; margin-top:50px; margin-bottom:50px; }
.main .contact #map a.zoomer { background-color:#fafafa; border:0 none; }
.main .contact #map .marker-tooltip .marker-popup { /* border-color:#eee; */ }
.main .impresscolumns { width:640px; margin:0 auto 100px; padding-top:40px; }
.main .impresscolumns .impressleft,
.main .impresscolumns .impressright { position:relative; width:260px; padding-left:60px; float:left; }
.main .impresscolumns .feinlogo { display:block; width:240px; height:60px; background-color:transparent; background-repeat:no-repeat; background-position:left top; padding-bottom:20px; }
.main .impressum .impresscolumns { margin-top:120px; }

/* footer */
footer { position:fixed; bottom:0; left:0; right:0; min-height:56px; background:#fafafa; border-top:1px solid #ddd; font-size:12px; font-weight:400; }
footer .inner { position:relative; padding-top:15px; padding-bottom:15px; }
footer .inner .left { /* position:absolute; left:20px; */ float:left; margin:0 20px; }
footer .inner .right { /* position:absolute; right:25px; */ float:right; margin:0 20px; padding:5px 0 7px; line-height:1; }
footer .inner .right .fb-link { display:inline-block; position:relative; width:12px; height:12px; padding:0 10px; background:url(../images/icons/facebook-icon.png) center center no-repeat; }
footer nav ul { list-style:none; }
footer nav ul li { float:left; margin:0; padding:0; }
footer nav ul li a { display:block; padding:5px 10px 7px; line-height:1; }
footer nav ul li a:hover { color:#222; }
footer nav ul li.current a,
footer nav ul li.section a { background:#000; color:#fff; }

/* retina graphics */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
header a.logo { background-image:url(../images/feingestalten-signet-2x.png); background-size:48px 48px; }
footer .inner .right .fb-link { background-image:url(../images/icons/facebook-icon-2x.png); background-size:12px 12px; }
}