/*= Reset CSS 
============= */

.text-desc{
	position: absolute;
	left: 0;
	top: 0;
	 opacity: 0;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background: rgba(62,98,186,.7);
	color:#fff;
}
/* effect-3 css */
.port-3{
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	perspective: 500px;}
.port-3 img{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
}

.port-3.effect-2 .text-desc{
	padding:10px;
	cursor: pointer;
	z-index: -1;
	top: auto;bottom: 0;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transform: rotateX(80deg);
	-webkit-transform: rotateX(80deg);
	-moz-transform: rotateX(80deg);
	transform-origin: center bottom 0;
	-webkit-transform-origin: center bottom 0;
	-moz-transform-origin: center bottom 0;
}
.port-3.effect-2:hover .text-desc{
	opacity: 1;
	transform: none;
	-webkit-transform: none;
	-moz-transform: none;
}
.port-3.effect-2:hover img{
	transform: translateY(-200%);
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
}

.port-3.effect-1 .text-desc{
	z-index: -1; padding: 45px 20px 20px;
	opacity: 1;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transform: rotateX(80deg);
	-webkit-transform: rotateX(80deg);
	-moz-transform: rotateX(80deg);
	transform-origin: center top 0;
	-webkit-transform-origin: center top 0;
	-moz-transform-origin: center top 0;
}
.port-3.effect-1:hover .text-desc{
	transform: none;
	-webkit-transform: none;
	-moz-transform: none;
}
.port-3.effect-1:hover img{
	opacity: 0;
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
}