/*
Die Farben sind:
Schwarz R0G0B0
Weiss R255 G255 B255
Cyan R0 G255 B255

Wie wäre es wenn wir die Breite von Textblock (Projektbeschreibung) zu eine Maximum begrenzen?
Ich habe es jetzt in eine Breite von 668 px definiert. Gleich wie der Textbox in das graue Feld (im Fall von einem Text in die Kategorie Studio), siehe Seite 2.


*/


/* ---------- site structure -------------- */
@font-face {
	font-family: 'AkkuratStd-Regular';
	src: url("../contrib/font/akkstdrg.eot?") format('eot'),
		url("../contrib/font/akkstdrg.woff") format('woff'),
		url("../contrib/font/akkstdrg.ttf") format('truetype');
}

@font-face {
	font-family: 'AkkuratStd-Bold';
	src: url("../contrib/font/akkstdbd.eot?") format('eot'),
		url("../contrib/font/akkstdbd.woff") format('woff'),
		url("../contrib/font/akkstdbd.ttf") format('truetype');
}

@font-face {
	font-family: 'AkkuratStd-Thin';
	src: url("../contrib/font/akkstdlg.eot?") format('eot'),
		url("../contrib/font/akkstdlg.woff") format('woff'),
		url("../contrib/font/akkstdlg.ttf") format('truetype');
}

.normal {
	font-family: AkkuratStd-Regular, Arial, Helvetica, sans-serif;;
}

.bold {
	font-family: AkkuratStd-Bold, Arial, Helvetica, sans-serif;;
}

.thin {
	font-family: AkkuratStd-thin, Arial, Helvetica, sans-serif;;
}

.t1 {
	font-weight: 100; /* thin */
}

.t2 {
	font-weight: 400; /*normal */
}

.t3 {
	font-weight: 700; /*bold */
}

.clear {
	clear: both;
	height: 10px;
}
.bgc{
 background-color: #444444;
}

html {
	
}

body {
	position: relative;
	
}

.wrapper {
	
}

#wrap-left {
	position: absolute;
	width: 208px;
	overflow: hidden;
	z-index:2
}

#wrap-right {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	padding-left:208px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index:1;
	min-width:570px;
}

.black-square{
  width:200px;
  height:75px;
  background-color:#000000;
}

.top-spacer{
  height:25px;
  background-color:#ffffff;
}
.nav-lang{
  padding: 10px 0;
  background-color:#ffffff;
  font-family: AkkuratStd-Thin,Arial,Helvetica,sans-serif;
  text-align:right;
}
.nav-lang a:first-child{
  /*margin-left:320px;*/
}
.nav-lang a{
  padding-right:10px;
}


/* ---------- global classes -------------- */
a:link,a:visited {
	text-decoration: none;
	color: #ffffff;
}

a:hover,a:active {
	text-decoration: none;
	color: rgb(0,255,255);
}

.clear {
	float: none;
	clear: both;
}

.small {
	font-weight: normal;
	font-size: 70%;
}

.spacer {
	height: 10px;
	clear: both;
}

.wrap-content {
	position: relative;
	padding: 0 0 0 0px;
}




/* Isotope */
.isotope-holder{
  position:relative;
  background-color:#000000;
  min-height:100%;
}
.isotope-holder img{
  float: left;
  /*width: 30%;*/
  margin:0 10px 10px 0;
  cursor:pointer;
}
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}

/* Footer */
.footer{
  background-color:#000000;
  padding: 0px 0 0px 25px;
  color:#ffffff;
  font-family: AkkuratStd-Regular,Arial,Helvetica,sans-serif;
  height:40px;
}
.footer ul, .footer ul li{
  display:inline;
}
.footer a{
  font-family: AkkuratStd-Regular,Arial,Helvetica,sans-serif !important;
}



/* Detailansicht */
#detail-holder{
  position:relative;
  background-color:#000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  display:none;
}
.detail-row{
  position:relative;
  background-color:#000000;
  overflow:hidden; 
}
.detail-row .left{
  width: 62%;
  float:left;
}
.detail-row .right{
  width: 38%;
  float:left;
}
.img-detail-holder{
  position:relative;
  overflow:auto;
}
.img-detail-holder img{
  display:none; 
  width:100%;
}
.img-detail-holder img:first-child{
  display:block;
}
.text-detail-holder{
   padding:20px;  
   max-width:450px;
}

