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

}



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

#ref-1a {
	position: relative;
	left: 0px;
	top: 0px;
     width: 45%;
	min-width+: 500px;
     height: 250px;
	padding-bottom+: 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  {
	display+: block;
     width: 100%;
     height: 250px;
	z-index:25;
	opacity:1.0;
    
    }

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



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


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


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


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

#ref-2a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 45%;
	min-width+: 320px;
     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  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    
    }

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

#ref-2a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 250px;
	background-color+: #1e466e;

     background: rgba(30,70,110,0.30);
     top: 0;
     display: flex;
     justify-content: center;
	padding-top: 100px;
     align-items+: center;
     overflow: hidden;
     transition: 0.4s ease;
	opacity: 0;
    }


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


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





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

#ref-3a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 33%;
	min-width+: 200px;
     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  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    
    }

    
#ref-3a img {
     display: block;
	position: absolute;
	left: 0px;
	top: 0px;
     width: 100%;
     height: auto;      
    }

#ref-3a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 250px;
	background-color+: #1e466e;

     background: rgba(30,70,110,0.30);
     top: 0;
     display: flex;
     justify-content: center;
	padding-top: 80px;
     align-items+: center;
     overflow: hidden;
     transition: 0.4s ease;
	opacity: 0;
    }


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


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





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

#ref-4a {
	position: relative;
	left+: 0px;
	top: 0px;
 	width: 33%;
	min-width+: 300px;
     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-4a:hover #ref-4a-text  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    }
    
#ref-4a img {
     display: block;
	position: absolute;
	left: -60px;
	top: -50px;
     width: 130%;
     height: auto;
    }

#ref-4a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 250px;
	background-color+: #1e466e;

     background: rgba(30,70,110,0.30);
     top: 0;
     display: flex;
     justify-content: center;
	padding-top: 100px;
     align-items+: center;
     overflow: hidden;
     transition: 0.4s ease;
	opacity: 0;
    }

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





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




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

#ref-5a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 23.5%;
	min-width+: 280px;
     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-5a:hover #ref-5a-text  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    }

#ref-5a img {
     display: block;
	position: absolute;
	left: -30px;
	top: -110px;
    	width: 130%;
     height: auto;
    }


#ref-5a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 250px;
	background-color+: #1e466e;

     background: rgba(30,70,110,0.30);
     top: 0;
     display: flex;
     justify-content: center;
	padding-top: 100px;
     align-items+: center;
     overflow: hidden;
     transition: 0.4s ease;
	opacity: 0;
    }


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


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





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

#ref-6a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 23.5%;
	min-width+: 280px;
     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-6a:hover #ref-6a-text  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    
    }

    
#ref-6a img {
     display: block;
	position: absolute;
	left: 0px;
	top: -30px;
     width: 100%;
     height: auto;
        
    }


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


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


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





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

#ref-7a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 33%;
	min-width+: 200px;
     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-7a:hover #ref-7a-text  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    }

    
#ref-7a img {
     display: block;
	position: absolute;
	left: -55px;
	top: -60px;
    	width: 120%;
     height: auto;
    }


#ref-7a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 250px;
	background-color+: #1e466e;

     background: rgba(30,70,110,0.30);
     top: 0px;
     display: flex;
     justify-content: center;
     align-items+: center;
	padding-top: 100px;
     overflow: hidden;
     transition: 0.4s ease;
	opacity: 0;
    }


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


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




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

#ref-8a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 33%;
	min-width+: 200px;
     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-8a:hover #ref-8a-text  {
	display+: block;
     width: 100%;
	height: 250px;
	z-index:25;
	opacity: 1;
    }
    
#ref-8a img {
     display: block;
	position: absolute;
	left: 0px;
	top: -20px;
    	width: 120%;
     height: auto; 
    }

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

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


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




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


#ref-9a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 20%;
	min-width+: 200px;
     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: 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 {
     display: block;
	position: absolute;
	left: 0px;
	top: 0px;
     width: 105%;
     height: auto;    
    }

#ref-9a-text {
	display+: none;
	position: absolute;
     width: 100%;
     height: 222px;
	background-color+: #1e466e;

     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;
        border+: 6px solid white;
        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: 90.5%;
	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:787px;
	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;
	float+:left;
}







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

	

	
	

	
	
	
	
	
	
	

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

#ref-1a img {
     width: 115%; 
	top: 0px;
    }
	
/* ---------- Ref 2 ----------- */
	
