ul.teamlist{list-style: none;}
ul.teaserList li{float: left; width: 25%; position: relative; overflow: hidden;}
ul.teamlist li.clearer {float:none; width:0; height:auto; overflow: initial; }
ul.teaserList li div.name, ul.teamlist li a h2.name{background: rgba(50,50,50,0.85); position:absolute; bottom: 0px; width: 100%; color: white; text-decoration: none; text-transform: uppercase; 
padding: 2% 3%; z-index: 100; left: auto; top: auto;font-weight: 300;
-webkit-transition: all 0.8s ; -moz-transition: all 0.8s ; -ms-transition: all 0.8s ; -o-transition: all 0.8s ; transition: all 0.8s ;}
ul.teamlist li a:hover .name{background: none;}
ul.teamlist li a img{width: 100%; height: auto;}
ul.teaserList li div.overlay{width: 100%; height: 100%; background: url(../Icons/plus.png) no-repeat center center rgba(9,158,209,0.8); position: absolute; top: 0; left: 0; text-align: center; display: none;}


.mitarbeiter{width: 100%;}
.pic{position: relative;line-height: 0px;}
.pic img{width: 100%; height: auto;}
.referenz .pic img{width: 60%; margin-left: 5%;}
.pic .capt{position: absolute; left: 50%; top: 70%; width: 50%; 
	text-shadow: 1px 1px 5px #000; filter: dropshadow(color=#000, offx=1, offy=1);}
.pic .capt h2{font-size: 28px; text-transform: uppercase; color: white; font-weight: 600;left: 0px; top: 0px;}
.pic .capt p{font-size: 28px; position: absolute; top: 33px; text-transform: uppercase; color: white; font-weight: 300;}
.pic .next, .pic .prev{left: 20px; width: 44px; height: 44px; position: absolute; background: url(../../../../../../fileadmin/Resources/Public/Images/prev.png) no-repeat center center; top: 50%; margin-top: -22px; cursor: pointer;
-webkit-transition: all 0.5s ; -moz-transition: all 0.5s ; -ms-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ;}
.pic .next{background-image: url(../../../../../../fileadmin/Resources/Public/Images/next.png); left: auto; right: 20px;}
.pic .next:hover{background-image: url(../../../../../../fileadmin/Resources/Public/Images/next_hover.png);} 
.pic .prev:hover{background-image: url(../../../../../../fileadmin/Resources/Public/Images/prev_hover.png);}

.balkenPF{height: 60px; background: rgb(50,50,50); background: rgba(50,50,50,0.8); position: relative; bottom: 0px; width: 100%;}
.balkenPF .tel{position: absolute; left: 50%; top: 30px; font-size: 14px;}
.balkenPF .tel a{color: white; text-decoration: none; margin-left: 30px;}

.balkenPF .url a{color: rgb(9,158,209); text-decoration: none; margin-left: 30px;}

.balkenPF .capt_r h2{top: 0px; left: 0px; font-size: 12px; font-weight: 400; text-transform: uppercase;}
.balkenPF .capt_r p{top: 16px; left: 0px; font-size: 12px; font-weight: 300; text-transform: uppercase; position: absolute;}

ul.pictures{list-style: none;}
ul.pictures li{float: left; width: 25%; height: auto; position: relative; line-height: 0px; overflow: hidden; background: white;}
ul.pictures li img{width: 100%; height: auto; position: absolute; bottom: 0;}
ul.pictures li .desc{background: rgb(50,50,50); position: absolute; bottom: auto; font-size: 16px; line-height: 20px; width: 90%; padding: 5% 5%; color: white; font-weight: 300;}

.ma{display: none;}

#cboxOverlay{background-color: rgb(0,0,0) !important;}
#cboxTitle{position: inherit !important; color: white !important; top: auto !important; margin-top: 10px !important;}

#refContainer .cation_ref{position: absolute; right: 0; top: 0; width: 33%; height: 85%; padding: 5%; background: white; color:rgb(50,50,50);}
.cap_wrap{width: 90%; margin-left:-10px; }
#refContainer .cation_ref .titel{background: rgb(50,50,50); color:white;  padding: 5px 10px 5px 20px; text-transform: uppercase; font-size: 22px; margin-bottom: 2%; line-height: 28px; display: inline-block; margin-left: -10px;}
#refContainer .cation_ref .subtitel{background: rgb(50,50,50); color: white;  padding: 5px 10px 5px 20px; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; line-height: 18px; display: inline-block; margin-left: -10px;}
.cation_ref .click{margin-top: 2%; font-size: 12px; background: url(../../../../../../fileadmin/Resources/Public/Images/plus_.png) no-repeat center left; padding: 5px 23px; cursor: pointer; line-height: 12px;}
.cation_ref .textbox{display: none; position: absolute; height: 50%; width: 60%; padding: 10%; background: rgba(50,50,50,0.8); color: white; font-size: 14px; line-height: 24px; top: 10%; left: 10%; cursor: pointer;}
.cation_ref .textbox ul li { margin-left:20px;}
.inscroll{width: 100%; height: 100%; overflow: scroll;}
#refContainer p{padding-top: 20px;}

.produkt{position:absolute; top:0; height:100%;}
.teaserPF{float: left;}
.teaserList .teaserPF.img {display: block;}
.teaserPF img{width: 100%; height: auto;}
.balkenPF .url{position: absolute; top: 20px; right: 60px;}
.balkenPF .capt_r{position: absolute; width:50%; top: 13px; left: 100px;}
.balkenPF .capt_r h2{color:white;}
.balkenPF .capt_r p{color:white;}
#refContent{position:relative; height: 100%;}
#refImage{width: 57%; overflow: hidden; height: 100%; position:relative;}
#refImage img{width: 100%; height: auto;}
#refContainer{width: 100%; height: 600px; position: relative; overflow: hidden;}
#refContent .flexslider{width:100%; height:100%;}
#refContent .slides{width:100%; height:100%;}
#refContent .slides li{width:100%; height:100%;}
.teaserList li {list-style:none;}
.teaserList li.teaserPF{ cursor:pointer; display: table; }
li .teaserText{width:70%; height:60%; padding: 0 10%; text-align:center; display: table-cell; vertical-align: middle; -webkit-transition: background 500ms ease; -moz-transition: background 500ms ease;
-ms-transition: background 500ms ease; -o-transition: background 500ms ease; transition: background 500ms ease;}
.teaserText:hover{background:rgb(9,158,209) !important; color:white;}
.teaserText:hover h2{color:white;}
.teaserText h2{font-size: 20px; text-transform: uppercase; color: rgb(50,50,50); line-height: 24px; margin: 10px 0px; position: inherit; font-weight: 400;}
.produktContent .detailContent{height:80%} 
.produktContent .cation_ref .click{display:none;}
ul.teaserList li.zitat{background: rgb(9,158,209); color: white; display: table!important;}
ul.teaserList li.zitat.fullsize {width:100%; padding:60px 0; }
.teaserList .zitatCenter{display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center;}
p.zitatText{font-size:30px;}
p.zitatVon{font-size:15px;}
.aussagen{text-align: left; padding-left: 10%;}
ul.teaserList li.zitat{line-height:35px; display:none;}

@media only screen and (max-width: 1100px), only screen and (max-device-width: 1100px){
    .pic .capt p {font-size: 17px; line-height:1.3em;}
	.pic .capt h2 {line-height:0.5em;}
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px){
    #refContainer p {font-size: 15px;}
    li .teaserText {font-size: 15px; padding: 0 20px;}
}


@media only screen and (max-width: 780px), only screen and (max-device-width: 780px){
    li .teaserText {font-size: 13px;}
    .teaserList .teaserText h2 {font-size: 18px;}
}

@media only screen and (max-width: 660px), only screen and (max-device-width: 660px){
    
    ul.teaserList li.zitat {width: 100%; padding: 60px 0;}
}


@media only screen and (max-width: 500px), only screen and (max-device-width: 500px){
	.produktContent .cation_ref .click{display:block;}
	.produktContent .cation_ref .textbox{width: 80%!important; height: 92%!important; top: 0!important; left: 0!important; z-index: 9999; padding: 10%; position: fixed; z-index: 9999;}
	div.produktContent .detailContent{display:none;}
	div#refContainer .cation_ref{position:relative; width:100%;}
	div#refImage{width:100%;}
	div.balkenPF .capt_r{left:10px;}
	div.balkenPF .url{right:10px;}
	.teaserList .teaserText h2{font-size:15px;} 
	.teaserList .teaserText p{font-size:13px;}
    
    .tx-hbportfolio p.zitatText {font-size: 14px; line-height: 18px; }
    .tx-hbportfolio p.zitatVon  {font-size: 11px; }
    
    #refContainer .cation_ref .titel {padding-left:10px; }
    #refContainer .cation_ref .subtitel {padding-left:10px; }
    .cap_wrap {margin-left:20px;}
}