.grid {
	position: relative;
	margin: 0 auto;
	/*padding: 1em 0 4em;*/
	max-width: 100%;
	list-style: none;
	text-align: center;
   margin-bottom:5px;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	/*margin: 10px 1%;*/
	/*min-width: 320px;*/
	/*max-width: 480px;*/
	/*max-height: 360px;*/
	/*width: 48%;*/
	background: #fff;
	text-align: center;
	cursor: pointer;
   width:100%;
   height:350px;
}

.grid figure img {
	/*position: relative;*/
	/*display: block;*/
	/*min-height: 100%;*/
	/*max-width: 100%;*/
	opacity: 1;
   filter:Alpha(opacity=100);
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

/* Individual effects */

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
	top: auto;
	bottom: 15px;
	padding:15px 20px;
	height: 100px;
  background: -webkit-linear-gradient(left, #00b0ad , #914b9d); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #00b0ad , #914b9d); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #00b0ad , #914b9d); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #00b0ad , #914b9d); /* Standard syntax */
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.grid figure>div {width:100%;height:100%;background:#fff;display:table;}
.grid figure>div>div {max-width:100%;display:table-cell;vertical-align:middle;}

figure.effect-zoe img{position:absolute;left:0;bottom:0;}

figure.effect-zoe h2 {
	float: left;
   text-transform:none;
   color:#fff;
   font-size:20px;
   text-align:left;
}

figure.effect-zoe h2 span{
  margin-top:10px;
  display:block;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
}

figure.effect-zoe p.description {
	position: absolute;
   margin:0;
	padding:0;
	bottom: 200px;
	color: #fff;
	opacity: 0;
   width:92%;
   text-align:center;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden;
}

figure.effect-zoe h2 {}
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe h2 {
	display: inline-block;
}

figure.effect-zoe:hover p.description, figure.effect-zoe.hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption, figure.effect-zoe.hover figcaption,
figure.effect-zoe:hover h2, figure.effect-zoe.hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
   bottom:0;
}

figure.effect-zoe:hover figcaption, figure.effect-zoe.hover figcaption{
  background: -webkit-linear-gradient(-45deg, #914b9d, #00b0ad); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-45deg, #914b9d, #00b0ad); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-45deg, #914b9d, #00b0ad); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-45deg, #914b9d, #00b0ad); /* Standard syntax */
}

figure.effect-zoe:hover h2, figure.effect-zoe.hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.portfolio figure.effect-zoe figcaption {padding:35px;height:100%;}
.portfolio figure.effect-zoe figcaption a {display:block;width:150px;margin:10px auto;margin-bottom:100px;padding:7px 10px;border:2px solid #fff;color:#fff;text-transform:uppercase;}
.portfolio figure.effect-zoe figcaption h2 {text-align:center;font-size:18px;font-weight:400;line-height:1.3;}

@media screen and (max-width: 50em) {
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}

@media screen and (max-width:1200px) {
  .grid figure {height:304px;}
  .grid figure.effect-zoe figcaption h2 {font-size:14px;}
  .legenda td:first-child {width:70%!important;}
  .legenda td:last-child {width:30%!important;}
}

@media screen and (max-width:990px) {
  .grid figure {height:226px;}
  .grid figure.effect-zoe figcaption {padding:18px 5px;}
  .grid figure.effect-zoe figcaption h2 {font-size:12px;}
  .grid figure.effect-zoe figcaption a {width:120px;margin: 10px auto 50px;}
  .legenda td:first-child {width:60%!important;}
  .legenda td:last-child {width:40%!important;}
}