@font-face {
    font-family: 'claire_handlight';
    src: url('../fonts/clairehandlight-webfont.eot');
    src: url('../fonts/clairehandlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clairehandlight-webfont.woff') format('woff'),
         url('../fonts/clairehandlight-webfont.ttf') format('truetype'),
         url('../fonts/clairehandlight-webfont.svg#claire_handlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'colaborate-thinregular';
    src: url('../fonts/ColabThi-webfont.eot');
    src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabThi-webfont.woff') format('woff'),
         url('../fonts/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/ColabThi-webfont.svg#colaborate-thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'colaboratelightregular';
    src: url('../fonts/ColabLig-webfont.eot');
    src: url('../fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabLig-webfont.woff') format('woff'),
         url('../fonts/ColabLig-webfont.ttf') format('truetype'),
         url('../fonts/ColabLig-webfont.svg#colaboratelightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'colaborate-regularregular';
    src: url('../fonts/ColabReg-webfont.eot');
    src: url('../fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabReg-webfont.woff') format('woff'),
         url('../fonts/ColabReg-webfont.ttf') format('truetype'),
         url('../fonts/ColabReg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}

html, body { height: 100%; }

body {
	/** border-top: 3px solid #33ff33;**/ 
	border-top: 3px solid rgb(236,177,57); 
	background:url(../img/pool/debut_light.png) repeat;
}

img { 
	max-width: 100%; 
	border:0; 
}

#maincontent {
	position: relative;
    min-height: 100%;
	height: auto !important;
	height: 100%;
	max-width: 1224px;
	margin: 0px auto -3em;
}

#menue {
	z-index: 8;
	position: relative; 
	padding-top: 40px;
}

#menue a {
	position: relative; 
	margin: 0px 12px 0;
	font-family: 'claire_handlight', Helvetica, Arial; 
	font-size: 1.2em;
	letter-spacing:0.03em; 
	color:#666666;
	text-shadow:0px 2px 2px rgb(160,160,160);
    text-align:left;
    text-decoration:none;
    line-height: 1.4em;
}

#menue a:hover, #menue a.primnav-active {
    color:rgb(200,50,0);
    text-shadow:0px 1px 2px rgb(100,100,100);
}

.content {
	z-index: 6;
    position: relative; 
    top: 25px;
   	float: left; 
    margin: 0 12px 24px; 
	width: 588px;
	font-family: 'colaborate-thinregular', Helvetica, Arial; 
	font-size: 0.95em;
	color:#555555;
	line-height: 1.6em;
}
	
.content a { 
	text-decoration:none; 
	color:#555555;
}

.content a:hover {
    color:#58FA58;
}

.portfolio {
	z-index: 8;
	position: relative;
	top: 25px;
	float: left; 
    margin-left: 12px; 
    margin-right: 12px; 
   	margin-bottom: 24px; 
	max-width: 1200px;
	width: 100%;
}
	
#logo {
	z-index: 1;
	position:absolute;
	top: 0px;
	width: 260px;
	height: 60px;
	right: 12px;
	-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
}

.logo_kurz {
	z-index: 1;
	position:absolute;
	top: 0px;
	width: 260px;
	height: 60px;
	right: 80px;
	-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
}

.logo_lang {
	z-index: 1;
	position:absolute;
	top: 0px;
	width: 260px;
	height: 66px;
	right: 80px;
	-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0px 1px 4px rgba(0,0,0,.2); 
}

.abstand {
	z-index: 1;
    position: relative; 
   	float: left; 
    margin: 40px; 
}



/******  Aufteilung *************************************/

.columns {
	z-index: 8;
    position: relative; 
    top: 25px;
   	overflow: hidden; 
   	line-height: 0;
   	float: left; 
    display: inline; 
    margin: 0 12px 24px; 
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0 1px 4px rgba(0,0,0,.2); 
}
	
.eine.columns	{ width: 282px; }
.zwei.columns	{ width: 588px; }
.vier.columns	{ width: 1200px; }

.eine.columns .portrait	{ height: 376px; }
.zwei.columns .landscape { height: 376px; }



/****** Prints *************************************/

.prints {
	z-index: 8;
    position: relative; 
    top: 25px;
   	overflow: hidden; 
   	line-height: 0;
   	float: left; 
    display: inline; 
    margin: 0 12px 24px;  
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0 1px 4px rgba(0,0,0,.2); 
}

.prints.landscape	{ width: 588px; height: 441px; }
.prints.portrait	{ width: 441px; height: 588px; }

.printtext	{ 
	width: 588px;
	z-index: 8;
    position: relative; 
    top: 25px;
   	overflow: hidden; 
   	line-height: 2;
   	float: left; 
    display: inline;
    margin: 0 12px 24px;
}

table {
width: 588px;
} 