.close-detail{
  cursor:pointer;
  z-index:5000;
}
.navi-row{
  background-color:#000000;
  position:relative;
  height:155px;
}
.navi-row .left, .navi-row .right{
	height:55px;
	position:relative;
}
.navi-row .right{
max-width:470px;
}
.navi-row img{
  margin:10px;
}
.navi-row .img-last{
  position:absolute;
  bottom:0;
  left:0;
}
.navi-row .img-next{
  position:absolute;
  bottom:0;
  right:0;
}
.navright-holder{
	position:absolute;
	bottom:0;
	right:0;
	height:47px;
	overflow:hidden;
}


.img-last, .img-next, .text-next{
  cursor:pointer;
}


/* Text */
h1.title{
	color: #e6e6e6;
    font-family: AkkuratStd-Regular,Arial,Helvetica,sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 15px 0 0px;
    text-transform: uppercase;
}

.right p {
    color: #e6e6e6;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 140%;
    font-family: AkkuratStd-Thin,Arial,Helvetica,sans-serif;
    padding-bottom:15px;
}
p.subtitle{
	font-family: AkkuratStd-Thin,Arial,Helvetica,sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    padding-bottom: 15px;
}

.text-teaser {
	font-family: AkkuratStd-Thin, Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	margin-top: 15px;
}

.text-more-holder {
	padding: 15px 0 0 0;
	height: 35px;
}

.text-more {
	font-family: AkkuratStd-Thin, Arial, Helvetica, sans-serif;
	font-size: 17px !important;
	height: 300px;
	display: none;
}

/* Nur Text */
.text {
	width: 724px;
}

.text-only-wrapper {
	margin: 0 0 24px 24px;
	background-color: #303030;
	padding: 16px;
	height: 500px;
}

.text .text-only {
	line-height: 150%;
	font-family: AkkuratStd-Thin, Arial, Helvetica, sans-serif;
	letter-spacing: 0.95px;
	font-size: 17px;
	height: auto;
	color: #ffffff;
}

.text-only {
	padding: 0 88px 0 0;
}



.right p a:link,.right p a:visited,.text-only a:link,.text-only a:visited {
	color: rgb(0,255,255);
	color: #333333;
	color: #676763;
}

.right p a:hover,.right p a:active,.text-only a:hover,.text-only a:active {
text-decoration: none;
	color: rgb(0,255,255);
}



/* ---------- hauptnav-------------- */
#home-link {
	font-family: AkkuratStd-Bold, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-align: right;
	padding: 20px 8px 22px 0;
	font-size: 21px;
}

#nav-main {
	font-family: AkkuratStd-Thin, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
}

#nav-main .nav-0 {
	font-size: 18px;
	text-align: right;
}

#nav-main .nav-0 li {
	padding: 7px 8px 0 0;
}

#nav-main .nav-0 li a, #home-link a{
	text-transform: uppercase;
	color:#000000;
}

.nav-home {
	display: none;
}

#nav-main .nav-1 {
	display: none;
}

#active,.active {
	font-family: AkkuratStd-Bold, Arial, Helvetica, sans-serif;
}

.img-loader{
  position: absolute;
  top: 40%;
  left:45%;
 
}


.img-detail-holder {
    width:100%;
    display: inline-block;
    position: relative;
    overflow:hidden;
}
.img-detail-holder:after {
    padding-top: 58.333%;
    padding-top: 71.33%;
    padding-top:66.6%;
    display: block;
    content: '';
}
.img-detail-holder img {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;    
}

/* ----------------- specials --------------------- */
/* Small Screens */
@media only screen and (max-width: 715px) {
	
	.detail-row .right {
    float: none;
    width:100%;
  }
  .detail-row .left {
    float: none;
    width:100%;
  }
  
}

/* Big Screens */
@media only screen and (min-width: 616px) {
	
}

@media print {
	* {
		background: transparent !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	} /* Black prints faster: h5bp.com/s */
	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: "";
	} /* Don't show links for images, or javascript/internal links */
	pre,blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	} /* h5bp.com/t */
	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;
	}
}