#ref-2a {
	left+: 5px;
	top: 0px;
     width: 45%;
	min-width+: 320px;
     height: 240px;

    }
	
#ref-2a img {
	left: 0px;
	top: -65px;
     width: 100%;      
    }
	
/* ---------- Ref 3 ----------- */
	
	
#ref-3a {
	left+: 5px;
	top: 0px;
     width: 34%;
	min-width+: 200px;
     height: 240px;
    }
   
    
#ref-3a img {
	left: 0px;
	top: 0px;
     width: 108%;     
    }	
	
	
/* ---------- Ref 4 ----------- */

	
#ref-4a {
	left+: 0px;
	top: 0px;
 	width: 34%;
	min-width+: 300px;
     height: 240px;
    }
	
#ref-4a img {
	left: -30px;
	top: -25px;
     width: 125%;
    }	
	
/* ---------- Ref 5 ----------- */	
	
#ref-5a {
	left+: 5px;
	top: 0px;
     width: 21.5%;
	min-width+: 280px;
     height: 240px;
    }

#ref-5a img {
	left: -45px;
	top: -80px;
    	width: 145%;
    }	
	
/* ---------- Ref 6 ----------- */
	
#ref-6a {
	left+: 5px;
	top: 0px;
     width: 21.5%;
	min-width+: 280px;
     height: 240px;
    }

#ref-6a img {
	left: 0px;
	top: 0px;
     width: 115%;
    }
	
/* ---------- Ref 7 ----------- */
	
#ref-7a {
	left+: 5px;
	top: 0px;
     width: 34%;
	min-width+: 200px;
     height: 240px;
    }
    
#ref-7a img {
	left: -70px;
	top: -35px;
    	width: 125%;
    }
	
/* ---------- Ref 8 ----------- */
	
#ref-8a {
	left+: 5px;
	top: 0px;
     width: 34%;
	min-width+: 200px;
     height: 240px;
    }
    
#ref-8a img {
	left: 0px;
	top: -20px;
    	width: 125%;
    }	
	
/* ---------- Ref 9 ----------- */	
	
#ref-9a {
	position: relative;
	left+: 5px;
	top: 0px;
     width: 20%;
	min-width+: 200px;
     height: 212px;
    }

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

	

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


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


}








@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:64.7%;
	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/buch-ref-mobil-2.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 105%;
	background-position: 0px -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-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/hm-ref-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: 5px;
	margin-left: 10px;	
	
	background-image: url(bilder-website/referenzen/buch-sgb-ref-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 105%;
	background-position: -15px 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-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: 6px;
	margin-left: 6px;	
	
	
	background-image: url(bilder-website/referenzen/logo-feith-ref-mobil.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 140%;
	background-position: -20px -30px;
	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/katalog-aep-ref-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-6-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: 5px;
	margin-left: 10px;	
	background-image: url(bilder-website/referenzen/fotografie-ref-d.jpg);

	background-repeat: no-repeat;
	background-size: contain;
    background-size: 122%;
	background-position: -18px 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-7-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: 6px;

	
	background-image: url(bilder-website/referenzen/bronzetafel-ref-mobil2.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 160%;
	background-position: -50px -50px;
	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-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: 5px;
	margin-left: 6px;	
	background-image: url(bilder-website/referenzen/zeichnung-ref-mobil.jpg);
	
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 118%;
	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-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/bronzetafel-ref-d.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:49%;
	background-size: 150%;
	background-position: 3px 0px;
	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 {

	width:49%;
	background-size: 130%;
	background-position: 0px -20px;
	background-color: #1e466e;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 1%;
	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:49%;
	background-size: 130%;
	background-position: -20px -5px;
	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-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: 1%;
	padding-bottom:2%;
	padding-top: 28%;
	padding-right: 0px;
	padding-left: 0px;
}



#ref-5-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	background-size: 135%;
	background-position: -20px -25px;
	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-6-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	background-size: 120%;
	background-position: 0px 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 5px;
	margin-left: 1%;
	padding-bottom:2%;
	padding-top: 26.9%;
	padding-right: 0px;
	padding-left: 0px;
}




#ref-7-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	background-size: 140%;
	background-position: -75px -30px;

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



#ref-8-hover {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	width:49%;
	margin-left: 10px;
	background-size: 115%;
	background-position: -15px 0px;
	margin-right: 0;
	margin-bottom: 8px;
	margin-top: 5px;
	margin-left: 1%;
	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;
}

	
		
		
}