table, th, td {
text-align: center;
border: 1px solid #040;
border-collapse: collapse;
	font-family: 'colaborate-thinregular', Helvetica, Arial; 
	font-size: 1.0em;
	color:#555555;
	line-height: 1.6em;
} 



/******  Footer *************************************/

.footer {
	z-index: 9;
	position: relative;
	height: 3em;
	bottom: 0px;
    width: 100%;
    clear: both;
    opacity: 0.5;
    background:url(../img/pool/debut_light.png) repeat;
	-webkit-box-shadow: 0 -1px 4px rgba(0,0,0,.1); 
	-moz-box-shadow: 0 -1px 4px rgba(0,0,0,.1); 
	-o-box-shadow: 0 -1px 4px rgba(0,0,0,.1); 
	box-shadow: 0 -1px 4px rgba(0,0,0,.1); 
}

.footer a {
    color:#666;
    text-decoration:none;
}

.footer a:hover {
    color:#000;
    opacity: 1.0;
}

.footer p {
	margin: 0 auto;
    max-width: 1200px;
    padding:16px 0;
	color:#666;
	font-family: Arial; 
	font-size: 0.65em;
	letter-spacing:0.03em; 
}



/******  Hintergründe *************************************/

.news {
	z-index: 1;
	position:relative;
	top: 80px;
	left: 180px;
	width:720px;
	height:1200px;
	background:url(../img/pool/bg_news.png) no-repeat center center;
}

