*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
/* Common style */
figure {position: relative; float: left; overflow: hidden; /*margin: 10px 1%;*/ min-width: 220px; max-width: 382px; max-height: 360px; width: 100%; /*background: #3085a3;*/ text-align: center; cursor: pointer; }
figure img {position: relative; display: block; /*min-height: 100%;*/ max-width: 100%; /*opacity: 0.8;*/ }
figure figcaption {padding: 2em; color: #fff; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
figure figcaption::before, figure figcaption::after {pointer-events: none; }
figure figcaption, figure figcaption > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
figure figcaption > a {z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
figure figcaption a{font-family: 'Thin'; color: #FFF; font-size: 16px; /*border: 1px solid #FFF; padding: 5px;*/}
figure figcaption a:hover{color: #000; text-decoration: none;}
figure h2 {word-spacing: -0.15em; font-weight: 300; }
figure h2 span {font-weight: 800; }
figure h2, figure p {margin: 0; }
figure p {letter-spacing: 1px; font-size: 68.5%; }
/*---------------*/
figure.effect-sadie figcaption::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 75%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); }
figure.effect-sadie h2 {position: absolute; top: 75%; left: 0; width: 100%; color: #000; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); font-size: 24px;}
figure.effect-sadie figcaption::before, figure.effect-sadie p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-sadie p {position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
figure.effect-sadie:hover h2 {color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); }
figure.effect-sadie:hover figcaption::before , figure.effect-sadie:hover p {opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
@media screen and (max-width: 50em) {
	.content {padding: 0 10px; text-align: center; }
	figure {display: inline-block; float: none; margin: 10px auto; width: 100%; }
}