#box-referenzen-a {
	position: absolute;
	left: 178px;
	top: 148px;
	width:85%;
	min-width: 1000px;
	height: 800px;
	z-index:25;

}



/* ---------- Ref 1 ----------- */

#ref-1a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 44.5%;
    height: 250px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	float: left;
	overflow: hidden;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
	
    }
    
#ref-1a:hover #ref-1a-text  {
    width: 100%;
    height: 250px;
	z-index:25;
	opacity:1.0;
    
    }

    
#ref-1a img {
    display: block;
	position: absolute;
	left: 0px;
	top: 0px;
    width: 115%;
    height+: 115%; 
    }



#ref-1a-text {
	position: absolute;
    width: 100%;
    height: 250px;
    background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
  	}


#ref-1a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px;
	 
    }


/* ---------- Ende Ref 1 ----------- */


/* ---------- Start Ref 2 ----------- */

#ref-2a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 30%;
    height: 250px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-2a:hover #ref-2a-text  {
    width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    
    }

    
#ref-2a img {
    display: block;
	position: absolute;
	left: 0px;
	top: 0px;
    width: 110%;
    height+: 110%;          
    }

#ref-2a-text {
	position: absolute;
    width: 100%;
    height: 250px;
	background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }


#ref-2a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px; 
    }


/* ---------- Ende Ref 2 ----------- */





/* ---------- Start Ref 3 ----------- */

#ref-3a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 16%;
    height: 250px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-3a:hover #ref-3a-text  {
    width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;    
    }
    
#ref-3a img {
	position: relative;
	left: -60px;
	top: -90px;
    width: 170%;
    height: 170%;    
    }

#ref-3a-text {
	position: absolute;
    width: 100%;
    height: 250px;
    background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }

#ref-3a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px; 
    }


/* ---------- Ende Ref 3 ----------- */





/* ---------- Start Ref 4 / Plakate ----------- */

#ref-4a {
	position: relative;
	left: 0px;
	top: 0px;
 	width: 30%;
     height: 459px;
	z-index:10;
     cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-4a:hover #ref-4a-text  {
    width: 100%;
	height: 459px;
	z-index:25;
	opacity: 1;
    }
    
#ref-4a img {
	position: relative;
	left: -170px;
	top: -70px;
    width: 190%;
    height: 140%;
	object-fit: cover; /* Ersetzt den 115%-Effekt: Bild beschneidet sich automatisch proportional */ 
    }

#ref-4a-text {
	position: absolute;
    width: 100%;
    height: 459px;
    background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }

#ref-4a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px; 
    }





/* ---------- Ende Ref 4 ----------- */




/* ---------- Start Ref 5 / Bücher Stiftung ----------- */

#ref-5a {
	position: relative;
	left: 0px;
	top: 0px;
     width: 30.5%;
     height: 222px;
	z-index:10;
     cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-5a:hover #ref-5a-text  {
     width: 100%;
	height: 222px;
	z-index:25;
	opacity: 1;
    }

#ref-5a img {
	position: relative;
	left: -55px;
	top: -40px;
	width: 130%; /* Auf 100% setzen statt 115% */
    height: 130%; /* Volle Höhe der Box ausfüllen */
    object-fit+: cover; /* Ersetzt den 115%-Effekt: Bild beschneidet sich automatisch proportional */ 
    }


#ref-5a-text {
	position: absolute;
  	width: 100%;
    height: 222px;
	background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }


#ref-5a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px;
	 
    }


/* ---------- Ende Ref 5 ----------- */





/* ---------- Start Ref 6 / Fotografie ----------- */

#ref-6a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 30%;
    height: 222px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-6a:hover #ref-6a-text  {
    width: 100%;
	height: 222px;
	z-index:25;
	opacity: 1;
    
    }

    
#ref-6a img {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%; /* Auf 100% setzen statt 115% */
    height: 100%; /* Volle Höhe der Box ausfüllen */
    object-fit+: cover; /* Ersetzt den 115%-Effekt: Bild beschneidet sich automatisch proportional */     
    }


#ref-6a-text {
	position: absolute;
    width: 100%;
    height: 222px;
    background: rgba(30,70,110,0.10);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }


#ref-6a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px;
    }


/* ---------- Ende Ref 6 ----------- */





/* ---------- Start Ref 7 / Kunstbuch ----------- */

#ref-7a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 24%;
    height: 222px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-7a:hover #ref-7a-text  {
    width: 100%;
	height: 222px;
	z-index:25;
	opacity: 1;
    }

    
#ref-7a img {
	position: relative;
	left: 0px;
	top: -30px;
	width: 140%; /* Auf 100% setzen statt 115% */
    height: 140%; /* Volle Höhe der Box ausfüllen */    
    }


#ref-7a-text {
	position: absolute;
    width: 100%;
    height: 222px;
    background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }

#ref-7a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px;
	 
    }


/* ---------- Ende Ref 7 ----------- */




