﻿.grid figure { float: left; max-width: 400px; height: 282px; float: left; overflow: hidden; margin: 15px 14px; background: #3085a3; text-align: center; cursor: pointer; } 
.grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; }
.coverPhoto { overflow: hidden; }
.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, .grid figure figcaption > a { position: absolute; top: 240px; left: 0; width: 100%; height: 10%; }

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

.grid figure h2 { word-spacing: -0.15em; font-weight: 300; }

    .grid figure h2 span { font-weight: 800; }

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

.grid figure p { letter-spacing: 6px; font-size: 68.5%; }


figure.effect-goliath { background: #fff !important; }

    figure.effect-goliath img,
    figure.effect-goliath h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }

    figure.effect-goliath img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

    figure.effect-goliath h2,
    figure.effect-goliath p { position: absolute; bottom: 0; left: 0; padding: 26px; margin-left: 6px; width: 100%; }
        figure.effect-goliath p a { margin: 0px 5px; }
            figure.effect-goliath p a, figure.effect-goliath p a:active, figure.effect-goliath p a:visited, figure.effect-goliath p a:focus, figure.effect-goliath p a:hover { color: #2d2d2d !important; font-weight: 600;}
        
            figure.effect-goliath p { text-transform: none; font-size: 90%; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); }

    figure.effect-goliath:hover img { -webkit-transform: translate3d(0,-60px,0); transform: translate3d(0,-60px,0); }

    figure.effect-goliath:hover h2 { -webkit-transform: translate3d(0,-100px,0); transform: translate3d(0,-100px,0); }

    figure.effect-goliath:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
