﻿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;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{font-weight:300;text-shadow:2px -1px 2px #000;float:left}
.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:left;}
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{border-top-right-radius:10px;border-bottom-right-radius:10px;color:white;font-size:1.3em;font-weight:400;padding-left:5px;padding-right:15px;padding-top:7px;padding-bottom:10px;position:absolute;left:0px;min-width:50px;bottom:40px;-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: 60em) {
.content{padding:0;text-align:center}
.grid figure{display:inline-block;float:none;margin:0 auto;width:100%}
.grid figure img{min-height:250px;max-width:100%;}
}  