/* ---------- Start Ref 8 / Zeichnungen  ----------- */

#ref-8a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 16%;
    height: 222px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 0.5%;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-8a:hover #ref-8a-text  {
    width: 100%;
	height: 222px;
	z-index:25;
	opacity: 1;
    }
    
#ref-8a img {
	position: relative;
	left: -12px;
	top: -15px;
	width: 130%; /* Auf 100% setzen statt 115% */
    height: 130%; /* Volle Höhe der Box ausfüllen */   
    }

#ref-8a-text {
	position: absolute;
    width: 100%;
    height: 222px;
	background: rgba(30,70,110,0.30);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }

#ref-8a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px; 
    }


/* ---------- Ende Ref 8 ----------- */




/* ---------- Start Ref 9 / Bronzetafel ----------- */


#ref-9a {
	position: relative;
	left: 0px;
	top: 0px;
    width: 20%;
    height: 222px;
	z-index:10;
    cursor: pointer;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	overflow: hidden;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	transition: 0.4s ease;
    }
    
#ref-9a:hover #ref-9a-text  {
    width: 100%;
	height: 222px;
	z-index:25;
	opacity: 1;  
    }

#ref-9a img {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%; /* Auf 100% setzen statt 115% */
    height: 150%; /* Volle Höhe der Box ausfüllen */
    }

#ref-9a-text {
	position: absolute;
    width: 100%;
    height: 222px;
	background: rgba(30,70,110,0.10);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
	opacity: 0;
    }

#ref-9a-text  h3 {
    color:white;
    font-size: 20px;
    padding: 0px 30px; 
    }




/* ---------- Ende Ref 9 ----------- */





#ref-1-hover {
	display:none;

}

#ref-2-hover {
	display:none;
}

#ref-3-hover {
	display:none;
}

#ref-4-hover {
	display:none;
}

#ref-5-hover {
	display:none;
}

#ref-6-hover {
	display:none;
}


#ref-7-hover {
	display:none;
}

#ref-8-hover {
	display:none;
}

#ref-9-hover {
	display:none;
}


	
#passkreuz-ro {
	position: absolute;
	left: 91.3%;
	top: -40px;
	background-image: url(bilder-website/passkreuze/passkreuz-rechts-oben.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0px;
	height: 40px;
	width: 40px;
	opacity: 0.3;
	z-index:30;
	float:left;
}	


#passkreuz-lu {
	position: absolute;
	left: -40px;
	top:731px;
	background-image: url(bilder-website/passkreuze/passkreuz-links-unten.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0px;
	height: 40px;
	width: 40px;
	opacity: 0.3;
	z-index:30;
}







@media only screen and (max-width: 1400px) {

	

	
	

	
	
	
	
	
	
	

/* ---------- Ref 1 ----------- */
	
#ref-1a {
	left: 0px;
	top: 0px;
     width: 42.5%;
     height: 240px;	
    }

#ref-1a img {
     width: 135%;      
    }
	
/* ---------- Ref 2 ----------- */
	
#ref-2a {
	top: 0px;
     width: 29%;
     height: 240px;

    }
	
#ref-2a img {
	left: 0px;
	top: 0px;
     width: 120%;      
    }
	
/* ---------- Ref 3 ----------- */
	
	
#ref-3a {
	top: 0px;
     width: 19%;
     height: 240px;
    }
   
    
#ref-3a img {
	left: -50px;
	top: -70px;
     width: 170%;     
    }	
	
	
/* ---------- Ref 4 ----------- */

	
#ref-4a {
	top: 0px;
 	width: 30%;
     height: 439px;
    }
	
#ref-4a img {
	left: -200px;
	top: -70px;
    width: 200%;
    }	
	
/* ---------- Ref 5 ----------- */	
	
#ref-5a {
	top: 0px;
    width: 30.5%;
    height: 212px;
    }

#ref-5a img {
	left: -45px;
	top: -30px;
    	width: 135%;
    }	
	
/* ---------- Ref 6 ----------- */
	
#ref-6a {
	top: 0px;
     width: 30%;
     height: 212px;
    }

#ref-6a img {
	left: 0px;
	top: 0px;
     width: 115%;
    }
	
/* ---------- Ref 7 ----------- */
	
#ref-7a {
	top: 0px;
     width: 24%;
     height: 212px;
    }
    
#ref-7a img {
	left: -20px;
	top: -15px;
    width: 155%;
	height: 130%;
    }
	
/* ---------- Ref 8 ----------- */
	
#ref-8a {
	top: 0px;
     width: 16%;
     height: 212px;
    }
    
#ref-8a img {
	left: -10px;
	top: 0px;
   	width: 130%;
	height: 130%;
    }	
	
/* ---------- Ref 9 ----------- */	
	
#ref-9a {
	position: relative;
	top: 0px;
     width: 20%;
     height: 212px;
    }

#ref-9a img {
	left: -10px;
	top: -10px;
    width: 105%;   
	height: 130%;
    }	
	

	

