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

.hovereffect:hover  hr{
width: 50px;
}
.hovereffect  hr{
margin-top:-80px;	
background:#ffffff;
width:250px;
height:2px;
border:none;
transition: width 0.7s;
}

.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 .4s ease-in-out;
transition:all .4s ease-in-out
}

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

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

.hovereffect h3{

font-size:28px;
padding:40px 0 ;
}

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

#competence1 .hovereffect h3 ,#competence2 .hovereffect h3,#competence3 .hovereffect h3{
margin:100px 0 0;
}

#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:200px 0 0;
}


#competence1 .hovereffect p ,#competence2 .hovereffect p,#competence3 .hovereffect p{
margin:80px 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;
}

.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.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.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:1025px) {

	#competence1 .hovereffect h3 ,#competence2 .hovereffect h3{
	margin:45px 0 0;
	}
    
    #competence3 .hovereffect h3 {
	margin:65px 0 0;
	}

	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:45px 0 0;
	}
    
    #col-portfolio-3 .hovereffect h3 ,#col-portfolio-4 .hovereffect h3{
	margin:65px 0 0;
	}

}


@media(max-width:769px) {

	#competence1 .hovereffect h3 ,#competence2 .hovereffect h3{
	margin:35px 0 0;
	}
	
	#competence3 .hovereffect h3{
	margin:55px 0 0;
	}
	
	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:35px 0 0;
	}
	
	#col-portfolio-4 .hovereffect h3 ,#col-portfolio-3 .hovereffect h3{
	margin:55px 0 0;
	}
}

@media(max-width:641px) {
	
	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:5px 0 0;
	}
	
}


@media(max-width:480px) {
	
	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:20px 0 0;
	}

	#col-portfolio-3 .hovereffect h3 ,#col-portfolio-4 .hovereffect h3{
	margin:25px 0 0;
	}
	
	#competence1 .hovereffect h3 ,#competence2 .hovereffect h3,#competence3 .hovereffect h3{
	margin:25px 0 0;
	}
	

}


@media(max-width:350px) {

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

@media(max-width:327px) {
	
	#col-portfolio-1 .hovereffect h3 ,#col-portfolio-2 .hovereffect h3{
	margin:0px 0 0;
	font-size:20px;
	}

	#col-portfolio-3 .hovereffect h3 ,#col-portfolio-4 .hovereffect h3{
	margin:0px 0 0;
		font-size:20px;
	}
	
	
	#competence1 .hovereffect h3 ,#competence2 .hovereffect h3,#competence3 .hovereffect h3{
	margin:0px 0 0;
	font-size:20px;
	}
	
	.hovereffect  hr{
	margin-top:-83px;
	}
	

}