div#flex4 {
	width: calc(100% - 35px);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	
}


div.hikl:before{
	content: "";
	display: block;
	padding-top: 70%; 	/* initial ratio of 1:1*/
	
}

div.hikl{
	position: relative;
	min-width: 350px;
	flex: 0 1 32%;
	background-color: #002857;
	margin-bottom: 5px;
	margin-right: 5px;
	-webkit-transition:color 0.2s linear, background 0.2s linear;   
	-moz-transition:color 0.2s linear, background 0.2s linear;  
	-o-transition:color 0.2s linear, background 0.2s linear;    
	transition:color 0.2s linear, background 0.2s linear; 
}

 

div.hiklcont{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20px;
	padding-top: 58%;
	vertical-align: bottom;
	color: #fff;
	transition:padding 0.2s linear; 
	
}

div.hiklcont2{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20px;
	padding-top: 58%;
	color: #fff;
	transition:padding 0.2s linear; 
	
}


div#hikl1{
	background-image: url(../../../images/ahetempl/historie/vorwende.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom left;
}

div#hikl1b, div#hikl2b, div#hikl3b, div#hikl4b, div#hikl5b{
	background-color: #003070;
	background-color: rgba(0,48,112,0.6);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom left;
	-webkit-transition:opacity 0.2s linear, color 0.2s linear, background 0.2s linear;   
	-moz-transition:opacity 0.2s linear, color 0.2s linear, background 0.2s linear;  
	-o-transition:opacity 0.2s linear, color 0.2s linear, background 0.2s linear;    
	transition:opacity 0.2s linear, color 0.2s linear, background 0.2s linear; 
	opacity: 0;
}

div#hikl2{
	background-image: url(../../../images/ahetempl/historie/erste_autos_1990.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom center;
}


div#hikl3{
	background-image: url(../../../images/ahetempl/historie/eroeffnung.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom center;
}


div#hikl4{
	background-image: url(../../../images/ahetempl/historie/w800.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom center;
}

div#hikl5{
	background-image: url(../../../images/ahetempl/historie/leaf.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: bottom center;
}


div#hikl1b:hover,
div#hikl2b:hover,
div#hikl3b:hover,
div#hikl4b:hover,
div#hikl5b:hover{
	opacity: 1;
}


@media (max-width: 1500px) {

div.hiklcont,
div.hiklcont2 {55%;
}

div.hikl{
	flex: 0 1 48%;
	 
}


}

@media (max-width: 1000px) {


div.hikl{
	flex: 0 1 100%;
	min-width: 200px;
	 
}


}