﻿figure.effect-marley:hover{background-color:#17819c}
.grid{position:relative;margin:0 auto;width:100%;list-style:none;text-align:center;margin-bottom:20px}
.grid figure{position:relative;float:left;overflow:hidden;margin:0;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:360px;max-width:100%;/*opacity:.8*/}
.grid figure.effect-marley:hover img{opacity:.4;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.grid figure figcaption{padding:2em;color:#fff;text-transform:capitalize;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%}
.grid figure figcaption > a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-.15em;font-weight:300;text-shadow:2px -1px 2px #000}
.grid figure h2 span{font-weight:800;text-shadow:2px -1px 2px #000}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
figure.effect-marley figcaption{text-align:right}
figure.effect-marley h2,figure.effect-marley p{position:absolute;right:30px;left:30px;padding:10px 0}
figure.effect-marley p{top:30px;line-height:1.5;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-marley h2{bottom:30px;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
figure.effect-marley:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-marley h2::after{position:absolute;top:100%;left:0;width:100%;height:4px;background:#fff;content:'';-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}
figure.effect-marley h2::after,figure.effect-marley p{opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}
figure.effect-marley:hover h2::after,figure.effect-marley:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
@media screen and (max-width: 50em) {
.content{padding:0;text-align:center}
.grid figure{display:inline-block;float:none;margin:0 auto;width:100%}
}  