.box_kafelki{
display:inline-block;
clear:both;
margin:0 4%;
}
.box_kafelki .kafelek{
	float: left;
	position: static;
	width: 290px;
	height:190px;
	margin:10px 10px 10px 10px;
	text-align:center;
	overflow:hidden;
	padding:10px;
	border:2px dotted #c00;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity:0.8;
}
.box_kafelki .kafelek:hover{
	opacity:1;
	width: 310px;
	margin:10px 0px 10px 0px;
	border:3px dotted #000;
}
.box_kafelki .kafelek a div.ikonagal{
	height:140px; 
	overflow:hidden;	
}

.box_kafelki .kafelek a img{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin-left: -20px;	
}
.box_kafelki .kafelek a img:hover{
	margin-left: -10px;	
}

.box_kafelki .mid{
width: 100%;
}
.box_kafelki .kafelek h5{
    color: #000;
	font-weight:600;
	font-size:0.9em;
	line-height:1em;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.box_kafelki .kafelek:hover h5{
	
    color: #c00;
	line-height:1em;
}
@media only screen and (min-width: 901px) {
	.box_kafelki .container {
        width: 900px;
    }
}

@media only screen and (min-width: 701px) and (max-width: 900px) {
	.box_kafelki .container {
        width: 700px;
    }
}
@media only screen and (min-width: 501px) and (max-width: 700px) {
	.box_kafelki .container {
    width: 600px;
	}
}
@media only screen and (max-width: 500px) {
	.box_kafelki .container {
        width: 400px;
    }
}