.margin-portafolio{
    margin-left: 25px;
    margin-right: 25px;
    
}
.portafolio-item{
   align-items: center;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 5px;
}

.portafolio-img{
    border: 5px solid #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.70);
    width: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}


.portafolio-text p{
	position:absolute;
	bottom: 1px;
	padding: 2px;
	font-size:  0.9em;
	text-align:center;
	background: rgba(0,0,0,0.7);
	color: #fff;

	-webkit-transform: translateY(100%);

	-ms-transform: translateY(100%);

	transform: translateY(120%);

	-webkit-transition: all 0.5s ease-out;

	transition: all 0.5s ease-out;
}
.portafolio-text h2{
	position: absolute;
	
	bottom: 0;
	padding: 10px;
	overflow: hidden;
	width: 100%;
	font-size:  1.2em;
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.5s ease-out;	
}





.portafolio-item:hover .portafolio-text p{
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(5%);
}

.portafolio-item:hover .portafolio-img {
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}
.portafolio-item:hover .portafolio-text #text1{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-186%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #text1{
	color:#000000;
	background:rgba(255,255,255,0.45)
}
.portafolio-item:hover .portafolio-text #tex2{
	-webkit-transform: translateY(-110%);
	-ms-transform: translateY(-110%);
	transform: translateY(-158%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #tex2{
	color:#000000;
	background:rgba(255,255,255,0.45)
}
.portafolio-item:hover .portafolio-text #tex3{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-290%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #tex3{
	color:#000000;
	background:rgba(255,255,255,0.45)
}
.portafolio-item:hover .portafolio-text #tex4{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-290%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #tex4{
	color:#000000;
	background:rgba(255,255,255,0.45)
}
.portafolio-item:hover .portafolio-text #tex5{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-378%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #tex5{
	color:#000000;
	background:rgba(255,255,255,0.45)
}
.portafolio-item:hover .portafolio-text #tex6{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-190%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-text #tex6{

	color:#000000;
	background:rgba(255,255,255,0.45)
}


@media screen and (max-width: 877px){
	.margin-portafolio{
        margin-left: 0px;
        margin-right: 0px;
        
    }
}

@media screen and (min-width: 1500px){
	.margin-portafolio{
        margin-left: 150px;
        margin-right: 200px;
        
	}
	
.portafolio-item:hover .portafolio-text p{
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(8%);
}


.portafolio-item:hover .portafolio-text #text1{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-133%);
	background: rgba(0,0,0,0.7);
	color: white;
}

.portafolio-item:hover .portafolio-text #tex2{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-165%);
	background: rgba(0,0,0,0.7);
	color: white;
}

.portafolio-item:hover .portafolio-text #tex3{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-165%);
	background: rgba(0,0,0,0.7);
	color: white;
}
.portafolio-item:hover .portafolio-text #tex4{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-210%);
	background: rgba(0,0,0,0.7);
	color: white;
}

.portafolio-item:hover .portafolio-text #tex5{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-255%);
	background: rgba(0,0,0,0.7);
	color: white;
}

.portafolio-item:hover .portafolio-text #tex6{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-225%);
	background: rgba(0,0,0,0.7);
	color: white;
}

}