#passkreuz-ro {
	left: 91.3%;
	top: -40px;
}	


#passkreuz-lu {
	left: -40px;
	top:700px;
}


}








@media only screen and (max-width: 1000px) {
	

	
	
#passkreuz-ro {
	display:none;
}	


#passkreuz-lu {
	display:none;
}

	


	
#ref-1a {
	display:none;
}	
	

#ref-2a {
	display:none;
}

#ref-3a {
	display:none;
}		

#ref-4a {
	display:none;
}		

#ref-5a {
	display:none;
}		

#ref-6a {
	display:none;
}		

#ref-7a {
	display:none;
}	

#ref-8a {
	display:none;
}
	
#ref-9a {
	display:none;
}



#box-referenzen-a {
	position: relative;
	left: 0px;
	top: 0px;
	width:100%;
	height: auto;
	z-index:25;
	background-color#: #94E5DA;

}		
	
	
	
			
#ref-1-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 10px;	
	
	background-image: url(bilder-website/referenzen/ref-1-evers-buchprojekt-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 160%;
	background-position: 0px -5px;
	background-color: #1e466e;
	border-top-width: 4px;
	
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}



#ref-2-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 6px;	
	
	background-image: url(bilder-website/referenzen/ref-2-messestand-hm-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
    background-size: 125%;
	background-position: 0px -0px;
	background-color: #1e466e;
	
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}

    
#ref-3-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 6px;	
	
	background-image: url(bilder-website/referenzen/ref-3-logo-feith-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
    background-size: 135%;
	background-position: -25px -20px;
	background-color: #1e466e;
	
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;
	

}
	
	
	
	#ref-4-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 10px;	
	
	background-image: url(bilder-website/referenzen/ref-4-plakate-stiftung-gb-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 125%;
	background-position: -15px -5px;
	background-color: #1e466e;
	border-top-width: 4px;
	
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}
    
    

   

#ref-5-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 6px;	
	
	
	background-image: url(bilder-website/referenzen/ref-5-buecher-stiftung-gb-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 110%;
	background-position: -10px -7px;
	background-color: #1e466e;
	
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}
	
	

#ref-6-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 6px;	
	

	background-image: url(bilder-website/referenzen/ref-7-katalog-aep-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 120%;
	background-position: -5px -15px;
	background-color: #1e466e;
	
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}




#ref-7-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 18%;	
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 10px;

	
	background-image: url(bilder-website/referenzen/ref-6-fotografie-ref-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 123%;
	background-position: 0px 0px;
	background-color: #1e466e;
	
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 140%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;
}



#ref-8-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;	
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 6px;

	
	background-image: url(bilder-website/referenzen/ref-8-zeichnung-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 125%;
	background-position: -15px -7px;
	background-color: #1e466e;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;

}
	
	
#ref-9-hover {
	display:block;
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:32%;
	height: auto;
	
	padding-bottom:1%;
	padding-top: 19%;	
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 6px;

	
	background-image: url(bilder-website/referenzen/ref-9-bronzetafel-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 125%;
	background-position: -15px -7px;
	background-color: #1e466e;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	-moz-box-shadow: 1px 1px 5px 5px  rgba(0,0,0,0.15);
	-webkit-box-shadow:  1px 1px 5px 5px   rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 5px   rgba(0,0,0,0.15);
	border-bottom-color: #FFF;
	z-index:25;

	font-size: 100%;
	line-height: 240%;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;
}
	
	
	
}
	
	
@media only screen and (max-width: 620px) {
		

#ref-1-hover {

	width:100%;
	background-size: 100%;
	background-position: 15px -20px;
	background-color: #1e466e;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 0px;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}



#ref-2-hover {
	position: relative;
	float:left;
	width:49%;
	background-size: 118%;
	background-position: 0px -0px;

	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 0%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}

#ref-3-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:50%;
	background-size: 130%;
	background-position: -20px -5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 1%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}
    



#ref-4-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	background-size: 120%;
	background-position: -20px -8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 0%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}



#ref-5-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:50%;
	background-size: 115%;
	background-position: -10px -5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 1%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}



#ref-6-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	background-size: 120%;
	background-position: 0px -10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 0%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}




#ref-7-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:50%;
	background-size: 122%;
	background-position: 0px 0px;

	margin-right: 0;
	margin-bottom: 0px;
	margin-top: 5px;
	margin-left: 1%;
	padding-bottom:2%;
	padding-top: 27%;
	padding-right: 0px;
	padding-left: 0px;
}



#ref-8-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	margin-left: 10px;
	background-size: 118%;
	background-position: -15px 0px;
	margin-right: 0;
	margin-bottom: 8px;
	margin-top: 5px;
	margin-left: 0%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}
	
#ref-9-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:50%;
	background-size: 110%;
	background-position: -10px -7px;

	margin-right: 0;
	margin-bottom: 8px;
	margin-top: 5px;
	margin-left: 1%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}

		
		
}