@import url('https://fonts.googleapis.com/css?family=Pacifico');

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');



.view {

	

	width:25%;

	height:auto;

	margin:0;

	float:left;

	overflow:hidden;

	position:relative;

	cursor:pointer

}

 

.view .content, .view .mask {

	width:100%;

	height:auto;

	position:absolute;

	overflow:hidden;

	top:0;

	left:0

}

.view img {

	display:block;

	position:relative;

	width:100%

}

.view a.info {

	display:inline-block;

	text-decoration:none;

	padding:0

}

.third-effect .mask h3 {

	font-size:39px;

	width: 100%;

	top: 38%;

	position: absolute;

	   font-family: 'Pacifico', cursive;

	   color:#fff;

}

.third-effect .mask p{

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-size: 15px;

    padding: 0 75px;

    font-weight: normal;

    line-height: 21px; margin:10px 0 0; }

 

.third-effect:hover h3 {

	opacity:1

}

.third-effect .mask {

	text-align:center;

	padding:0;

	width:100%;

	height:100%;

	opacity:0;

	overflow:visible;

	background:rgba(0, 0, 0, .5);

-webkit-transition:all .4s ease-in-out;

-moz-transition:all .4s ease-in-out;

-o-transition:all .4s ease-in-out;

-ms-transition:all .4s ease-in-out;

transition:all .4s ease-in-out;

	z-index:10

}

.third-effect a.info {

	position:relative;

	opacity:0;

-webkit-transition:opacity .5s 0s ease-in-out;

-moz-transition:opacity .5s 0s ease-in-out;

-o-transition:opacity .5s 0s ease-in-out;

-ms-transition:opacity .5s 0s ease-in-out;

transition:opacity .5s 0s ease-in-out

}

.third-effect:hover .mask {

	opacity:1;

	background:url(../img/arrow.png) no-repeat center bottom rgba(226, 19, 39, .9)

}

.third-effect:hover a.info {

	opacity:1;

-moz-transition-delay:.3s;

-webkit-transition-delay:.3s;

-o-transition-delay:.3s;

-ms-transition-delay:.3s;

transition-delay:.3s

}