.photography {
	z-index: 1;
 	position:absolute;
  	width:100%;
	background:url(../img/pool/bg_orange.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.graphic {
	z-index: 1;
 	position:absolute;
  	width:100%;
	background:url(../img/pool/bg_gruen.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.illustration {
	z-index: 1;
 	position:absolute;
  	width:100%;
	background:url(../img/pool/bg_blau.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.retrospective {
	z-index: 1;
	position:relative;
	top: 10px;
	left: -220px;
	width:720px;
	height:650px;
	background:url(../img/pool/bg_retrospective.png) no-repeat center center;
}

.about {
	z-index: 1;
	position:relative;
	top: 0px;
	left: -30px;
	width:1200px;
	height:1100px;
	background:url(../img/pool/bg_about.png) no-repeat center center;
}

.clients {
	z-index: 1;
	position:relative;
	top: 10px;
	left: -65px;
	width:720px;
	height:650px;
	background:url(../img/pool/bg_clients.png) no-repeat center center;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-moz-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-ms-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-o-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
}

.contact {
	z-index: 1;
	position:relative;
	top: 10px;
	left: -104px;
	width:720px;
	height:650px;
	background:url(../img/pool/bg_contact.png) no-repeat center center;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-moz-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-ms-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	-o-filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
}

.rahmen {
	z-index: 0;
	position:absolute;
	top: 0px;
	left: -100px;
	width:1400px;
}


/******  Schriftformatierung *************************************/

p { 
	margin-left: 26px;
}

.fett {
	margin-left: 26px;
	font-family: 'colaborate-regularregular', Helvetica, Arial;
	}
	
a { text-decoration:none; }
							
.details { 
	margin: 18px 20px 0px; 	
	text-decoration: none;
	font-family: 'colaboratelightregular', Helvetica, Arial; 
	text-align: left;
	color: #555555;
	/**text-shadow:0px 0px 0 rgb(0,0,0);**/
}	

h4 {
	font-weight: 300;
	font-size: 1.4em;
	letter-spacing:0.05em; 
}

.description { 
	margin-top: 15px;
	font-size: 0.95em;
	line-height: 1.3em;
}

hr  { 
	width: 1200px; 
	background-color: #58FA58; 
	height: 1px;
  	text-align: left; 
  	border: 0px;
}


/****** Lightbox *************************************/

.lightbox {
	display: none;
    z-index: 100;
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	border-top: 3px solid rgb(236,177,57);
	background:url(../img/pool/debut_light.png) repeat;
 
	/**
	background:url(../img/pool/debut_light.png) repeat;
	background: rgba(255,255,255,0.96);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(153,255,51,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.8)), color-stop(100%,rgba(153,255,51,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%,rgba(153,255,51,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%,rgba(153,255,51,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%,rgba(153,255,51,1) 100%);
	background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%,rgba(153,255,51,1) 100%);
	**/
}

.box {
	margin: 100px 80px 0;	
}

.box img {
	max-height: 1000px;
	-webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3); 
	-moz-box-shadow: 0 1px 8px rgba(0,0,0,.3); 
	-o-box-shadow: 0 1px 8px rgba(0,0,0,.3); 
	box-shadow: 0 1px 8px rgba(0,0,0,.3); 
}

.lightbox p {
	position: relative; 
	margin: 8px 20%;
	font-family: 'claire_handlight', Helvetica, Arial; 
	font-size: 1.1em;
	letter-spacing:0.03em; 
	color:#666666;
	text-shadow:0px 2px 2px rgb(160,160,160);
    text-align:center;
    text-decoration:none;
    line-height: 1.4em;
}


/** Unhide lightbox **/
.lightbox:target {
	display: block;
	outline: none;
}



/******  Screenweite Responsive *************************************/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
	.box img{ max-height: 880px; }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) and (orientation: landscape) {
	body { overflow-x:hidden; }
	#maincontent { width: 988px; }
    .eine.columns { width: 223px; }
    .zwei.columns { width: 470px; }
	.vier.columns { width: 964px; }
	.eine.columns .portrait	{ height: 298px; }
	.zwei.columns .portrait { height: 620px; }
	.zwei.columns .landscape { height: 298px; }
	.portfolio { width: 960px; }
	.footer p { max-width: 960px; }
	.rahmen { top: 13px; left: -79px; width:1122px; height: 737; }
	.box img{ max-height: 560px; }
}

@media only screen and (max-width: 1024px) {
	body { overflow-x:hidden; }
	#maincontent { width: 612px; }

    .eine.columns,
    .zwei.columns,
	.vier.columns  { width: 588px; }
	.eine.columns .portrait	{ height: 780px; }
	.zwei.columns .landscape { height: 382px; }
	.portfolio { width: 588px; }
	.footer p { max-width: 588px; }
	.rahmen { top: 34px; left: -46px; width:692px; height: 455; }
	.box img{ max-height: 560px; }
}



/****** Start Portfolio Animations Styles  *************************************/

.mosaic-block1 {
	position:relative;
	overflow:hidden;
	width:100%;
	height:672px;
	border:0px;
}

.mosaic-block2 {
	position:relative;
	overflow:hidden;
	width:100%;
	height:324px;
	border:0px;
}

.mosaic-block3 {
	position:relative;
	overflow:hidden;
	width:100%;
	height:212px;
	border:0px;
}

.mosaic-backdrop {
	display:none;
	position:absolute;
	top:0;
	height:100%;
	width:100%;
}
	
.mosaic-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
	background:#fff;
}

.anzeige {
	opacity: 0.8;
	background-color: #fff;
	position: absolute;
	bottom: 0px;
	height: 38px; 
	width: 100%; 
}	
	
	
/****** Custom Animation Styles *************************************/
		
.bar1 .mosaic-overlay {
	left: 0px;
	bottom:-638px;
	height:672px;
	opacity:0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter:alpha(opacity=80);
}
		
.bar2 .mosaic-overlay {
	left: 0px;
	bottom:-290px;
	height:324px;
	opacity:0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter:alpha(opacity=80);
}
		
.bar3 .mosaic-overlay {
	left: 0px;
	bottom:-50px;
	height:84px;
	background: rgba(255,255,255,0.65);
}



/****** Start News Module Styles *************************************/

.module {
	z-index: 8;
	background: #fff;
	margin: 0 0 50px 0;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
	box-shadow: 0 1px 4px rgba(0,0,0,.2); 
}

.module h2 {
	font-weight: 300;
	font-family: 'colaborate-thinregular', Helvetica, Arial; 
	font-size: 1.1em;
	color:#666666;
	letter-spacing:0.05em; 
	text-shadow:0px 0px 0 rgb(0,0,0);
	background: #eee;
	line-height: 2;
	padding: 0 0 0 15px;
	box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
}
.module h2 a {
	float: right;
	position: relative;
	text-decoration: none;
	color: #666;
	padding: 0 10px;
	border-left: 5px solid white;
	-webkit-transition: padding 0.1s linear;
	-moz-transition: padding 0.1s linear;
	-ms-transition: padding 0.1s linear;
	-o-transition: padding 0.1s linear;
}
.module h2 a:hover {
	padding: 0 14px;
}
.module h2 a:active {
	padding: 0 16px;
}
.module ul {
	list-style: none;
	padding: 10px 0;
}
.module li {
	padding: 5px 15px 10px;
}
.module li:first-child {
	border-top: 0;
	padding-top: 0;
}
.module li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.module h2 a:before,
.module h2 a:after {
  content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
}
.module h2 a:before {
	left: -12px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid white;
	margin-top: -8px;
}

.module.blue h2 a {
	background: #a2d6eb;
}
.module.blue h2 a:hover {
	background: #c5f0ff;
}
.module.blue h2 a:after {
	left: -5px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #a2d6eb;
	margin-top: -6px;
}
.module.blue h2 a:hover:after {
	border-right-color: #c5f0ff;
}

.module.grey h2 a {
	background: #eee;
}
.module.grey h2 a:hover {
	background: #eee;
}
.module.grey h2 a:after {
	left: -5px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #eee;
	margin-top: -6px;
}
.module.grey h2 a:hover:after {
	border-right-color: #eee;
}
.module hr {
	border-top: 1px #ccc;
	width: 564px;
	margin: 2px 12px;
}