.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
margin-left:auto;
}


.hovereffect  hr{
margin-top:-160px;	
background:#444;
width:100px;
height:2px;
border:none;
transition: 1.4s;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .7s ease-in-out;
transition:all .7s ease-in-out;
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .7s linear;
transition:all .7s linear;
}

.hovereffect h3, .hovereffect p{
text-transform:uppercase;
color:#fff;
text-align:center;
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
position:relative;
}

.hovereffect p{
border-top:1px #eee solid;
border-bottom:1px #eee solid;
padding: 20px 0 20px 0;

}

.hovereffect h3{
font-size:28px;
padding:40px 0 ;
}

.hovereffect p{
font-size:13px;
}

#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
margin:100px 0 0;
}

#col-portfolio-3 .hovereffect h3 ,#col-portfolio-4 .hovereffect h3{
margin:100px 0 0;
}

#col-competence-1 .hovereffect h3 ,#col-competence-2 .hovereffect h3{
margin:50px 0 0;
}

#col-competence-3 .hovereffect h3 ,#col-competence-4 .hovereffect h3{
margin:50px 0 0;
}


#col-portfolio-1 .hovereffect p ,#col-portfolio-2 .hovereffect p{
margin:80px 0 0;
}

#col-portfolio-3 .hovereffect p ,#col-portfolio-4 .hovereffect p{
margin:80px 0 0;
}

#col-competence-1 .hovereffect p ,#col-competence-2 .hovereffect p{
margin:20px 0 0;
}

#col-competence-3 .hovereffect p ,#col-competence-4 .hovereffect p{
margin:20px 0 0;
}


.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h3,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}


@media(max-width:600px) {


	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:10px 0 0;
	font-size:20px;
	}

	#col-portfolio-3 .hovereffect h3 ,#col-portfolio-4 .hovereffect h3{
	margin:10px 0 0;
	font-size:20px;
	}

	#col-competence-1 .hovereffect h3 ,#col-competence-2 .hovereffect h3{
	margin:10px 0 0;
	font-size:20px;
	}

	#col-competence-3 .hovereffect h3 ,#col-competence-4 .hovereffect h3{
	margin:10px 0 0;
	font-size:20px;
	}


	#col-portfolio-1 .hovereffect p ,#col-portfolio-2 .hovereffect p{
	margin:-15px 0 0;
	font-size:10px;
	}

	#col-portfolio-3 .hovereffect p ,#col-portfolio-4 .hovereffect p{
	margin:-15px 0 0;
	font-size:10px;
	}

	#col-competence-1 .hovereffect p ,#col-competence-2 .hovereffect p{
	margin:-15px 0 0;
	font-size:10px;
	}
	
	#col-competence-3 .hovereffect p ,#col-competence-4 .hovereffect p{
	margin:-15px 0 0;
	font-size:10px;
	}


}